Как добавить свой шрифт в unity

Как добавить свой шрифт в unity

Шрифты (Fonts) можно в компонентах GUI Text или Text Mesh. Для этого нужно создать или импортировать файлы шрифтов.

Импортирование файлов шрифтов

Для добавления шрифта в проект, нужно положить файл со шрифтом в папку Assets. Unity автоматически определит и импортирует этот файл. Поддерживаются следующие форматы шрифтов: TrueType Fonts (.ttf) и OpenType Fonts (.otf).

Для изменения размера (Size) и других свойств шрифта, нужно выделить его файл в окне Project View. Откроется список доступных настроек в окне (Import Settings) инспектора (Inspector).

Свойство:	Функция:
Font Size	Размер шрифта. По аналогии с размерами шрифта в любом текстовом редакторе
Rendering mode	Способ рендеринга шрифтов, определяющий, каким образом Unity будет сглаживать символы.
Character	Набор символов, которые будут импортированы в текстуру шрифта.
В случае, если выбран вариант Dynamic, Unity будет использовать сам файл шрифта (а не текстуру с символами) для отрисовки символов (подробнее ниже).

Дополнительные настройки импорта для динамических шрифтов (dynamic fonts)

Свойство:	Функция:
Include Font Data	Свойство определяет, будет ли шрифт упакован при использовании режима Dynamic Font. Если включено, TTF файл со шрифтом будет включен в конечную сборку приложения. Но если предполагается, что этот шрифт уже установлен на устройства конечных пользователей, это свойство можно выключить. Стоит отметить, что на шрифты распространяются законы об авторских правах. По этой причине в сборку можно включать только те шрифты, на которые у вас есть лицензия, или которые вы создали сами.
Font Names	Список запасных шрифтов для “отката”, в случае если текущий шрифт не поддерживает определенные символы, или на устройстве пользователя нет требуемого шрифта (подробнее ниже).

After you import the font, you can expand the font in Project View to see that it has auto-generated some assets. Two assets are created during import: “font material” and “font texture”. Unlike many applications you might be familiar with, fonts in Unity are converted into textures, and the glyphs that you display are rendered using textured quads. Adjusting the font size effectively changes how many pixels are used for each glyph in this generated texture. Text Mesh assets are 3d geometry textured with these auto-generated font textures. You will want to vary the size of the font to make these assets look crisp.

Динамические шрифты (Dynamic fonts)

Если установить свойство Characters в настройках импорта шрифта как Dynamic, Unity не будет генерировать текстуру, включающую все символы шрифта. Вместо этого Unity будет создавать текстуру шрифта “на лету” с помощью движка FreeType. Преимуществом данного подхода является уменьшенный размер конечной сборки приложения и экономия видео памяти. Это особенно заметно при использовании стандартных шрифтов, которые часто уже присутствуют в системе (не требуется включать файл шрифта в сборку), при использовании азиатских языков или при больших размерах шрифта (обычный подход с использованием текстур шрифта приведет к существенному увеличению размеров этих текстур).

Если при отрисовке текста Unity не может найти указанный шрифт (если не было включено свойство Include Font Data и шрифт не установлен на устройстве пользователя), или шрифт не включает в себя требуемые символы (например при попытке отрисовать азиатские иероглифы с помощью латинского шрифта), Unity будет перебирать все шрифты из списка Font Names пока найдет шрифт, в котором присутствует требуемый символ. Если ни один из перечисленных шрифтов не подходит, Unity будет использовать собственный список заранее заданных запасных шрифтов. В нем есть наиболее общие международные шрифты, которые устанавливаются на текущую платформу по умолчанию.

Note that some target platforms (WebGL, some consoles) do not have OS default fonts Unity can access for rendering text. For those platforms, Include Font Data will be ignored, and font data will always be included. All fonts to be used as fallbacks must be included in the project, so if you need to render international text or bold/italic versions of a font, you need to add a font file which has the required characters to the project, and set up that font in the Font Names list of other fonts which should use it as fallbacks. If the fonts are set up correctly, the fallback fonts will be listed in the Font Importer inspector, as References to other fonts in project.

Default font asset

