Spritefont (загружаем свой шрифт)

уроки, мануалы, советы по Construct 2

Сообщение Spritefont (загружаем свой шрифт)
» 23 сен 2014, 07:03

По просьбе трудящихся написал небольшой мануал по работе с утилитой Give Your Fonts Mono и объектом Spritefont.

Приступим. Для начала вам нужно найти в интернете нужный шрифт. В качестве примера возьмем вот этот шрифт под названием Pecita с сайта www.1001fonts.com. Если по каким-либо причинам он там не скачивается, то берем его отсюда:

pecita.zip
(466.51 КБ) Скачиваний: 279


Шрифт полностью бесплатный! Его можно использовать в коммерческих целях, о чем нам говорит прилагаемый ".txt" файл внутри архива. И так, после скачивания распаковываем архив и ставим новый шрифт в Windows. Не знаете как ставить? Все просто! Открываете шрифт и там нажимаете на кнопку "Установить"

Изображение

Теперь скачиваем утилиту Give Your Fonts Mono. Последнюю версию утилиты можно взять отсюда. Если у вас нет аккаунта на сайте Scirra.com, то скачайте отсюда:

GiveYourFontsMono_v2_3.zip
(321.31 КБ) Скачиваний: 815


Запускаем утилиту. Откроется вот такой экран:

Изображение

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

Изображение

Откроется таблица всех шрифтов установленных в ваш Windows. Ищем там наш шрифт под названием Pecita. Также заодно выбираем тип шрифта (в нашем случае Bold) и ставим ему размер 36 (для игр больше и не нужно).

Изображение

Если необходимо, то там же еще можно выбрать цвет, но я оставил черный по-умолчанию. Теперь выбранный вами шрифт появиться в окне редактора утилиты и будет это все выглядеть так:

Изображение

Что-то не то. Нет русского языка. А нету его там потому что нету самих букв. Их необходимо добавить. И так, в поле рядом к кнопкой Refresh, вот сюда:

Изображение

Вставляем вот этот весь Алфавит. То есть стираем все что там было и вставляем туда вот это:

Код: Выделить всё
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.,;:?!-_~#"'&()[]|`\/@°+=*$£€<>АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюя


Теперь нажмите на кнопку Refresh и вы увидите, как в окне редактора утилиты появились русские буквы.

Изображение

Чтобы наглядно посмотреть как будут выглядеть русские слова - в поле Sample, которое находиться слева, пишем любой текст, например, "Привет мир!". И снова нажимаем Refresh, чтобы обновить результат.

Изображение

Если вас не устраивают отступы по высоте или ширине букв (что-то обрезается или наезжает), то вы можете сами настроить отступы в колонке параметров Parameters, которая находиться тоже слева:

Изображение

В данном случае отступы трогать не будем, поэтому переходим к экспорту. Для того, чтобы сохранить шрифт как графическое изображение нажмите кнопку Save.

Изображение

Все. Теперь можете закрыть утилиту. На жестком диске, там где вы сохранили шрифт - появятся 3 файла:

Изображение

Пока их трогать не буем. Далее запускаем Construct 2 и сразу на рабочую область добавляем объект Spritefont.

Изображение

У вас откроется редактор изображений, куда вам и нужно будет загрузить графическое изображение полученного шрифта в формате ".png". Полное имя файла: SpriteFont_Pecita_Bold_(36)_[0,0,0]_40x40.png

Изображение

Закрываем редактор изображений и двигаемся в настройки объекта Spritefont. Первым делом сотрите все в строке Character set и еще раз скопируйте туда весь Алфавит:

Код: Выделить всё
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.,;:?!-_~#"'&()[]|`\/@°+=*$£€<>АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюя


Чуть выше, в строках Character width и Character height, в оба впишите значение 40 (40 по ширине и 40 по высоте). Спросите почему именно 40? Эти значения мы берем из названия самого файла. Дело в том что при экспорте утилита Give Your Fonts Mono на самом конце названия файла пишет часть его настроек, а конкретно ширину и высоту ячеек. Пример:

Изображение

Теперь ниже, в настройках Spritefont, в поле Text напишите пробный текст, например, все тот же: "Привет мир!". Сравните настройки со скриншотом:

Изображение

На рабочей области у вас должна появиться надпись на Русском языке:

Изображение

