Как в спешке делали спецкарточку товара для пиццы по «Дюне» в приложении — опыт разработчика

В первом варианте слогана были «те, кто седлает стометровых червей по ночам».

С 16 сентября в российский прокат вышел фильм «Дюна». К его выходу «Додо пицца» выпустила пиццу в стилизованной коробке, специальное комбо «Дюна» и AR-маску в Instagram.

Кампанию поддержали и в приложении, рассказал разработчик в Dodo Brands Алексей Берёзка. Обычно там просто появляется баннер и на товар добавляется бейдж с логотипом, но в этот раз команда захотела сделать «что-нибудь эдакое».

<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Ftwitter.com%2FAllDmeat&postId=289702" rel="nofollow noreferrer noopener" target="_blank">@AllDmeat</a>

После первых обсуждений задачу отложили до завершения текущих задач, но в середине августа прокат в России перенесли на месяц раньше — с 14 октября на 16 сентября. Пришлось работать быстрее, попытки начали с альтернативной карточки для товара.

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

Тут случается бас-фактор: Ваня, дизайнер в нашей команде, заболел. Остальные заняты кто чем, свободных нет. Из ранних разговоров вспоминаем какие-то обрывки идей и начинаем раскручивать сами.

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

Тут у меня в голове сходятся несколько воспоминаний:
1. У фильмов бывают анимированные постеры;
2. У меня в пете есть готовый кусок кода, который замьюченно играет видео во вьюхе и скрывает все контролы. Ну, вперёд/назад/пауза.

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

Зацените сами:
https://dune.warnerbros.ru

Записываю экран, вставляю в прототип, отправляю запись с симулятора своей команде. Ребятам нравится, маркетингу тоже. Уточняют только «конечный ли это копирайт или будет другой».

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

У Берёзки было несколько вариантов, как обыграть карточку продукта. Первый — добавить к пицце солнечное затмение из постера к фильму. Чтобы анимация выглядела «живее», разработчик добавил круги, которые крутились в разные стороны и с разной скоростью, и летающие частицы.

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

Возникает мысль обыграть это же солнечное затмение уже в карточке продукта: пицца круглая, вот пусть она и затмевает солнце. Рисую «кольца-царапульки» примерно как на постере с затмением, закидываю в проект, вставляю в во вьюху разными слоями, заставляю крутиться, собираю.

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

Но в целом то всё равно скучно. На сайте из-за затмения вылетают партиклы. Ни разу не тыкал SpriteKit, но, кажется, пора. Открываю несколько туториалов, читаю и повторяю примерно тот же эффект.

Понимаю, что статичное солнце сзади тоже можно рисовать спрайткитом. Дополнительно подтюниваю вылетающие искорки.

Но в рамках кампании «Додо» продавала комбо-набор: пиццу, пунш и стикеры. Комбо со всеми теми же эффектами выглядело перегружено: решили убрать крутящиеся слои и частицы, добавить нейтральный фон.

Чтобы упростить дальнейшую работу, разработчик сделал специальный «редактор параллакса». Он позволяет менять местами слои и настраивать их без новых сборок.

Ещё одной задачей был размер изображений — 6 МБ. С помощью конвертирования части изображений в формат HEIC удалось уменьшить размер втрое.

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

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

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

«Додо» запустила кампанию к релизу игры Cyberpunk 2077 в конце 2020 года. Тогда сеть также выпускала пиццу в стилизованной коробке с набором стикеров, комбо-набор и AR-маску в Instagram.

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

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

Наконец-то получаем от нашей фотолабы финальные фото пиццы, пунша и стикеров. Это несколько больших PNG в сумме 6мб весом. Дальше два варианта: скачивать их (и видео) по сети или вшить в бандл.

Как в спешке делали спецкарточку товара для пиццы по «Дюне» в приложении — опыт разработчика

Не очень хочется вшивать почти 6мб картинок ради одного товара в бандл. Тем более такой промоутинг только в России и Беларуси, остальным странам эти картинки будут мёртвым грузом. Но как срезать мегабайты, оставив прозрачность для параллакса? Ответ — HEIC.

В чем проблема разбираться не было времени, так что в HEIC’е взял только, что смогло сконвертироваться без артефактов. Остальное так и легко в PNG. По итогу в бандл вшили картинок продуктов на 2мб.

Видео на главной, параллакс в карточке продукта. А что с доступностью? Кое-что завезли, кое-что вырезали.

В меню для карточки Дюны не работает Dynamic Type. Сначала в меню было другое видео, на нём был логотип Дюны и текст не мог вырасти — перекрыл бы логотип. Потом видео поменялось, а текст не успели научить расти.

Видео в меню имеет слабый эффект параллакса. На всякий случай завязываюсь на настройку доступности Reduce Motion и, если она включена, вместо видео показываем статичный кадр. Как проще всего это сделать? Через скриншот, например.

В карточке продукта точно так же завязываемся на пропертю Reduce Motion и отключаем параллакс, если надо.

Для параллакса завели отдельную ParallaxView и ParallaxViewModel.

Вью-моделька простая: там массив слоёв, у каждого слоя картинка и сила. Ну и ещё по мелочи, типа там ContentMode. Оставим этот кусок кода даже на после-дюновые времена, может пригодится.

Что по итогу:
1. Разработка прототипа с альтернативной ячейкой в меню и альтенративной карточкой продукта — 1 день.
2. Разработка редактора параллакса — 1 день.
3. Тюнинг всего этого, ожидание/подбор финальных картинок и видосов, а так же согласовывания со всеми — 2 недели.

В итоге апдейт приложухи релизнулся только во вторник утром, с опозданием на 5 дней от начала проката.

С учетом, что подвинули прокат пж на месяц раньше, мы опоздали совсем чуть-чуть. Но всё равно обидно.

Хотя результатом гордимся.

#додопицца #тред