The default font asset is a dynamic font which is set up to use Arial. If Unity can’t find the Arial font on your computer (for example, if you don’t have it installed), it will fall back to a font bundled with Unity called Liberation Sans.

Liberation Sans looks like Arial, but it does not include bold or italic font styles, and only has a basic Latin character set — so styled text or non-latin characters may fall back to other fonts or fail to render. It does however have a license which allows it to be included in player builds.

Custom fonts

To create a custom font select ‘Create->custom font’ from the project window. This will add a custom font asset to your project library.

The Ascii Start Offset field is a decimal that defines the Ascii index you would like to begin your Character Rects index from. For example, if your Ascii Start Offset is set to 0 then the capital letter A will be at index 65 but if the Ascii Start Offset is set to 65 then the letter A will be at index 0. You can consult the Ascii Table here but you should bear in mind that custom font uses the decimal ascii numbering system.

Tracking can be set to modify how close each character will be to the next character on the same line and Line spacing can be set to define how close each line will be to the next.

To create a font material you will need to import your font as a texture then apply that texture to a material, then drag your font material onto the Default Material section.

The Character Rects section is where each character of your font is defined.

The Size field is for defining how many characters are in your font.

Within each Element there is an index field for the ascii index of the character. This will be an integer that represents the character in this element.

To work out the UV values you need to figure out how your characters are positioned on a scale of 0 to 1. You divide 1 by the number of characters on a dimension. For example if you have a font and the image dimensions on it are 256×128, 4 characters across, 2 down (so 64×64), then UV width will be 0.25 and UV height will be 0.5.

For UV X and Y, it’s just a matter of deciding which character you want and multiplying the width or height value times the column/row of the letter.

Vert size is based on the pixel size of the characters e.g. your characters are each 128×128, putting 128 and –128 into the Vert Width and Height will give properly proportioned letters. Vert Y must be negative.

Advance will be the desired horizontal distance from the origin of this character to the origin of the next character in pixels. It is multiplied by Tracking when calculating the actual distance.

Unicode support

Unity has full unicode support. Unicode text allows you to display German, French, Danish or Japanese characters that are usually not supported in an ASCII character set. You can also enter a lot of different special purpose characters like arrow signs or the option key sign, if your font supports it.

To use unicode characters, choose either Unicode or Dynamic from the Characters drop-down in the Import Settings. You can now display unicode characters with this font. If you are using a GUIText or Text Mesh, you can enter unicode characters into the Component’s Text field in the Inspector.

You can also use unicode characters if you want to set the displayed text from scripting. The C# compiler fully supports Unicode based scripts. You have to save your scripts with UTF–16 encoding. Now you can add unicode characters to a string in your script and they will display as expected in UnityGUI, a GUIText, or a Text Mesh.

Note that surrogate pairs are not supported.

Changing Font Color

There are different ways to change the color of your displayed font, depending on how the font is used.

GUIText and Text Mesh

If you are using a GUIText or a Text Mesh, you can change its color by using a custom Material for the font. In the Project View, click on Create > Material, and select and set up the newly created Material in the Inspector. Make sure you assign the texture from the font asset to the material. If you use the built-in GUI/Text Shader shader for the font material, you can choose the color in the Text Color property of the material.

UnityGUI

If you are using UnityGUI scripting to display your font, you have much more control over the font’s color under different circumstances. To change the font’s color, you create a GUISkin from Assets > Create > GUI Skin, and define the color for the specific control state, e.g. Label > Normal > Text Color. For more details, please read the GUI Skin page.

• To display an imported font select the font and choose GameObject > Create Other > 3D Text.
• You can reduce the generated texture size for fonts by using only lower or upper case characters.

Как делать шрифты для TextMeshPro

TextMeshPro уже давно часть Unity и его можно бесплатно установить через пакетный менеджер. Не буду описывать все преимущества перед старым текстовым компонентом, это примерно как, сравнивать Блокнот и Word.

Шрифт который используется по-умолчанию поддерживает основные символы, но он обычный/скучный/дефолтный, примерно как китовый объектив у фотоаппарата 🙂 Чтобы добавить в свою игру новый красивый/необычный/яркий шрифт, надо проделать все пару операций.

TMP Font Creator

