如何從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的原因。