Шрифты в играх: (почти) идеальные засечки, кернинги и иероглифы

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

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

FontTools

Светлое будущее наступило с PyPI-библиотекой fontTools, которая устанавливается через pip. Она работает на всех нужных нам платформах (в отличие от FontForge, где нам приходилось танцевать с бубном) и может открывать, создавать, писать таблицы в нужном формате. Но выбирать нужные таблицы, прописывать все значения, правильно копировать глиф — это уже сами. Проделываем те же фокусы, что и с FontForge.

from fontTools.ttLib import TTFont from fontTools.subset import Subsetter   def erase_not_used(font_path, source_file, symbols):     shutil.copyfile(source_file, font_path)      subsetter = Subsetter()     subsetter.populate(text=''.join(symbols))      font = TTFont(font_path)     subsetter.subset(font)     font.save(font_path)     font.close()      if subsetter.unicodes_missing:         # Это символы сердечек, пик и подобных. Они встречаются у нас в тексте, но их нет в исходных шрифтах         service_symbols = [(65024, 65039), (13, 13)]         missed_symbols = [sym for sym in subsetter.unicodes_missing                           if not any(beg <= sym <= end for beg, end in service_symbols)]         print(f'There are missing glyphs in source font: {missed_symbols}')

Subsetter умный и сам знает, что для составных глифов необходимо оставлять все его части. Более того, он оставляет данные о составном глифе только в виде информации о точках в таблице glyf, а в других таблицах вырезает упоминание. Основной плюс подобного вырезания в том, что в шрифте остаются все исходные таблицы со всеми кернингами, инструкциями и хинтами. Слияние многих шрифтов в один такого плюса лишено. Нужно за всем следить самим.

class ParsedFont(object):     def __init__(self, font_path):         self.__file_path = font_path         # Открытый текст - TTFont         self.font = None         # Интересующие нас таблицы         self.hmtx = None         self.vmtx = None         self.glyph_set = None         self.glyf = None         self.cmap = None         self.kern = None         self.os2 = None         # Таблица имён глифов, связь нового имени и имени в шрифте         self.cmap_prepared = None         # Связь имени глифа в шрифте и его unicode         self.name_uni = None          self._is_otf = False          self.__prepare()      def __prepare(self):         self.font = TTFont(self.__file_path)         # Пробел в конце не ошибка, таблица имеет тэг  "CFF "         self._is_otf = 'CFF ' in self.font         # Для otf-шрифтов другие таблицы, мы их не сливаем в один         if self._is_otf:             return          self.hmtx = self.font['hmtx']         self.vmtx = self.font['vmtx'] if 'vmtx' in self.font else None         self.vhea = self.font['vhea'] if 'vhea' in self.font else None         self.glyph_set = self.font.getGlyphSet()         self.glyf = self.font['glyf']         self.cmap = self.font['cmap']         self.kern = self.font['kern'] if 'kern' in self.font else None         self.os2 = self.font['OS/2']          self.cmap_prepared = {}         self.name_uni = {}         for table in self.cmap.tables:             for sym, sym_nm in table.cmap.items():                 sym_hex = hex(sym)                 hex_name = f'{sym_hex}'.replace('0x', '').upper()                 # Исправляем имена символов, так как почему-то в некоторых шрифтах решили сделать несовпадающими                 # ord(unicode) и glyph_name. Действительно, почему бы и нет                 # Но чтобы в текущем шрифте их найти нужно сохранить и первоначальное имя - будет хранится в synonims[0]                 true_name = f'u{hex_name}'                 syms_codes = self.cmap_prepared.setdefault(sym, {'name': true_name, 'synonims': []})                 if sym_nm not in syms_codes:                     syms_codes['synonims'].append(sym_nm)                 self.name_uni[sym_nm] = sym      @property     def is_otf(self):         return self._is_otf

Во время открытия шрифта подготавливаем таблицу cmap. В обычном случае давать имена глифам можно любые — это хоть и нужная информация, но стандарт имена никак не регламентирует. Можно хоть букву И назвать в шрифте «кракозябра» — и всё будет работать, на правильное использование и отрисовку шрифта это никак не повлияет. Но для слияния очень важно понимать, какой именно мы обрабатываем глиф, так как таблица у нас сводная. В нашем коде имя заменяется на f’u{Hex}, именно оно будет в подготовленном файле. И также надо сохранить исходное имя, чтобы потом найти информацию о глифе в других таблицах открытого шрифта.

