用Phaser框架做个flappybird小游戏（二）

上次我们完成了背景的制作，这次我们来研究下这只小鸟，让它飞起来

- 我们先来看下封面的制作

• 可以看到封面当中有小鸟在挥动翅膀与旁边的FlappyBird标题上下晃动，下面有个进入下一个场景的按钮。
• 我们先来研究下小鸟是怎么动起来的

• 我们先把这两张图片加载进来，assets文件夹中有这张小鸟的bird.png与title.png图片。

• 这边需要注意一下：所有资源在perload中加载，在create里创建。但动态图片的的加载和静态的不太一样，如下：
  

• 由于两张图片是同时上下移动，这时候我们将他们打包会更好， 我们在.create中设置下

• 这样子小鸟和标题就出现了，效果为：
  

• 现在我们将titlegroup组移动到中间的位置，然后设置组上下缓动，

• 并且我们需要让小鸟动起来，我们添加一个animations动画，并且设置属性值
  

• 这边animations的值需要多测试几次，太高容易鬼畜。还有tween的类型有很多，具体可以查一下。

• 制作完成后，我们来看下效果
  

• ok~小鸟飞起来了。接下来我们加上开始按钮，封面就制作完成啦。

• 首先还是在preload中加载图片，这个不难。然后在create中添加按钮，由于我们设置的位置是页面的正中间，但是按钮的基点在左上角位置，如果不设置按钮的基点的话整体就会偏向右下方，所以还要修改按钮的基点为中心点。
  

• 这边我刷新页面看下对比效果
  

• 主页面大功告成！

完整的代码如下：

// const game = new Phaser.Game(游戏界面宽度，游戏界面的高度，渲染方式，盒子ID)
const game = new Phaser.Game(320,505,Phaser.AUTO,"game")
// 在game对象里面添加一个gameStates属性，这个属性默认是空，用来放置游戏的场景 ps所有符号必须是英文

//场景管理器
game.gameStates={ }

//游戏场景管理器，game的gameStates场景管理器里面，我放入一个menu场景
game.gameStates.menu=function(){
    // menu是一个场景
    // 一个合法场景必须有以下三个功能中的一个
    this.preload=function(){
        // game.load.image(名称，路径)
        game.load.image('background',"assets/background.png")
        game.load.image('ground',"assets/ground.png")

        // 小鸟的加载game.load.spriteSheet(命名，图片位置，宽度，高度，帧数)
        game.load.spritesheet('bird','assets/bird.png',34,24,3)

        //加载题目的图片
        game.load.image('title',"assets/title.png")
        game.load.image('btnImg',"assets/start-button.png")

    }   //加载资源
    //所有资源在perload中加载，在create里创建

    this.create=function(){
        // const bg=game.add.tileSprite(X轴位置，Y轴位置，宽度，高度，对象)
        const mybg=game.add.tileSprite(0,0,game.width,game.height,'background')    //tileSprite瓷砖精灵，背景拼接
        const ground=game.add.tileSprite(0,game.height-112,game.width,112,'ground')    

        const titleGroup = game.add.group()//在游戏对象中添加一个组，叫做titleGroup
        //titleGroup.create(x轴位置，Y轴位置，加入的元素)
        titleGroup.create(0,0,'title')//把标题图片加入组
        const bird = titleGroup.create(190,0,'bird')//把小鸟加入组
        // bird.animations.add('动画的名字')
        bird.animations.add('fly')        
        // bird.animations.play('动画名字'，每秒播放几张图，是否重复播放)
        bird.animations.play('fly',12,true)
        
        //设置组的位置
        titleGroup.x=50
        titleGroup.y=140

        //game.add.tween(控制对象).to(位置，时间，缓动类型，是否自动开始，延迟几秒开始，重复几次，yoyo)
        game.add.tween(titleGroup).to({y:120},1000,null,true,0,Number.MAX_VALUE,true)

        //添加按钮
        //game.add.button(x轴位置，Y轴位置，加入的元素,点击完执行什么效果)
        const btn = game.add.button(game.width/2,game.height/2,'btnImg',function(){
            //按钮点击后的效果
            console.log(11111)
        })

        //设置按钮的中心点，0.5=50%
        btn.anchor.setTo(0.5,0.5)


        // 背景重复滚动的代码
        // bg.autoScroll(X轴，Y轴)
        mybg.autoScroll(-20,0)
        ground.autoScroll(-100,0)
    }    //加载资源后，进入create方法
    this.update=function(){}    //用来做场景检测，需要时时刻刻检测的内容，放在upadate里面

}

}

//场景管理器添加第一个场景menu
game.state.add("sence1",game.gameStates.menu)
//场景管理器添加第二个场景
game.state.add("sence2",game.gameStates.play)
game.state.start("sence1")