общая потеря качества - Phaser

Question

Я разрабатываю интерактив с помощью Phaser.js (v2), но сталкиваюсь с общей потерей качества (изображения, спрайты, тексты и т. Д.). Особенности рендеринга текста:

const strtxt = this.game.add.text(0, 0, str, {
  font: 'Open Sans',
  fontSize: 17,
  weight: 400,
}, text);
strtxt.align = 'center';
strtxt.lineSpacing = -4;
strtxt.anchor.set(0.5, 0);
strtxt.wordWrap = true;
strtxt.wordWrapWidth = 300;
const y = text.getAt(1).height + ((index + 1) * 60);
strtxt.position.set(250, y);

Мне бы очень хотелось улучшить качество, по крайней мере, для текста. Что я могу сделать?

Answer 1

Phaser обычно рендерится на фиксированный холст, а затем растягивает холст, чтобы заполнить экран. Например, если вы установите размер холста на 480 x 640 пикселей, но воспроизводите его на мониторе HD, то он, так сказать, «взорван». Это изображение с более низким разрешением, отображаемое на дисплее с более высоким разрешением, и поэтому оно выглядит слегка размытым.

Преимущество в том, что игра всегда будет отображаться одинакового размера. Вам, как программисту, не нужно беспокоиться о различных разрешениях и размерах дисплея, особенно с планшетами или мобильными телефонами. Но недостатком является потеря разрешения и размытость.

Так что, я думаю, вы хотите, чтобы отношение пиксель к пикселю было не уверенным, поддерживает ли Phaser это, но я думаю, что вы можете установить scaleMode в SHOW_ALL или, возможно, USER_SCALE, а затем добавить пользовательские функции для обработки изменения размера События. Также смотрите этот вопрос или в этой теме форума