(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(49180180, "init", { defer: true, clickmap:true, trackLinks:true, accurateTrackBounce:true }); ym(49180180, 'hit', window.location.href);

ЕДЕМ В 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

0
35 комментариев
Написать комментарий...
Юрий QA
Ответить
Развернуть ветку
Пиробайт
Автор

Ну тут только наше ему уважение за выбор авто!!

Ответить
Развернуть ветку
Алексей Тартыжов

Давно тебя не было в уличных гонках... Побежал покупать руль для полного погружения

Ответить
Развернуть ветку
Пиробайт
Автор

А представь, как круто с его помощью проекты для автотеха тестировать! Надо передать ребятам идею...

Ответить
Развернуть ветку
Анна Лежнева Маркетинг в ИТ

О, вижу дизайн нового сайта)

Ответить
Развернуть ветку
Пиробайт
Автор

Би-и-инго! Скоро зарелизим и покажем в деталях ;)

Ответить
Развернуть ветку
Brno

Эх, помню моей новогодней игрой была Ёлочка ВКонтакте

Ответить
Развернуть ветку
Пиробайт
Автор

Что-то модно, а что-то — вечно... *утираем слезу ностальгии*

Ответить
Развернуть ветку
Артем Степченко

Как спел бы свой знаменитый шлягер Сергей Наговицын, если бы прошел эту игру...

Там на елках шишки, там медведи(волки)
Там, вообще, природа от Христа...
Там, куда на красной тачке едем -
В дупель Пиробайтные места...

И пускай колючка на заборе...
И пускай смеется Пиробайт.
Мы же всех снеговиков с тобой поборем
Мы оденем мерч от PRBTL`a

Ответить
Развернуть ветку
Пиробайт
Автор

Народное творчество — высшая похвала! Аплодисменты вам, Артем 👏

Ответить
Развернуть ветку
Саша Комбаров из Pyrobyte.ru

Вы хотели сказать за один год и две недели)))

Ответить
Развернуть ветку
Пиробайт
Автор

Иногда идее нужно дать настояться, чтобы потом все сложилось по вдохновению ✨

Ответить
Развернуть ветку
Антон Лисицкий

Сейчас случайно нашёл возможность переключения вида из машины по Tab. Чтобы управлять привычными WASD, нужно переключить раскладку на английский.

Ответить
Развернуть ветку
МАУЛЬ

Куда нажать, чтобы на малиновой ладе ехать?

Ответить
Развернуть ветку
Пиробайт
Автор

Это надо сначала на дипхаус съездить, там подскажут ;]

Ответить
Развернуть ветку
Пиробайт
Автор

Воу!
Этого даже мы сначала не нашли. Спасибо, добавили в фичи

Ответить
Развернуть ветку
Алексей Тартыжов

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

https://drive.google.com/file/d/1PDgV7CJGY09x9KeHZWxAByr5FbaHusJf/view?usp=sharing

Ответить
Развернуть ветку
Пиробайт
Автор

10 форсажей из 10 🔥🔥🔥
Начинаем собирать плейлист студии!

Ответить
Развернуть ветку
Sergey Popov

Вспомнил токийский дрифт)

Ответить
Развернуть ветку
Пиробайт
Автор

Наш плейлист дня, кстати: https://www.youtube.com/watch?v=2veV6U6k-U8

Ответить
Развернуть ветку
Виолетта Земелько

За две недели это нереально круто!)

Ответить
Развернуть ветку
Пиробайт
Автор

Спасибо за оценку!
Будем и дальше изучать платформу, очень интересные возможности дает

Ответить
Развернуть ветку
Давид Азарян

представляю как ребятам из вашей команды приятно сейчас

Ответить
Развернуть ветку
Пиробайт
Автор

Мы даже для них мини-челендж объявили: посчитать всех волков. И уже вручили подарочек победителю :3

Ответить
Развернуть ветку
Александр Трищенко

WebAssembly instantiation failed:
[object Object]

Ответить
Развернуть ветку
Пиробайт
Автор

А вот теперь работает, го катать!

Ответить
Развернуть ветку
Miksir

Спасибо, понаваливал боком :)

Ответить
Развернуть ветку
Пиробайт
Автор

Уже чиним!

Ответить
Развернуть ветку
Milton Fridman

Никогда не пишите в заголовке "почти" - теряете читателей. fake it till u make it, baby

Ответить
Развернуть ветку
Антон Лисицкий

Вы нас почти убедили)

Ответить
Развернуть ветку
Пиробайт
Автор

Дельное, спасибо! Потестировали гипотезу, потестируем сейчас вторую :)

Ответить
Развернуть ветку
Miksir

Не удалось покататься :( http://joxi.ru/823YVRESKDENRr

Ответить
Развернуть ветку
Пиробайт
Автор

Это, к сожалению, тот баг с Dprobox, о котором написали в статье :(

Укатили в автосервис, постараемся все оперативно починить

Ответить
Развернуть ветку
Пиробайт
Автор

Заводите тачку, починили игру!

Ответить
Развернуть ветку
Максим

Добрый день! Очень интересная статья. А почему бы вам не продублировать эту статью на dtf.ru сайте про игры, он очень похож на vc.

Ответить
Развернуть ветку
32 комментария
Раскрывать всегда