Как мы сделали интерактивный сайт для Homescapes с 3D-планетой, механикой матч-3 и мини-игрой

Отрисовали и анимировали 3D-планету. Реализовали мини-игру на Тильде. Накидали локальных мемов. И получили сайт, который нескучно листать. Рассказываем, как сделали интерактивный лендинг-поздравление на первый юбилей Homescapes в стилистике самой игры.

Привет! На связи Молния — веб-студия, которая создаёт креативные сайты на Тильде. В августе 2022 года к нам обратилась компания Playrix. Известный и крупный гейм-разработчик, который создал хит всех гугл плеев и аппсторов — игру Homescapes. Ту самую с дворецким Остином, механикой три в ряд и декором интерьеров.

Каждый год компания отмечает День рождения Homescapes. И каждый год она проводит интерактивы: то снимает высокобюджетный видос, то что-то ещё. На пятилетие Playrix решили поздравить сотрудников с помощью сайта.

Ребята пришли с уже готовой идеей того, что хотели видеть. Они скинули ТЗ, где подробно расписали, что и в каком порядке должно быть на сайте. Но в процессе многие идеи мы переработали. Дальше расскажем, что нового привнесли в первоначальный концепт и какой результат получили. Спойлер: все остались довольны.

Компания хотела поздравительный лендинг-лонгрид для своих сотрудников, который рассказывает, что происходило с игрой эти 5 лет. Запрос был на интерактивный сайт, который не только напомнит обо всём, что происходило с Homescapes, но и повеселит команду разработчиков.

Лендинг должен был быть привычным, визуально похожим на игру. Максимально привязанным к ней, с большим количеством отсылок к персонажам, геймплею и локациям. А ещё не нудным, чтобы по нему было прикольно ходить-бродить и сохранялось ощущение «интересно, а что дальше?».

Задачка была горящей — меньше месяца на разработку. Ребята пришли к нам в конце августа с запросом на готовый лендинг к 19 сентября, чтобы в этот день они смогли его запустить. Хоть на сутки позже — всё, сайт не нужен. Поэтому нам пришлось гибко подойти к задаче и пересмотреть многие пожелания от Playrix по анимации, структуре блоков и интерактивам.

Обычно мы разрабатываем заказчикам прототип, а не только структуру. Прототип — это смысловая последовательность блоков на сайте вместе с готовым текстом от копирайтера. Структура — прототип без текста.

Playrix сразу сказали, что тексты будут от них. От нашего копирайтера нужны только структура и краткое описание того, что должно быть написано в каждом блоке. Можно назвать это своеобразным ТЗ для заказчика.

Сдать работу нужно было как можно быстрее, чтобы заказчик успел подготовить текст для блоков. Сложность заключалась в большом количестве интерактива, который хотела компания: сложной анимации, мини-играх и прочего. Нужно было ещё до создания структуры продумать, что успеем реализовать, а что — нет. На этом этапе мы уже привлекли дизайнера, чтобы побрейнштормить и обсудить всё-всё с заказчиком.

В каждый блок заложили смыслы: кратко указали, о чём нужно будет написать. На пятом экране — призыв сыграть в мини-игру с креативами, на одиннадцатом — поздравление от команды.

Указали на блоках, какие объёмы текста должны быть. Если предполагали, что инфы будет очень много, разбивали её на несколько экранов или придумывали интерактивную историю. Так у нас на блоках с игровыми ивентами появились слайдеры.

В итоге мы справились за 1 день — сделали структуру и отправили заказчику. Дальше просто ждали, когда Playrix напишут тексты. Ребята постепенно всё присылали: заголовки, призывы, описания. А мы заносили в будущий лендинг. Когда получили все тексты, приступили к этапу дизайна.

Изначальный запрос — построить весь лендинг вокруг планеты. Она должна появиться на первом экране и по скроллу обрастать новыми элементами: растениями, ландшафтом. То есть нужно было представить развитие Homescapes как эволюцию Земли.

Заказчик пришёл с готовым референсом, где наглядно была показана идея.

Но сроки и внутренние возможности Тильды не позволяли реализовать задумку. Так как Тильда — конструктор, быстро работать можно только внутри того, что предлагает платформа. Остальные решения допиливаются кодом. Идея с сайтом на планете — история про код, а значит, про долгую разработку.

Поэтому пришлось найти решения, которые бы передавали всю суть, но при этом занимали меньше времени и были проще в реализации. В итоге планету добавили в два второстепенных блока, а не стали строить сайт вокруг неё.

