Phaser-CE 游戏引擎学习笔记

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

官方文档:https://www.phaser-china.com/docs/Index.html (opens new window)

# 以场景(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");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# loader

https://www.phaser-china.com/docs/Phaser.Loader.html (opens new window)

# 加载 pack

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

# 其他

参考官网

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

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

# 在组中创建精灵

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

# 带有 spritesheet 动画的精灵

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

# 应用物理引擎 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;
1
2
3
4
5
6
7
8

# 物理刚体设置

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

# arcade 碰撞检测,组内元素

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

# arcade 碰撞检测,对外

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

# 拖拽控制

// 启用输入控制
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) => {});
1
2
3
4
5
6
7
8
9

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

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

# 设置文字区域限制

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

# 将文字加入一个分组

groups.bgLayer.add(text);
1

# 定时器

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

# asset-pack 的格式定义

# 分组结构

{
  "group1": [],
  "group2": []
}
1
2
3
4

# image 类型

{
  "group1": [
    {
      "type": "image",
      "key": "bg",
      "url": "./assets/images/bg.png",
      "overwrite": false
    }
  ],
  "group2": []
}
1
2
3
4
5
6
7
8
9
10
11

# spritesheet 类型

{
  "group1": [
    {
      "type": "spritesheet",
      "key": "face02",
      "url": "./assets/sheet/[email protected]",
      "frameWidth": 121,
      "frameHeight": 82,
      "frameMax": 5,
      "margin": 0,
      "spacing": 0
    }
  ],
  "group2": []
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# atlas 纹理

{
  "group1": [
    {
      "type": "atlas",
      "key": "face01",
      "textureURL": "./assets/atlas/face01-atlas.png",
      "atlasURL": "./assets/atlas/face01-atlas.json",
      "format": "TEXTURE_ATLAS_JSON_HASH"
    }
  ],
  "group2": []
}
1
2
3
4
5
6
7
8
9
10
11
12

# audio

稍后整理

# video

稍后整理

# debug

# 展示输入信息

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

# 展示图形边界

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