Вывод текста в играх

Со стороны простая задача - вывести текст на экран. Если посмотреться к задаче ближе, то станет ясно - вывод текста нет так прост, как может показаться.

Во всех графических API - нет прямых способов вывести текст. Вывод текста также не заложен в драйвер видеокарты. Графическая система (OpenGL, Metal, Vulkan) может выводить только треугольники, линии и точки. DirectX имеет средства для загрузки шрифтов из коробки. Выводом текста занимается уже движок. Есть несколько способов, которыми мы можем воспользоваться при выводе текста.

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

Как видно по картинке выше - есть некий список опорных точек (вершин). Все они соединены с помощью треугольников без пересечений. Таким образом для каждой нужной буквы - мы будем хранить всю геометрию.

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

Тут тоже имеем несколько вариантов. Начнем с самого простого - Bitmap Font. Весь набор символов мы генерируем предварительно в один атлас.

Данные атласы создаются в специальных приложениях. Для Windows - BMFont, для OSX - bmGlyph. Список не ограничен 2-я приложениями, можно найти еще варианты. BMFont - бесплатная, ее можно в любой момент скачать и попробовать в действии.

Мы передаем список нужных символов и на выходе имеет текстуру со всем списком символов и файл с информацией о координатах. Из плюсов данного способа - можно сгенерировать абсолютно разные варианты символов, начертания или обводки. Можно использовать градиент или искажения. Главное, чтобы координаты каждого символа были отражены в файле информации. К примеру BMFont генерирует png и fnt. Один текстура, другой - описание всех символов. Разные движки имеют свой формат. Но формат bmfont знают многие.

Другой способ - генерация налету. Для этого в движок передаются любой шрифт в формате ttf или otf. Он внутри создает сам текстуру и создает разметку. Для работы со шрифтами используются библиотеки FreeType и stb_truetype. Тут также можно сделать нужную обводку символов и необходимый цвет. Чтобы была возможность выводить разным цветов - шрифт генерируется только для Alpha канала. Т.е. мы храним только прозрачность пикселей каждого символа. А меняем цвет уже в шейдере. Один из минусов данного способа - время на создание текстуры. В остальном такой способ самый распространенный. Также как и вариант с Bitmap Font, созданный в приложении.

Для вывода одной буквы уже достаточно 2 треугольника. Размер буквы мы меняем маштабированием вершин.

При просчете текстуры мы используем FreeType или stb_truetype. Типичная схема для символа предоставлена ниже.

Есть центр строки. Каждая буква имеет смещение как по оси Y так и по оси X. Каждая буква знает насколько ей нужно сместится по осям вправо и вниз. Еще немаловажный параметр - кернинг. Это корректировка расстояния между парами символов. Например между AV и AL разное расстояние. Некоторые шрифты имеют кернинг, некоторые не хранят эти значения. Эти данные передаются в файле шрифта - ttf\otf.

Есть еще способ вывода текста - Signed Distance Field.

Пример текстуры для Signed Distance Field справа.

Для вывода таким способом создается изображение с картой расстояний . Такой способ вывода графики предложила Valve в игре Team Fortress 2. Данный способ позволяет экономить память на таких текстурах и не требовательный к ресурсам. Более подробно об этом способе можно почитать тут , поскольку данный способ достоин отдельной статьи.

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

aras-p.info

Font Rendering is Getting Interesting · Aras' website

Вывод текста в играх

Вывод с помощью окрашенных полигонов

Вывод текста с помощью текстуры