【Phaser+Ts+Webpack】手把手教你使用phaser-Phaser入门（一）

佛系程序员balabala
1,088 阅读6分钟

Phaser入门

这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战

1、phaser代码提示配置

上一篇我们通过npm install -D phaser安装了phaser，没有安装过得记得再次安装一下。安装了之后由于phaser目前官方并不支持ts在vscode中的代码提示，所以我们需要phaser类型定义文件phaser.d.ts来增强代码提示，大家可以在官网下载（有点慢），或者在我的仓库进行下载。 将下载下来的phaser.d.ts文件放到src根目录下。

  • 在src目录下的index.ts文件中引入phaser，打印Phaser(大写的别写错了)，如果能成功打印Phaser下面的成员方法，说明你引入成功了
  • 打印Phaser时候大家可以后面加个.，如果能显示Phaser的属性或者方法说明类型定义文件也生效了，如果没有生效，大家可以重启一下服务，或者看看是不是类型定义文件放错目录了，要放在src的根目录下面

2、初始化Game配置

  • 在我们整个项目中，有一个顶级管理员，用它来管理我们的场景（后面会说），游戏界面的大小，是以什么方式渲染等等，这个管理员需要继承Phaser的Phaser.Game类，并且在构造函数里面传入我们的配置。
  • 在insex.ts文件中创建游戏管理类并且让他继承Phaser.Game：
import 'phaser'
const config: Phaser.Types.Core.GameConfig = {}
class GameManager extends Phaser.Game{
  constructor() {
    super(config);
  }
}
new GameManager();
  • 这里Phaser.Types.Core.GameConfig就是config的类型，别问我怎么知道的，默认不写这个类型，然后把鼠标悬浮到构造函数super上面，就会显示出config类型，如果你没有phaser.d.ts文件，那就不会显示了。 image.png
  • 写这个的作用就是，当你在config里面写属性，就会有代码提示:

image.png

image.png

  • 这时候打开浏览器，会显示一块黑色的方块就是我们的游戏面板了，控制台打开上面会显示Phaser的版本号，和当前渲染模式，下面我会挑一些常用的配置项进行说明。

1.基础三件套width、height、backgroundColor

  • 游戏可视面板的宽高和背景色 注意：这里的宽高不需要加单位，number类型，背景色是16进制，不能写red、yellow......要是这样的格式：backgroundColor: 0xffff00

2. 控制台打印信息title、url、version、banner

  • 可以修改默认控制台打印的phaser信息，可以通过banner: false全部隐藏
  • banner: { hidePhaser: false }部分隐藏

3. 渲染方式type

  • 视图的渲染方式，默认是Phaser.AUTO即默认优先使用webGL渲染，如果不支持则使用canvas
    • Phaser.CANVAS
    • Phaser.HEADLESS
    • Phaser.WEBGL

4. 游戏帧率相关fps

  • 是一个对象，里面有min、target、forceSetTimeOut等
    • min：最小帧率，默认5
    • target：帧率，默认是一秒60帧（建议不要超过120帧）
    • forceSetTimeOut等：是否使用SetTimeOut代替requestAnimationFrame，默认false（兼容相关）

5. loader加载器配置

  • 是一个对象，用来加载一些静态资源文件，图片，音频等
    • baseURL：网络地址路径，比如：<http://labs.phaser.io/assets/>
    • path：相对路径，比如：images/sprites/
    • maxParallelDownloads：资源每次加载的最大数量默认是32个
    • crossOrigin：跨域配置
    • responseType：响应头类型

6. physics 物理引擎

  • physics.default：哪种类型的物理引擎，默认我们使用arcade
  • physics.arcade:
    • debug: 是否开启debug模式，开启之后所有物体都会显示一个重力线，用来调试
    • checkCollision.up(down、left、right)：是否和整个世界（黑色的这个游戏主界面）的上下左右检测碰撞，如果不设置，物体可以掉到世界外
    • gravity.x\gravity.y：水平、竖直方向所受的重力，设置0为不受重力影响

