- GROmGames
- Постоялец
Всем привет!
Сделал небольшой браузерный инструмент для создания текстовых эффектов:
http://text-effects.grom-games.art/
Идея простая: быстро делать стилизованный текст для игровых интерфейсов, логотипов, кнопок, баннеров, ачивок, уведомлений, превьюшек и других UI-элементов, не открывая каждый раз полноценный графический редактор.
Что уже есть:
- работает прямо в браузере;
- экспортирует прозрачный PNG;
- можно копировать результат сразу в буфер обмена;
- эффекты собираются слоями;
- есть группы эффектов;
- можно менять порядок эффектов drag-and-drop;
- есть Fill, Stroke, Gradient, Pattern, Noise, Shadow, Inner Shadow, Glow, Blur, Wave, Distort, Composite / Blend;
- можно сохранять/загружать пресеты в JSON;
- есть локальная и глобальная галерея пресетов;
- можно использовать системные шрифты, если браузер поддерживает доступ к ним.
Основной сценарий: набрал текст, выбрал шрифт, собрал цепочку эффектов, экспортировал PNG и используешь в игре/прототипе.
Также вынес рендеринг эффектов в отдельный open-source npm-модуль:
https://www.npmjs.com/package/grom-font-effects
Буду рад фидбеку:
- понятно ли пользоваться?
- какие эффекты стоит добавить?
- какие готовые пресеты были бы полезны для игровых UI?
- удобно ли такое использовать для прототипирования?
Особенно интересно мнение тех, кто делает UI для игр: кнопки, HUD, ачивки, всплывающие сообщения, damage numbers и т.п.
- мало шрифтов и не нашёл где добавлять свои
- дико лагает, переключение одного из цветов в эффекте занимает до 10 секунд
Спасибо, это очень полезный фидбек.
По шрифтам: сейчас редактор может запросить системные шрифты через browser API, но я понимаю, что это неочевидно и работает не во всех браузерах. Нужно сделать это заметнее: отдельный пункт меню “Load System Fonts”, плюс, вероятно, импорт своих .ttf/.otf/.woff файлов.
По лагам: это уже серьёзнее, посмотрю в первую очередь. Некоторые эффекты вроде noise/distort/wave/blur довольно тяжёлые и сейчас могут пересчитываться синхронно при каждом изменении цвета. Я хочу добавить render scheduling/throttling, чтобы color picker не блокировал UI, и проверить, не перерисовываются ли лишний раз preview в галерее.
10 секунд на смену цвета — это точно не нормальное поведение, буду разбираться. Спасибо, что написал конкретно.
Обновил редактор: добавил **Batch PNG Export**.
Теперь можно экспортировать сразу набор текстов одним архивом `.zip`. Это удобно для UI-кнопок, HUD-лейблов, состояний кнопок и похожих игровых ассетов.
Как работает:
- вводишь список текстов, по одному на строку;
- задаешь шаблон имени файла, например `{text}`;
- можно указать суффикс состояния, например `up`, `down`, `over`;
- на выходе получаются файлы вроде:
- `play-up.png`
- `settings-up.png`
- `shop-up.png`
- если имена повторяются, редактор сам добавляет `-2`, `-3`;
- все PNG сохраняются в один ZIP;
- preview выбранной строки можно двигать мышкой, зумить колесом, центрировать и сбрасывать zoom.
Список текстов и настройки batch export сохраняются в браузере после экспорта.
Ссылка: https://grom-games.art/game/text-effects-editor/
Буду рад фидбеку, особенно от тех, кто делает UI ассеты для игр.
Убери регистрацию и впн нужен для работы. Мне нравится.
Спасибо за фидбек!
Регистрация сейчас нужна только для глобальной галереи: чтобы добавлять эффекты в общую библиотеку и применять чужие глобальные пресеты. Сам редактор, локальная галерея, экспорт PNG/ZIP/JSON и копирование в буфер работают без аккаунта.
Подумаю, как сделать это мягче: например, разрешить применять глобальные пресеты без регистрации, а логин оставить только для публикации и модерации. По VPN тоже понял, буду смотреть варианты, возможно, отдельный домен/хостинг или режим без глобальных онлайн-функций.
Рад, что в целом понравилось 🙂
Небольшое обновление по редактору.
Добавил новый workflow для шрифтов:
теперь можно загрузить системные шрифты с компьютера
можно импортировать свои .ttf, .otf и .woff шрифты
импортированные шрифты сохраняются локально в браузере и восстанавливаются после перезагрузки
в списке шрифтов теперь видно источник: Built-in, System или Imported
Это как раз по фидбеку про то, что в редакторе было мало шрифтов и не было очевидного способа добавить свои.
Актуальная версия:
https://text-effects.grom-games.art/
Буду рад фидбеку, особенно по workflow для игровой UI-графики и экспорту ассетов.
Небольшой апдейт по Text Effects Editor.
Добавил несколько улучшений по экспорту, как раз после обсуждения про UI-ассеты для игр:
- Batch PNG Export: теперь можно ввести список текстов и экспортировать все варианты сразу одним ZIP-архивом.
- Global DPI Export Settings: можно экспортировать варианты `ldpi`, `mdpi`, `hdpi`, `xhdpi`.
- Текущий размер canvas считается максимальным исходником (`xhdpi`), остальные варианты создаются даунскейлом.
- К именам файлов автоматически добавляются DPI-суффиксы, например `play-up-xhdpi.png`, `play-up-mdpi.png`.
- В batch export можно задавать optional suffix, удобно для состояний кнопок: `play-up`, `play-down`, `play-over`.
- Также поправил перерисовку canvas при изменении размера.
Идея в том, чтобы было проще быстро делать наборы текстовых UI-ассетов для кнопок, HUD, баннеров, заголовков и прототипов интерфейса.
Live version:
https://text-effects.grom-games.art/
Буду рад фидбеку, особенно по workflow экспорта и полезным пресетам для game UI.
Сайт не работает
попробуй
Небольшой апдейт: Text Effects Editor переехал на новый хостинг.
Новая ссылка:
https://grom-games.art/game/text-effects-editor/
Это всё тот же браузерный редактор текстовых эффектов для игровых UI-ассетов: логотипов, баннеров, надписей на кнопках, HUD-текста и прозрачных PNG.
Из последних возможностей:
- batch export в PNG;
- экспорт в DPI-вариантах: ldpi, mdpi, hdpi, xhdpi;
- прозрачный PNG export;
- локальная и глобальная галерея эффектов;
- импортированные и системные шрифты;
- редактируемый стек эффектов: glow, shadow, blur, gradient, pattern, noise, wave, distort и другие.
Если раньше открывали старую ссылку, теперь лучше использовать новую:
https://grom-games.art/game/text-effects-editor/
Буду рад фидбеку, особенно по workflow для игровых UI-ассетов, экспорту и полезным пресетам.
GROmGames
А как насчёт масштабирования? Допустим есть два устройства с разным разрешением экрана.
Можно ли в программе добавить коэффициенты масштабирования для экранов? Не "source size", а сделать "screen size"
coderat
Хороший вопрос. Сейчас в редакторе есть DPI export scaling: задаёшь исходный размер canvas, а редактор экспортирует ldpi/mdpi/hdpi/xhdpi варианты даунскейлом от него.
Но это действительно не совсем то же самое, что “screen size”.
Логичный следующий шаг — добавить режим preview под целевой экран. Например выбрать 1280x720, 1920x1080, 2560x1440, 4K, mobile portrait и т.п., задать коэффициент UI scale и посмотреть, как конкретный текстовый ассет будет выглядеть в реальном размере внутри HUD/кнопки/баннера.
То есть идея такая:
- текущий canvas остаётся исходником ассета;
- отдельно выбирается target screen size;
- задаётся screen/UI scale coefficient;
- редактор показывает, насколько читаемым будет эффект на таком экране;
- позже можно экспортировать manifest с anchor/scale информацией.
Пока такого режима нет, но идея хорошая, добавлю в roadmap.
Да, а то имеющиеся разрешения канваса не соответствуют реальным на экранах