Общая потеря качества - 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 а затем добавить пользовательские функции для обработки событий изменения размера. Также смотрите этот вопрос или тему форума