Войти
ПроектыФорумУтилиты

Постпроцессинг шрифтов на лету | Библиотека и редактор Font Effects

Страницы: 1 2 3 Следующая »
#0
(Правка: 21 апр. 2018, 12:43) 3:43, 25 мар. 2018

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

Тут есть проблемы.
Атласы занимают много памяти на диске и в ОЗУ, много символов в него не запихнешь и не всегда ясно какие нужны, какие нет? Например, для чисел имеет смысл упаковывать только цифры. Класть ли в атлас кириллицу? Нужны ли еще разные символы &%!$# ? Нужны ли диакритические знаки?
Какого размера делать шрифт? HD или Low? Или же заморочиться с distance field шрифтами?
Для дизайнера это тоже лишняя головная боль.

На помощь приходит FontEffects.
Он позволяет сгенерировать красивый текст на лету, в уже запущенной игре. Скармливаете библиотечке картинку с буквой любого размера от FreeType, а на выходе получаете уже обработанный, раскрашенный символ. Все это в пару строк кода.
Библиотека написана на С++, легковесна, открыта под лицензией MIT, без зависимостей и имеет простой С интерфейс.

А как сделать красиво?
Это вторая часть проекта - визуальный редактор. В нем нет какого-то стандартного шаблона, как, например в фотошопе, типа Stoke/Glow/Fill.  А встроен полноценный редактор графов, с помощью которого можно составить картинку любой сложности.

Пример работы:

Пример сохраненного проекта в редакторе(и файла который вы уже грузите в игре):

FEF2
#sigma
size:100
distance:1.05
@nodes
*1,1,0,0,0,10,10,0,0,0,0,0,0,0,0,
*50,2,0,0,0,579,21,0,0,0,0,1,0,0,0,
*3,4,0,4,4,144,166,0,0,0,0,0,0,0,0,
 3,000000FF,0,FFFFFFFF,.7031,FF8787FF,1,1,FF,0,.5286,.8489,33.7156,1.6017
*3,3,0,0,0,145,10,0,0,0,0,0,0,0,0,
 2,FF0000FF,.3691,00FF89FF,1,1,FF,0,0,1,0,1
*10,5,0,0,0,148,345,1.75,0,0,0,0,0,0,0,
*6,6,0,0,0,360,258,10,0,0,0,0,0,0,0,
*5,7,0,0,0,355,63,0,0,0,0,0,0,0,0,
*3,8,0,0,0,533,247,0,0,0,0,0,0,0,0,
 2,01B4FFFF,0,000000FF,1,2,00,.4707,FF,.5273,0,1,0,1
@edges
*7,2,1
*8,2,4
*1,4,3
*1,3,3
*1,5,3
*7,6,2
*3,7,1
*5,7,2
*4,7,4
*6,8,2

Псевдокод работы с библиотекой:
https://github.com/frankinshtein/font-effects-lib/blob/master/test/main.cpp

    #include "fe/fe.h"

    ...........    

    //грузим эффект из буфера в памяти
    fe_effect_bundle* bundle = fe_bundle_load(buff, size);

    //получаем эффект по имени (в файле может быть несколько разных)
    fe_effect *effect = fe_bundle_get_effect_by_name(bundle, "sigma");    

    //получаем "финальную" ноду
    fe_node *out_node = fe_effect_find_node_by_type(effect, fe_node_type_out);


    //готовим исходную картинку, параметры ниже берутся из структур freetype
    int bitmap_left = 0;
    int bitmap_top = 0;
    int src_width = src_image.w;
    int src_height = src_image.h;
    int pitch = src_image.pitch;
    const void *data = src_image.data;
    FE_IMAGE_FORMAT src_format = FE_IMG_R8G8B8A8; //use FE_IMG_A8 with freetype

    int font_size = 100;//FT_Set_Pixel_Sizes(_face, 0, font_size);

    fe_im result;
    //ключевые строчки, применяем к исходной картинке наш эффект
    bool ok = fe_node_apply(font_size,
        bitmap_left, bitmap_top,
        src_width, src_height, 
        src_format, pitch, data,
        out_node, &result);

  //на выходе result - буфер с картинкой, можно использовать ее уже для своих нужд и вывода текста

Ссылки


- Репозиторий на GitHub
- Редактор для Windows
- Редактор для MacOSX

#1
(Правка: 3:46) 3:43, 25 мар. 2018
editor2 | Постпроцессинг шрифтов на лету | Библиотека и редактор Font Effects
editor3 | Постпроцессинг шрифтов на лету | Библиотека и редактор Font Effects
editor | Постпроцессинг шрифтов на лету | Библиотека и редактор Font Effects
#2
3:43, 25 мар. 2018

reserved

#3
16:32, 25 мар. 2018

Frankinshtein
Круто! Добавь скринов и описание на гитхаб

#4
1:37, 29 мар. 2018

Вот пример использования FontEffects уже в движке, все генерируется на лету...

#5
(Правка: 23:38) 23:37, 29 мар. 2018

А вот то же самое, но online работает из браузера
http://oxygine.org/font_effects/HelloFreeType.html

#6
(Правка: 21 апр. 2018, 12:22) 2:15, 3 апр. 2018

Обновил редактор, новый вид
Изображение

#7
9:04, 5 апр. 2018

Это очень круто!

#8
23:11, 17 апр. 2018

обновил редактор и библиотеку, из самого интересного - это квадратичная интерполяции градиентов (как в фотошопе по умолчанию), вместо линейной.

было:
Screenshot_2 | Постпроцессинг шрифтов на лету | Библиотека и редактор Font Effects

стало
font effects | Постпроцессинг шрифтов на лету | Библиотека и редактор Font Effects

#9
(Правка: 18:23) 17:41, 18 апр. 2018

На днях посмотрю и попробую применить, а выглядит просто супер.

Жаль такое нельзя сделать с растровыми шрифтами.
А ещё люди интересуются на чём сделан UI.

#10
0:55, 19 апр. 2018

Salamandr
> Жаль такое нельзя сделать с растровыми шрифтами.
не очень понимаю что это значит, SDK подключается к коду игры работает с растром

> А ещё люди интересуются на чём сделан UI.
JavaFX

по скриншоту выше могу прокомментировать:
1. надо увилчить radius у DistanceField
2. альфа канал надо проставить в градиенте ноды 7

#11
3:59, 19 апр. 2018

Frankinshtein
> сделать с растровыми шрифтами
Атласы в виде картинки. То есть чтобы изначально брался не шрифт а набор букв в атласе.

#12
7:14, 19 апр. 2018

но как он будет масштабироваться? если мне нужен шрифт размером не 14 или 13, а 13.55?

#13
9:29, 19 апр. 2018

dmitrykolesnikovich
Маштабировать конечно придётся только по кратному 2, но вот эффекты, могли бы многое.

#14
10:15, 19 апр. 2018

надо бы допилить этот тул чтобы он генерил атлас

Страницы: 1 2 3 Следующая »
ПроектыФорумУтилиты