Принёс вам немного странного! Последний месяц я занимался разработкой конструктора зелий. В результате у вас появился инструмент в котором можно с минимумом усилий за минуту соорудить себе добротную склянку для игры или статьи о магии. ✨✨✨
![](https://habrastorage.org/getpro/habr/post_images/ff7/4ce/8f6/ff74ce8f6beff56525fcf778514d7da1.png)
![](https://habrastorage.org/getpro/habr/post_images/9e6/0eb/f63/9e60ebf63f2423f8beb4c99c8487c029.png)
![](https://habrastorage.org/getpro/habr/post_images/670/1d4/563/6701d4563eea082007d3c37cd291f9e5.png)
![](https://habrastorage.org/getpro/habr/post_images/089/294/14c/08929414c2ed4813a47806843df3387e.png)
Cсылка на редактор
Всё началось с того что зимой aseprite сложил мне пиксели в полочку колдуна:
![](https://habrastorage.org/getpro/habr/post_images/686/01a/447/68601a447dc2b2689600ad7bdd02bd61.png)
Наблюдательный читатель заметит что каждая бутылочка имеет тенюшку идущую по нижнему краю и в правой части где-то на треть пузырька. Горизонтальные элементы дополнительно откидывают тень на слой ниже.
Такое рисование можно отлично алгоритмизировать по набору не сильно сложных правил.
Эта мысль и крутилась где-то в фоне пока не вылилась в разработку полноценного редактора!
![](https://habrastorage.org/getpro/habr/post_images/3a9/9b7/ce0/3a99b7ce0048f04245eb95e6d7355419.png)
Базовая форма колбы определяется перетаскиваемыми направляющими:
![](https://habrastorage.org/getpro/habr/post_images/c8c/266/c82/c8c266c82fe818cebd8bbac110bfaf41.png)
Динамика формы пячиться такими модификаторами как сужение, расширение, раздвоение, горизонтальное смещение и поребрик:
![](https://habrastorage.org/getpro/habr/post_images/c4a/5c9/e88/c4a5c9e88254840cd2fb26cee5988805.png)
Освещение настраивается перемещением Солнца, хотя в данном случае расчёт засвеченности проводится не как для directional light, а ближе к точечному источнику света. Был соблазн честно посчитать лучи проходящие через стекло\жидкость, но я его заборол и сделал всё на волшебных костылях!
Почти во всех референсах зелий люди накидывали дополнительных элементов для придания особого волшебства. Редактор поддерживает два типа эффектов: пузырики на дне и звёздочки! В будущем обязательно добавятся химические бульбы над пробкой.
Отрисовка ведётся на canvas 2d. Код на vanilla.js с использованием принципов FRP (functional reactive programming).
За последние лет 10 у всех появились мобильные устройства, отдельным челленджем была адаптация редактора под эти штуки. Canvas, а особенно лежащая поверх него моя библиотека работы с пиксельартом не очень любит когда размеры элемента меняются, но чего ни сделаешь ради искусства. Масштаб постепенно уменьшается в зависимости от размера экрана до тех пор пока правая панель с модификаторами не перестаёт помещаться и тогда она прыгает влево.
Демонстрация мобильного интерфейса (да, это тоже возможное зелье):
![](https://habrastorage.org/getpro/habr/post_images/135/688/de6/135688de6fa16536b43879840fa4be87.png)
Цвета всех элементов можно рэндомить, алгоритм используется цветовое пространство
Результат можно сохранить локально в виде PNG с желаемым масштабом. Хотелось сделать и загрузку результата обратно в редактор, но не хотелось делать отдельных сейвов, а это значило что нужно найти место под эти данные прямо в png. Первой мыслью была стеганография и кодирование данных в один\два бита несущих наименьшую цветовую нагрузку, но это всё равно меняло бы изображение. Второй идеей было использование пикселей с alpha = 100% — их RGB можно забивать любым хламом — всё равно никто не увидит, но таких пикселей могло не хватить. Я пошел по третьему пути — почитал спецификацию PNG и нашел что есть блок подобный EXIF в JPG. Разобрал файл на кусочки прямо на клиенте и дописал в него блок tEXt (да, мне именование тоже показалось дебильным, но такова спецификация) туда всю информацию. При загрузке происходит обратная операция — изображение снова разбирается, метаданные добываются и обновляют все параметры.
Внимание, telegram, twitter и другие чаты радостно пожирают эти данные, потому если решите отправить зелье-сейв другу — убедитесь что делаете это без сжатия (как файл).
Эффекты (звёздочки и пузырики) используют рэндом во время генерации, от чего загруженное зелье отличалось от того что было сохранено в png. Обмазал всё mulberry32 псевдорэндомом. Вот статья в моём бложике об этом звере если кому интересно.
Зелье можно опубликовать, но тогда любой маг будет вынужден заполнить подробную стандартную декларацию о его свойствах. Если не можете придумать название — не беда, оставьте его пустым и активируется возможность использовать рэндомизатор названий. Эффекты зелья: пока что это клифхэнгер, выбирайте любое доступное.
Зелье появляется на общей полке и создаётся отдельная уникальная страница. На всякий случай проинтегрировал её с твиттером, вдруг кто пользуется и решит запостить.
Несколько примеров зелий:
![](https://habrastorage.org/getpro/habr/post_images/c1c/76f/379/c1c76f379bc2c517e0923da5e08af0c6.png)
Хвала дочитавшим, пользуйтесь!
![](https://habrastorage.org/getpro/habr/post_images/ff7/4ce/8f6/ff74ce8f6beff56525fcf778514d7da1.png)
![](https://habrastorage.org/getpro/habr/post_images/9e6/0eb/f63/9e60ebf63f2423f8beb4c99c8487c029.png)
![](https://habrastorage.org/getpro/habr/post_images/670/1d4/563/6701d4563eea082007d3c37cd291f9e5.png)
![](https://habrastorage.org/getpro/habr/post_images/089/294/14c/08929414c2ed4813a47806843df3387e.png)
Cсылка на редактор
Всё началось с того что зимой aseprite сложил мне пиксели в полочку колдуна:
![](https://habrastorage.org/getpro/habr/post_images/686/01a/447/68601a447dc2b2689600ad7bdd02bd61.png)
Наблюдательный читатель заметит что каждая бутылочка имеет тенюшку идущую по нижнему краю и в правой части где-то на треть пузырька. Горизонтальные элементы дополнительно откидывают тень на слой ниже.
Такое рисование можно отлично алгоритмизировать по набору не сильно сложных правил.
Эта мысль и крутилась где-то в фоне пока не вылилась в разработку полноценного редактора!
![](https://habrastorage.org/getpro/habr/post_images/3a9/9b7/ce0/3a99b7ce0048f04245eb95e6d7355419.png)
Как это работает:
Базовая форма колбы определяется перетаскиваемыми направляющими:
![](https://habrastorage.org/getpro/habr/post_images/c8c/266/c82/c8c266c82fe818cebd8bbac110bfaf41.png)
Динамика формы пячиться такими модификаторами как сужение, расширение, раздвоение, горизонтальное смещение и поребрик:
![](https://habrastorage.org/getpro/habr/post_images/c4a/5c9/e88/c4a5c9e88254840cd2fb26cee5988805.png)
Освещение настраивается перемещением Солнца, хотя в данном случае расчёт засвеченности проводится не как для directional light, а ближе к точечному источнику света. Был соблазн честно посчитать лучи проходящие через стекло\жидкость, но я его заборол и сделал всё на волшебных костылях!
✨Эффекты✨:
Почти во всех референсах зелий люди накидывали дополнительных элементов для придания особого волшебства. Редактор поддерживает два типа эффектов: пузырики на дне и звёздочки! В будущем обязательно добавятся химические бульбы над пробкой.
Технические подробности:
Отрисовка ведётся на canvas 2d. Код на vanilla.js с использованием принципов FRP (functional reactive programming).
Адаптив:
За последние лет 10 у всех появились мобильные устройства, отдельным челленджем была адаптация редактора под эти штуки. Canvas, а особенно лежащая поверх него моя библиотека работы с пиксельартом не очень любит когда размеры элемента меняются, но чего ни сделаешь ради искусства. Масштаб постепенно уменьшается в зависимости от размера экрана до тех пор пока правая панель с модификаторами не перестаёт помещаться и тогда она прыгает влево.
Демонстрация мобильного интерфейса (да, это тоже возможное зелье):
![](https://habrastorage.org/getpro/habr/post_images/135/688/de6/135688de6fa16536b43879840fa4be87.png)
Цветовое пространство:
Цвета всех элементов можно рэндомить, алгоритм используется цветовое пространство
OKLCH
, которое учитывает особенности устройства человеческого глаза и даёт результат визуально схожий по яркости.Сохранение и загрузка:
Результат можно сохранить локально в виде PNG с желаемым масштабом. Хотелось сделать и загрузку результата обратно в редактор, но не хотелось делать отдельных сейвов, а это значило что нужно найти место под эти данные прямо в png. Первой мыслью была стеганография и кодирование данных в один\два бита несущих наименьшую цветовую нагрузку, но это всё равно меняло бы изображение. Второй идеей было использование пикселей с alpha = 100% — их RGB можно забивать любым хламом — всё равно никто не увидит, но таких пикселей могло не хватить. Я пошел по третьему пути — почитал спецификацию PNG и нашел что есть блок подобный EXIF в JPG. Разобрал файл на кусочки прямо на клиенте и дописал в него блок tEXt (да, мне именование тоже показалось дебильным, но такова спецификация) туда всю информацию. При загрузке происходит обратная операция — изображение снова разбирается, метаданные добываются и обновляют все параметры.
Внимание, telegram, twitter и другие чаты радостно пожирают эти данные, потому если решите отправить зелье-сейв другу — убедитесь что делаете это без сжатия (как файл).
Seeded random:
Эффекты (звёздочки и пузырики) используют рэндом во время генерации, от чего загруженное зелье отличалось от того что было сохранено в png. Обмазал всё mulberry32 псевдорэндомом. Вот статья в моём бложике об этом звере если кому интересно.
Публикация зелий:
Зелье можно опубликовать, но тогда любой маг будет вынужден заполнить подробную стандартную декларацию о его свойствах. Если не можете придумать название — не беда, оставьте его пустым и активируется возможность использовать рэндомизатор названий. Эффекты зелья: пока что это клифхэнгер, выбирайте любое доступное.
Зелье появляется на общей полке и создаётся отдельная уникальная страница. На всякий случай проинтегрировал её с твиттером, вдруг кто пользуется и решит запостить.
Несколько примеров зелий:
![](https://habrastorage.org/getpro/habr/post_images/45b/1df/660/45b1df660405a9ee3a755e09a6f6bbbe.png)
![](https://habrastorage.org/getpro/habr/post_images/0fb/afb/242/0fbafb242b42cc6e1daedc4e17c450b0.png)
![](https://habrastorage.org/getpro/habr/post_images/c1c/76f/379/c1c76f379bc2c517e0923da5e08af0c6.png)
Хвала дочитавшим, пользуйтесь!
yudinikita
Очень круто, потрясающая работа! Можно прикрутить к Phaser/Godot/Unity и сделать целую игру с такой механикой, мне кажется, интересно получится.
У меня вопрос возник, насколько реально сделать тоже самое, но не в Pixel Art?
Zibx Автор
Если подвинуть ползунок dither на максимум — уже будет не прям пиксельарт.
А если в консоли браузера ввести такое, то станет совсем плавно, но странности света начнут сильно бросаться в глаза на сложных формах:
Iv38
Что-то не вижу разницы между дизерингом 10 и 1000.
Zibx Автор
Прошел сейчас по разным значениям. Между 100 и 1000 разницы не заметил. 10, 20, 30, 40, 50, 80, 100 видел отличия.
Под капотом такая формула:
Porohovnik
Уже есть игра, где есть неплохой выбор скляночек:
https://www.potioncraft.com/