Урок: Как легко сделать свой шрифт (для игры и для компьютера вообще)

Урок: Как легко сделать свой шрифт (для игры и для компьютера вообще)


1. Для чайников... э-э, в смысле, Введение. Компьютерная графика и шрифты

Все компьютерные изображения делятся на два типа: растровая графика и векторная.
Растровая - это все наши фотки, аватарки, BMP, GIF, JPG, PNG - то есть, большинство картинок в интернете и на компьютере. Растровое изображение хранится как прямоугольная матрица, состоящая из пикселей - "кирпичиков" разного цвета.
Такая картинка сразу получается со сканера или веб-камеры, легко рисуется и быстро обрабатывается программами. Но у неё есть один недостаток: при увеличении появляются "зубцы", а при уменьшении теряются детали.
Векторное же изображение хранится как набор простых объектов (отрезки, окружности и т.д.) с указанием их координат и размеров. Это позволяет рисовать линии, которые не портятся при масштабировании. Например, круг с центром в точке 0,0 и радиусом 100 - можно в 1000 раз уменьшить и увеличить, он не превратится ни в точку, ни в квадрат, ни в зубчатое непотребство. Просто число радиуса будет меняться, а форма круга останется формой круга.

Поэтому компьютерные шрифты в современных операционных системах кодируются в векторной графике. Контур буквы рисуется как замкнутая линия по точкам с заданными координатами.
Формат TTF - True Type Font - основной формат шрифтов для операционной системы и документов Windows. True означает настоящий, истинный, точный шрифт. Поскольку это векторный формат, он рисует символы в любом размере с одинаковой точностью.

Но в играх, типа Elder Scrolls, разработчикам проще использовать растровую графику для шрифта, ведь его размер в игре не меняется.
А в тех играх, где размер интерфейса можно менять, разрабы могут всё равно делать его в растровой графике. Просто, чтобы не было искажений при масштабировании, для каждого масштаба делают свою отдельную картинку. И компьютеру быстрее взять нужный готовый рисунок, чем одну и ту же матрицу масштабировать на ходу.

Кстати, рисуя трёхмерные объекты (например, в игре), компьютер задействует и векторную графику, и растровую. Каркас модели делается как векторная трёхмерная графика. Затем на этот каркас натягивается "шкурка" - текстура. Текстура - это уже растровое изображение.
Поэтому у текстур бывает разное "разрешение" - т.е., разбивка на кирпичики более мелкие или более крупные. Высокое разрешение выглядит точнее: позволяет рисовать более мелкие и гладкие детали. Но требует больше памяти и времени на прорисовку: много мелких кирпичиков. У текстуры более низкого разрешения кирпичиков меньше, места в памяти она занимает меньше и обрабатывается быстрее, но выглядит грубее.


2. Как вытащить шрифт из игры и что с ним можно сделать

Оригинальный шрифт игры (Morrowind, Oblivion - а насчёт других не проверял) хранится как растровая картинка в файле .TEX (вместе со вторым файлом, .FNT, где хранятся указатели на отдельные буквы в той картинке).
Программой FontReader 2 мы можем преобразовать TEX в обычную картинку BMP, как сказано здесь:
https://www.fullrest.ru/forum/topic/35429-shrifti-morrowind/page__view__findpost__p__763811
Дальше можем изменять этот BMP в любом графическом редакторе.

(Рекомендую поставить себе Paint.NET, и можно навесить на него кучу плагинов. В хозяйстве всегда пригодится. Он намного дружелюбнее Фотошопа, а по возможностям уступает ему ненамного).

Изображение букв в этом BMP можно менять как угодно. Главное, чтобы размер картинки в целом оставался степенью двойки, т.е. 256 на 256, 512*512 или (максимум для Морровинда) 1024*1024. Другие размеры матрицы игра не поймёт правильно.

Переделанный BMP можно преобразовать тем же FontReader-ом обратно - и вот у вас игра с вашим собственным шрифтом!

Если же при этом возникают какие-то проблемы... Или, например, хочется ещё поставить этот шрифт себе в систему - и писать на нём свои документы!.. - то стоит преобразовать наш BMP - растровый формат - в шрифт векторного формата, а именно TTF.

Кстати, шрифт TTF довольно легко и удобно редактировать. (Например, программой FontLab). А затем из TTF можно сделать снова шрифт игрового формата (FNT + TEX). Это достигается программой Oblivion Font Generator 1.13.


3. Как из растрового шрифта (напр., из игры) сделать векторный

Например, программой Font Creator. Можно вообще нарисовать буквы самому, на бумажке; отсканировать их и из скана импортировать в шрифт. Например, в каком-нибудь распространённом шрифте типа Arial вы можете заменить символ копирайта (или, скажем, доллара) на собственноручно нарисованный кукиш.
И затем, просматривая сайты в интернете, наслаждаться своими кукишами.

