Burn In Web

Современные WEB-технологии позволяют создавать не только сайты визитки и магазины. В Web разрабатываются 3D-шутеры (например, RushTeam) и RPG (например, Сross Сode), не говоря уже о многообразии игр и приложений в социальных сетях. Все это создается с использованием HTML5, языка структурирования и представления содержимого, который формирует поведение современных веб-страниц.

Возможности HTML 5

Кроме очевидных элементов управления и оформления, на HTML 5 можно реализовывать полноценные браузерные игры и Playable Ads (интерактивная или игровая реклама, приходящая на смену надоевшим рекламным баннерам). HTML 5, и в частности WebGL,

позволяет создавать решения с полноценной физикой и 3D графикой, доступные посредством любого браузера последних лет (т.е., если у вас не какое-то уникальное/древнее оборудование, то просто любого).

Игры в социальных сетях

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

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

Playable Ads

Описание Playable Ads

Название можно перевести как “играбельная реклама”, но, как правило, это понятие не переводят, а так и произносят Playable Ads. Это небольшие по объему игровые приложения, целью которых является продвижение товаров (игр) или услуг. По сути, Playable Ads является следующим шагом развития интернет рекламы и подходит как для ПК, так и для мобильных устройств. Реализованная игра должна быть достаточно интересной, чтобы оставить позитивное впечатление, и достаточно релевантной тому, что рекламируется, чтобы не разочаровать пользователя после.

Требования рекламных площадок

