Pixi 8 это очень хорошо. Но без UI редактора быстро становится очень плохо.
Особенно, когда очередной экран состоит не из пары спрайтов, а из кучи контейнеров, кнопок, текстов и состояний.
Двигать всё это по координатам в коде можно. Раньше страдали мы, теперь можно попытаться запрячь AI, мои эксперименты показывают, что это даже может сработать - до первых правок.
А потом ещё в атласы всё собирать. А версионирование? А как с этим работать в команде?
Привет! Усаживайся поудобнее, тут будет всякое про веб-игры, их разработку, боль и циферки.
Я делаю UI редактор для Pixi 8, как идеального с моей точки зрения фреймворка для веб-игр.
Сам редактор превратился из моей внутренней утилиты в отдельное десктопное приложение и даже научился обновлять себя самостоятельно (пруф на скрине, кстати).
Что ещё я делаю? Несколько проектов. Одновременно. И одинаково плохо и ничего не успеваю :)
У меня есть представление о том, как казуальные игры должны работать в вебе, куча собранных граблей, сломанных велосипедов, 16 лет опыта и желание всем этим поделиться.
Меня зовут Алексей. Поехали.
Особенно, когда очередной экран состоит не из пары спрайтов, а из кучи контейнеров, кнопок, текстов и состояний.
Двигать всё это по координатам в коде можно. Раньше страдали мы, теперь можно попытаться запрячь AI, мои эксперименты показывают, что это даже может сработать - до первых правок.
А потом ещё в атласы всё собирать. А версионирование? А как с этим работать в команде?
Привет! Усаживайся поудобнее, тут будет всякое про веб-игры, их разработку, боль и циферки.
Я делаю UI редактор для Pixi 8, как идеального с моей точки зрения фреймворка для веб-игр.
Сам редактор превратился из моей внутренней утилиты в отдельное десктопное приложение и даже научился обновлять себя самостоятельно (пруф на скрине, кстати).
Что ещё я делаю? Несколько проектов. Одновременно. И одинаково плохо и ничего не успеваю :)
У меня есть представление о том, как казуальные игры должны работать в вебе, куча собранных граблей, сломанных велосипедов, 16 лет опыта и желание всем этим поделиться.
Меня зовут Алексей. Поехали.
❤1
Открыл репозиторий в паблик и моя локальная версия редактора впервые предложила мне обновиться)
И обновилась.
Чуть-чуть погружу в лор.
В 2019 разработчиков веб-игр лишили целой платформы - Flash Player в браузере. Просто жмякнули тумблер в очередном обновлении Chrome.
А за этим гугловским чек-боксом были, я уверен, тысячи и тысячи бедолаг, которые с горящей задницей последний год+ (да-да, нас предупреждали, что Flash Player выключат, и на том спасибо) придумывали способ перенести всё что работает на, мягко говоря, сыроватый HTML5. Canvas, да-да, webgl был только в планах и experimental фичах браузера.
Моим выходом из ситуации долгое время после 2019 был Adobe Professional (он же Adobe Animate). Вёрстка визуально происходила там.
Сначала был просто экспорт в json с рантайм подгрузкой всего вручную. Затем этот экспорт обрёл новую функцию - генерацию кода.
Затем к генерации кода добавилась генерация атласов. Было не особо удобно, куча нюансов, косяки со шрифтами, адоуби их отрисовывает не так, как это делает браузер.
Но так всё и ехало какое-то время.
Где-то в 2023 я начал делать первую версию редактора, исключив Adobe из зависимостей. Медленно, по вечерам после работы, иногда по выходным, шаг за шагом функционал добавлялся.
Electron меня раздражал ужасно. И сборка весила свыше 100 мегабайт, ужс.
Текущая сборка на Tauri, умеет всё то же самое что умела electron версия и даже больше. А ещё - лучше, быстрее, на порядок проще, да ещё и сборка получается 10 МБ. С кайфом)
Крч, редактор я люблю. Он прошёл уже много проектов. Надеюсь, вам тоже он будет полезен :3
И обновилась.
Чуть-чуть погружу в лор.
В 2019 разработчиков веб-игр лишили целой платформы - Flash Player в браузере. Просто жмякнули тумблер в очередном обновлении Chrome.
А за этим гугловским чек-боксом были, я уверен, тысячи и тысячи бедолаг, которые с горящей задницей последний год+ (да-да, нас предупреждали, что Flash Player выключат, и на том спасибо) придумывали способ перенести всё что работает на, мягко говоря, сыроватый HTML5. Canvas, да-да, webgl был только в планах и experimental фичах браузера.
Моим выходом из ситуации долгое время после 2019 был Adobe Professional (он же Adobe Animate). Вёрстка визуально происходила там.
Сначала был просто экспорт в json с рантайм подгрузкой всего вручную. Затем этот экспорт обрёл новую функцию - генерацию кода.
Затем к генерации кода добавилась генерация атласов. Было не особо удобно, куча нюансов, косяки со шрифтами, адоуби их отрисовывает не так, как это делает браузер.
Но так всё и ехало какое-то время.
Где-то в 2023 я начал делать первую версию редактора, исключив Adobe из зависимостей. Медленно, по вечерам после работы, иногда по выходным, шаг за шагом функционал добавлялся.
Electron меня раздражал ужасно. И сборка весила свыше 100 мегабайт, ужс.
Текущая сборка на Tauri, умеет всё то же самое что умела electron версия и даже больше. А ещё - лучше, быстрее, на порядок проще, да ещё и сборка получается 10 МБ. С кайфом)
Крч, редактор я люблю. Он прошёл уже много проектов. Надеюсь, вам тоже он будет полезен :3
🔥3
#игровые_мюсли
FTUE. First Time User Experience.
Наверное, самый важный показатель в веб-играх. Да в любых играх, в целом. Но в вебе есть огромные отвалы ещё до момента, когда пользователь хотя бы одну кнопку нажмёт.
По сути это набор шагов:
1) пользователь оказался на странице игры
2) прогрузилась html страница
3) прогрузились ресурсы загрузчика, отобразился загрузчик (eg. preloader)
4) игра загрузилась и отобразилась первая интерактивная игровая сцена
5+) пользователь взаимодействует с игрой
Пункты 5+ это вотчина геймдизайна и UI/UX.
А вот первые 4 пункта, по сути, технические. И, к сожалению, именно они могут поставить крест на проекте. Даже 5% отвалов могут стать решающими в вопросе привлечения аудитории.
FTUE. First Time User Experience.
Наверное, самый важный показатель в веб-играх. Да в любых играх, в целом. Но в вебе есть огромные отвалы ещё до момента, когда пользователь хотя бы одну кнопку нажмёт.
По сути это набор шагов:
1) пользователь оказался на странице игры
2) прогрузилась html страница
3) прогрузились ресурсы загрузчика, отобразился загрузчик (eg. preloader)
4) игра загрузилась и отобразилась первая интерактивная игровая сцена
5+) пользователь взаимодействует с игрой
Пункты 5+ это вотчина геймдизайна и UI/UX.
А вот первые 4 пункта, по сути, технические. И, к сожалению, именно они могут поставить крест на проекте. Даже 5% отвалов могут стать решающими в вопросе привлечения аудитории.
#игровые_мюсли
На ютубе очень много видео про генерацию игр. Особенно популярны видео про так называемые ваншоты или около того - чуть-чуть сделал/написал 1 раз, а дальше нейронка всё сделала за тебя.
Это наводит на мысль, что люди, как и в случае с деньгами, надеются получить волшебную палочку или кнопку.
И да, нейронки как-будто делают эту надежду осязаемой. Реальность же куда прозаичней.
Игра - это не просто код или графика. Более того - это не только идея. Что бы ни говорили чудаки-новички, залетевшие с двух ног в нейрослоп-игры, идея до сих пор ничего не стоит. Важна конечная реализация. Конечный продукт. Точка.
Идея описывается в 2-3 предложения. Они могут быть интерпретированы по-разному как искусственным интеллектом в зависимости от выпавших случайных чисел, так и человеческим, в зависимости от фазы луны и настроения.
На пути реализации будет 1.000 поворотов, изменений, которые могут от начальной идеи камня на камне не оставить. Да, сейчас ты даже не увидишь этот путь за безмолвным "Thinking.." в строчке терминала. Просто будешь напротив игрового автомата, дёргать ручку до посинения, в надежде получить что-то похожее на игру.
Ван-шоты не могут заложить фан в игру. Каждая фича в игре ложится на предыдущие не сразу, но в процессе. Нейронка не сможет сделать фан даже всего из 2 фичей, потому что она не видит их взаимодействия. Она архитектурно не в состоянии сделать это.
Процесс ступенчатый. Сделал одно - поиграл, посмотрел, покрутил. Тут не нравится, там подкрутить надо, пришла ещё идея, что-то переделал, зафиксировал, идешь дальше.
Нейронки сейчас этот процесс делают сильно проще, доступнее и быстрее. Пока нет и не предвидится ничего, что на основе вашего текста достанет вижн из вашей же головы и перенесёт его на экран.
На ютубе очень много видео про генерацию игр. Особенно популярны видео про так называемые ваншоты или около того - чуть-чуть сделал/написал 1 раз, а дальше нейронка всё сделала за тебя.
Это наводит на мысль, что люди, как и в случае с деньгами, надеются получить волшебную палочку или кнопку.
И да, нейронки как-будто делают эту надежду осязаемой. Реальность же куда прозаичней.
Игра - это не просто код или графика. Более того - это не только идея. Что бы ни говорили чудаки-новички, залетевшие с двух ног в нейрослоп-игры, идея до сих пор ничего не стоит. Важна конечная реализация. Конечный продукт. Точка.
Идея описывается в 2-3 предложения. Они могут быть интерпретированы по-разному как искусственным интеллектом в зависимости от выпавших случайных чисел, так и человеческим, в зависимости от фазы луны и настроения.
На пути реализации будет 1.000 поворотов, изменений, которые могут от начальной идеи камня на камне не оставить. Да, сейчас ты даже не увидишь этот путь за безмолвным "Thinking.." в строчке терминала. Просто будешь напротив игрового автомата, дёргать ручку до посинения, в надежде получить что-то похожее на игру.
Ван-шоты не могут заложить фан в игру. Каждая фича в игре ложится на предыдущие не сразу, но в процессе. Нейронка не сможет сделать фан даже всего из 2 фичей, потому что она не видит их взаимодействия. Она архитектурно не в состоянии сделать это.
Процесс ступенчатый. Сделал одно - поиграл, посмотрел, покрутил. Тут не нравится, там подкрутить надо, пришла ещё идея, что-то переделал, зафиксировал, идешь дальше.
Нейронки сейчас этот процесс делают сильно проще, доступнее и быстрее. Пока нет и не предвидится ничего, что на основе вашего текста достанет вижн из вашей же головы и перенесёт его на экран.