Phaser3官网实例学习笔记

2019-01-08 周二 by 黄复雄.

说明

  1. 这是我学习Phaser3官网实例的笔记,对快速了解Phaser3能做什么、API概貌也许有帮助。以前做过一篇《Phaser2官网实例学习笔记》
  2. 阅读本文前,您需要对Phaser的场景结构有大致了解。(如果你完全不了解Phaser,宜先学习官网入门教程,以便对框架结构有整体了解。)笔记只摘录了关键语句,加了少量注释;语句不完整、不连续;为便于字面理解,有些类实例名称调整得更接近类名,如Sprite实例名称一般改作sprite
  3. 摘录的代码都是片段。我用的是TypeScript语言,但摘录的代码可能是JavaScript,或在此基础上添加了TypeScript类型标记。JavaScript代码在TypeScript中是有效的,但可能使编辑器、编译工具等报错——这跟设置有关。
  4. 有些类别我没有看或粗粗看过:...
  5. 小标题中给出了实例代码的路径,如“src\actions\grid align.js”,http://labs.phaser.io的首页即相当于“src\”;也可以用http://labs.phaser.io/edit.html?src=src\actions\grid align.js直接访问代码对应的在线编辑器界面(有时路径中的空格可能要用%20代替)。
  6. 官网是按字母排列类别的,有时为初学者学习、理解方便会调整顺序。
  7. 本文是随时更新的,最终会累积成一个便览手册;可通过搜索或底端的目录快速查找。

Actions(行动)

Phaser.Actions包含一组静态方法,可以对一组游戏对象进行批量处理,应用相同的动作。常常结合组的方法Group.getChildren()(取得group的所有子项形成一个数组)一起使用。 条目要包含要处理的属性、方法,否则无效。

Grid Align/用GridAlign对齐网格

src\actions\grid align.js

// 生成group,包含4x20个子项
var group = this.add.group({
    key: 'diamonds', // 精灵单的key
    frame: [ 0, 1, 2, 3], // 依次使用的精灵单的帧号
    frameQuantity: 20 // 每帧重复使用次数
});
// group的所有子项逐一对齐网格(多余网格数量的子项不处理)
Phaser.Actions.GridAlign(group.getChildren(), {
    width: 10, // 网格列数
    height: 10, // 网格行数
    cellWidth: 32, // 单网格宽度
    cellHeight: 32, // 单网个高度
    x: 100, // 左上第一个网格中心点x值
    y: 100 // 左上第一个网格中心点y值
});

Inc X Layers/使用IncX和IncY改变坐标,移动整个组

src\actions\inc x layers.js

// groupA所有子项的坐标值递增(此处默认步进量step为0),即整体移动
Phaser.Actions.IncX(groupA.getChildren(), 1);
Phaser.Actions.IncY(groupA.getChildren(), 1);

input输入

game object游戏对象

src\input\game object\sprite example.js

精灵,热点在上,热点离开

// 开启互动
sprite.setInteractive();
sprite.on('pointerover', function () {});
sprite.on('pointerout', function () {});

src\input\game object\on down event.js

热点按下,热点抬起

sprite.setInteractive();
sprite.on('pointerdown', function () {});
sprite.on('pointerup', function () {});

src\input\dragging\drag distance threshold.js; drag time threshold.js

拖拽距离阈值,拖拽时间阈值。

sprite.setInteractive();
this.input.setDraggable(sprite);
//  热点移动一定距离(阈值,16点)后才被看做拖拽
this.input.dragDistanceThreshold = 16;
//  热点按钮500ms后才被看做拖拽
this.input.dragTimeThreshold = 500;
this.input.on('dragstart', function (pointer, gameObject) {});
// 给场景中所有可能的拖拽对象设置事件回调
this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
    // 跟随拖拽点
    gameObject.x = dragX;
    gameObject.y = dragY;
});
this.input.on('dragend', function (pointer, gameObject) {});

也可以单独给一个对象设置拖拽事件回调函数:

sprite.on('drag', function (pointer:Phaser.Input.Pointer, dragX:number, dragY:number) {
    this.x = dragX;
    this.y = dragY;
}

Fork me on GitHub