Phaser и фонты

kedicik · **Добавлено:** Чт июл 06, 2017 12:33 am

Приветствую всех!
Вопрос следующий
В css пишу так
@font-face {
font-family: 'Alex Murphy Solid';
src: url('../fonts/alex_murphy_solid.ttf') format('truetype');
src: url('../fonts/Alex-Murphy-Solid.woff') format('woff');
src:url('../fonts/alex_murphy_solid.eot?#iefix') format('embedded-opentype');
src:url('../fonts/Alex-Murphy-Solid.svg#Alex Murphy Solid') format('svg');
font-weight: normal;
font-style: normal;
}

В страничке есть ссылка на css.
На сайте есть папка с этим фонтом alex_murphy_solid.ttf
В игре хочу использовать текст с таким фонтом и пишу

this.text1 =fl.game.add.text(-45, 30, '', { font: "30pt Alex Murphy Solid", fill: "#FFFFFF", stroke: "#000000", strokeThickness: 1 });

Выводится с таким фонтом, если он у меня есть в операционке. Если его нет, то фонт другой.
Может я что-то не понимаю, но мне хочется взять его из моей папки. Что я делаю не так и возможно ли такое?))))

KidWithGun · **Добавлено:** Пт июл 07, 2017 3:10 am

Да можно поступить как ты хочешь, если не желаешь использовать BitmapFont.
Но в связи с оптимизацией, как я понял, браузер шрифт не загружает из CSS, если этот шрифт не используется на каком-либо HTML элементе.

Цитата:

It’s important to remember that declaring a font family via CSS does not load the font!

Поэтому используй хак:

После тега <body> вставь:

Код:

<div class="font_preload" style="opacity: 0">
    <span style="font-family: 'Alex Murphy Solid';"></span>
 </div>

Тогда браузер загрузит этот шрифт и ты сможешь его использовать на canvas.

Есть и более продвинутый способ и размышления на эту тему:
https://hacks.mozilla.org/2016/06/webfo ... ml5-games/

Я использую BitmapFont. Но однажды хак меня выручил.

А так можно протестить вообще шрифт, но лучше посмотреть вкладку Network в DevTool браузера. Так как ты в CSS указал шрифт под тем же именем, с которым он у тебя на машине установлен, то он будет у тебя работать, даже если он не загрузился в браузере.

Код:

<div class="font_test" >
    <span style="font-family: 'Alex Murphy Solid';">Привет! Я красивый текст!</span>
 </div>

kedicik · **Добавлено:** Пт июл 07, 2017 1:51 pm

Огромное спасибо за ответ. Буду пробовать.
А вообще использовать битмапфонты лучше?
Производительнее?))

KidWithGun · **Добавлено:** Пт июл 07, 2017 2:45 pm

kedicik писал(а):

Огромное спасибо за ответ. Буду пробовать.
А вообще использовать битмапфонты лучше?
Производительнее?))

Ну раст побыстрее, шрифт то это вектор.
Хотя выигрыш в производительности сомнителен.

Битмапфонты хороши тем, что можно добиться нужной графической стилистики, которую не сделаешь с обычным текстом. Например, нормальный 3D эффект для текста.

Тут побольше инфы на твой вопрос:
https://gamedev.stackexchange.com/a/30427

kedicik · **Добавлено:** Пт июл 07, 2017 3:54 pm

Спасибо. Хак не сработал, а грузить фонт слишком ...
Решила изучить примеры с битмапфонтами, вопрос только один.
Как создается хмл с буквами? С помощью текстуре пакера?

KidWithGun · **Добавлено:** Пт июл 07, 2017 4:01 pm

kedicik писал(а):

Спасибо. Хак не сработал, а грузить фонт слишком ...
Решила изучить примеры с битмапфонтами, вопрос только один.
Как создается хмл с буквами? С помощью текстуре пакера?

Нет, текстурпакер для атласов спрайтов

Есть много инструментов, например
http://kvazars.com/littera/

Мне дизайнер сам их делал, у него было какой-то плагин в иллюстраторе

Хак не сработал это как? Шрифт хотя бы загрузился?

kedicik · **Добавлено:** Пт июл 07, 2017 6:01 pm

Не знаю((( но вывелся не нужным шрифтом

KidWithGun · **Добавлено:** Пт июл 07, 2017 6:06 pm

kedicik писал(а):

Не знаю((( но вывелся не нужным шрифтом

А просто с html элементом шрифт работает?

KidWithGun · **Добавлено:** Пт июл 07, 2017 6:08 pm

Вот это для теста вставь после сразу за BODY, и скажи текст "Привет! Я красивый текст!" нужным шрифтом?

<div class="font_test" >
<span style="font-family: 'Alex Murphy Solid';">Привет! Я красивый текст!</span>
</div>

И кстати, JS подключения вынеси в конец документа перед закрывающим </body>

<script src="..."></script>
</body>
<html>

kedicik · **Добавлено:** Пт июл 07, 2017 11:35 pm

Тест не отработал. Когда нет этого шрифта в системе, то текст выводится не таким шрифтом, как надо((((
Сделала себе битмапфонт. Текст все время нужно отслеживать при ресайзе странички?

Phaser и фонты

Кто сейчас на форуме