Phaser 3 的 Arcade Physics 适合平台跳跃、弹球、推箱子等对精度要求不高但需稳定帧率的游戏,基于 AABB 矩形碰撞与简单速度叠加,不支持旋转、倾斜坡道或真实圆形滚动。

HTML5 游戏引擎里做重力和碰撞,不是调个 enablePhysics() 就完事——物理系统默认不启用,且不同引擎的“物理”其实是完全不同的两套东西。
Phaser 3 的 Arcade Physics 适合什么场景?
Arcade 物理是 Phaser 最常用、最轻量的方案,但它不是真实物理模拟,而是基于 AABB(轴对齐包围盒)的矩形碰撞检测 + 简单速度/加速度叠加。适合平台跳跃、弹球、推箱子这类对精度要求不高、但帧率必须稳的游戏。
- 开启前必须先在场景配置里声明:
physics: { arcade: { gravity: { y: 300 } } } -
body.setGravityY(300)只对已启用 Arcade 物理的 sprite 生效,没调this.physics.add.sprite()创建的对象,body是undefined - 两个
static物体(比如地面和墙壁)之间不会触发碰撞回调,只有至少一方是dynamic才会触发collide事件 - 不要用它算旋转、倾斜坡道或圆形滚动——
Arcade Physics不支持旋转碰撞检测,圆对象实际还是按矩形框判的
为什么 Matter.js 物理一启用就卡顿?
Matter 是 Phaser 3 内置的另一个物理引擎,能支持多边形、旋转、关节、浮力等,但计算开销明显更大。卡顿通常不是因为“开了 Matter”,而是因为默认配置太“全”了。
- 初始化时别直接用
matter: true,改用显式配置:physics: { matter: { debug: false, enableSleeping: true, gravity: { y: 0.5 } } }—— 关掉调试渲染、启用休眠能省 30%+ CPU - 每个
setCircle()或setPolygon()都会触发一次刚体重建,频繁修改形状(比如变形动画)会导致持续 GC;静态物体优先用setStatic(true) - Matter 的坐标系单位是“像素 → 米”的映射,默认
scale: 0.02(即 50px = 1m),如果角色高 100px,实际高度是 2m——这个缩放不匹配会让重力看起来像失重或超重
collision 回调没触发?检查这三个地方
Phaser 的碰撞监听依赖对象是否被正确加入物理世界,也依赖更新顺序。常见静默失败不是代码写错,而是生命周期没对上。
立即学习“前端免费学习笔记(深入)”;
- 确保
this.physics.add.collider(player, platforms)在create()里执行,而不是preload()或异步加载完成后的回调里(此时物理系统可能还没 ready) - 如果
platforms是StaticGroup,而player是动态的,要确认platforms的 body 类型:用addStaticGroup()创建的才带 static body,直接add.group()不行 - 碰撞回调函数里别直接改
body.velocity后又马上调body.setVelocity()——两者冲突,后者会覆盖前者;统一用setVelocity(x, y)或setAcceleration()
Canvas 渲染下,物理位置和显示位置不一致怎么办?
这是最容易被忽略的底层细节:Phaser 的物理 body 坐标是逻辑坐标(以左上为原点),而 Canvas 渲染受 scale、canvas.style.width/height 和设备像素比影响。当页面缩放或响应式调整 canvas 大小时,body 坐标没变,但视觉位置偏了。
- 不要用 CSS 缩放 canvas 元素(
transform: scale()),这会破坏物理坐标与像素的对应关系;改用config.scaleMode = Phaser.Scale.FIT+config.resolution控制清晰度 - 如果游戏必须适配多种屏幕,每次 resize 后手动同步:
sprite.setPosition(sprite.x, sprite.y)触发一次重定位,避免 body 和显示脱节 - 调试时打开
debug: true并用matter.world.drawDebug = true(Matter)或arcade.debug = true(Arcade)看绿色线框——线框位置不对,说明物理世界和渲染世界已经不同步
物理系统不是开关,是需要和渲染节奏、对象生命周期、坐标缩放一起对齐的一整套约束。调通一个跳起落地,往往要同时盯住 config、create、update 三处,少一处都可能让重力“消失”。











