Phaser-CE 游戏引擎学习笔记

最近做了个小游戏，以下是对用到的知识点和常用代码片段进行归纳。

官方文档：https://www.phaser-china.com/docs/Index.html

以场景（state）的方式初始化游戏

官方给出的例子中没有使用 state 来初始化游戏，state 方式如下：

import { Game } from "phaser-ce";

// 初始化游戏
const game = new Game(800, 600, Phaser.CANVAS, "");

class State1 {
  preload() {
    console.log("preload");
    game.load.image("bg", "assets/images/bg.png");
    game.load.spritesheet("face01", "assets/images/face01.png", 118, 76, 24);
  }
  init(params) {}
  create() {
    console.log("create");
  }
  update() {}
  render() {}
}

game.state.add("state1", State1);
game.state.start("state1");

loader

https://www.phaser-china.com/docs/Phaser.Loader.html

加载 pack

game.load.pack("image", "assets/auto-pack.json", null, this);

其他

参考官网

通过创建组的方式来调整层级

groups.bgLayer = game.add.group();
groups.layer1 = game.add.group();
groups.layer2 = game.add.group();

在组中创建精灵

groups.bgLayer.create(0, 0, "bg");

带有 spritesheet 动画的精灵

sprites["face01"] = groups.ashCanLayer.create(45, 700, "face01");
sprites["face01"].animations.add("animationLoop");
sprites["face01"].animations.play("animationLoop", 30, true);

应用物理引擎 arcade

// 开启物理引擎
game.physics.arcade.enable(sprites["demo"]);
// 设置弹起
sprites["demo"].body.bounce.y = 0.2;
// 设置重力
sprites["demo"].body.gravity.y = gravity;
// 设置世界边界限制
sprites["demo"].body.collideWorldBounds = true;

物理刚体设置

sprites["ground"] = groups.bgLayer.create(0, game.height - 122, "ground");
game.physics.arcade.enable(sprites["ground"]);
sprites["ground"].body.immovable = true;

arcade 碰撞检测，组内元素

game.physics.arcade.collide(groups.trashLayer);

arcade 碰撞检测，对外

game.physics.arcade.collide(groups.trashLayer, sprites["ground"]);

拖拽控制

// 启用输入控制
sprites["demo"].inputEnabled = true;
// 允许拖拽，第一个参数 true 代表拖拽的时候鼠标位于精灵中心
sprites["demo"].input.enableDrag(true);
// 设置拖拽边界
sprites["demo"].input.boundsRect = new Rectangle(0, 0, 750, game.height - 122);
sprites["demo"].events.onDragStart.add(() => {});
sprites["demo"].events.onDragUpdate.add(() => {});
sprites["demo"].events.onDragStop.add((sprite, pointer) => {});

判断某个点是否在精灵边界内

Phaser.Rectangle.containsPoint(sprite.getBounds(), pointer);

设置文字区域限制

const text = new Text(game, 0, 0, "0", {
  boundsAlignH: "center",
  boundsAlignV: "middle",
  font: "38px Arial",
  fill: "#fff",
});
text.setTextBounds(172, 180, 80, 40);

将文字加入一个分组

groups.bgLayer.add(text);

定时器

game.time.events.loop(1000, () => {});

asset-pack 的格式定义

分组结构

{
  "group1": [],
  "group2": []
}

image 类型

{
  "group1": [
    {
      "type": "image",
      "key": "bg",
      "url": "./assets/images/bg.png",
      "overwrite": false
    }
  ],
  "group2": []
}

spritesheet 类型

{
  "group1": [
    {
      "type": "spritesheet",
      "key": "face02",
      "url": "./assets/sheet/[email protected]",
      "frameWidth": 121,
      "frameHeight": 82,
      "frameMax": 5,
      "margin": 0,
      "spacing": 0
    }
  ],
  "group2": []
}

atlas 纹理

{
  "group1": [
    {
      "type": "atlas",
      "key": "face01",
      "textureURL": "./assets/atlas/face01-atlas.png",
      "atlasURL": "./assets/atlas/face01-atlas.json",
      "format": "TEXTURE_ATLAS_JSON_HASH"
    }
  ],
  "group2": []
}

audio

稍后整理

video

稍后整理

debug

展示输入信息

game.debug.inputInfo(32, 32, "#000");

展示图形边界

game.debug.geom(new Rectangle(172, 180, 80, 40));