← к содержанию

Урок 10. Текст как текстура

Иногда в программе нужно отобразить не только красивую картинку, но и какой-то текст. В случае игровых программ текст чаще требуется отображать на меню игры или иных 2D-панелях, перекрывающих основное 3D-изображение. Такие панели в DDD имеются (они называются Инфопанелями), но о них речь пойдёт в других уроках. В этом уроке мы рассмотрим возможность писать прямо на 3D-меше, присутствующем в сцене. Возможность отображения нескольких текстур (так называемое мультитекстурирование) в DDD не реализована, поэтому, если мы выводим на 3D-объекте какой-либо текст, то он будет единственной текстурой на нём.

Конечно, если требуемый текст нам известен заранее, то удобнее наложить его на модель в 3D-редакторе при текстурировании. Однако ситуации, когда текст становится известен уже после запуска программы тоже нередки. Для таких случаев уже можно воспользоваться данным уроком, и хотя в нём текст задаётся заранее (в тексте программы), но в настоящей игре его можно будет ввести с клавиатуры или прочитать из файла, базы данных и т.д.

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

import ddd.zavisimost.shrift_SDL2, ddd.zavisimost.texture_SDL2_GL;
  1. Нам нужен 3D-объект в виде простого двумерного прямоугольника, поэтому:

    1. Если вы изучали предыдущий урок, и в модуле scena.d уже имеется построение и вывод прямоугольного меша, то закомментируйте последнюю строку, где на этот прямоугольник цепляется текстура с именем схема.

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

    auto меш3 = менеджер.получить_меш("Прямоугольник"); 
    auto место3 = менеджер.начальное_место.создать_ребёнка("Место объекта3", 
                                                   Вектор3(0.9f, 0, 1.5f),
                                                   Кватернион.НОЛЬ);
    if (!(меш3 is null)) {
        auto объект3 = new Объект("объект3", меш3);
        место3.присоединить_объект(объект3);
    }
  1. Теперь займёмся, собственно, построением текстуры с текстом:

    1. Создайте новую пустую текстуру:

        auto текстура_текст = new Текстура_SDL2_GL();
    1. Загрузите один из шрифтов, доступных в ресурсах:

        auto шрифт1 = менеджер.получить_ttf_шрифт("LiberationSerif-Bold_32");

Если вы посмотрите на содержимое каталога со шрифтами в ресурсах, то увидите, что файл шрифта, соответствующий загруженному нами, называется LiberationSerif-Bold.ttf. Таким образом можно увидеть, что имя, которое требуется передать в функцию менеджера получить_ttf_шрифт, строится из имени файла шрифта без расширения, а затем через нижнее подчёркивание добавляется требуемый размер. Поддерживаются шрифты типа .ttf и .fon.

    1. Определите переменную, содержащую какой-нибудь небольшой текст:

        auto текст =    "Ехал Грека через реку,\n" ~
                        "Видит Грека - в реке рак.\n" ~ 
                        "Сунул Грека руку в реку\n" ~
                        "Рак за руку Греку цап.\n";
    1. Добавим проверку того, что мы действительно загрузили шрифт без ошибок:

        if (шрифт1 !is null) {
        }
    1. Внутри фигурных скобок построим, наконец-то, нашу текстуру:

            текстура_текст.построить_из_текста(шрифт1, текст, [0.2f, 0.2f, 0.8f]);

Текстура с текстом строится на прозрачном фоне с цветом букв, переданным третьим аргументом.

    1. Осталось только прицепить эту текстуру к нашему прямоугольному объекту:

            объект3.получить_материал.задать_диффузную_текстуру(текстура_текст);
  1. Если вы всё выполнили правильно, то после компиляции и запуска программы должно отобразиться следующее:



Попробуйте самостоятельно поменять файл шрифта, его размер, цвет букв, поменять ориентацию прямоугольника (для этого при создании Места, к которому присоединяется объект используйте какой-нибудь кватернион, отличный от Кватернион.НОЛЬ, например, Кватернион(-PI/4, Вектор3(1,0,0))), и посмотрите, как при этом изменится вид текста.