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

Question

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

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

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

• 这种情况只发生body.velocity.x在两者P2和Arcade物理学家之间.

• 如果你移动角色body.x或者只是x它绝对没问题.

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

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

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

Answer 1

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

当game.camera.roundPx为假时,Phaser可以对sprite的位置使用非整数值.根据以下文件roundPx:

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

view.floor:

在此Rectangle的x和y值上运行Math.floor().

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

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