TMP Font Creator

Итак, что необходимо:

• Сам шрифт TTF (OTF), не забывайте про лицензию ☝️
• Unity с установленным TMP
• Набор символов или unicode range, который будете использовать
• Надо понимать, что во многих шрифтах может не быть необходимых символов
• У Google есть бесплатные Noto Fonts которые тоже немного скучные, но поддерживают все языки 🙂

1. Добавляете файл шрифта в проект, открываете TMP Font Asset Creator и перетаскиваете его в поле Source Font File
2. Теперь можно выбрать набор символов, для этого есть меню Character Set:

Select character set type for TMP

Select character set type for TMP

Всё что идёт до Custom Range — понятно, это разновидности ASCII и символы. После это опции где можно выбирать откуда брать символы: из файла, просто перечислить в поле, указать промежуток, последовательность и т. д.

1. Выберем Unicode Range (HEX) и укажем, например 0020-007F — это базовые латинские символы, ренжи можно указывать через запятую
2. Теперь можно нажать Generate Font Asset

Окно после настроек и генерации шрифта, должно выглядеть как-то так:

Complete font generation for TMP

Complete font generation for TMP

• Из указанного ренжа было добавлено 95 из 96 символов, не добавился 007F — ␡, его нет в этом шрифте.
• В результате, для атласа 512×512 получился Point Size = 69, потому что в настройках было указано Auto Sizing.
• Можно указать размер шрифта вручную, но тогда надо следить чтобы все влезли в атлас и при необходимости увеличить размер атласа.
• Также, можно разбить свои шрифты на несколько ассетов, например, сделать один (базовый) с часто используемыми символами, второй с математическими знаками, третий с армянским языком. И при необходимости TMP сам будет использовать нужный атлас. Для этого к базовому ассету нужно добавить поддержку остальных:

TMP fallback view

TMP fallback view

Как сделать поддержку Emoji в Unity, я уже писал. Ещё недавно на форуме один товарищ опубликовал свое решение проблемы с модификаторами в эмоджи. Напомню, что до сих не работают модификаторы, т. е. если вы сделаете атлас с эмоджи, то всякие флаги, цвет кожи и т. п. будут отображаться некорректно. Автор TMP обещал всё это допилить к версии 2019.3, но пока этого нет. Вариант с форума работает правильно.

Разные unicode ranges для создания своих шрифтов можно подглядеть тут.

Растровые шрифты в Unity3D

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

Данная заметка едва ли будет интересной и полезной для тех, кто с Unity «выпивал на брудершафт». Но для новичков, таких как я — это очень полезный и важный материал.

Чем глубже я знакомлюсь с Unity и пытаюсь его понять, тем больше я не понимаю его, и отрицательных эмоций в отношении Unity становится все больше и больше. Но, пожалуй, я сейчас не буду ныть о том, какой Unity плохой и сколько нужно времени и сил, чтобы постоянно доделывать недостающий функционал. Может быть позже, когда чаша негодования будет переполнена — я обязательно напишу об этом отдельно.

Сегодня я хочу рассказать лишь о маленькой части недостающего функционала: нативной поддержке растровых шрифтов в стандартном GUI Unity. Конечно же, поддержка таковых имеется! Но, как всегда, внезапно оказалось, что нет определенного решения для создания внедрения растровых шрифтов в Unity.

Введение в суть

В новом GUI Unity, который появился сравнительно не давно, есть такое понятие как Canvas — собственно это некоторое плоское пространство, в пределах которого рисуются любые GUI элементы. Среди этих элементов есть и текстовое поле — тут все просто и понятно. У этого текстового поля все как у любых других текстовых полей: шрифт, размер, выравнивание и другие замечательные настройки, которые позволяют настроить текст на свой вкус и цвет.

Но когда дело доходит до выбора шрифта — оказывается, что доступен всего лишь один стандартный шрифт «Arial», а где же все остальные шрифты, которые установлены в нашей системе?