На сайте было важно отразить, как игра развивалась. Поэтапно, что было в разные года: начиная от идей и набросков, заканчивая пост-релизом. Плюс, дополнить это рассказом, как вообще пришла идея сделать Homescapes, и внутриигровыми обновлениями, которые появились за 5 лет существования проекта.

Всё это нужно было снабдить интерактивными фишками. Например, взрывом бустера, как в самом Homescapes.

Максимально стилизовали всё под их фирменный стиль. Отрисовали плашки, как в игре, взяли фирменные шрифты, использовали много графики и исходников из Homescapes: бэкграунды, скриншоты и гифки.

Мы почти не использовали сторонние скрипты и другие решения кодом. С их помощью реализовали только слайдеры и добавили некоторую анимацию.

Сайту важно было задать динамику, поэтому главной фишкой стала анимация по скроллу. Её сделали без кода: только внутренними средствами Тильды. У конструктора встроена панель управления анимацией, где можно настроить движение и появление элементов по скроллу.

На первом экране всех встречает анимированный Остин, поэтому фон нельзя было оставить статичным. Чтобы придать объём 2D-графике и органично вписать персонажа, добавили параллакс-эффект: текст и дом смещаются, когда пользователь листает сайт. Так мы задали лендингу динамику, которой придерживались в каждом блоке.

Кстати, идея с первым экраном не взялась с потолка. На самом деле, это отсылка к приветствию Остина из игры-предшественника — Gardenscapes.

На втором блоке параллакс сменяется отдельными анимированными элементами: фишки из игры идут по пунктирам, а видео крутятся-вертятся. Playrix предоставили много 2D- и 3D-иллюстраций из Homescapes, поэтому мы решили не просто вписать их в сайт, но и «добавить им жизни» — заставить двигаться, поворачиваться и креативно появляться.

Анимированные элементы добавили и в блок со статистикой: по скроллу крутятся фишки и другие предметы из игры.

С самого начала заказчик хотел видеть креативное появление планеты Homescapes. В качестве перехода к блоку с ней мы сделали механику со взрывом. А так как жанр игры — матч-3, он происходит, когда передвигаются фишки.

Изначально идея состояла в том, чтобы предложить перетащить бомбу самостоятельно: с помощью мышки или пальца. Но на Тильде без кода такое не сделать. А если с ним, то нужно привлекать кодера и выделять ещё день-другой на брейншторм, чтобы в точности понять, как реализовать. На это времени не было.

Мы предложили заказчику другую механику — анимацию по скроллу. Просто листаешь сайт вниз, фишки сами меняются местами, всё взрывается, и появляется планета. Playrix идею одобрили, а мы её реализовали.

Сюда заложили ещё одну отсылку к геймплею. В некоторых играх нельзя подвинуть бомбочку в рандомное место, чтобы она сдетонировала. А в Homescapes можно. Поэтому, хоть здесь и не собирается три в ряд, взрыв всё равно происходит.

В следующем блоке рассказали, как создавалась игра. Здесь как раз воплотили идею с планетой: отразили ход разработки в виде её развития.

Справа — интересные инсайды с разработки, слева — планета. По скроллу она покрывается ландшафтом, показывая прогресс. На этапе первых концептов всё пусто, даже фон белый. На релизе планета обросла деревьями и переместилась в космос.

Так как это поздравительный сайт «для своих», заказчику захотелось добавить внутрячковые приколы. Всё-таки должна получиться не нудная ретроспектива, а весёлая штука для друзей. Поэтому мы добавили немного мемных пасхалок.

В конце блока с разработкой всех встречает падающий Остин. На софт-лонче игра собрала огромное количество установок. И мы решили не просто об этом написать, а визуализировать через локальный мем.

Как только игра запустилась, один из разработчиков написал, что Остин споткнулся о ковёр более 2 млн раз. Это первая кат-сцена, которую игрок видит, когда только начинает играть в Homescapes.

В следующем блоке мы продолжили фишку с Остином. Визуализировали масштабную рекламную кампанию через дворецкого, кидающего деньги. Получился внутрячковый прикол, который обычный игрок никогда не увидит.

Эта идея пришла от заказчика. Он поделился референсом и сказал, что хочет реализовать аналогичную анимацию на сайте. Команда разработчиков сама отрисовала Остина, а мы добавили его на лендинг. Действовали с помощью кода, чтобы анимация была максимально плавной.

Поздравление от разрабов тоже реализовали нестандартно. Во-первых, тут анимация по клику. Нажимаешь на экран — открываются занавески и вылетают шарики.

