Posted on by

Как использовать шрифты в Phaser

Разберёмся как использовать различные шрифты в своих играх на Phaser.

На самом деле выбор не большой — мы можем использовать 2 вида шрифтов: векторные и спрайтовые.

Векторные шрифты

Для использования векторных шрифтов мы можем использовать любые файлы, которые можно загрузить через CSS. Это как локальные файлы шрифтов (обычные .ttf), так и шрифты которые можно загружать «на лету», например шрифты от гугла.

Существует два способа подключения Web-шрифтов: с помощью CSS (используя @font-face) или с помощью JavaScript (используя Font Loading API). Решение через CSS является стандартом и работает везде; в то время как подключение через JavaScript API ещё не имеет широкого распространения во всех браузерах. Поэтому на данный момент разумно использовать решение посредством CSS.

Подключение векторных шрифтов через CSS

Вот типичный код подключения шрифта для дальнейшего использования его в своей Phaser-игре (пример из моей рабочей игры которая была хорошо протестирована на многих браузерах и устройствах):

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="pragma" content="no-cache" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

  <title>Game Title</title>

  <style>
    @font-face {
      font-family: VAGzStarBold;
      src: url('./assets/fonts/vrzb.eot');
      src: url('./assets/fonts/vrzb.eot?#iefix') format('eot'),
      url('./assets/fonts/vrzb.woff') format('woff'),
      url('./assets/fonts/vrzb.ttf') format('truetype'),
      url('./assets/fonts/vrzb.svg') format('svg');
      font-weight: normal;
      font-style: normal;
    }

    html {
      overflow: hidden;
    }

    body {
      background-color: #333;
      font-family: 'Segoe UI', sans-serif;
      border: none;
      padding: 0;
      margin: 0;
    }

    #content {
      margin: 0;
      padding: 0;
    }
  </style>

  <script src="./js/phaser.min.js"></script>
  <script src="game.js"></script>
</head>

<body>
  <div class="font_preload hidden">
    <span style="font-family: VAGzStarBold;"></span>
  </div>

  <div id="game"></div>
</body>

</html>

Для надёжности, чтобы шрифт работал везде, можно грузить его в разных расширениях. Как правило шрифты всегда поставляются только в расширении .ttf либо в .otf, для преобразования его во все нужные форматы для Web-а, которые используются в примере, я могу посоветовать использовать следующие удобные ресурсы которыми пользуюсь сам:

https://everythingfonts.com/otf-to-ttf

http://www.font2web.com

Так же стоит обратить внимание на правильную загрузку шрифта, которая делается в скрытом div-е (строки 49-51). Это требуется потому, что объявление в CSS не загружает шрифт. Шрифт загружается только тогда, когда браузер впервые обнаруживает, что шрифт будет использоваться. Из-за этого шрифт может отображаться как по умолчанию, так и вообще может не отображаться пока не загрузится. Для браузеров это не критично, а для игры очень критично, т.к. после первого применения шрифта он только начнёт загружаться, но мы не получим повторный рендеринг шрифта и он так и останется некорректным. При использовании шрифта в скрытом div-е как это показано выше, шрифт прогружается ещё до того как игра запустилась.

Далее в игре шрифт используется следующим образом:

this.tf = new Phaser.Text(this.game, 0, 0, 'text');
this.tf.font = 'VAGzStarBold';
this.tf.fontSize = 70;
this.tf.anchor.set(0.5);
this.dummy.addChild(this.tf);

Минусы векторных шрифтов

Векторные шрифты имеют ряд минусов, из-за которых я стараюсь их не использовать в своих играх.

Разное отображение в разных браузерах: например один и тот же шрифт отображается с разной степенью жирности в chrome и в firefox.

Различные артефакты отображения: в каких-либо инвалидских браузерах типа IE, особенно в старых версиях. В этих случаях нам приходят на помощь спрайтовые шрифты.

Спрайтовые шрифты

Спрайтовый шрифт представляет из себя спрайтовый (.png) атлас всех символов и data-файл.

Плюсы спрайтовых

Такой шрифт всегда выглядит одинаково в игре, а т.е. отсутствуют любые артефакты отображения.

Минусы спрайтовых

Качество шрифта статично (как и любой картинки). При критичном масштабировании картинка заметно пикселизируется:

Это решается использованием нескольких атласов разного разрешения либо подборкой разрешения под игру. Я, например, всегда использую второй способ — подбираю качество шрифта.

Занимает дополнительное место, особенно если вы используете несколько языков. Но это не критично по сравнению с атласами текстур.

Создание спрайтовых шрифтов

Для создания СШ существует замечательный бесплатный ресурс: http://kvazars.com/littera

Нам нужно загрузить туда шрифт .ttf (по нажатию большой кнопки «A select font»). Можно сразу выбрать символы, которые вы хотите использовать, можно выбирать блоки символов в поле Presents, а можно вписывать самому. Затем выбрать размер — это будет влиять на видимое качество шрифта в игре, я обычно ставлю 100. Далее убираем градиент по умолчанию, чтобы цвет заливки был монотонный (просто потянув указатель цвета вниз) и выставляем цвет в чисто белый, чтобы мы смогли в игре выставлять шрифту tint перекрашивая его в любой цвет. Выключаем Stroke, ставим галочку «Power of 2», указываем какое-либо name — это будет имя и шрифта и проекта литтеры, далее можно сохранить проект литтеры и сделать экспорт шрифта — на выдаче будет архив с файлами атласа и data.

Есть один нюанс — когда распакуете архив, то там будет файл .fnt, его надо переименовать в .xml  и всё — шрифт готов к использованию в Phaser.

Загрузка спрайтового шрифта и использование в Phaser

Загрузить шрифт так же легко как любой атлас, вот пример загрузки шрифта в прелоадере:

this.load.bitmapFont('font1', './assets/fonts/font.png', './assets/fonts/font.xml');

Имя ‘font1’ — это имя ресурса, которое будет использоваться далее в коде игры.

А вот код использования шрифта:

this.tf = new Phaser.BitmapText(this.game, 150, 150, 'font1', 'simple text');
this.tf.anchor.set(0.5);
this.tf.fontSize = 27;
this.tf.tint = 0x333333;
this.tf.alpha = 0.9;

Ничего сложного.

Подытожим

Вот пожалуй и всё по шрифтам. Какой использовать — решение за вами. Я, например, после того как намучился с разным отображением одного и того же векторного шрифта в разных браузерах, сейчас полностью отдаю предпочтения спрайтовым.

Published by Monax