Приступим. Для начала вам нужно найти в интернете нужный шрифт. В качестве примера возьмем вот этот шрифт под названием Pecita с сайта www.1001fonts.com. Если по каким-либо причинам он там не скачивается, то берем его отсюда:
pecita.zip- (466.51 КБ) Скачиваний: 1048
Шрифт полностью бесплатный! Его можно использовать в коммерческих целях, о чем нам говорит прилагаемый ".txt" файл внутри архива. И так, после скачивания распаковываем архив и ставим новый шрифт в Windows. Не знаете как ставить? Все просто! Открываете шрифт и там нажимаете на кнопку "Установить"
Теперь скачиваем утилиту Give Your Fonts Mono. Последнюю версию утилиты можно взять отсюда. Если у вас нет аккаунта на сайте Scirra.com, то скачайте отсюда:
- GiveYourFontsMono_v2_3.zip
- (321.31 КБ) Скачиваний: 3687
Запускаем утилиту. Откроется вот такой экран:
Теперь нам нужно выбрать загруженный шрифт для этого слева вверху кликаем по кнопке 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 и видим вот такую кашу.
И так, что же мы сделали? А сделали мы вот что, в условии у нас написано: "Когда создается объект 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 и задавать другие параметры. Не забудьте, что на рабочей области текст всегда будет отличаться от того, каким он будет в игре (я про отступы). Удачи!
На этом все!
Готовый пример с Русским шрифтом Pecita вы можете найти на моем складе.