Требования к Playable Ads особенно сильно ограничивают размер приложения, так как они завязаны на объем рекламного трафика, оплачиваемый рекламными платформами. Причина в том, что чем меньше будет объем конкретного рекламного приложения, тем дешевле обойдутся миллионы его показов на различных рекламных площадках. А в случае с мобильными сетями, где скорость загрузки ограничена, малый размер будет важен и для пользователя. Данный формат продвигается всеми основными рекламными платформами такими как AppsFlyer, IronSource, Unity Ads, Facebook Ads и т.д. Общим для всех требований является формат HTML5. При этом часто запрещено обращение к внешним ресурсам, все скрипты должны быть внедрены в код одной страницы index.html, а размер index.html ограничен (как правило 2 мегабайтами, но чем меньше, тем лучше). Например, для Facebook проходит 2 мегабайта (https://www.facebook.com/business/help/412951382532338), а для Universal App Campaigns (UAC) в Google Ads только 1 мегабайт (https://support.google.com/google-ads/answer/9302396?hl=en-GB).

Структура

Playable Ad состоит трех частей:

1. Обучение (в виде отдельного ролика или прямо в интерфейсе игры).
2. Сама игра (секунд на 20 упрощенного геймплея).
3. End Card (рекламная карточка, содержащая поощрение успеха и призыв к переходу к товару-услуге-игре).

Подробнее см. руководство по Playable Ads для брендов.

Преимущества

Playable Ads обладает рядом преимуществ:

• предоставляет итоговое предложение только тем пользователям, которые прошли игровое превью, следовательно они с большей вероятностью его примут;
• в равной степени подходит для мобильных сетей и устройств, встроенной рекламы в различных приложениях (например, в ТВ приставках), социальных сетей и т.п.
• интерактивность позволяет маркетологам анализировать действия пользователей и модифицировать рекламный креатив и/или итоговое предложение;
• та же интерактивность позволяет поощрять пользователя за успешное прохождение Playable Ad, тем самым усиливая его заинтересованность;
• формат выгоден рекламным платформам, они его активно продвигают и готовы платить за удачные решения.

Применение

Если говорить о продвижении игры, то Playable Ad позволяет предоставить пользователю фрагмент геймплея, чтобы после его прохождения перейти к полной версии (если пользователь заинтересуется, конечно). В случае с рекламой бренда или услуги, играя в Playable Ad, пользователь получает информацию в игровой форме, а затем видит страницу с самим предложением.

Для чего еще может использоваться интерактивный подход Playable Ads:

• сбор информации о пользователе, чтобы сделать персональное предложение на итоговой странице и увеличить вероятность перехода. Может быть реализовано как опрос, тест, или анализ поведения в приложении;
• обработка видео и фото, получаемых от пользователя, для развлечения (фильтры, дополненная реальность) или демонстрации услуги (прически, очки и т.п.).

Перспективы

Насколько это актуально сейчас и в будущем? Аудитория социальных сетей, существующих не один десяток лет продолжает расширяться, а TikTok уже набирает популярность за пределами Китая. Для любой из этих сетей были и будут востребованы рекламные и развлекательные приложения, ведь аудитория подтверждена и изучена, а вложение денег дает оперативную обратную связь в быстро меняющемся мире (если не пошел один креатив, можно переключиться на другой). Кроме того, веб приложения и, в частности, Playable Ads могут и будут использоваться не только для рекламы игр, но и в других областях жизни - от сферы услуг до торговли недвижимостью. Для всего этого будут нужны решения, соответствующие требованиям рекламных сетей (тогда как, например, Unity позволяет создавать игры, но размер этих игр далеко за пределами ограничений).

На чем делать Web-игры?

JavaScript

Специфика Web-разработки в том, что создаваемое приложение должно хорошо выполняться в разных браузерах. Язык JavaScript, поддерживаемый всеми современными браузерами, позволяет работать с их API. Поэтому если поискать в Google "игровой движок для Web", получим такие решения как threejs и babylonjs. Общее в них то, что они сильно завязаны на JavaScript. При всей свой популярности JavaScript не является универсальным решением, например, он плохо (медленно) справляется со сложными вычислениями.

WebGL

Для большинства игр и реклам в Web то, что пользователь видит на экране, формирует большую часть успеха. WebGL это интерфейс доступа к графическому API из JavaScript, используемый в современных браузерах. Фактически это обертка над OpenGL 2.0., который, в свою очередь, поддерживается всеми производителями оборудования от телефонов до ПК. WebGL прекрасно сочетается с WebAssembly (см., например, презентацию Khronos Developer Day, GDC 2018) и каждая GL-функция в WebAssembly вызывает такую же функцию в JavaScript. Разумеется такое многоуровневое обращение приводит к потерям производительности, но на хорошем оборудовании можно получить хороший результат.

WebAssembly

HTML 5, WebGL и JavaScript позволяют делать очень многое, но для того чтобы обеспечить скорость, безопасность и кросс-платформенность в небольшом объеме данных, была создана технология WebAssembly, которую поддерживают практически все современные браузеры. И не просто поддерживают - WebAssembly разрабатывается как веб-стандарт W3C WebAssembly Working Group и Community Group при активном участии основных производителей браузеров (см. https://en.wikipedia.org/wiki/WebAssembly).

Ценность этого решения в том, что байт код WebAssembly компилируется из языка высокого уровня (C, C++ и некоторых других). Грубо говоря, если для исполнения кода нужна какая-то C++ библиотека, которой нет в браузере, WebAssembly сам ее скомпилирует так, что все будет работать. Также WebAssembly производит сложные вычисления значительно быстрее, чем это делает JavsScript (см., например, это исследование). Но для доступа к ресурсам, таким как файловая система, память, видеокарта и т.п., остается нужен JavaScript. Обойтись только WebAssembly нельзя, зато можно извлечь из него максимум пользы.

Здесь стоит отметить Unity, популярный игровой движок, где есть возможность собрать web-версию созданной игры путем компиляции C# в WebAssembly. Но это опция универсального движка, ни о какой специализации для достижения минимального размера и максимального быстродействия речь не идет (см., например, тесты для самой простой сцены).

Наше решение

В первую очередь мы используем WebAssembly. То, что он компилируется из C++, дает большие преимущества нашей команде C++ разработчиков, которая изначально специализируется на web-разработке и C++. Решения те же, что и у других, но компактнее и, возможно(?), быстрее.

API

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

Кроме C++, поддерживается код на JavsScript, и вы можете его использовать там, где вам удобно.

Документация

Она есть (ссыль).

Поддержка

??? 24/7)

Целевое устройство

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

Функциональность

Наше преимущество в деталях сложных решений, позволяет выигрывать в общем качестве продукта и избежать большой потери производительности связки WebAssemble-JavaScript. Так как каждый вызов JavaScript влияет на производительность приложения, мы создаем решения, минимизирующие количество вызовов и максимально использующие то, в чем хорош WebAssembly, а именно физику, свет, сервисы и другие “тяжелые” расчеты. Таким образом функционал наших приложений позволяет делать то, что чистый JavaScript не может выполнять достаточно быстро. Поэтому они превосходит любые известные альтернативы по показателям размера и функциональности и даже умещаются в размеры Playable Ads.

Примеры решений

...,
...,
... .