Как использовать собственный шрифт

Favourite 125 favourites
Tutorial written by Przemek32767Originally published on 3rd, January 2012 - 7 revisions

Translation Team:

1 revision

Вступление

74 релиз Construct 2 добавил поддержку Web Fonts. Это значит, что теперь вы можете добавлять в проект и использовать шрифт, которого не было на устройстве пользователя. Чтобы узнать больше, можно прочесть Ashley's tutorial on Web Fonts in Construct 2. Его урок был больше нацелен на использование шрифтов из Google Fonts, но если вы хотите использовать шрифт из другого места, этот туториал вам поможет. Также стоит отметить, что эта возможность есть и в бесплатной версии Construct 2.

Уважайте авторское право!

Возьмите за правило читать лицензии на использование шрифтов! Не все из них бесплатны для использования. Авторы шрифтов могут попросить что-то взамен использования их работ. Это особенно важно, если вы делаете коммерческий продукт.

Поиск шрифта

Формат Web Font поддерживается разными браузерами см. здесь. К счастью, существуют онлайн-конвертеры, которые позволяют из обычного шрифта сделать веб-версию. Я рекомендую использовать Font Squrrel's @font-face Kit Generator. В этом уроке мы будем использовать шрифт из Team Fortress 2. Возьмите шрифт и перейдите на страницу генератора. Он выглядит так:Font Squirrel page


Нажмите кнопку Add Fonts и выберите свой шрифт. По умолчанию настройки выставлены, как "optimal", и, в принципе, этого хватит (вы конечно можете выбрать "expert" и воспользоватся тонкой настройкой). Нажмите на Yes, the fonts I'm uploading are legally eligible for web embedding (опять же, помните про лицензию на использование!). Если всё готово, нажмите кнопку Download Your Kit. Начнётся загрузка. Когда она закончится, откройте zip-архив. Нужные нам файлы: .eot, .svg, .ttf и .woff, а также the stylesheet.css file (.css можно переименовать, при желании). Извлеките файлы из архива и запустите Construct 2.

Добавление шрифта в приложении

После запуска Construct 2, создайте новый проект или откройте существующий. Now you need to import the font files and the .css file to your project. Кликните правой кнопкой папку Filesна панели Projects и выберите Import files (можно выбрать несколько файлов одновременно).Imported files
Теперь создайте объект "Text".Some text
Теперь откройте event sheet и создайте условие On start of layout. Добавьте действие Set web font у текстового объекта. Свойство family name можно найти в .css файле, после "font-family:" text (в нашем случае это tf2_buildtf2_build):The CSS file


Параметр CSS URL должен быть именем .css файла ("stylesheet.css", или как вы его переименовали). Вот как выглядит полное событие:
Open full size image

Окей, время запустить вой проект. Вы увидите следующее:The result of the tutorial
Спасибо за прочтение. Удачи вам и вашему проекту!

Дополнительно

Web Fonts в объекте "Text box"

После установки веб-шрифта в любом текстовом объекте вы можете установить его для объекта "Text box", используя Set CSS style. Введите font-family в поле Property name и название шрифта из вашего CSS в поле Value.

Обходной путь к не загружаемым веб-шрифтам

Иногда, Web Font не загружается при старте и шрифт меняется только после смены сцены. Один из вариантов решения проблемы - создать объект "Text", установить для него веб-шрифт и уничтожит его после 0.1 секунды (используя действие Wait). Примерно, это должно выглядеть вот так:A workaround to the Web Font not loading when the game is started


Текст на долю секунды появится с шрифтом по умолчанию и исчезнет, но зато шрифт будет на всех остальных объектах.

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.