Phaser 3 Flappy Bird Example

Phaser3 Flappy Bird 例子

初学Phaser3与H5游戏制作。按照网上搜索的一些例子与教程，完整的做出来了。有些小问题还没有找到更好的方式去解决等。

尚未处理的事情有：

• 鸟的飞行姿态是否可以使用重力去实现
• 转场特效
• 小鸟飞行轨迹
• 按钮点按效果
• 微信小程序兼容

在线体验 online demo

微信小程序适配

环境配置

库	版本
Phaser3	>=3.15.1

开发与编译

npm install
npm run dev // 开发
npm run build // 编译

相关链接

• 官方示例库
• 用Phaser来制作一个html5游戏——flappy bird
• API文档
• Phaser 3 Scene / Phaser 2 State - passing data to init when start

Phaser3其它说明

启动一个场景

game.scene.start('scene name');

创建一个动画

    let bird = titleGroup.create(220, 110, 'bird').setOrigin(0);
    this.anims.create({
        key: 'fly',
        frames: this.anims.generateFrameNumbers('bird', {start: 0, end: 3}),
        frameRate: 12,
        repeat: -1
    });
    bird.anims.play('fly', true);

创建tween

this.add.tween({
    targets: [title, bird],
    y: 120,
    ease: null,
    delay: 0,
    autoStart: true,
    duration: 1000,
    yoyo: true,
    repeat: -1
    });

创建按钮

this.startBtn = this.add.sprite(100, 100, 'startBtn').setInteractive();

this.startBtn.on('pointerover', function (event) { /* Do something when the mouse enters */ });
this.startBtn.on('pointerout', function (event) { /* Do something when the mouse exits. */ });
this.startBtn.on('pointerdown', startGame); // Start game on click.

加载atlas

使用TexturePacker进行打包资源后，在phaser3里面加载，参考。

//  load
this.load.multiatlas('cityscene', 'assets/cityscene.json', 'assets');

//  create sprite
var frameNames = this.anims.generateFrameNames('cityscene', {
    start: 1, end: 8, zeroPad: 4,
    prefix: 'capguy/walk/', suffix: '.png'
});
this.anims.create({ key: 'walk', frames: frameNames, frameRate: 10, repeat: -1 });
capguy.anims.play('walk');

音频

音频载入

IOS系统好像并不支持ogg格式，所以需要转换成其它格式。载入时，优先载入ogg格式，其次再载入mp3格式。

this.load.audio("xx", ['xx.ogg','xx.mp3']);

音频转换

OGG转MP3

使用ffmpeg做转换即可，参考。

ffmpeg -i input.wav -vn -ar 44100 -ac 2 -ab 192k -f mp3 output.mp3

License

MIT

taliove 2018