Развитие игровой вспышки
Текущее время: Вт июл 17, 2018 2:18 am

Часовой пояс: UTC + 3 часа [ Летнее время ]




Начать новую тему Ответить на тему  [ Сообщений: 24 ]  На страницу 1, 2, 3  След.
Автор Сообщение
 Заголовок сообщения: Phaser и фонты
СообщениеДобавлено: Чт июл 06, 2017 12:33 am 
Не в сети
Аватар пользователя

Зарегистрирован: Сб янв 07, 2012 2:43 am
Сообщений: 477
Откуда: Моск обл
Приветствую всех!
Вопрос следующий
В 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 });

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


Вернуться наверх
 Профиль Отправить e-mail  
 
 Заголовок сообщения: Re: Phaser и фонты
СообщениеДобавлено: Пт июл 07, 2017 3:10 am 
Не в сети
Аватар пользователя

Зарегистрирован: Пн янв 09, 2017 8:44 pm
Сообщений: 175
Да можно поступить как ты хочешь, если не желаешь использовать 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>


Вернуться наверх
 Профиль Отправить e-mail  
 
 Заголовок сообщения: Re: Phaser и фонты
СообщениеДобавлено: Пт июл 07, 2017 1:51 pm 
Не в сети
Аватар пользователя

Зарегистрирован: Сб янв 07, 2012 2:43 am
Сообщений: 477
Откуда: Моск обл
Огромное спасибо за ответ. Буду пробовать.
А вообще использовать битмапфонты лучше?
Производительнее?))


Вернуться наверх
 Профиль Отправить e-mail  
 
 Заголовок сообщения: Re: Phaser и фонты
СообщениеДобавлено: Пт июл 07, 2017 2:45 pm 
Не в сети
Аватар пользователя

Зарегистрирован: Пн янв 09, 2017 8:44 pm
Сообщений: 175
kedicik писал(а):
Огромное спасибо за ответ. Буду пробовать.
А вообще использовать битмапфонты лучше?
Производительнее?))


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

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

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


Вернуться наверх
 Профиль Отправить e-mail  
 
 Заголовок сообщения: Re: Phaser и фонты
СообщениеДобавлено: Пт июл 07, 2017 3:54 pm 
Не в сети
Аватар пользователя

Зарегистрирован: Сб янв 07, 2012 2:43 am
Сообщений: 477
Откуда: Моск обл
Спасибо. Хак не сработал, а грузить фонт слишком ...
Решила изучить примеры с битмапфонтами, вопрос только один.
Как создается хмл с буквами? С помощью текстуре пакера?


Вернуться наверх
 Профиль Отправить e-mail  
 
 Заголовок сообщения: Re: Phaser и фонты
СообщениеДобавлено: Пт июл 07, 2017 4:01 pm 
Не в сети
Аватар пользователя

Зарегистрирован: Пн янв 09, 2017 8:44 pm
Сообщений: 175
kedicik писал(а):
Спасибо. Хак не сработал, а грузить фонт слишком ...
Решила изучить примеры с битмапфонтами, вопрос только один.
Как создается хмл с буквами? С помощью текстуре пакера?


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

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

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

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


Вернуться наверх
 Профиль Отправить e-mail  
 
 Заголовок сообщения: Re: Phaser и фонты
СообщениеДобавлено: Пт июл 07, 2017 6:01 pm 
Не в сети
Аватар пользователя

Зарегистрирован: Сб янв 07, 2012 2:43 am
Сообщений: 477
Откуда: Моск обл
Не знаю((( но вывелся не нужным шрифтом


Вернуться наверх
 Профиль Отправить e-mail  
 
 Заголовок сообщения: Re: Phaser и фонты
СообщениеДобавлено: Пт июл 07, 2017 6:06 pm 
Не в сети
Аватар пользователя

Зарегистрирован: Пн янв 09, 2017 8:44 pm
Сообщений: 175
kedicik писал(а):
Не знаю((( но вывелся не нужным шрифтом


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


Вернуться наверх
 Профиль Отправить e-mail  
 
 Заголовок сообщения: Re: Phaser и фонты
СообщениеДобавлено: Пт июл 07, 2017 6:08 pm 
Не в сети
Аватар пользователя

Зарегистрирован: Пн янв 09, 2017 8:44 pm
Сообщений: 175
Вот это для теста вставь после сразу за BODY, и скажи текст "Привет! Я красивый текст!" нужным шрифтом?

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

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


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


Вернуться наверх
 Профиль Отправить e-mail  
 
 Заголовок сообщения: Re: Phaser и фонты
СообщениеДобавлено: Пт июл 07, 2017 11:35 pm 
Не в сети
Аватар пользователя

Зарегистрирован: Сб янв 07, 2012 2:43 am
Сообщений: 477
Откуда: Моск обл
Тест не отработал. Когда нет этого шрифта в системе, то текст выводится не таким шрифтом, как надо((((
Сделала себе битмапфонт. Текст все время нужно отслеживать при ресайзе странички?


Вернуться наверх
 Профиль Отправить e-mail  
 
Показать сообщения за:  Сортировать по:  
Начать новую тему Ответить на тему  [ Сообщений: 24 ]  На страницу 1, 2, 3  След.

Часовой пояс: UTC + 3 часа [ Летнее время ]


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

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 3


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Перейти:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Русская поддержка phpBB