ЕДЕМ В 2024: мы запустили новогоднюю игру и освоили игровой движок за 2 недели
Праздники — время чудес, правда? :) Так подумали мы в Пиробайте и под Новый год выпустили свою 3D-игрушку-портфолио. Заходите поизучать, а мы расскажем о первом опыте разработки проекта на игровом движке Unreal Engine.
Всем привет! На связи Антон, креативный директор Пиробайта. Еще летом мы с ребятам насмотрелись конкурсных сайтов, на одном из которых увидели мини-игру на Unreal Engine. Это игровой движок на С++ от Epic Games. На нем можно создавать игры для большинства операционных систем и платформ.
«Освоив работу с движком, можно легко делать геймификацию наших проектов», — подумали мы. Решили протестировать гипотезу и для начала сделать 3D-портфолио нашей студии.
Для первого проекта взяли такую концепцию: красная тачка (привет фанатам GTA) дрифтует по открытому пространству. По нему расставлены стенды с проектами студии. Когда машина подъезжает к какому-то из них, по нажатию на Enter открывается соответствующий кейс на сайте.
К самой разработке приступили в начале декабря, справились примерно за 2 недели.
Но, как в большинстве игр, без боссов на пути разработки игрового портфолио не обошлось :)
Гипотеза, с которой начали работу: небольшой проект на игровом движке можно сделать без разработчика
Игру-портфолио начинали вдвоем: я и дизайнер студии Илья. Пока не столкнулись с суровой программистской реальностью.
В Unreal Engine используется система визуального скриптинга Blueprints. Работает так: прототип игры собирается с помощью составления логических блоков — нодов. Их можно менять местами, настраивать связи и др. То есть игру — от простого кликера до полноценной RPG — можно реализовать без построчного кода.
Работать в Blueprints могут и непрограммисты. Но в процессе поняли, что у нас, дизайнеров, это займет больше времени, чем было запланировано изначально. Потому к задаче подключили нашего разработчика — бэкенда Алексея, который уже был знаком с UE.
Плоская земля, или Как мы геймдизайн поднимали
До проекта опыта работы с 3D у Ильи не было. Ранее другой дизайнер Пиробайта, Артем, работал с редактором для 3D-моделирования Spline. Илья же начал изучать программы для моделирования с нуля по видеоурокам. Параллельно мы по туториалам вникали в работу игрового движка.
Сначала Илья нарисовал скетч уровня в Figma: расположение объектов на полянке. В первом варианте проекты будто лежали на земле. Не удобно было ориентироваться между ними, а машине пришлось бы заезжать на них буквально.
Позже заметили и другой недочет: все объекты были расставлены слишком аккуратно. Без препятствий и направляющих не было понятно, по какому пути двигаться машине. А еще хотелось немного хаоса, чтобы было интересно изучать пространство, но пользовательский путь в нем все-таки прослеживался.
Мы с Ильей переделали компоновку. Направляющие для движения тачки и объема пространства задали елочками, добавили снеговиков и снежных волков — символов нашей студии, и большущего дракона — символ 2024 года.
Стенды с проектами, наградами, страницей Пиробайта на Dprofile расположили вкруговую.
Часть 3D-объектов Илья брал из программы для 3D-дизайна SketchUp. Объемные логотипы студии, рейтингов и премий — отрисовал сам в Blender.
Кроме 3D добавили и живых фото наших ребят. Кстати, для них эта игра — сюрприз, видят релиз вместе с вами :)
Выйти из сумрака — еще один босс миссии
Когда мы уже задеплоили сборку и запустили сайт через тильду, обнаружили, что в игре сломалось все освещение и тени.
Такая поломка — распространенная проблема при переносе объемных объектов в веб. Алексей решил эту проблему запеканием.
Так называется перевод текстурных деталей и освещения в статические изображения — текстурные карты. После этого 3D-модели никуда не «уедут» и будут оптимизированы для использования в реальном времени или визуализации.
Это был супер-сложный для меня момент в разработке. Если делать еще такие проекты, стоит в будущем уделять внимание UV-развертке, без нее никак. Касается и материалов, и самой структуры проекта.
И вот мы на деплое! Но и это не финал…
В видеоуроке, по которому мы знакомились с Unreal Engine, проект разворачивали на Dropbox. Так же сделали мы и… получили битые ссылки >.<
Около недели проект открывается без проблем. Далее ссылка сбрасывается и перестает работать. Приходится создавать новую ссылку в Dropbox и снова переносить ее в Tilda.
Для будущих проектов вынесли урок: разворачивать сборки уже на своем сервере.
We are winning, Son. Портфолио-игра работает!
За короткое время открыли для себя крутой инструмент геймификации проектов. Unreal Engine планируем изучать и дальше, прокачивать наши навыки в 3D и разработке игровых уровней уже на коммерческих проектах.
А еще с удовольствием сделали новогодний подарок для ребят из нашей студии — игру, в которой можно
• подрифтовать по снегу на красной тачке без правил и ограничений скорости;
• поврезаться в волков;
• разрушить башню Дженги;
• рассмотреть фотомоменты жизни студии;
• разогнаться и взлететь на лестницу (редкое достижение! напишите, у кого получится);
• самое главное — познакомиться с нашими кейсами и наградами за них. А еще найти одну пасхалку грядущего релиза 🔥.
Фичи игрушки:
✓ Чтобы открыть кейс, припаркуйтесь у стенда и нажмите Enter;
✓ Если нажать на Tab, переключится вид из машины;
✓ Чтобы ездить привычными WASD, включите английскую раскладку.
Кстати, сможете посчитать, сколько в игре волков, ёлок и снеговиков? ☃
А пока считаете, поздравим вас с наступающими новогодними праздниками! Пусть новый 2024 год принесет все самое светлое, доброе, креативное и масштабное — и в личных делах, и на проектах 💜
Спасибо, что были с нами этот год! Встречаемся в январе в блогах Пиробайта и на страницах,
Если у вас есть задача разработать сайт или мобильное приложение, то напишите в Телеграм, мы это обсудим: https://t.me/sashadzen
Заказать разработку сайта, веб-сервиса или мобильного приложения на нашем сайте: https://vk.cc/cuglQZ
Партнерская программа, где мы платим от 10 000 до 200 000 рублей за контакты тех, кому нужен дизайн или разработка: https://vk.cc/cuglXT
Телеграм-канал Саши Комбарова про управление агентством, проектами, людьми: https://t.me/sasha_kombarov
Телеграм-бот, который бесплатно выдает чек-листы, памятки и регламенты по управлению, маркетингу, аналитике, дизайну и разработке: https://t.me/regulations_pyro_bot