Современные WEB-технологии позволяют создавать не только сайты визитки и магазины. В Web разрабатываются 3D-шутеры (например, RushTeam) и RPG (например, Сross Сode), не говоря уже о многообразии игр и приложений в социальных сетях. Все это создается с использованием HTML5, языка структурирования и представления содержимого, который формирует поведение современных веб-страниц.
Contents
Возможности 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 состоит трех частей:
- Обучение (в виде отдельного ролика или прямо в интерфейсе игры).
- Сама игра (секунд на 20 упрощенного геймплея).
- End Card (рекламная карточка, содержащая поощрение успеха и призыв к переходу к товару-услуге-игре).
Подробнее см. руководство по Playable Ads для брендов.
Преимущества
Playable Ads обладает рядом преимуществ:
- предоставляет итоговое предложение только тем пользователям, которые прошли игровое превью, следовательно они с большей вероятностью его примут;
- в равной степени подходит для мобильных сетей и устройств, встроенной рекламы в различных приложениях (например, в ТВ приставках), социальных сетей и т.п.
- интерактивность позволяет маркетологам анализировать действия пользователей и модифицировать рекламный креатив и/или итоговое предложение;
- та же интерактивность позволяет поощрять пользователя за успешное прохождение Playable Ad, тем самым усиливая его заинтересованность;
- формат выгоден рекламным платформам, они его активно продвигают и готовы платить за удачные решения.
Применение
Если говорить о продвижении игры, то Playable Ad позволяет предоставить пользователю фрагмент геймплея, чтобы после его прохождения перейти к полной версии (если пользователь заинтересуется, конечно). В случае с рекламой бренда или услуги, играя в Playable Ad, пользователь получает информацию в игровой форме, а затем видит страницу с самим предложением.
Для чего еще может использоваться интерактивный подход Playable Ads:
- сбор информации о пользователе, чтобы сделать персональное предложение на итоговой странице и увеличить вероятность перехода. Может быть реализовано как опрос, тест, или анализ поведения в приложении;
- обработка видео и фото, получаемых от пользователя, для развлечения (фильтры, дополненная реальность) или демонстрации услуги (прически, очки и т.п.).
Перспективы
Насколько это актуально сейчас и в будущем? Аудитория социальных сетей, существующих не один десяток лет продолжает расширяться, а TikTok уже набирает популярность за пределами Китая. Для любой из этих сетей были и будут востребованы рекламные и развлекательные приложения, ведь аудитория подтверждена и изучена, а вложение денег дает оперативную обратную связь в быстро меняющемся мире (если не пошел один креатив, можно переключиться на другой). Кроме того, веб приложения и, в частности, Playable Ads могут и будут использоваться не только для рекламы игр, но и в других областях жизни - от сферы услуг, до торговли недвижимостью. Для всего этого будут нужны решения, соответствующие требованиям рекламных сетей (тогда как, например, Unity позволяет создавать игры, но размер этих игр далеко за пределами ограничений).
На чем делать Web-игры?
JavaScript
Специфика Web-разработки в том, что создаваемое приложение должно выполняться в разных браузерах. Единого стандарта для API браузера не было и нет, но язык JavaScript, поддерживаемый всеми современными браузерами, предоставляет API для доступа к файловой системе, памяти и так далее. Поэтому если поискать в Google "игровой движок для Web", получим такие решения как threejs, babylonjs и подобные. Общее в них то, что они сильно завязаны на JavaScript. При всей свой популярности JavaScript обладает рядом недостатков, как присущих всем динамическим языкам, так и специфичных для самого JavaScript (пруфы?проблемы с браузером, с динамическим языком, с сообществом).
WebGL
Для большинства игр и реклам в Web то, что пользователь видит на экране, формирует большую часть успеха. WebGL это интерфейс доступа к графическому API из JavaScript. Фактически это обертка над OpenGL 2.0., ставшая стандартом (ссыль), а OpenGL, в свою очередь, поддерживается всеми производителями оборудования от телефонов до ПК. WebGL портирован напрямую в веб ассемблер (пруф?) потому что каждая GL-функция в WebAssembly, вызывает такую же функцию в JavaScript. Разумеется такое многоуровневое обращение приводит к потерям производительности, но на хорошем оборудовании можно получить хороший результат.
WebAssembly
HTML 5 и 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++ разработчиков. Так как каждый вызов JavaScript влияет на производительность приложения, мы создаем решения, минимизирующие количество вызовов и максимально использующие то, в чем хорош WebAssembly, а именно физику, свет, сервисы и другие “тяжелые” расчеты. Таким образом функционал приложений позволяет делать то, что чистый JavaScript не может выполнять достаточно быстро. Поэтому наш движок превосходит любые известные альтернативы по показателям размера и функциональности создаваемых веб-приложений и даже умещается в размеры Playable Ads. Примеры: ..., ..., ... .