(И можно редактировать уже существующий шрифт TTF - например, программой FontLab. Запросто изменяете шрифты, что установлены в вашей системе Windows - или те, что можно скачать из интернета бесплатно - тысячи их!

Для импорта картинок в векторный шрифт нужно учесть три вещи:
(1) Программа должна видеть точные края букв на вашей картинке. (Чтобы точно преобразовать их в кривые векторного изображения). Поэтому у букв должны быть резкие чёрно-белые края, не сглаженные полутонами.
(2) Должны быть чёрные буквы на белом, не наоборот. (Разве что и шрифт у вас будет в стиле негатива: белое на чёрной подкладке).
(3) Буквы импортируются по одной. Увы, сразу весь шрифт из картинки не закачаешь: программа просто не поймёт, где какая буква.

Поэтому, чтобы преобразовать шрифт из Морра или Обливы, делаем так:
(1) Получили матрицу шрифта в формате BMP, как описано по ссылке выше.
(2) Открыли это BMP в графическом редакторе (я опишу работу в Paint.NET).
(3) Видим, что матрица - белые буквы на чёрном. Нужно наоборот - поэтому применили "Коррекция - Инвертировать цвета". Теперь чёрное на белом.
(4) Чтобы редактировать и конвертировать буквы с меньшими искажениями, увеличим размер матрицы раз в 16 (если комп слабенький и слишком тормозит, тогда хотя бы в 4 или 8 раз - главное, кратно двойке, чтобы не внести растровых искажений).
Для этого применяем "Изображение - Изменить размер" и ставим Процент: 1600%.
(5) Видно, что края букв размытые. Для конвертации в линии, нужно сделать их максимально чёткими и контрастными.
Чтобы уменьшить размытость до минимума, можно попробовать "Эффекты - Для фотографий - Резкость", но, к сожалению, это усилит неровности - края становятся более волнистыми, чего нам не надо.
Поэтому применяем "Коррекция - Кривые". По сути, это продвинутый способ регулировать яркость-контрастность. Например, можно задавать, насколько тёмным будет тёмное, насколько светлым светлое. А можно так задать кривую преобразования, что, например, светлое тоже станет тёмным, а самым светлым окажется бывшая полутень. То есть, можно как угодно распределить степень изменения цвета.
В данном случае, мы просто сделаем тёмные участки совсем чёрными, светлые совсем белыми, а промежуток между белым и чёрным постараемся сделать поменьше. Главное, следить, чтобы детали букв сохраняли нормальную форму и становились отчётливее, а не уползали в черноту или белоту.
(Font Creator и сам позволяет разделить чёрное и белое, но он делает это грубо "разрезом", так что удобнее заранее сделать это "Кривыми").
(Помним: насколько жирными делать буквы, зависит от того, как они дальше будут использоваться. Если шрифт будет размываться (например, в игровой программе), то визуально буквы могут немножко "похудеть". Но, если мы сконвертируем их через Oblivion Font Generator, то он их может сначала немножко размыть, сделать пожирнее. В общем, делаем по вкусу и потом проверяем на практике, что получится).

(6) Итак, изображение готово. Поскольку конвертация в векторный шрифт делается по одной букве, нарежем теперь матрицу на отдельные символы. Высота строк должна быть одинаковой, а вот ширина символов различается. Поэтому сначала прикинем, какой высоты (сколько пикселей) у нас получились строки.
Поскольку мы увеличивали матрицу в 16 раз, это должно быть число кратное 16. Двигаем курсор между 1 и 2 строками, и смотрим по строке состояния (внизу экрана), какие у него координаты.
Похоже, что высота строки - 480 (16*30). Проверяем: у нас в матрице 9 рядов букв, всего в высоту получится 9*480=4320. Нижний ряд букв кончается на... Нет, не 4320, больше похоже на 4608 (16*32). То есть, высота строки 512, в оригинале это было 32 пикселя.
Один из относительно простых способов нарезать изображение - добавить новый слой (он будет прозрачный) и в этом новом слое прочертить разделительные линии:
- В панельке "Слои" жмём "Добавить новый слой".
Обратите внимание, что все дальнейшие линии мы будем рисовать в новом слое - т.е., исходное изображение (сама матрица с буквами) останется нетронутым.
- Для удобства, включим "Вид - Линейка".
- В панельке Инструменты выбрали "Линия или кривая". Ширину линии ставим 1.
- У левого края начали линию с координаты (0, 512) и протянули её на правый край через весь экран и прокрутку и дотащили её до правого края и закончили её снова на координате 512. (За координатой следим по строке состояния в самом низу экрана). Нажали клавишу "Ввод" (Enter), чтобы завершить линию. Удобно это всё делать, увеличив масштаб, чтобы легче втыкать в нужную координату.
В идеале, нужно повторить линии через каждые 512 пикселей вниз (1024, 1536, 2048, 2560 и т.д.). Затем строки нарезать на буквы.
Но можно нарезать только те буквы, которые вам важны в создаваемом шрифте - например, только русские, если вы хотите добавить русские буквы в уже существующий шрифт, где есть нужные латинские и пр. Это, конечно, проще.
В итоге, выделяем линиями только 4 строки с русскими буквами.
Потом, тоже во втором слое, рисуем между буквами вертикальные отрезки. Они уже не должны быть точными: потом в редакторе шрифтов легко отцентрировать букву по ширине, хотя бы автоматически. Так что рисуйте бока у прямоугольничков хоть кривые и косые, лишь бы не задеть сами буквы.
(7) Когда нужная буква заключена в прямоугольничек, можно скопировать её так: в этом втором слое тыкаем в прямоугольничек инструментом "Волшебная палочка" ("Чувствительность" инструмента поставили 0%). Тогда выбирается область, ограниченная линиями вокруг места тыка. То есть, выбирается данный прямоугольничек. Теперь в панельке "Слои" выбираем нижний слой, обычно он называется Фон. В итоге, выбран рисунок данной буквы. Копируем его (Ctrl-C) и можем сразу вставлять в программу Font Creator, выбрав там нужное место в таблице символов.
Следующую букву скопируем так же:
- выбрали в панельке 2-й слой,
- прямоугольник Волшебной палочкой,
- перешли в 1-й слой, скопировали.

Итак, мы узнали, как переносить чёрно-белые рисунки из любой картинки в символы шрифта TTF.
Проще всего взять какой-нибудь готовый шрифт и заменить в нём только нужные вам буквы. Для этого запускаем программу Font Creator и, например, открываем шрифт из числа установленных в системе: File - Open - Installed Font. Загрузив нужный шрифт, в появившейся слева панельке выбираем работу с русскими буквами: Unicode - Cyrillic.
Если же в шрифте не было русских букв, добавляем для них место, выбирая в меню программы: Font - Properties (Шрифт - Свойства). На вкладке Ranges (Диапазоны) видим две кнопочки Edit (Редактировать) - первая для Юникода, вторая для кодовых страниц. Нажимая их, ставим галочки на "кириллице" - соответственно "Cyrillic and Cyrillic supplementary" и "Cyrillic (1251)".
Теперь у шрифта в панельке должно появиться "Cyrillic". Тыц туда, и видим перед собой табличку с русскими буквами. Выбрав определённую букву, жмём вставить (Ctrl-V) - и там появляется та картинка, которую мы на данный момент скопировали (из того прямоугольничка, что нарисован был в графическом редакторе).
И так далее: выбрали в редакторе 2-й слой, ткнули Волшебной палочкой в нужный прямоугольник, выбрали первый слой, скопировали букву. Перешли в программу Font Creator и вставили букву в нужное место.
...Хммм... Незадача. Если там уже была какая-то буква, то новая рисуется поверх неё... Тогда делаем так:
- Двойной щелчок по букве в таблице символов => открывается окошко с этой буквой.
- Выделяем её всю нажатием Ctrl-A (или потянув мышкой) и жмём Delete.
- На следующую букву переходим нажатием Alt-"Стрелка вправо".

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

Вставленные в шрифт буквы могут оказаться не совсем нужного размера. Не обязательно увеличивать их по одной: можно сначала все вставить, а потом выбрать их и поправить размер всем вместе.
Короче говоря, вставив нужные буквы в шрифт, экспортируем его - например, как файл TTF.
Ой!.. Пробная версия программы, 30 дней бесплатно... шрифты экспортировать не позволяет!.. (Ну, красавчики! У вас в меню написано "Экспорт файла", я в расчёте на это потратил кучу времени и сил... а теперь, когда всё готово и жму кнопочку - фигу мне?.. Ладно, ладно... Сейчас заплачу вам за программу!)


4. Что можно сделать с векторным шрифтом

Экспортировав шрифт TTF, можно окончательно его отредактировать - например, в FontLab-е: поправить контуры букв, их расположение, отступы и пр.

Готовый TTF можно установить в операционной системе: открыть в Проводнике (Windows Explorer) и нажать кнопочку "Установить" (Install). Теперь он будет в списке шрифтов - в программах типа Word, WordPad и пр.
Обратите внимание, что у шрифта может различаться имя файла и "внутреннее", системное имя. Например, вы взяли для редактирования шрифт "Magic Cyr.TTF", подставили в него другие буквы и результат сохранили под именем "Magic Cards.TTF". Имя файла у него новое, но внутри файла, имя самого шрифта вы не меняли. Таким образом, при установке этого нового шрифта он становится на место старого с тем же именем (в меню Word-а, например). Если вы хотите вернуть старый вариант того шрифта, устанавливаете его заново из старого файла.
Вроде, всё просто. Пробуйте - и разберётесь.
Как шрифт TTF преобразовать для Морровинда или Обливион - см. здесь:
https://www.fullrest.ru/forum/topic/35429-shrifti-morrowind/page__view__findpost__p__824354