关键词搜索

源码搜索 ×
×

Phaser笔记-scene中的preload、create、update、player、键盘控制

发布2023-04-17浏览726次

详情内容

一般phaser最简单的配置文件如下:

  1. let config = {
  2. type: Phaser.AUTO,
  3. width: 800,
  4. height:600,
  5. scene: {
  6. preload: preload,
  7. create: create,
  8. update: update
  9. },
  10. physics:{
  11. default: 'arcade',
  12. arcade: {
  13. gravity: { y: 300},
  14. debug: false
  15. }
  16. }
  17. };

其中scene有3个函数:preload、create、update

preload:是在create函数前调用的,一般用于资源的加载;

create:preload完成后,就会调用到这函数,这个函数一般用于构造界面,关联玩家键盘,游戏大部分逻辑事件等等等;

update:会按周期进行调用,一般用于键盘控制玩家,玩家坐标更新等。

下面是player键盘控制,首先定义变量:

let player;

create函数中奖player构造成精灵,并且设置好回弹参数以将碰撞属性设置为true:

  1. player = this.physics.add.sprite(100, 450, 'dude');
  2. player.setBounce(0.2);
  3. player.setCollideWorldBounds(true);

如果给出的精灵是这样的:

那么还需要创建动画,方便后边的键盘操作,上面的精灵是个横版的图,左边4幅是左,中间那一幅是停止的,右边4幅是右走。

  1. this.anims.create({
  2. key: 'left',
  3. frames: this.anims.generateFrameNumbers('dude', {start: 0, end: 3}),
  4. frameRate: 10,
  5. repeat: -1
  6. });
  7. this.anims.create({
  8. key: 'turn',
  9. frames: [{key: 'dude', frame: 4}],
  10. frameRate: 20
  11. });
  12. this.anims.create({
  13. key: 'right',
  14. frames: this.anims.generateFrameNumbers('dude', {start: 5, end: 8}),
  15. frameRate: 10,
  16. repeat: -1
  17. });

 比如横版游戏中有个platforms,玩家可以站在平台上:

this.physics.add.collider(stars, platforms);

在平台上有些加分道具(如stars),当玩家捡到(重叠)到加分道具会执行对应的回调函数:

this.physics.add.overlap(player, stars, collectStar, null, this);

其中stars是变量,collectStar是回调函数。

同样平台上还会有一些敌人,如果玩家接触到这些敌人也会触发对应的回调函数:

this.physics.add.collider(player, bombs, hitBomb, null, this);

其中hitBomb就是回调函数。

关于键盘首先定义cursor变量:

let cursors;

在create函数中创建光标:

cursors = this.input.keyboard.createCursorKeys();

在update函数中通过按下不同的键盘干不同的事情:

  1. function update(){
  2. if(cursors.left.isDown){
  3. }
  4. else if(cursors.right.isDown){
  5. }
  6. else{
  7. }
  8. if(cursors.up.isDown && player.body.touching.down) {
  9. }
  10. }

分别是左键被按下,右键被按下,跳起一次。

如将玩家(精灵)在不同操作下,设置不同的X,Y轴坐标,以及播放不同的动画。

  1. function update(){
  2. if(cursors.left.isDown){
  3. player.setVelocityX(-160);
  4. player.anims.play('left', true);
  5. }
  6. else if(cursors.right.isDown){
  7. player.setVelocityX(160);
  8. player.anims.play('right', true);
  9. }
  10. else{
  11. player.setVelocityX(0);
  12. player.anims.play('turn', true);
  13. }
  14. if(cursors.up.isDown && player.body.touching.down) {
  15. player.setVelocityY(-330);
  16. }
  17. }

相关技术文章

点击QQ咨询
开通会员
返回顶部
×
微信扫码支付
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载