javascript - 如何消除 Phaser 的 Sprite/Background 的抖动

Question

我设置了一个例子 jsfiddle用适当的 Assets 来说明这一点。

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

但是，如果它被禁用并且你移动了 Angular 色。你的性格开始颤抖。我在这次冒险中发现的一些东西:

• 只有在 P2 和 Arcade 物理条件下使用 body.velocity.x 移动时才会发生这种情况。

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

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

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

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

Answer 1

好问题!这些抖动是由 subpixel rendering 引起的.

当 game.camera.roundPx 为 false 时，Phaser 可以为 Sprite 的位置使用非整数值。根据 roundPx 的文档:

If a Camera has roundPx set to true it will call view.floor as part of its update loop, keeping its boundary to integer values. Set this to false to disable this from happening.

view.floor :

Runs Math.floor() on both the x and y values of this Rectangle.

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

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