夜间模式
Phaser-CE 游戏引擎学习笔记
最近做了个小游戏，以下是对用到的知识点和常用代码片段进行归纳。
官方文档：https://www.phaser-china.com/docs/Index.html
以场景（state）的方式初始化游戏
官方给出的例子中没有使用 state 来初始化游戏，state 方式如下：
javascript
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");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
javascript
game.load.pack("image", "assets/auto-pack.json", null, this);game.load.pack("image", "assets/auto-pack.json", null, this);其他
参考官网
通过创建组的方式来调整层级
javascript
groups.bgLayer = game.add.group();
groups.layer1 = game.add.group();
groups.layer2 = game.add.group();groups.bgLayer = game.add.group();
groups.layer1 = game.add.group();
groups.layer2 = game.add.group();在组中创建精灵
javascript
groups.bgLayer.create(0, 0, "bg");groups.bgLayer.create(0, 0, "bg");带有 spritesheet 动画的精灵
javascript
sprites["face01"] = groups.ashCanLayer.create(45, 700, "face01");
sprites["face01"].animations.add("animationLoop");
sprites["face01"].animations.play("animationLoop", 30, true);sprites["face01"] = groups.ashCanLayer.create(45, 700, "face01");
sprites["face01"].animations.add("animationLoop");
sprites["face01"].animations.play("animationLoop", 30, true);应用物理引擎 arcade
javascript
// 开启物理引擎
game.physics.arcade.enable(sprites["demo"]);
// 设置弹起
sprites["demo"].body.bounce.y = 0.2;
// 设置重力
sprites["demo"].body.gravity.y = gravity;
// 设置世界边界限制
sprites["demo"].body.collideWorldBounds = true;// 开启物理引擎
game.physics.arcade.enable(sprites["demo"]);
// 设置弹起
sprites["demo"].body.bounce.y = 0.2;
// 设置重力
sprites["demo"].body.gravity.y = gravity;
// 设置世界边界限制
sprites["demo"].body.collideWorldBounds = true;物理刚体设置
javascript
sprites["ground"] = groups.bgLayer.create(0, game.height - 122, "ground");
game.physics.arcade.enable(sprites["ground"]);
sprites["ground"].body.immovable = true;sprites["ground"] = groups.bgLayer.create(0, game.height - 122, "ground");
game.physics.arcade.enable(sprites["ground"]);
sprites["ground"].body.immovable = true;arcade 碰撞检测，组内元素
javascript
game.physics.arcade.collide(groups.trashLayer);game.physics.arcade.collide(groups.trashLayer);arcade 碰撞检测，对外
javascript
game.physics.arcade.collide(groups.trashLayer, sprites["ground"]);game.physics.arcade.collide(groups.trashLayer, sprites["ground"]);拖拽控制
javascript
// 启用输入控制
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) => {});// 启用输入控制
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) => {});判断某个点是否在精灵边界内
javascript
Phaser.Rectangle.containsPoint(sprite.getBounds(), pointer);Phaser.Rectangle.containsPoint(sprite.getBounds(), pointer);设置文字区域限制
javascript
const text = new Text(game, 0, 0, "0", {
boundsAlignH: "center",
boundsAlignV: "middle",
font: "38px Arial",
fill: "#fff",
});
text.setTextBounds(172, 180, 80, 40);const text = new Text(game, 0, 0, "0", {
boundsAlignH: "center",
boundsAlignV: "middle",
font: "38px Arial",
fill: "#fff",
});
text.setTextBounds(172, 180, 80, 40);将文字加入一个分组
javascript
groups.bgLayer.add(text);groups.bgLayer.add(text);定时器
javascript
game.time.events.loop(1000, () => {});game.time.events.loop(1000, () => {});asset-pack 的格式定义
分组结构
json
{
"group1": [],
"group2": []
}{
"group1": [],
"group2": []
}image 类型
json
{
"group1": [
{
"type": "image",
"key": "bg",
"url": "./assets/images/bg.png",
"overwrite": false
}
],
"group2": []
}{
"group1": [
{
"type": "image",
"key": "bg",
"url": "./assets/images/bg.png",
"overwrite": false
}
],
"group2": []
}spritesheet 类型
json
{
"group1": [
{
"type": "spritesheet",
"key": "face02",
"url": "./assets/sheet/[email protected]",
"frameWidth": 121,
"frameHeight": 82,
"frameMax": 5,
"margin": 0,
"spacing": 0
}
],
"group2": []
}{
"group1": [
{
"type": "spritesheet",
"key": "face02",
"url": "./assets/sheet/[email protected]",
"frameWidth": 121,
"frameHeight": 82,
"frameMax": 5,
"margin": 0,
"spacing": 0
}
],
"group2": []
}atlas 纹理
json
{
"group1": [
{
"type": "atlas",
"key": "face01",
"textureURL": "./assets/atlas/face01-atlas.png",
"atlasURL": "./assets/atlas/face01-atlas.json",
"format": "TEXTURE_ATLAS_JSON_HASH"
}
],
"group2": []
}{
"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
展示输入信息
javascript
game.debug.inputInfo(32, 32, "#000");game.debug.inputInfo(32, 32, "#000");展示图形边界
javascript
game.debug.geom(new Rectangle(172, 180, 80, 40));game.debug.geom(new Rectangle(172, 180, 80, 40));