如何消除來自Phaser's Sprite/Background的抖動

Question

我設置了一個示例jsfiddle來說明適當的資產。

當您的角色正在移動並且相機開始平移時，您會注意到背景具有小「抖動」。這可以通過將game.camera.roundPx設置爲true來禁用。

但是，如果這被禁用，你移動的字符。你的角色開始抖動。有些事情我已經在這個冒險中發現：與body.velocity.x移動時，既P2和Arcade物理下

• 這只是發生。

• 如果你移動字符body.x或只是x它絕對好。

• 如果您刪除貼圖貼圖您可以從字面上看到移動時看到眼睛的抖動。 Example here - 確保移動的距離足以讓相機平移。

• 我也試過game.renderer.renderSession.roundPixels = false;沒有爲準。

• 這種情況下，帆布和WebGL渲染模式

Answer 1

大問題！這些抖動是由subpixel rendering造成的。

當game.camera.roundPx爲false時，Phaser可以使用非整數值表示精靈的位置。根據對roundPx的文檔：

如果相機有roundPx設置爲true它會調用view.floor作爲更新循環的一部分，保持其邊界的整數值。將其設置爲false可禁用此功能。

view.floor：

運行在x和這個矩形的y值都Math.floor（）。

當繪製到非整數位置時，瀏覽器嘗試進行插值以使其看起來好像像素放置在兩個像素之間。這可能會導致源圖像的單個像素顯示爲兩個物理像素。這兩種狀態之間的切換時，相機平底鍋是什麼導致抖動。這裏有一個例子：

這就是爲什麼設置game.camera.roundPx = true修復它。