ASCII-графика: как мы рисуем целый город символами текста
Каждая крыша, дерево, телега и фонарь в «Срединном царстве» сложены из символов текста. Это не шейдер, который задним числом превращает 3D-сцену в ASCII, а рисунки, набранные вручную, символ за символом. Вот как ASCII-графика становится живым городом со светом, тенью и ночью.
Рисунок — это две строки текста
Каждый рисунок в игре — список пар строк одинаковой ширины. Первая строка — сама картинка, те символы, что вы увидели бы в текстовом редакторе. Вторая — карта цветов: по одной букве на символ, она указывает на запись в палитре рисунка, где задан цвет знака и цвет его фона. Пробел в карте цветов означает прозрачность; пробел в тексте под цветом — залитый фон.
Вот и весь формат. Колодец с навесом и верёвкой, амбар, ворота городской стены — каждый набран так, и тест проверяет у каждого рисунка правильные ширину и высоту, прежде чем тот попадёт в игру.
Сетка 16 на 8
Тайл карты — 16 символов в ширину и 8 в высоту, пропорция 2:1, которая подходит виду 3/4. Здание на w×h тайлов ровно 16·w символов в ширину. Нижние 8·h строк — его основание, лежащее на своих тайлах; всё, что выше, — крыша, флаг или дым — нависает над тайлом позади. Этот нахлёст и даёт улице глубину: крыши одного ряда частично закрывают дорогу за ними, как в классических изометрических градостроительных стратегиях. Почему сетка выросла до такого размера, рассказано в статье «С 10×5 до 16×8».
От текста к свету
Символы рисуются на холсте через WebGL2. Каждый знак, появившийся на экране, попадает в атлас текстур, и каждый кадр рисуется из этого атласа за один проход. Шейдер добавляет то, чего у простого текста быть не может: фактуру поверхности, объём, свет и тени, которые здания и ходоки отбрасывают на дорогу. Где WebGL2 нет, простой движок на Canvas рисует тот же город попроще.
- В плотном стиле каждый символ дробится на мелкие штрихи, так что фактура есть даже у мелкой детали
- Земля, дороги и вода рисуются один раз в кэшированный слой; перерисовывается только то, что движется
- Ночью светятся окна, фонари и костры, а в сумерках фонари загораются волной
- Отдалите камеру — и вывеска тает в золотое пятно на лаке; приблизьте — и её иероглиф резок
Настоящие иероглифы на вывесках
На вывесках текст становится буквальным. Двадцать восемь видов зданий несут настоящие китайские иероглифы в полных формах времён Цинь и Хань, золотом по лаку: 市 над рынком, 倉 над амбаром, 井 на колодце, 廟 на храме, 鹽鐵 на Ведомстве соли и железа, 未央 над дворцом Вэйян. Они берутся из маленького шрифта, в котором только нужные игре знаки, — около 14 КБ.
Почему не просто фильтр
Превратить 3D-рендер в ASCII — известный трюк, и эффект он даёт яркий. Но символы, подобранные по яркости, — это шум; символы, подобранные человеком, — это рисунок. Ряд черепицы читается как черепица, потому что кто-то набрал его как черепицу. А раз рисунки хранятся текстом, ASCII-графику всегда можно показать как текст: зажмите клавишу Ё для показа символов или сохраните вид файлом .txt.
И всё это остаётся лёгким
Текст компактен. Рисунки маленькие, шрифт маленький, а низкая графика возвращается к более грубым рисункам 10×5 и обходится без ночи и эффектов, так что играть можно и на старых ноутбуках. Отрисовку в движении можно посмотреть в роликах, а жанр, из которого она выросла, — в статье об играх как «Фараон» и Caesar III.
«Срединное царство» готовится к выходу в Steam для Windows, macOS и Linux. Смотрите ролики, следите за историей разработки или откройте материалы для прессы.