Тогда и появляется второе нестандартное решение — нарочито странно вырезанные головы разработчиков с поздравлениями. Вместе с заказчиком думали, как преподнести всё это нескучно, без какой-то вылизанности и лишнего пафоса. Так и пришли к мысли увести всё в юмор.

Интерактивы должны были получиться разнообразными, чтобы пользователю хотелось долистать до конца. Поэтому мы не остановились на анимации и добавили ещё парочку креативных фич.

Сделали мини-игру с рекламными креативами. Здесь нужно выбрать два реальных сюжета, которые стали популярными у игроков. По клику на кнопку вылетает поп-ап, где персонаж из игры говорит, угадал пользователь или нет.

Ещё мы хотели наглядно показать, что у игры много поклонников по всему миру. Поэтому покреативили на блоке с отзывами от фанатов: отрисовали ещё одну планету и разместили на ней интерактивные 3D-объекты. Если навести на них курсор, то можно увидеть комментарии, арты и видео.

Собрали тут и маленькие отсылки к Остину: его каменную голову, любимого кота и рекламный баннер. А ещё через флажок на Северном полюсе отразили идею, что обаятельный дворецкий покорил игроков везде, даже в отдалённых уголках Земли.

Задача с самого начала требовала особого подхода: было много интерактивных решений и мало времени. Обычно на разработку такого сайта уходит полтора месяца, не меньше. Здесь было не больше месяца, поэтому нам пришлось перестроить привычный подход.

Во-первых, у нас была плотная коммуникация с Playrix. Мы постоянно были на связи, команда разработчиков тоже. Созванивались по нескольку раз в неделю, чтобы обсудить каждый шаг.

Обычно мы идём итерационно — сразу показываем заказчику финальный вариант работы на каждом этапе. Здесь шли в потоке. Могли созвониться и показать не завершённую итерацию, а достаточно сырую версию или поделиться наработкой. А заказчик сразу это согласовывал.

Постоянно коммуницировали в чате. Как появлялся важный вопрос, сразу задавали его. Ребята очень контактные были, сами предложили так делать. Это ускорило получение друг другом нужной инфы.

Если сделали что-то раньше назначенного времени — созвонились и показали. Надо больше времени на реализацию — предупредили и поделились тем, что успели сделать, объяснили, какие идеи в работе. Иногда было сложно сориентироваться, сколько займет реализация той или иной части в точности. Потому что хотели сделать классно и впечатляюще, а для этого нужно выкладываться и креативить.

Очень много коммуницировали в Google Docs, где подсвечивали инфу друг другу и закидывали материалы. Определённые вещи заказчик заносил в виде апдейтов, чтобы потом обсудить. Иногда Playrix отвечали прямо в доках, чтобы сразу законнектиться относительно конкретного вопроса.

Во, вторых, был гибкий подход с обеих сторон. Мы достаточно сильно переработали первоначальный концепт ещё на этапе прототипа. Много идей изменили, чтобы уложиться в срок.

Playrix пришли к нам с готовой концепцией того, что хотели видеть на лендинге. Они накидали примерную структуру и расписали свои идеи. Спросили, можем ли мы всё реализовать. Сразу сели думать, позвали дизайнера и за неделю разработали финальный концепт со всеми апдейтами.

Мы не отказались от важных моментов, а выбрали альтернативный способ решения. Так мы реализовали и планету, и переход с бомбой, но сменили формат. Упростили механики, но при этом передали всю идею. Как итог, сократили сроки разработки

Планировалось много необычных переходов между блоками. Они были связаны с планетой. А так как мы решили не строить сайт вокруг неё, задача по переходам тоже упростилась.

Несколько раз меняли идеи для блока с поздравлением от команды. В первой вариации задумали интерактив с Остином. Потом переработали концепт и решили сделать видео с персонажами игры. Но этот вариант тоже отпал. В итоге пришли к идее с мемными головами.

Кейс для Playrix наглядно показывает, что реализовать ультракреативные решения на Тильде можно. У конструктора есть ограничения, но если знать его возможности, то получится крутой интерактив. Иногда с учётом добавления каких-то скриптов и модификаций.

Сжатые сроки на креатив тоже не стали проблемой. Ребята были открыты к нашим задумкам, сами фонтанировали идеями, быстро отвечали и присылали много материалов, с которыми было удобно работать. Эта история не просто про взаимодействие заказчик–исполнитель, а про настоящую командную работу.

В итоге мы раскрыли весь потенциал: и студии, и Тильды, а Playrix креативно поздравили свою команду с юбилеем игры.