Дело тут в том, что мы работаем с движком, который рендерит картинку аппаратно, а видео карты, как мы знаем, не умеют рисовать вектор — чем по сути является любой шрифт. Конечно, можно вектор преобразовать в полигоны и рисовать их, как 3д картинку (как настоящий вектор), но в рамках текста — это будет достаточно дорогой операцией. То есть, становится очевидно: тот единственный шрифт «Arial», что доступен по умолчанию — это не что иное, как растровый шрифт оригинального «Arial» шрифта. �? далее возникает лишь один вопрос, как сделать свой растровый шрифт?

Суровая реальность

Естественно, первое о чем я подумал: с таким большим количеством разработчиков на Unity и не только — все эти проблемы с генерацией шрифтов, это как слону дробина! Должно же быть готовое решение!

�? вот оно решение: Bitmap Font Tools — всего за $39.99! Плати и наслаждайся!

Если посмотреть промо-видео к данному расширению — то выглядит все так, как я и хотел бы видеть, но не платя лишние $40 стороннему разработчику, а из коробки, прямо в Unity — как встроенная возможность!

�? ценник на расширение как бы сразу намекнул — хочешь сэкономить время и не лезть в глубокие анналы, заплати и спи спокойно! Но, я, как вы знаете — я простых путей не ищу.

Есть, конечно, расширения для импорта шрифтов и по дешевле и по дороже. Потом я нашел и вовсе бесплатное, но было уже слишком поздно! Вызов принят.

А что-же генераторы шрифтов, неужели они не могут сделать шрифт сразу в необходимом формате для Unity!? К сожалению, не могут. Политика разработчиков генераторов шрифтов такова, что движки появляются и исчезают постоянно, а поддерживать формат каждого из них — это не простая задача, требующая определенных трудозотрат. Поэтому разработчики генераторов шрифтов (особенно бесплатных генераторов шрифтов), предпочитают поддерживать только базовые форматы (стандарты) — это легко и надежно. А разработчики движков, уж будьте добры, сами напишите импортер из базового формата в свой формат шрифта. Все просто и логично!

Но с разработчиками Unity что-то явно не так, раз они решили оставить решение этой базовой задачи на усмотрение своих пользователей. �? это при такой-то цене на движок!?

Погружение в технические тонкости

Что же, раз уж разработчики Unity оставили решение этой задачи на наше усмотрение, тогда будет весьма полезно разобраться в матчасти этого вопроса. Хотя бы ради того, чтобы понимать, за что мы должны заплатить в очередной раз свои кровные, покупая очередное расширение для Unity от сторонних разработчиков.

К сожалению, материала по этому вопросу оказалось не так много, как хотелось бы. А из материалов на русском языке, мне попалась только одна статья: «Custom font в Unity3D»

Внимательно изучив статью, моя рука стремительно протянулась к лицу, дабы воссоздать емоджи «рукалицо» в реальной жизни!

Если вы еще не знакомы с выше обозначенной статьей, то не спешите её читать, я перескажу её суть: в статье достаточно подробно рассказывается, как создать свой растровый шрифт и как замаппить его в Unity. То есть, связать отдельные регионы на изображении с отдельными символами и/или их кодами. Вся эта процедура напоминает текстурирование какой-нибудь модели, только текстурные координаты высчитываются в «уме» и вбиваются вручную в нужные поля. Все это выглядит терпимо и доступно если речь идет о 10 символах, а если нужно сделать 90 символов? А если нужно добавить поддержку нового языка с новыми символами!? В общем, никогда не делайте так, как рассказано в статье! Пусть эта статья будет лишь настольным пособием о том, как это все работает и не более того.

В итоге, очевидно: нужно брать уже готовый импортер шрифтов! Покупать пару скриптов за весьма ощутимые деньги — не хочется, а бесплатные могут устареть или иметь проблемы с поддержкой новых версий Unity, поэтому на них полагаться немного боязно. Если честно, то мне вообще боязно тащить все подряд расширения и библиотеки в свой проект — чем их больше в проекте, тем страшнее, что с каждым новым обновлением Unity они могут, и будут ломаться и отваливаться.

В общем, я уже зашел слишком далеко и пути обратно нет. Время написать свой импортер растровых шрифтов!

�?мпортер Bitmap шрифтов для Unity

