如何从 Phaser 的 Sprite / 背景中消除抖动

Question

我设置了一个示例 jsfiddle 以使用适当的资产来说明这一点。

当你的角色移动并且相机开始平移时，你会注意到背景有一个小的“抖动”。这可以通过将 game.camera.roundPx 设置为 true 来禁用。

但是，如果禁用该功能并且您移动了角色。你的角色开始抖动。我在这次冒险中发现的一些东西：

• 这只发生在使用body.velocity.x 移动时，在P2 和Arcade 物理下。

• 如果您使用body.x 或仅x 移动角色，那绝对没问题。

• 如果您移除 tilemap 纹理，您可以从字面上看到移动时发生的抖动。 Example here -- 确保您移动的距离足以让相机平移。

• 我也试过game.renderer.renderSession.roundPixels = false;，但没有成功。

• 这发生在 CANVAS 和 WEBGL 渲染模式下

Answer 1

好问题！这些抖动是由subpixel rendering 引起的。

当game.camera.roundPx 为假时，Phaser 可以为精灵的位置使用非整数值。根据roundPx的文档：

如果相机将roundPx 设置为true，它将调用view.floor 作为其更新循环的一部分，并保持其边界为整数值。将此设置为 false 以禁止这种情况发生。

view.floor:

对该矩形的 x 和 y 值运行 Math.floor()。

当绘制到非整数位置时，浏览器会尝试进行插值以使其看起来好像一个像素位于两个像素之间。这可能会导致源图像的单个像素显示为两个物理像素。相机平移时这两种状态之间的切换是导致抖动的原因。这是一个例子：

这就是设置game.camera.roundPx = true 修复它的原因。