7. input 监听输入

  • input: false,如果设为false则全游戏场景禁止监听键盘、鼠标、触摸等输入
  • input: {} 对象类型
    • keyboard：是否监听键盘输入
    • mouse：是否监听鼠标输入
    • touch：是否监听触摸输入
    • gamepad：是否监听手柄输入
    • activePointers：触摸最大触摸点数，默认为1

8. scene 场景

  • 最重要的配置之一，可以是数组，也可以是对象，如果是数组则默认加载第一个，也可以通过配置选择默认加载的场景

目前config里面常用的配置就这些，后面用到新的会陆续介绍，过了英语一级的同学也可以直接在官方API查看。

3、场景

1.什么是场景？

我们的游戏其实就是由一个个不同的模块构成，或者一个个的界面，每一个界面都是一个游戏场景，比如说：王者荣耀界面

ys1.png

登录是一个场景，然后点击登录之后进到主页面又一个场景，然后选择英雄场景......每个游戏都是由许许多多个场景构成，每个场景里面有自己的逻辑。

2.开始创建场景

  • 在src目录下面新建scene目录，用来存放我们的场景文件，后面开发每一个场景都是一个ts文件
  • 在scene文件夹中创建我们第一个场景Boot.ts，每个场景都需要继承Phaser.Scene：
    • 构造函数里面的key就是场景的名称，后面我们进行场景调转需要通过这个key值跳转
    • init：在场景初始化时被调用，这个函数可以通过调用 this.start(key, [params]) 来接受从其他场景或游戏传递的参数
      • params：其它场景传递的参数
    • preload：在创建场景对象之前被调用，一般加载资源在这里完成，这些资源将被缓存当重新启动场景时，不会重新加载它们
    • create：在加载资源时被调用，游戏对象、动画的创建在这里完成
    • update：默认每秒调用60次，一般场景移动相关的逻辑写在这里
      • time：游戏已经运行多长时间
      • dealta：每帧渲染间隔时间
export class Boot extends Phaser.Scene{
  constructor() {
    super({
      key: 'Boot'
    });
  }
  init() {
    console.log('Boot init');
  }
  preload() {
    console.log('Boot preload');
  }
  create() {
    console.log('Boot create');
  }
}
  • 在index.ts文件中引入Boot场景，并加载到主游戏进程中
import { Boot } from './scene/Boot'
const config: Phaser.Types.Core.GameConfig = {
    scene: [
       Boot
    ]
}
  • 运行会发现控制台依次打印：
Boot init
Boot preload
Boot create
  • 场景的配置项也有很多，并不是只有key值
    • key：场景名称，唯一key值
    • active：设置成false，场景的update将不在执行，修改create，会发现1秒之后update将不再执行 
        create() {
    console.log('Boot create');
    setTimeout(() => {
      this.scene.setActive(false);
    }, 1000)
  }
    • visible：设置场景是否可见
    • pack：是否在场景开始之前进行文件加载
    • cameras：相机相关
    • physics：物理引擎，和全局配置一样可以覆盖
    • loader：加载器配置
    • plugins：插件相关

3.场景跳转

场景之间的跳转需要使用start(key, data)方法

  • this.scene.sleep()：使当前场景睡眠，update不再执行
  • this.scene.start(场景key, 参数)：场景跳转
  • this.scene.restart()：重启当前场景，不会触发constructor() 在scene文件夹下面创建Menu.ts场景，并在index.ts中引入，修改Boot中的create方法：
// Menu.ts
export class Menu extends Phaser.Scene{
  constructor() {
    super({
      key: 'Menu'
    });
  }
  init() {
    console.log('Menu init');
  }
  preload() {
    console.log('Menu preload');
  }
  create() {
    console.log('Menu create');
  }
  update(time: number, delta: number) {
    console.log(delta);
  }
}

  create() {
    console.log('Boot create');
    setTimeout(() => {
      this.scene.sleep();
      this.scene.start('Menu');
    }, 1000)
  }

运行，会发现1s之后Boot场景的update不再执行，并且已经跳转到Menu场景了。

4、最后

今天向大家介绍了场景相关的知识，具体场景还有很多配置，大家可以自己进行尝试，下一节会介绍资源的加载、动画的创建，以及简单的输入监听。今天的全部代码在这里

avatar
文章
阅读
粉丝