手帐 Blog

主题

07 · 场景、精灵与 Arcade 物理入门 ​

目标：弄清 preload / create / update；用 Arcade 物理精灵设置速度与世界边界碰撞。
前置：06 · 工程脚手架
官方：Arcade Physics

1. Scene 生命周期（对照前端） ​

钩子何时对照
init(data)Scene 启动，可接收参数路由 query
preload加载资源（本系列纹理多在 Boot 已生成）拉静态资源
create只跑一次：摆物体、绑输入、建 GrouponMounted
update(time, delta)每帧；delta 为毫秒阶段一 rAF 回调

阶段一只手写 update/render；Phaser 把渲染交给引擎，你主要改物理与玩法状态。

2. Image vs 物理 Sprite ​

ts
// 只显示，无物理体
this.add.image(x, y, 'player')

// 参与 Arcade：有 body，可设速度、碰撞
this.physics.add.sprite(x, y, 'player')

Arcade 的 body ≈ 阶段一实体上的 {x,y,w,h,vx,vy}，但由引擎积分位移。

3. 最小物理演示（改 GameScene） ​

ts
import Phaser from 'phaser'

export class GameScene extends Phaser.Scene {
  private block!: Phaser.Physics.Arcade.Sprite

  constructor() {
    super('Game')
  }

  create() {
    this.block = this.physics.add.sprite(40, 300, 'player')
    this.block.setCollideWorldBounds(true)
    this.block.setVelocity(160, 0) // px/s，向右

    this.add.text(12, 12, 'Arcade: bounce on bounds', {
      fontSize: '14px',
      color: '#f8fafc',
    })
  }

  update() {
    // 本篇可不写；速度由物理步进
  }
}

观察：方块撞到世界右边界应停下或反弹（默认停下；若要弹可 setBounce(1)）。

与阶段一对齐：

阶段一Arcade
x += vx * fixedDtsetVelocity + 引擎步进
手写边界钳制setCollideWorldBounds(true)
自己 AABBoverlap / collider（09 用）

注意：update 的 delta 是毫秒；若手写位移用 delta / 1000。能交给物理的尽量交给物理。

4. 世界与原点 ​

  • 默认世界大小 = 游戏宽高（480×640）
  • Sprite 默认原点在中心 (0.5, 0.5)——和阶段一「左上角 x/y」不同。街机里可：
ts
this.block.setOrigin(0.5, 0.5) // 默认
// 或 setOrigin(0, 0) 贴近阶段一左上角心智

本系列后续默认中心原点（Phaser 常见写法），摆位置时按中心算。

5. debug ​

开发期可在 main.ts 里：

ts
arcade: { gravity: { x: 0, y: 0 }, debug: true }

会画出 body 线框，方便查「为什么没撞上」。交验收前改回 false。

验收清单 ​

  • [ ] 能说出 create 与 update 各自职责
  • [ ] 画面上有一个 physics.add.sprite
  • [ ] setVelocity 后物体会动
  • [ ] setCollideWorldBounds(true) 后不会飞出画布
  • [ ] 知道 Arcade 速度单位是 px/s，不是「每帧像素」

下一篇 ​

→ 08 · 街机射击：玩家移动与射击