Phaser学习笔记

GitHub

继承关系

Flappy Bird程序拆解

assets

设计资产,比如图片、字体、音效等

objects

GameObject的类文件,比如bird.ts、pipe.ts等。

bird.ts

继承自Phaser.GameObjects.Sprite

包括:物理、用户输入、状态设置(dead、flappy)、update循环等

有个body属性,物理和重力、尺寸都是设置在这上面的。

pipe.ts

继承自Phaser.GameObjects.Image

scenes

场景,继承自Phaser.Scene。

预加载资源

这是总控,重点分析下这部分代码,就可以把流程机制弄清楚了。

game.ts

继承自Phaser.Game

初始化参数设置,以及启动游戏

预设组件

文字:bitmapText

无限创建管道

1
2
3
4
5
6
7
8
this.addNewRowOfPipes();

this.time.addEvent({
delay: 1500,
callback: this.addNewRowOfPipes,
callbackScope: this,
loop: true
});

动画切换

是通过tween调整角度来实现的:

1
2
3
4
5
6
this.scene.tweens.add({
targets: this,
props: { angle: -20 },
duration: 150,
ease: 'Power0',
});

资料

Phaser3制作Flappy Bird:

Lessmilk Tutorial: Make web games with Phaser 3

https://www.emanueleferonato.com/2019/05/02/flappy-bird-html5-prototype-updated-to-phaser-3-16-2/

这个分了不同步骤,很详细:

https://xtremestem.com.au/instructions/phaser/phaser_tutorial_flappy.html

TS版:

GitHub - digitsensitive/phaser3-flappy-bird: Learn to create a HTML5 Game in 5 Minutes

TS版配套文章:

https://medium.com/@digit.sensitivee/learn-to-create-a-html5-game-in-5-minutes-604118f5d0ab

2020年的Top10 Games:

TOP 10 PHASER GAMES 2020 - YouTube