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

Question

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

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

但是，如果禁用它并移动角色。 你的角色开始抖动。 我在这次冒险中发现的一些事情：

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

• 如果你用body.x移动角色或只是x那就绝对没问题了。

• 如果你移除了瓷砖贴图纹理，你可以从字面上看到在移动时发生的抖动。 示例此处 - 确保您移动足够远以使相机平移。

• 我也试过game.renderer.renderSession.roundPixels = false; 没有优势。

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

Answer 1

好问题！ 这些抖动是由子像素渲染引起的。

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

如果Camera将roundPx设置为true ，它将调用view.floor作为其更新循环的一部分，将其边界保持为整数值。 将此设置为false可禁用此操作。

view.floor ：

在此Rectangle的x和y值上运行Math.floor（）。

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

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