phaser学习笔记：物理系统arcade基础平台

import Phaser from 'phaser'

class GameScene extends Phaser.Scene {
  constructor() {
    super({ key: 'GameScene' })
    // 平台
    this.platforms = null
    // 移动的平台
    this.movingPlatform = null
    // 游戏角色
    this.player = null
    // 星星
    this.stars = null
    // 操作按键
    this.cursors = null
  }

  preload() {
    // 加载游戏素材资源
    // 基本路径
    this.load.path = 'assets/example/physics/basicPlatform/'
    // 具体文件
    this.load.image('sky', 'sky.png')
    this.load.image('ground', 'platform.png')
    this.load.image('star', 'star.png')
    this.load.spritesheet('dude', 'dude.png', { frameWidth: 32, frameHeight: 48 })
  }

  create() {
    // 添加天空背景
    // 添加进去的元素，默认origin是0.5 0.5，也就是居中的
    this.add.image(400, 300, 'sky')
    // 底部静止不动平台
    this.platforms = this.physics.add.staticGroup()
    this.platforms.create(400, 568, 'ground').setScale(2).refreshBody()
    // 移动的平台
    this.movingPlatform = this.physics.add.image(400, 400, 'ground')
    this.movingPlatform.setImmovable(true) // 设置可以移动
    this.movingPlatform.body.allowGravity = false // 是否允许重力下坠
    this.movingPlatform.setVelocityX(50) // 水平移动速度
    // 添加玩家
    this.player = this.physics.add.sprite(100, 450, 'dude')
    this.player.setBounce(0.2) // 回弹速度保持
    this.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
    })

    // 按键
    this.cursors = this.input.keyboard.createCursorKeys()
    // 批量添加 星星
    this.stars = this.physics.add.group({
      key: 'star',
      repeat: 11,
      setXY: { x: 12, y: 0, stepX: 70 }
    })
    // 每个星星碰撞后 纵向弹跳
    this.stars.children.iterate(function(child) {
      child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8))
    })
    // 物体间碰撞
    // 玩家与静止平台
    this.physics.add.collider(this.player, this.platforms)
    // 玩家与移动平台
    this.physics.add.collider(this.player, this.movingPlatform)
    // 星星与静止平台
    this.physics.add.collider(this.stars, this.platforms)
    // 星星与移动平台
    this.physics.add.collider(this.stars, this.movingPlatform)
    // 玩家与星星重叠
    this.physics.add.overlap(this.player, this.stars, this.collectStar, null, this)
  }

  update() {
    if (this.cursors.left.isDown) {
      // 左箭头按下
      this.player.setVelocityX(-160)
      this.player.anims.play('left', true)
    } else if (this.cursors.right.isDown) {
      // 右箭头按下
      this.player.setVelocityX(160)
      this.player.anims.play('right', true)
    } else {
      this.player.setVelocityX(0)
      this.player.anims.play('turn')
    }
    // 按下上箭头，且 玩家底部与静止平台接触
    if (this.cursors.up.isDown && this.player.body.touching.down) {
      this.player.setVelocityY(-330)
    }
    // 移动平台左右移动
    if (this.movingPlatform.x > 500) {
      this.movingPlatform.setVelocityX(-50)
    } else if (this.movingPlatform.x <= 300) {
      this.movingPlatform.setVelocityX(50)
    }
  }

  collectStar(player, star) {
    // 隐藏星星
    star.disableBody(true, true)
  }
}

export function InitBasicPlatform(ele) {
  return new Phaser.Game({
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    parent: ele,
    backgroundColor: '#fbf0e4',
    // 使用arcade 物理引擎
    physics: {
      default: 'arcade',
      arcade: {
        gravity: { y: 300 },
        debug: false
      }
    },
    // 场景
    scene: [GameScene]
  })
}