Skip to content

taliove/phaser3-flappy-bird

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Phaser 3 Flappy Bird Example

Phaser3 Flappy Bird 例子

version build

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

尚未处理的事情有:

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

在线体验 online demo

微信小程序适配

环境配置

版本
Phaser3 >=3.15.1

开发与编译

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

相关链接

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