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

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

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

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

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

Свои таски доделать было критично важно, так что продолжили делать их. Доделали, переключились на Дюну. При этом всё ещё не знали, что именно хотим делать — дизайнеры не успели нарисовать макеты, тоже занимались своими тасками.
Тут случается бас-фактор: Ваня, дизайнер в нашей команде, заболел. Остальные заняты кто чем, свободных нет. Из ранних разговоров вспоминаем какие-то обрывки идей и начинаем раскручивать сами.
Первым делом идём и делаем прототип, в котором позиция в меню рисуется в альтернативной ячейке. В целом ничего сложного, но всё таки хотелось проверить. Заводится.
Тут у меня в голове сходятся несколько воспоминаний:
1. У фильмов бывают анимированные постеры;
2. У меня в пете есть готовый кусок кода, который замьюченно играет видео во вьюхе и скрывает все контролы. Ну, вперёд/назад/пауза.
Анимированных постеров не нахожу, но на официальном сайте вижу клёвую анимацию солнечного затмения.

Зацените сами:
https://dune.warnerbros.ru
Записываю экран, вставляю в прототип, отправляю запись с симулятора своей команде. Ребятам нравится, маркетингу тоже. Уточняют только «конечный ли это копирайт или будет другой».
С позицией в меню всё ясно: запрашиваем настоящие легальные промо-материалы у прокатчика и ждём. А пока пора приступать к карточке продукта.

Как делали карточку продукта

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

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

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

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

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

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

Вспоминаю, что мы будем продавать целое комбо, а не только пиццу. Добавляю рядом с пиццей летающий пунш и стикеры. Начинает выглядеть перегруженно: всё крутится, вертится, летает от параллакса. Ещё партиклы эти. Цыганщина получилась, в общем.
Видоса не сохранилось, простите.
Выдёргиваю Ваню с больничного, обсуждаем. Предлагает успокоить это всё убрав партиклы и царапульки, а для хоть какой-то развлекухи добавить фон. Пробую, получается отлично.
Можно заметить, что на прототипе стикеры от интеграции Киберпанка. Это потому что наша фотолаборатория тоже не была готова к переносу Дюны и не успела всё отфотографировать. Брал, что было под рукой «примерно похожее».
«Додо» запустила кампанию к релизу игры Cyberpunk 2077 в конце 2020 года. Тогда сеть также выпускала пиццу в стилизованной коробке с набором стикеров, комбо-набор и AR-маску в Instagram.
Понимаю, что дизайнеру захочется понастраивать силу параллакса, да и вообще поиграться с расположением продуктов. Поэтому пишу специальный «редактор параллакса» и прячу его внутри тестовых сборок.
В нём можно накидывать слои, менять их местами и настраивать как надо. Это сильно сокращает количество сборок для приёмки, потому что Ване не приходится на угад называть цифры, мне их хардкодить и катить новую сборку. Удобный инструмент = удобная работа. Вкладывайтесь в них.
Наконец-то получаем от нашей фотолабы финальные фото пиццы, пунша и стикеров. Это несколько больших PNG в сумме 6мб весом. Дальше два варианта: скачивать их (и видео) по сети или вшить в бандл.
Скачивать по сети — это надо новый ендпойнт заводить или менять контракты на существующем ендпойнте меню. А это не быстро. А у нас сроки горят. Решаем вшить.
Не очень хочется вшивать почти 6мб картинок ради одного товара в бандл. Тем более такой промоутинг только в России и Беларуси, остальным странам эти картинки будут мёртвым грузом. Но как срезать мегабайты, оставив прозрачность для параллакса? Ответ — HEIC.
Пробую несколько онлайн-конвертеров, несколько разных из мак-аппстора, даже Превью маковский — везде есть косяки: то артефакты на альфа-канале, то на айфоне картинка выглядит засвеченной.
В чем проблема разбираться не было времени, так что в HEIC’е взял только, что смогло сконвертироваться без артефактов. Остальное так и легко в PNG. По итогу в бандл вшили картинок продуктов на 2мб.
Кстати, видео мы тоже вшили. Сконвертили в HEVC. 815x1080, 0:15, 921 килобайт. Можно было ещё немного даунсайзнуть, но и так уже было очень хорошо.
Видео на главной, параллакс в карточке продукта. А что с доступностью? Кое-что завезли, кое-что вырезали.
В меню для карточки Дюны не работает Dynamic Type. Сначала в меню было другое видео, на нём был логотип Дюны и текст не мог вырасти — перекрыл бы логотип. Потом видео поменялось, а текст не успели научить расти.
Видео в меню имеет слабый эффект параллакса. На всякий случай завязываюсь на настройку доступности Reduce Motion и, если она включена, вместо видео показываем статичный кадр. Как проще всего это сделать? Через скриншот, например.
И вот тут я лоханулся: делал скриншот через квиктайм, а он их в PNG сохраняет. Я это не спалил. В итоге превью видоса, вшитое в бандл, занимает 1,6 мегабайта, что почти в 2 раза больше, чем само видео.

Ну и по дименшнам его можно было сжать, конечно. В общем, поспешил.
В карточке продукта точно так же завязываемся на пропертю Reduce Motion и отключаем параллакс, если надо.
Для параллакса завели отдельную ParallaxView и ParallaxViewModel.

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

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

Хотя результатом гордимся.
0
12 комментариев
Написать комментарий...
Алексей Штейн

Ну вкус пиццы это не исправит 

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

Расскажите, вам за какую сумму гарантии продали лицензию для использования на коробке? Или наоборот, вам платили за размещение?

Какая механика была?

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

Вы промо к "Дюне" делали, а я прошлую их промо акцию с игрой к фильму "Главный герой". У ДОДО отличные ребята в отделе IT работают)

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

Соглашусь) Мне нравятся такие акции, особенно если действительно что-то кайфовое, но далеко не у всех так получается

Ответить
Развернуть ветку
Леонид Соболев

Везде уже эта Дюна... Я видно отстал немного и только недавно поинтересовался что к чему  

Ответить
Развернуть ветку
Анастасия Белоусова

первая версия огонь))

Ответить
Развернуть ветку
Всеволод Ляшкевич

Но ведь... 10 пицц скорее для 10-20 человек, нежели 20-30

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

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Павел Петров

Захватывающая история 😀
Автор и команда молодцы 👍

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

И к чему все это? Если уже выпилено из приложения

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

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

Ответить
Развернуть ветку
Zloy Marketolog
Обычно там просто появляется баннер и на товар добавляется бейдж с логотипом

Ровно так в итоге и сделали) вчера приложение обновлял

Ответить
Развернуть ветку
Мария Савельева

Видела как раз вчера на сайте, фанатам зайдёт мне кажется 

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