�? так, изучив статью на Хабре и исходные данные из генераторов шрифтов, стало понятно, что нужно просто перебрать полученные данные и построить на их основе шрифт в формате Unity. Сам шрифт Unity хранится в виде бинарных данных, и чтобы корректно его создать и использовать, следует работать с ним прямо в редакторе Unity. Проще говоря, нужен некоторый скрипт, который сможет прочитать текстовый файл, и записать эти данные в объект шрифта Unity.

Ранее я работал с форматами шрифтов Starling — этот формат представляет собой обычный XML файл, в котором записана вся информация о символах и их расположениях на картинке. У Unity тоже есть такой формат данных, который представляет собой текстовый файл с точно такими же данными, как и у Starling, разница лишь в том, что этот текстовый файл не содержит XML тэгов. Я так и не нашел информации о том, как называется этот формат, везде он обозначался, как текстовый формат Unity, или что-то вроде этого.

Вначале я хотел сделать импортер шрифтов для формата Starling, но потом подумал: раз уж я работаю с Unity, то нужно сделать импорт из формата данных для Unity, и не вмешивать сюда Starling. Хотя, признаюсь, из формата Starling было бы проще импортировать, так как имеются нативные инструменты для чтения и парсинга XML данных. �? вот опять же — зачем придумывать какой-то новый формат данных, пусть и на базе обычного текста, когда можно было бы использовать уже какой-то готовый формат!? В общем, Unity — это находка для любителей копаться в редакторах, писать расширения и всячески настраивать среду разработки под себя.

В итоге я решил не рассказывать и не показывать фрагменты кода о том, как написать свой импортер шрифтов для Unity, а просто выкладываю то, что у меня получилось и предлагаю вам воспользоваться уже готовым решением.

• AntFontImporter.cs — *.zip, 3,3Kb

• Всего лишь один скрипт и никакой лишней шелухи, лишних пунктов меню со ссылками и т.п.
• Простой и понятный код.
• Простое использование.
• Никаких ограничений и абсолютно бесплатно!

Как использовать?

Теперь осталось разобраться только с тем, как создать свой растровый шрифт и как импортировать его в Unity.

Для генерации шрифтов существует множество платных и бесплатных программ:

• Littera — бесплатный генератор шрифтов, позволяющий настраивать внешний стиль. Работает онлайн, не требует установки. Удобно если нужно сгенерировать какой-нибудь простой шрифт с простыми эффектами.
• Glyph Designer — платный генератор шрифтов, позволяющий настраивать внешний стиль, вроде как имеет чуть больше возможностей и настроек. Требует установки. Доступен для Mac и Win.
• ShoeBox — бесплатный, не умеет генерировать шрифты, но зато ловко разрезает картинку с буквами и готовит из нее растровый шрифт. Требует установленный Adobe AIR.
• А так же, подойдут любые любые другие генераторы шрифтов, которые умеют выгонять данные в текстовом формате для Unity.

Я люблю делать шрифты руками — так как это позволяет более точно получать визуальный стиль, отвечающий моим предпочтениям, поэтому я остановился на ShoeBox. Вообще ShoeBox незаменимая программа для разработчиков игр — она позволяет автоматизировать решение многих рутинных задач, с которыми часто приходится сталкиваться. Но подробнее об этом вы можете узнать на официальном сайте.

Шаг 1: Первое, что нужно сделать — это установить и запустить программу. После запуска ShoeBox переходим на вкладку GUI, нажимаем правой кнопкой мыши на «Bitmap Font» — откроются базовые настройки, в поле «Template» сразу следует выбрать формат «FNT Unity». Закрываем окно, применяя изменения. После чего нажимаем и удерживаем некоторое время левую кнопку мыши на иконке «Bitmap Font», до появления сообщение «Copied Text to Clipboard!». Это значит, что программа скопировала в буфер обмена текст, представляющий из себя набор символов, которые мы хотим растеризировать.

В расширенных настройках для «Bitmap Font» в поле «Txt Chars» можно задать желаемый набор символов для растерзании — удалив лишние или добавив новые, например русские.

Шаг 2: Когда необходимый набор символов оказался в буфере обмена, нужно перейти в свой любимый растровый редактор, например в Photoshop, создать там текстовое поле, настроить его визуальный стиль и вставить содержимое буфера обмена.

