кейси
Дизайн-кейс: створення AR-гри для Instagram
За два тижні до події
3 Жовтень, 2019

У серпні 2019 мережа Facebook анонсувала доступ до свого движку Spark AR Studio. Завдяки йому можна створювати унікальні фільтри з елементами доповненої реальності для Facebook і Instagram. Як інструмент став у нагоді для просування фестивалю Brave – розповідає команда студії Areyes.

Читайте також: Як VR та AR інтегруються у сучасне мистецтво

Інтро

Одним з найбільш доступних способів використати доповнену реальність є фільтри або маски в соцмережах. Завдяки движку Spark AR Studio їх легко створювати, ще й з елементами доповненої реальності. Ми подумали: чому б не привернути додаткову увагу до Brave, використавши технологію AR?

Нам настільки сподобалася нова смілива айдентика фестивалю у вигляді мультфільму, що ми командою одразу накидали кілька ідей для майбутнього концепту і зв’язалися зі співзасновником події Сергієм Яценком. На зустрічі презентували концепт і досить швидко затвердили деталі майбутньої співпраці. Нам пощастило, що весь візуальний стиль і персонажі вже були придумані – це полегшило роботу над спільною ідеєю.Основна проблема, яка стояла перед командами, – це час. Залишалося менше, ніж два тижні.

Концепція і реалізація

За основу ми взяли три простих, але важливих думки:

  • люди люблять, коли в соцмережах весело
  • доповнена реальність повинна бути простою і доступною для розуміння
  • потрібен цікавий сюжет, до якого користувачеві захочеться повернуться, і яким буде цікаво поділитися

Ми вирішили зробити комплект з трьох інстаграм-ефектів з фокусом на різний користувальницький досвід. У набір входили: гра, маска і персонаж.

Насамперед ми зосередилися на AR-грі. Чому? У грі була можливість реалізувати сюжетну лінію і втілити одну з найцікавіших ігрових механік – бічний 2D Раннер з перешкодами (популярний формат консольних ігор, який бере початок у 90-х).

Сюжетну лінію побудували навколо персонажа з мультфільму – Дерева-Квітки.
Його головна мета – дійти до останньої музичної сцени фестивалю, набравши найбільшу кількість кроків. По дорозі герою потрібно уникати перешкод і стежити за балансом води в своєму організмі.

Головний ігровий персонаж перенесений у 3D

По суті, ми перенесли частину добре знайомих гостю фестивальних атрибутів, які, як у житті, виконують певні функції:

  • Мінеральна вода. Вона допомагала гравцеві підтримувати водний баланс, щоб не програти.
  • Кількість пройдених кроків, якими гості люблять ділитися після фестивалю, давали ігрові бали.
  • Вінілові пластинки. Збираючи їх, гравець отримував екстрабали.
  • Артисти лайн-апу. Це перехід на новий рівень і зміна танцполу.

Позитивні (мінеральна вода) та негативні (пігулки) ігрові атрибути 

Розробка:

Безпосередньо над створенням проєкту працювали чотири людини. 2D- і 3D- художник, аніматор і програміст. Весь проєкт збирався в спеціальному движку для доповненої реальності від Facebook – spark ar studio.

Також ми використовували такі програми, як:

  • Maya – ріггінг і анімація
  • Blender – моделінг
  • Photoshop – відрисовка деяких елементів

Для реалізації ефекту танцюючого дерева-квітки ми скористалися сервісом mixamo.com – це безкоштовний сервіс від Adobe. У ньому будь-хто за лічені хвилини може зробити для свого персонажа круту анімацію з величезної бібліотеки. Радимо спробувати погратися, навіть, якщо ви далекі від теми графіки.

Правда, готові анімації нам уже не підходили, адже головний персонаж мав досить своєрідну ходу в мультфільмі, яку потрібно було відтворити самостійно. Ми мали зробити анімаційний скелет для моделі, накидати легкий ріг (система маріонеткового управління персонажем) і повторити анімацію персонажа вручну, що ми і зробили.

Оскільки розмір вихідного файлу вкрай обмежений і становить всього 4Мб, ми прийшли до того, що навіть плоскі ігри потрібно робити, комбінуючи 2D- і 3D- графіку. Наприклад, анімацію головного персонажа для гри логічніше було взяти з мультика і вставити 1 в 1. Але таке рішення спричинило б значне збільшення обсягу вихідних даних. Тому квітку і її анімацію ми традиційно реалізували в 3D – це заощадило мегабайти.

Не дивлячись на те, що часу було обмаль, ми все-одно модифікували процес і впровадили кілька дрібних, але прикольних деталей. Наприклад, можна помітити, що рівень візуально розбитий на «плани» і вони рухаються з різною швидкістю. Це створює додатковий візуальний об’єм у «плоскій» грі. Крім цього, декорації починають рухатися все швидше, що дає ефект наростаючого руху. Навколо нас все «мчить» – прямо як в умовах фестивалю в житті.

Власний підхід до створення ігор з механіками такого типу, а також наші особисті напрацювання дозволили зробити класний продукт у рекордні терміни.

Механіка:

Управління грою – елементарне. Усе що потрібно від гравця – це моргати, щоб підстрибнути в момент, коли необхідно підібрати предмети (мінеральну воду і пластинки).

Збірка проєкту в spark ar studio

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

Cтворення ігрової маски

Ігровим інтерфейсом виступили окуляри на очах гравця – відсилання до образів відвідувачів фестивалю. На них ми зображали кількість очок (кроки) і рівень води (життя).

Поступово під час проходження грати стає все складнішим, локації змінюються з вечірньої на нічну, а темп гри прискорюється. Чергові відсилання до реального життя.

Після програшу користувач залишався в ігрових окулярах, на яких фіксувався його результат. Таким чином будь-хто міг «похвалитися» в своїх інстаграм-історіях тим, як далеко він просунувся в грі. Це стимулювало його підписників приєднатися.

На додаток ми не забули про один з найкрутіших і невмирущих трендів у доповненій реальності Instagram – танцюючих персонажах. Маючи готову 3D- модель, ми паралельно відтворили її анімаційну версію у вигляді іншого інстаграм-ефекту – плавно танцюючого Дерева-Квітки.

Це допомогло нам створити справжню наскрізну інтеграцію головного героя. З ним можна взаємодіяти всередині платформи, використовуючи передню камеру, і в фізичному оточенні, використовуючи фронтальну камеру смартфона.

Завершальним етапом було створення інстаграм-маски. Ідею для неї ми взяли з іншого головного героя – Жучка в загадкових окулярах.

Всі наші ефекти ми намагалися «оживити» за допомогою мало помітних, але важливих деталей: погойдування ріжок на голові користувача під час рухів голови, поява і рух відблиску на окулярах або мало помітного руху зіниць на очах жучка.

Висновки

Цей вид комунікації був спрямований на сучасну молоду аудиторію, якій подобається експериментувати. Адже за задумом команди Brave люди повинні не просто дивитися на об’єкти сучасного мистецтва або слухати музику – вони мають з відвідувачів перетворитися в учасників фестивалю, стати частиною оточення.

Як фільтри виглядали в житті 

У результаті у нас вийшло розробити цілий пакет з абсолютно різних фільтрів, які передають атмосферу фестивалю і допомагають людині ненадовго стати його частиною. Впевнені, що подібні сюжети з декількох фільтрів, у зв’язці з додатковими рішеннями, стануть свого роду стандартом у новоутвореній ніші AR-візуальних комунікацій.

У нас є ще дещо для вас