Сбор информации о символе: копирование информации о точках:

from fontTools.pens.ttGlyphPen import TTGlyphPen def add_symbol(sym_ord: int, glyphs_info: Dict, font: ParsedFont):     glyph_link = font.cmap_prepared.get(sym_ord)     if glyph_link is None:         return None     glyph_name_font = glyph_link['synonims'][0]     glyph = font.glyph_set.get(glyph_name_font)      pen = TTGlyphPen(font.glyf)     glyph.draw(pen)     gl = pen.glyph()

Для копирования точек и кривых в fonttools есть класс TTGlyphPen: он возьмёт все контуры из глифа и скопирует информацию о компонентах. Но если не добавить в новый шрифт сами компоненты, мы получим в итоге пустой либо недостоверный символ (то же самое поведение, что при удалении лишних символов).

Сбор информации о символе: разбираемся с компонентами

    if gl.isComposite():         add_error = True         compound_names = {}  # component names         for gl_component in gl.components:             comp_sym_ord = font.name_uni.get(gl_component.glyphName)             if comp_sym_ord is None:                 break              sym_name = add_symbol(comp_sym_ord, glyphs_info, font)             if sym_name is None:                 break             compound_names[gl_component.glyphName] = sym_name         else:             add_error = False             # В новом шрифте возможно будет другое имя, заменяем его на него             for gl_component in gl.components:                 gl_component.glyphName = compound_names[gl_component.glyphName]         if add_error:             fallback_composite_add(gl, font.glyf)

Мы рекурсивно вызываем add_symbol, чтобы не пропустить глифы, которые включают в себя глифы, которые включают в себя глифы, которые… Ну вы поняли 🙂 Также обязательно заменяем имя глифа в информации о компоненте, так как в шрифт у нас попадает глиф с нормализованным именем.

Ещё один трюк — fallback_composite_add. Помните, как Subsetter красиво вырезал глифы, не записывая информацию в cmap и другие таблицы? Это как раз обработка такого случая.

from fontTools.ttLib.tables import ttProgram def fallback_composite_add(gl, glyf):     coords, end_pts, flags = gl.getCoordinates(glyf)     gl.coordinates = coords     gl.endPtsOfContours = end_pts     gl.flags = flags     del gl.components     gl.numberOfContours = len(end_pts)

Метод gl.getCoordinates собирает все точки и контуры, которые используются в глифах-компонентах, и возвращает полный вариант. Другими словами, мы заменяем ссылку на глиф самим глифом.

Следующая часть, которая нас интересует, — инструкции. Эта та штука, которая позволяет попасть глифу в пиксельную сетку красиво. Без них получится что-то такое (погружение в тему).

if hasattr(glyph._glyph, 'program'):     gl.program = deepcopy(glyph._glyph.program) else:     gl.program = ttProgram.Program()     gl.program.fromBytecode([])

Если вы играли в старые версии Fishdom, то, возможно, замечали, что буквы i, j, t, f частенько друг на друга накладывались.

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

def get_symbol_kerns(glyph_name, kern, name_uni):     if kern is None:         return None     kerns = []     for kern_table in kern.kernTables:         # Поддерживаем только формат 0: упорядоченные пары         if kern_table.format != 0:             continue         pairs = []         for kern_pair in kern_table.kernTable:             if kern_pair[0] == glyph_name:                 pairs.append((name_uni.get(kern_pair[1]), kern_table[kern_pair]))          if pairs:             kerns.append({'coverage': kern_table.coverage, 'pairs': pairs})     return kerns

Осталось только всё это записать в нашу сводную таблицу glyphs_info. Дополнительно указав метрики горизонтальных интервалов (hmtx).

new_name = glyph_link['name'] glyphs_info[sym_ord] = {     'name': glyph_link['name'],     'hmtx': font.hmtx[glyph_name_font],     'kern': get_symbol_kerns(glyph_name_font, font.kern, font.name_uni),     'glyph': gl }

Теперь настала очередь готовить наш шрифт! Сначала собираем информацию в glyphs_info.

