- 加入角色
有了这些可爱的平台,怎么能没人在上面跑动呢?
在create函数中,新建一个player变量,代码参看part5.html:
player = this.physics.add.sprite(100, 450, 'dude');
player.setBounce(0.2); player.setCollideWorldBounds(true);
this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }), frameRate: 10, repeat: -1 });
this.anims.create({ key: 'turn', frames: [ { key: 'dude', frame: 4 } ], frameRate: 20 });
this.anims.create({ key: 'right', frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }), frameRate: 10, repeat: -1 }); |
这段代码可分为两个部分来看:
- 创建一个精灵体
- 创建该精灵的动画效果
精灵体
第一部分创建精灵体的代码:
player = this.physics.add.sprite(100, 450, 'dude');
player.setBounce(0.2); player.setCollideWorldBounds(true); |
这里创建了一个叫player的精灵体,定位在屏幕下部(100,450)的位置。精灵通过构造函数(this.physics.add)创建,默认创建的是一个动体。
然后我们给精灵赋予一个较小的弹力值0.2。这样精灵落地是会轻微弹起一点。接着我们设定精灵会和场景的边沿碰撞,默认边界就是游戏场景的边界,前面我们设置为了(800x600)大小,精灵将不会跑到这个边界之外,如果跑到边界它会停住,也不会跳出场景上部。
动画
你是否还记得在preload函数中,’dude’是以精灵表的方式载入的,而不是图片。因为它包含了动画的每一帧图像,一个完整的精灵表看起来是这样的:
表中总共有9帧画面,4帧向左跑的,一帧正面的,4帧向右跑的。注:Phaser是支持翻转帧画面的,但在这个教程中,我们还是用比较呆板的方法。
我们定义了两个动画,分别叫‘left’和‘righr’。下面是向左跑的动画:
this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }), frameRate: 10, repeat: -1 }); |
向左的动画使用了第0,1,2和3帧,帧率是每秒10帧。‘repeat -1’的意思是循环播放动画。
这是一个标准的动画周期,它持续在一个方向上循环播放,当我们们按下‘右’键时会转向。
补充知识:在Phaser 3中,动画是贯穿全局的。我们创建的是一个全局的动画对象。可以在任意时候管理动画数据。你可以只创建一次动画就可在整个程序中使用它,这一点是和Phaser 2有很大的不同的。