Скорее всего ваше текстовое поле растянется до таких размеров, что окажется за пределами холста. Нужно увеличить холст, чтобы текстовое поле помещалось в него целиком. �? после этого сохранить получившееся изображение в *.png.

(Важно! ShoeBox не умеет распознавать буквы на картинке, поэтому буквы должны быть в одну строку. Так же важно убедиться, что ни один символ не пропущен, например, если в используемом шрифте каких-то символов не хватает. Если в используемом шрифте отсутствуют некоторые символы, то их следует исключить из строки «Txt Chars» в настройках ShoeBox, либо дорисовать вручную, соблюдая порядок. В противном случае, отсутствующие символы нарушат распознание картинки в ShoeBox, и программа не свяжет распознанные регионы с заданными символами в правильном порядке, и как результат, в место нужных символов будут отображаться совсем другие.)

Шаг 3: После того, как исходный *.png готов, просто перетягиваем его на иконку «Bitmap Font» в ShoeBox. В зависимости от формата и размера графического файла может понадобиться разное время, чтобы ShoeBox его распознал, разрезал и обработал. Но когда работа будет проделана перед вами откроется окно с результатом.

Далее, следует убедиться, что все символы связанны правильно, а так же настроить кернинг и высоту линии — это все делается индивидуально на ваш вкус и цвет в настройках. Когда все будет готово, нажимаем «Save Font» и получаем два новых файла: пережатая картинка с буквами и файл с данными о расположении регионов-букв на этой картинке.

Шаг 4: Перемещаем полученные файлы в проект Unity в любую удобную папку подпапки Assets.

А скрипт AntFontImporter.cs перемещаем в папку Libraries или в любую другую папку, где у вас находятся сторонние вспомогательные скрипты.

Шаг 5: После того, как скрипт AntFontImporter и шрифт добавлены в Unity проект, нужно выделить файл данных шрифта, вызвать к нему контекстное меню и выбрать пункт «Convert FNT to Font». После успешной конвертации шрифта в этой же папке появятся два новых файла: материал шрифта и сам шрифт. Но если что-то пошло не так, то проверьте лог консоли Unity на предмет шагов конвертации шрифта и возможных ошибок.

Шаг 6: Теперь остается только создать текстовое поле, назначить полученный шрифт и материал для этого поля, установить другие важные настройки, например цвет и проверить результат.

�? напоследок несколько советов:

Совет #1: Не используйте Size для определения размеров шрифта, вместо этого следует использовать Scale.

Совет #2: �?спользуйте Scale для текста, только если вы хотите получить какие-либо эффекты. Но если вам нужны тексты разных размеров, то следует заготовить несколько разных растровых шрифтов с заранее заданными размерами. Такой подход положительно скажется на производительности и на качестве отображения самих текстов.

Заключение

В последнее время Unity все чаще и чаще стал преподносить мне неприятные сюрпризы вроде того, что я описал в этой статье. �? вместо того, чтобы заниматься разработкой игры, мне приходится решать какие-то технические проблемы Unity или отсутствие какого-то базового функционала.

Помните месяц назад я обещал вернуться к еженедельным записям о ходе разработки!? Так вот, этого не получилось не потому, что лето продолжается, а потому, что я занимаюсь изучением подводных камней в Unity и изобретением костылей для того функционала, который в Unity должен быть в базе, но его нет!

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

Конечно, многие проблемы, с которыми я столкнулся — легко решаются за счет покупки сторонних ассетов/плагинов, но в бюджет разработки я не закладывал столь большие траты на тот функционал, который ожидал получить в комплекте с Unity, поэтому теперь приходится выкручиваться по разному.

Custom font в Unity3d

Как-то при подготовке своего проекта в Unity3d у меня возникла необходимость использовать Bitmap font (он же растровый шрифт). Я очень обрадовался, когда обнаружил в Unity инструменты для создания такого шрифта. Но спустя некоторое время понял, что процедура эта отнюдь нетривиальна из-за отсутствия какой-либо документации на этот счёт.

Эта статья о том, как собрать в Unity готовый к использованию Custom Bitmap Font. Урок довольно подробный и затрагивает работу в Photoshop. Заинтересовавшихся прошу под кат.

