Как удалить jitterness из Sprite/Background от Phaser

Question

Я установил пример jsfiddle, чтобы проиллюстрировать это соответствующими ресурсами.

Когда ваш персонаж перемещается, и камера начинает вращаться, вы заметите, что фон имеет небольшую «jitterness». Это можно отключить, установив game.camera.roundPx в значение true.

Однако, если это отключено и вы перемещаете символ. Ваш персонаж начинает дрожать. Некоторые вещи, которые я нашел в этом приключении:

• Это происходит только при движении с body.velocity.x, в рамках как P2 и Arcade физики.

• Если вы переместите символ с body.x или просто x, это абсолютно нормально.

• Если вы удалите текстуру tilemap , вы можете буквально увидеть, как jitterness происходит созерцать ваши глаза при движении. Example here - Убедитесь, что вы перемещаетесь достаточно далеко, чтобы камера могла качаться.

• Я также пробовал game.renderer.renderSession.roundPixels = false; без преобладания.

• Это происходит под парусами и WebGL визуализации режимов

Answer 1

Великий Вопрос! Эти колебания вызваны subpixel rendering.

Phaser может использовать нецелые значения для позиций спрайтов, когда game.camera.roundPx является ложным. Согласно документации roundPx:

Если камера имеет roundPx установлено true он будет вызывать view.floor как часть своего цикла обновления, сохраняя свою границу для целочисленных значений. Установите это значение в false, чтобы отключить это.

view.floor:

Запускает Math.floor() на обоих х и у значений этого прямоугольника.

При рисовании на нецелые позиции браузер пытается интерполировать, чтобы он выглядел так, как если бы пиксель помещался между двумя пикселями. Это может привести к отображению одного пикселя исходного изображения в виде двух физических пикселей. Переключение между этими двумя состояниями, когда кастрюли камеры вызывает то, что вызывает дрожание. Вот пример:

Именно поэтому установка game.camera.roundPx = true фиксирует это.