Burn In Web

From Ciliz|W4

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

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

Логотип HTML 5

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

Логотип WebGL

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

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

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

Игра Целуй и Знакомься

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

Hyper-casual games

Гипер-кэжуал это максимально простая игра, в которую легко начать играть. Подобные игры отличаются отсутствием сложного сюжета и минимальным управлением (в одно нажатие, тап, свайп). Они нацелены на развлечение пользователя в транспорте или в очереди, чтобы убить время. Одним из требований к подобным играм является относительно небольшой размер, чтобы пользователь не ждал загрузки игры, а начал играть почти сразу.

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

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

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

JavaScript-logo.png

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

WebGL

WebGL logo.png

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

WebAssembly

WebAssembly Logo.svg.png

HTML 5, WebGL и JavaScript позволяют делать очень многое, но их не достаточно, чтобы обеспечить скорость, безопасность и кросс-платформенность в небольшом объеме данных.

Технология WebAssembly, поддерживается практически во всех современных браузерах. WebAssembly разрабатывается как веб-стандарт W3C WebAssembly Working Group и Community Group при активном участии основных производителей браузеров (подробнее см. [https://en.wikipedia.org/wiki/WebAssembly на Wikipedia).

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

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

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

Наше решение

Logo W4 small.png

Мы разрабатываем движок для программистов и разработчиков игр. Если вы уже делаете игры и можете позволить себе небольшую команду C++ программистов, мы можем предложить решение, позволяющее комфортно перейти в Web-разработку и поставить на поток производство таких web-приложений как Игры в социальных сетях, Hyper-casual games и Playable Ads.

Все нюансы взаимодействия с браузером наш движок возьмет на себя, к нему мы предоставим документацию и примеры кода, научим как собирать, запускать и отлаживать проекты. Вы пишете код в C++, он работает на Web, быстро и предсказуемо.

API

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

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

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

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

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

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

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

(ссыль).

Поддержка

??? 24/7)

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

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