Введение

Как объясняет wiki, растровый шрифт — это фактически набор растровых изображений всех используемых символов. То есть, в первую очередь нам понадобится текстура, содержащая изображения всех нужных нам символов. В этом примере я ограничусь только цифрами и парочкой вспомогательных знаков, однако использовать такую технику можно на любое количество глифов.

Подготовка текстуры

Наш шрифт будет содержать 14 символов: цифры от нуля до девяти, знаки «+», «-«, точка, разделяющая дробную и целую части и пробел. Так же оставим парочку резервных мест для символов, которые мы, возможно, захотим добавить в будущем. Итого 16 слотов на текстуре.

Наиболее оптимальным образом расположить эти 16 слотов на текстуре можно таким способом: использовать 4 столбца и 4 строки

Для подготовки примера я использовал Photoshop, и по ходу урока я так же буду давать некоторые пояснения к своим дейсвиям в нём. Итак, открываем редактор изображений и создаём новый документ, размером 400 на 400 пикселей. Рзамер текстуры на данном этапе особо не критичен, главное, чтобы он был не слишком маленьким. Конечный размер текстуры мы выставим уже в Unity в самом конце урока.

Для удобства работы я советую включить отображение линейки, сетки и направляющих (ruler, grid и guides). Хоткей для отображения сетки Ctrl+’ для направляющих Ctrl+; для линейки Ctrl+R. Для создания направляющей просто перетащите её с линейкина документ. Настройки всех этих помощников находятся в меню Edit -> Preferences -> Units & Rulers

Далее нам предстоит заполнить текстуру содержанием в виде, собственно, символов. В качестве основы своего растрового шрифта я использовал бесплатный шрифт Unispace. Вызываем инструмент «Text» горячей клавишей Shift+T и вводим наш первый глиф. Все символы должны быть точно позиционированны по центру каждого из 16 слотов (тут нам пригодится вспомогательная сетка). После ввода первого символа (в нашем случае это ноль) жмём Enter для подтверждения ввода. Чтобы правильно позиционировать слой, нажатием клавиш Ctrl+T вызываем инструмент «Transform» и перемещаем слой в нужное место, руководствуясь вспомогательной сеткой.

Проделываем эту нехитрую операцию со всеми нужными нам символами и — вуаля!

Следующим этапом мы объединим все получившиеся слои с цифрами и знаками в один общий слой. Для этого выделим их на панели Layers и нажмём Ctrl+E. Главное случайно не зацепить слой фона, ведь тогда пропадёт вся информация о прозрачности. После этого начинается самая интересная и творческая часть работы. Настраивание эффектов слоя по вкусу. Подробно здесь я не буду её описывать, каждый решит сам, что ему нравится и сделает на свой лад. Что получилось у меня, можно увидеть на картинке ниже.

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

В альфа-канале будет храниться информация о прозрачности. Черные пиксели отвечают за полную прозрачность, белые — наоборот. Оттенки серого же создают эффект различных степеней полупрозрачности. В моём случае вокруг символов имеется мягкая черная тень, которую я хотел бы видеть плавно затухающей по мере распространения в стороны от символов. Чтобы добиться такого эффекта, мы как раз и будем использовать полутона в альфа-канале.

Свежепродублированный слой станет основной нашего альфа-канала. Для начала нам надо запечь все его эффекты, то есть растеризовать слой. Для этого я обычно создаю новый пустой слой, выделяю его и слой, с которым я сейчас работаю — и объединяю их в один (Ctrl+E).

У нас получился растеризированный слой с информацией о прозрачности. Теперь осталось только перенести эту информацию в альфа-канал. Для этого, удерживая Ctrl, щелкаем по ионке слоя в панели Layers — получая выделение по маске прозрачности, и, на панели Channels создаём новый канал, опять-таки удерживая Ctrl. Кнопка создания нового канала находится справа внизу панели возле кнопки удаление канала, с корзинкой. Получившийся канал оказался инвертированным — не беда. Комбинацией Ctrl+I восстанавливаем нормальное положение вещей.