def merge_fonts(font_path: str, source_files: List[str], symbols, metrics_source, font_name):     glyphs_info = {}     found_symbols = []      for source_path in source_files:         font_add = ParsedFont(source_path)          if font_add.is_otf:             print(f'[ERROR] Merge of otf fonts does not supported.')             return          for symbol in symbols:             sym_ord = ord(symbol)             if add_symbol(sym_ord, glyphs_info, font_add):                 found_symbols.append(symbol)

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

glyphs = [] character_map = {} h_metrics = {} glyphs_setup = {} kerns = {} ord_name_links = {} for sym_id, gl_info in glyphs_info.items():     gl_name = gl_info['name']     ord_name_links[gl_name] = sym_id     # Таблицы cmap, glyf и htmx     character_map[sym_id] = gl_name     h_metrics[gl_name] = gl_info['hmtx']     glyphs.append(gl_name)     glyphs_setup[gl_name] = gl_info['glyph']      # Генерирования информация для kern-таблицы, которая отдельно записывается     kern_info = gl_info['kern']     if kern_info is not None:         for kern_coverage in kern_info:             coverage = kern_coverage['coverage']             kern_table = kerns.setdefault(coverage, {})             for pair in kern_coverage['pairs']:                 # возможно, что символ для кернинга не нужен в результирующем шрифте                 if pair[0] not in glyphs_info:                     continue                 pair_gl_name = glyphs_info[pair[0]]['name']                 kern_table.update({(gl_name, pair_gl_name): pair[1]}) 

Так как мы сливаем не все глифы, то при сохранении кернингов ещё проверим, что глиф из связки в принципе попадает в итоговый шрифт. Если нет — не сохраняем эту кернинг-пару.

fb = FontBuilder(unitsPerEm=1024, isTTF=True) fb.setupGlyphOrder(glyphs) fb.setupCharacterMap(character_map) fb.setupGlyf(glyphs_setup)  fb.setupHorizontalMetrics(h_metrics)  metrics_font = ParsedFont(metrics_source) if metrics_source is not None else None metrics = get_metrics(metrics_font) fb.setupHorizontalHeader(**metrics.hhea)  font_name = font_name.replace(' ', '') setup_name_table(metrics_font=metrics_font, font_builder=fb, font_name=font_name) fb.setupOS2(**metrics.os2) setup_kern_table(fb.font, kerns) setup_hints(metrics_font=metrics_font, font=fb.font, logger=logger, font_name=font_name)  fb.setupPost() fb.save(font_path)

Часть работы за нас делает FontBuilder из пакета fonttools, принимая питоновские dict. Но некоторые вещи нужно учитывать в своём коде.

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

from fontTools.ttLib.tables._k_e_r_n import KernTable_format_0  def setup_kern_table(font, kerns):     ttf_kern_table = newTable('kern')     ttf_kern_table.version = 0     ttf_kern_table.kernTables = []     for coverage, kern_table in kerns.items():         ttf_kern_value = KernTable_format_0(apple=False)         ttf_kern_value.coverage = coverage         ttf_kern_value.format = 0         ttf_kern_value.kernTable = kern_table         ttf_kern_value.tupleIndex = None         ttf_kern_value.version = 0          ttf_kern_table.kernTables.append(ttf_kern_value)     font['kern'] = ttf_kern_table

Таблицы для хинтов. Это набор из таблиц fpgm, prep, cvt, maxp, которые определяют общие инструкции для всего шрифта. Нужно это для того, чтобы символы не слипались в комок при уменьшении (вот тут прям подробно). Помните первую картинку с приветственного экрана Gardenscapes?

Мы как раз теряли хинтинг. Возвращаем на место — setup_hints. Для этого нам нужен шрифт, откуда брать инструкции — metrics_font. Если его нет, тогда пропускаем шаг, так как автоматом генерировать такое — слишком даже для нас.

