You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Phaser框架相机跟随失效问题(JavaScript)

解决Phaser游戏相机无法跟随飞机的问题

嘿,作为Phaser新手遇到这个问题很正常,我帮你一步步排查和解决:

1. 先修复代码里的语法错误

你的create函数里有一行不完整的代码:

game.camera.tilePosition

这行没有赋值也没有方法调用,会导致语法错误,直接删掉这行就好——它可能会阻止后续代码(包括相机跟随逻辑)正常执行。

2. 设置正确的世界边界

相机能跟随目标移动的前提是游戏世界的大小大于窗口尺寸,你的背景图是1920x1080,但默认游戏世界大小和窗口一样是800x600,所以相机没办法超出这个范围移动,只能停在左上角。

在create函数开头(创建天空背景之前)添加这行代码:

game.world.setBounds(0, 0, 1920, 1080);

这会把游戏世界的大小设置成和你的背景图一致,让相机有足够的空间跟随飞机移动。

3. 确认相机跟随的配置

虽然你已经调用了game.camera.follow(plane),可以明确指定跟随模式让效果更稳定,比如使用LOCKON模式(相机紧紧锁定目标):

game.camera.follow(plane, Phaser.Camera.FOLLOW_LOCKON);

把这行替换掉原来的game.camera.follow(plane)即可。

4. 验证飞机的移动逻辑

确保你update函数里的箭头键控制代码是正确的,比如这样的逻辑:

function update() {
    // 控制飞机移动
    if (cursors.up.isDown) {
        plane.body.velocity.y = -300;
    } else if (cursors.down.isDown) {
        plane.body.velocity.y = 300;
    } else {
        plane.body.velocity.y = 0;
    }

    if (cursors.left.isDown) {
        plane.body.velocity.x = -300;
    } else if (cursors.right.isDown) {
        plane.body.velocity.x = 300;
    } else {
        plane.body.velocity.x = 0;
    }

    // 相机跟随只需在create中调用一次,这里如果重复调用也没问题,但无需每次update都执行
    // game.camera.follow(plane, Phaser.Camera.FOLLOW_LOCKON);
}

注意:相机跟随逻辑只需要在create里调用一次就生效,不用每次update都重复调用,避免不必要的性能消耗。

5. 检查物理边界的匹配度

你的物理边界设置game.physics.arcade.setBounds(0, 70, 1920, 1040)是没问题的,但要确保它和世界边界的范围大致匹配,这样飞机不会飞出世界外,相机也不会跟着跑到无效区域。

按照上面的步骤修改后,应该就能看到相机顺利跟随飞机移动了!

内容的提问来源于stack exchange,提问作者munzy

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.15 08:16:55