Pixi.js: Создайте обработчик шрифта SDF

Созданный на 15 окт. 2016  ·  11Комментарии  ·  Источник: pixijs/pixi.js

Прямо сейчас pixi имеет только текст на основе холста и созданные вручную растровые шрифты. Я также хотел бы поддерживать текст SDF непосредственно из файла шрифта.

Параметры библиотеки синтаксического анализа слушайте ниже. Ideal мал, не имеет загрузочного кода (не нужен), анализирует и создает пути.

https://github.com/Jolg42/awesome-typography

| Библиотека | Звезды | Размер | Поддерживаемые шрифты | Нагрузки | Парсы | Создает пути | Многострочный макет | Примечания |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| opentype.js | 1136 | 288к | ТТФ, ОТФ, ВОФФ | ✓ | ✓ | ✓ | | Макет добавлен с макетом opentype |
| Typr.js | 271 | 60к | ТТФ, ОТФ | | ✓ | ✓ | | Был создан для решения некоторых проблем с opentype.js |
| набор шрифтов | 85 | 379к | TTF, OTF, WOFF, WOFF2, TTC, DFONT | ✓ | ✓ | ✓ | | |
| открытый тип | 63 | ?к | ТТФ, ОТФ, WOFF, WOFF2 | | ✓ | ✓ | | только узел? |
| загрузчик веб-шрифтов | 4961 | ?к | ? | ✓ | | | | В основном просто наблюдатель за загрузкой шрифтов CSS |

Stale 🙏 Feature Request 🥶 Low Priority

Самый полезный комментарий

@englercj @ivanpopelyshev @PixelsCommander Как продвигается работа над этой функцией? Если в последнее время никого нет, я готов взяться за эту работу.
Я автор msdf-bmfont-xml , который работает с помощью opentype.js и node-canvas . Он хорошо работает на Starling-Frameworks .
Когда я недавно намочил ноги на Pixi.js, я обнаружил, что текст msdf просто не реализован, поэтому я просто потратил некоторое время на расширение отличного плагина pixi-sdf-text , чтобы включить многоканальный SDF без дополнительных зависимостей и некоторых хаков. в BitmapText и Loader , ниже мой текущий прогресс:
pixi-msdf
Эффект обводки и тени реализован без дополнительных вызовов отрисовки.
Также некоторые исправления в алгоритме макета BitmapText (текущие реализации в 4.7 немного глючат, а базовый параметр bmfont важен, но не используется в макете BitmapText).

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

Все 11 Комментарий

Есть и другие вещи со шрифтами. Например, используйте каналы RGB в качестве разных листов спрайтов, чтобы покрыть все азиатские символы.

Привет @englercj , @ivanpopelyshev ,

В настоящее время я занят этим, так как ничего не изменилось с момента моего прошлогоднего запроса https://github.com/pixijs/pixi.js/issues/1679 .

Итак, план состоит в том, чтобы создать Mesh и передать координаты точки как обычные атрибуты точки + координаты текстуры как uv. Рендерите это один раз в шейдере, а не в кэше.

Есть предложения по реализации?

Иван, не уверен, что правильно Вас понял по поводу RGB. Предназначен ли он для сжатия, чтобы хранить в 3 раза больше данных?

@englercj @ivanpopelyshev дайте мне знать, что вы думаете по этому поводу

https://github.com/PixelsCommander/pixi-sdf-текст

Текущий приоритет — многострочный рендеринг и максимальная совместимость с обычным текстом.

PS @ivanpopelyshev разобрался, что вы имеете в виду под RGB. Запланировано для следующих обновлений.

РГБ - да.

Какой у тебя адрес электронной почты? Я приглашу вас в слабину. Неважно, нашел.

Марк от @finscn

@englercj @ivanpopelyshev @PixelsCommander Как продвигается работа над этой функцией? Если в последнее время никого нет, я готов взяться за эту работу.
Я автор msdf-bmfont-xml , который работает с помощью opentype.js и node-canvas . Он хорошо работает на Starling-Frameworks .
Когда я недавно намочил ноги на Pixi.js, я обнаружил, что текст msdf просто не реализован, поэтому я просто потратил некоторое время на расширение отличного плагина pixi-sdf-text , чтобы включить многоканальный SDF без дополнительных зависимостей и некоторых хаков. в BitmapText и Loader , ниже мой текущий прогресс:
pixi-msdf
Эффект обводки и тени реализован без дополнительных вызовов отрисовки.
Также некоторые исправления в алгоритме макета BitmapText (текущие реализации в 4.7 немного глючат, а базовый параметр bmfont важен, но не используется в макете BitmapText).

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

@soimy Это прекрасное время, чтобы добавить PR в v5 (ветвь next ). Спасибо за волонтерство.

Нужно обсудить модуль синтаксического анализа TTF/OTF.
Я думаю о необходимости парсера шрифтов истинного типа во время выполнения в ядре pixi. Это добавит не менее 60 тыс.+ кода парсера, но выгода от ресурсов ttf не одинакова. Эта функция должна рассматриваться как devDependencies .

Скажи мне, что ты думаешь.
Кстати: кто-нибудь может пригласить меня в pixi's slack? слабый идентификатор: [email protected]

Если вам нужна помощь с этим, вы можете пинговать меня.

На самом деле я только что написал именно этот код для веб-инструмента рисования векторов, который я делаю. К сожалению, я написал все на GWT, и в настоящее время у меня нет циклов, чтобы переписать все на чистом JavaScript для Pixi (возможно, когда Google выпустит свой компилятор J2CL Java to JS в следующем году, я смогу просто перекомпилировать его для JS).

В моем случае архитектура, которую я использовал, заключалась в использовании Typr.js для анализа файлов истинного типа во время выполнения. Затем, когда отображается каждый символ, я использую собственный ttf-рендерер (простой на самом деле не так много кода), чтобы на лету создать SDF только для символа и вставить его в кеш. Затем SDF отображаются на экране. Это все достаточно быстро, и размеры кода не так уж плохи, поэтому я не уверен, есть ли необходимость предварительно вычислять SDF.

Главный недостаток связан с размером шрифта. Чтобы сделать все правильно, вам нужно самостоятельно разобрать файлы шрифтов ttf, но тогда вам нужно будет встроить файл шрифта ttf в свою игру. Файлы TTF имеют размер всего 50 КБ или около того для английских шрифтов, но они могут составлять несколько сотен КБ для европейских шрифтов и несколько МБ для неевропейских шрифтов. Поэтому я не уверен, насколько практичен этот подход для веб-игр и мобильных игр.

Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время в ней не было активности. Он будет закрыт, если никакой дальнейшей активности не произойдет. Спасибо за ваш вклад.

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

Была ли эта страница полезной?
0 / 5 - 0 рейтинги

Смежные вопросы

gigamesh picture gigamesh  ·  3Комментарии

readygosports picture readygosports  ·  3Комментарии

madroneropaulo picture madroneropaulo  ·  3Комментарии

Makio64 picture Makio64  ·  3Комментарии

finscn picture finscn  ·  3Комментарии