def setup_hints(metrics_font, font, font_name):     if metrics_font is None:         return      fpgm = metrics_font.font['fpgm'] if 'fpgm' in metrics_font.font else None     prep = metrics_font.font['prep'] if 'prep' in metrics_font.font else None     cvt = metrics_font.font['cvt '] if 'cvt ' in metrics_font.font else None     maxp_src_table = metrics_font.font['maxp'] if 'maxp' in metrics_font.font else None      # Строгое условие, всё хорошо - нам просто не надо ничего копировать     if fpgm is None and prep is None and cvt is None:         return      if fpgm is None or prep is None or cvt is None:         print(f'[WARNING] Expected prep+cvt+fpgm tables in source font: fpgm="{fpgm is not None}"; '               f'cvt="{cvt is not None}"; prep="{prep is not None}"')         return      fpgm_table = newTable('fpgm')     fpgm_table.program = fpgm.program     font['fpgm'] = fpgm_table      cvt_table = newTable('cvt ')     cvt_table.values = cvt.values     font['cvt '] = cvt_table      prep_table = newTable('prep')     prep_table.program = prep.program     font['prep'] = prep_table      maxp_table = font['maxp']     maxp_table.maxZones = maxp_src_table.maxZones     maxp_table.maxStorage = maxp_src_table.maxStorage     maxp_table.maxFunctionDefs = maxp_src_table.maxFunctionDefs     maxp_table.maxTwilightPoints = maxp_src_table.maxTwilightPoints     maxp_table.maxStackElements = maxp_src_table.maxStackElements     maxp_table.maxInstructionDefs = maxp_src_table.maxInstructionDefs      if maxp_table.maxFunctionDefs == 0:         print(f'[WARNING] [{font_name}] There are instructions in font but functionDefs in "maxp" table == 0')      if maxp_table.maxStackElements == 0:         print(f'[WARNING] [{font_name}] There are instructions in font but maxStackElements in "maxp" table == 0')

def setup_name_table(metrics_font, font_builder, font_name):     style_name = "TauStyle"     if metrics_font is not None and 'name' in metrics_font.font:         # Берём имя стиля из таблицы шрифта для метрик, если он есть         style_name_record = metrics_font.font['name'].getName(nameID=2, platformID=3, platEncID=1, langID=1033) \                             or metrics_font.font['name'].getName(nameID=2, platformID=3, platEncID=1, langID=None)         if style_name_record is not None:             style_name = style_name_record.toUnicode()     name_strings = dict(familyName=dict(en=font_name),                         styleName=dict(en=style_name),                         uniqueFontIdentifier=f'tau_empire:{font_name}',                         fullName=f'{font_name}',                         psName=f'{font_name}',                         version='Version 0.1')     font_builder.setupNameTable(name_strings)

Высший пилотаж для китайских и японских игроков

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

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

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

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

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

<!-- Для всех локализаций --> <Locale> <Font name="HanSansNormal" /> </Locale> <!-- Для японской отдельно загрузим сверху шрифт. А уже встречающиеся символы перекроем --> <Locale lang="ja"> <Font name="HanSansNormal"> <SubFont name="HanSansNormal_diff_ja" extenstionMode="Override" /> </Font> </Locale>

Система сборки: имеет встроенный приоритет исходных шрифтов, который мы уже реализовали в функции merge_fonts. Каждый следующий шрифт перезатирает символ, который был из предыдущего. То есть самый последний — самый главный. Этот порядок определяется в конфигах проекта.

<font id="HanSansNormal"> <SourceFonts id="common" type="common"> <source path="PoetsenOne.ttf" /> <source path="Ubuntu.ttf" /> <source path="FDCustomHSNormal.ttf" /> </SourceFonts> <SourceFonts id="general"> <source path="SourceHanSans-Normal.ttf" /> <source path="SourceHanSansSC-Normal.ttf" /> <source path="SourceHanSansK-Normal.ttf" /> </SourceFonts>  <SourceFonts id="ja"> <source path="SourceHanSansSC-Normal.ttf" /> <source path="SourceHanSansK-Normal.ttf" /> <source path="SourceHanSans-Normal.ttf" /> </SourceFonts>  <Generate> <font path="font/HanSansNormal.ttf"> <symbols id="general" />  <source id="common" /> <source id="general" /> </font> <font path="font/HanSansNormal_diff_ja.ttf"> <symbols id="ja" />  <source id="common" /> <source id="ja" /> </font> </Generate> </font>

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

Заключение

Мы получили гибкую в настройке систему и забрали боль починки багов с проектов в общую команду технологий. Теперь страдаем копаемся в документации и внутренностях только мы, а коллеги могут делать игры быстрее и лучше, не заботясь о таких деталях.

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