Phaser3官网实例学习笔记

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

说明

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

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