Текст появился, но вот досада! Расстояние между буквами слишком большое. Надо его уменьшить. Вы конечно можете воспользоваться опцией Character spacing в настройках объекта Spritefont, но я бы вам этого не советовал делать, потому что отрицательные значения этого параметра уменьшает расстояние между всеми буквами сразу, а нам это не нужно так как в шрифте есть как большие буквы, так и маленькие, а у них же ширина разная! Поэтому тут мы прибегаем к более сложному, но более правильному способу.

И так, добавляем в сцену еще один объект под названием Array (Массив).

Изображение

Теперь идем в редактор событий и создаем условие:

Код: Выделить всё
условие: объект Spritefont > команда > On created


Изображение

Вот теперь нам потребуется второй экспортированный файл текстового формата с именем SpriteFont_Pecita_Bold_(36)_[0,0,0]_40x40.txt. Откройте его и найдите строку с комментарием "Copy the following JSON text and paste into the Array.Load command INSIDE the default quotes.", под этим комментарием будет код, скопируйте его. Пример этого кода:

Код: Выделить всё
{""c2array"":true,""size"":[2,28,1],""data"":[[[4],[5],[7],[8],[9],[10],[11],[12],[13],[14],[15],[16],[17],[18],[19],[20],[21],[23],[24],[25],[26],[28],[29],[31],[32],[34],[36],[38]],[["":!'""],[""I.|""],["",;""],[""i""],[""(`""],[""-\""°""],[""?)э""],[""g238\\/+гдз""],[""Lceft49~[]еёс""],[""bjloq1ЬЯофч""],[""Cah6&<>ЕЁЗСЭавлья""],[""BDEGJPSUYdkz57#=*$ВУн""],[""AFHKTZrvxАГКЛНПЪ""],[""VXps0ОРХр""],[""NORu£БДИЙийп""],[""MQn_€ТЧкхъю""],[""y@Цу""],[""бы""],[""Юм""],[""Ы""],[""wц""],[""W""],[""Мтш""],[""ЖФж""],[""Ш""],[""Щ""],[""щ""],[""m""]]]}


Теперь вернувшись в Construct 2, там где вы создали условие, напротив него пишем действие:

Код: Выделить всё
действие: объект Array > команда Load


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

Изображение

Теперь жмем Done и видим вот такую кашу. :facepalm3:

Изображение

И так, что же мы сделали? А сделали мы вот что, в условии у нас написано: "Когда создается объект Spritefont" (если проще то "когда он появляется на экране"). Далее идет то самое сложное действие, в котором множество всяких символов. Если быть точнее, то как я понял, здесь загружаются тонкие настройки расстояний между каждым из знаков. То есть этот код хранит информацию о каждом символе (или группе символов), где четко прописана дистанция между знаками. Идем дальше.

Сюда же в это событие добавляем еще одно действие:

Код: Выделить всё
действие: объект Spritefont > команда Set character width


В открывшемся окне, в первой строке Character, нужно между кавычками поставить пробел, чтобы было вот так " ". Далее ниже в строку Width вписываем значение 16.

Изображение

Жмем Done и сравниваем результат:

Изображение

Это мы сейчас определили расстояние между словами (не буквами), как бы отступ от одного слова к другому. Теперь нам нужно создать под-событие. Начинаем с под-условия:

Код: Выделить всё
под-условие: объект System > команда For


В открывшемся окне, в строке Start index пишем значение 0. Ниже, в строке End index вписываем выражение Array.Height. Его можно получить если в списке справа нажать на объект Array и в его выражениях выбрать Height.

Изображение

Жмем Done и сравниваем результат:

Изображение

Теперь для этого под-условия пишем действие:

Код: Выделить всё
действие: объект Spritefont > команда Set character width


В открывшемся окне, в строку Character вписываем выражение Array.At(1, loopindex)
А в строку Width (которая ниже), вписываем выражение Array.At(0, loopindex)

Изображение

Жмем Done и сравниваем результат:

Изображение

Это мы сейчас с вами создали цикл, который распределяет все буквы (расстояние между знаками), в соответствии с настройками записанными в том самом сложном коде из Массива. Если у вас все как на скриншоте, то смело запускайте игру и перед вами будет красоваться надпись с нормальными отступами:

Изображение

Работать с объектом Spritefont также просто, как и с объектом Text. Вы можете прямо во время игры писать любые надписи через команду Set text и задавать другие параметры. Не забудьте, что на рабочей области текст всегда будет отличаться от того, каким он будет в игре (я про отступы). Удачи! :ok:

На этом все!

Готовый пример с Русским шрифтом Pecita вы можете найти на моем складе.
Аватара пользователя

Администратор
Сообщений: 5374
Я тут с 05 сен 2012
Двиг: Construct2
Лицензия: Personal
Skype: c2community
VK: gabrielsailergray
Репутация 356 [ ? ]

Сообщение Spritefont (загружаем свой шрифт)
» 23 сен 2014, 14:13

все. оформил! :greeting:
Аватара пользователя

Администратор
Сообщений: 5374
Я тут с 05 сен 2012
Двиг: Construct2
Лицензия: Personal
Skype: c2community
VK: gabrielsailergray
Репутация 356 [ ? ]

Сообщение Spritefont (загружаем свой шрифт)
» 23 сен 2014, 15:46

Sailer писал(а):все. оформил!

Ух, как всегда круто! Спасибо! :good2:
Аватара пользователя

Участник
Сообщений: 138
Я тут с 02 фев 2014
Репутация 10 [ ? ]

Сообщение Spritefont (загружаем свой шрифт)
» 23 сен 2014, 17:52

Отличный урок :good2:
Изображение
Аватара пользователя

Участник + TDS
Сообщений: 106
Я тут с 14 фев 2013
Лицензия: Personal
Репутация 6 [ ? ]

Сообщение Spritefont (загружаем свой шрифт)
» 23 сен 2014, 19:24

Замечательный урок. Все получилось. Спасибо!

Изображение
Изображение
Аватара пользователя

Участник
Сообщений: 62
Я тут с 15 сен 2014
Репутация 13 [ ? ]

Сообщение Spritefont (загружаем свой шрифт)
» 21 дек 2014, 02:00

Всем привет!
А есть где описание эффектов для шрифта?
Спасибо!
Аватара пользователя

Участник
Сообщений: 36
Я тут с 26 ноя 2014
Репутация 1 [ ? ]

Сообщение Spritefont (загружаем свой шрифт)
» 21 дек 2014, 10:50

Banderos писал(а):Всем привет!
А есть где описание эффектов для шрифта?
Спасибо!

Каких эффектов ? Это тебе не PowerPoint и Word шрифт будет именно такой какой ты его загрузил.
Хотя есть стандартные эффекты для всего в левой панели инструментов
Аватара пользователя

Игродел
Сообщений: 3572
Я тут с 30 окт 2012
Двиг: C2\Unity
Лицензия: Personal
Skype: asmatrix116
VK: vk.com/red.gear
Репутация 202 [ ? ]

Сообщение Spritefont (загружаем свой шрифт)
» 22 янв 2015, 09:03

Думаю стоило указать, что лучше все события лучше создать в отдельном event sheet, а потом includ'ить в другие. Так появится возможность использовать шрифт в разных местах
Аватара пользователя

Участник
Сообщений: 36
Я тут с 19 дек 2014
Репутация 6 [ ? ]

Сообщение Spritefont (загружаем свой шрифт)
» 22 фев 2015, 21:07

[quote="Sailer"][/quote]
Эмм.... Всё делал по уроку, но с другим шрифтом. Настройки для массива брал из .txt того же шрифта, но у меня вышла такая каша
Изображение
Не знаете ли вы случайно как поправить и что изменить в Array Load для корректного отображения ?
Единственное правило в жизни, по которому нужно жить – оставаться человеком в любых ситуациях.
 В разработке...
Аватара пользователя

Участник
Сообщений: 1381
Я тут с 26 сен 2013
Откуда: Екб
Репутация 154 [ ? ]

Сообщение Spritefont (загружаем свой шрифт)
» 22 фев 2015, 22:13

AferisT писал(а):Не знаете ли вы случайно как поправить и что изменить в Array Load для корректного отображения ?

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

Администратор
Сообщений: 5374
Я тут с 05 сен 2012
Двиг: Construct2
Лицензия: Personal
Skype: c2community
VK: gabrielsailergray
Репутация 356 [ ? ]



Вернуться в Уроки по Construct 2

Сейчас эту тему просматривают

Зарегистрированные пользователи: нет зарегистрированных пользователей

Наверх