Альфа-канал готов. Текстура, в общем-то, тоже. За исключением того, что белый слой фона мешает правильному отображению тени вокруг символов. Я раскрасил его в цвет тени.

Сохраняем текстуру в любимый формат, поддерживающий альфа-канал (я использую TGA-32bit) и переходим к следующему этапу.

Подготовка к созданию шрифта в Unity

Импортируем текстуру в Unity3d. Для этого в панели Project находим папку Assets и из контекстного меню вызываем Import New Asset… Находим файл с нашей текстурой. Готово.

Настройки текстуры довольно очевидны, и я не стану подробно расписывать их. Упомяну лишь, что вам необходимо выставить вменяемый размер текстуры. В нашем случае вполне подойдёт 256×256 px.

Далее в том же контекстном меню создаём новый материал и ассет шрифта (Create -> Material, Create -> Custom Font). В настройках материала выбираем только что импортированную текстуру. Также материал должен поддерживать прозрачность. Поэтому тип материала мы подбираем соответствующий: Transparent/Diffuse.

Наконец, мы подошли к самой сути урока. У нас имеется настроенный материал с красивенькой текстурой, и теперь надо как-то собрать из него готовый к использованию в Unity растровый шрифт.

Растровый шрифт в Unity

По непонятной причине инструмент создания растрового шрифта в Unity сделан крайне неудобно. Впридачу, никакой документации по нему в сети найти не удалось. Всё, что мы имеем, это невнятная панель с настройками:

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

Ascii Start Offset — целое число, отвечающее за сдвиг таблицы Ascii-кода. Пример: устанавливаем значение 10, и теперь доступ к символу «A» с кодом 65 можно получить через код 75.
Kerning — интервал между буквами.
Line Spacing — расстояние между строками текста.
Default Material — материал с текстурой шрифта. Мы его уже создали.
Character Rects — массив настроек маппинга для каждого символа.

Именно Character Rects нам интересней всего.

Size — размер массива (количество символов в шрифте).
Element x — элемент массива Character Rects с настройками конкретного символа.
Index — Ascii-код символа с учётом Ascii Start Offset.
UV — координаты и размеры символа на текстуре.
X, Y, W, H — координаты нижнего левого угла участка текстуры с символом, а так же ширина и высота этого участка.

Здесь необходимо сделать небольшое отступление в теорию маппига, в спойлере имеется краткое наглядное пособие.

Краткая пояснялка в маппинг

Маппинг текстуры — процесс нанесения текстуры на полигональные поверхности в компьютерной графике.

Текстурные координаты участка с цифрой пять будут такими: X = 0.25, Y = 0.5, H = 025, W = 0.25

Vert — координаты и размеры полигона, на который будет маппиться символ
X, Y, W, H — координаты нижнего левого угла полигона с символом, а так же ширина и высота этого полигона. В общем случае x и y выставляем в 0, w и h длина и ширина полигона, причем h отрицательное число. Не спрашивайте, почему, я так сам и не понял.
Width — что-то вроде межбуквенного интервала для конкретного символа.
Flipped — поворачивает текстуру на 90 градусов относительно полигона (может использоваться для вертикальных шрифтов).

Итак, основные параметры должны быть ясны. Приступим к маппингу наших циферок. Для начала взглянем на таблицу Ascii-кодов.

Как несложно заметить, каждому символу соответствует уникальный Ascii-код. Наприер, код 43 принадлежит знаку плюс. И вот теперь мы приступаем к тяжелой муторной работе по вписыванию координат в соответствующие поля. Ниже дана картинка, на которой показано, как были замапленны знаки плюс и минус.

После того, как все символы будут замапленны, можно поздравить вас с выполнением очень трудной задачи: шрифт готов и теперь его можно использовать!

Создадим в сцене проекта пустой объект. Назначим ему компонент «TextMesh» и выберем в настройках наш шрифт.

Послесловие

Создание растровых шрифтов в Unity — очень непростая, но интересная работа. Хочется верить, что, пройдя этот урок, вы узнали для себя что-то новое и полезное. Отсутствие такого описания в своё время сильно тормознуло продвижение моего проекта. И я надеюсь, что этот текст поможет сэкономить кучу времени всем, кому однажды понадобится создать кастомный фонт в Unity.