Структура игры HTML5 (H5)

Как правило, большинство дистрибьюторов игр размещают свои игры в форме, в которой можно легко играть в полноэкранном режиме, или в iFrame на другой веб-странице или в WebView в приложении.

Страница, на которой размещена игра (т. е. канва игры), содержит код AdSense («тег»), загружает логику JavaScript для игры и обычно содержит элемент канвы, на котором отображается игра.

Наша цель с Ad Placement API — свести к минимуму код, который вы должны добавить в свою игру. Таким образом, вы можете контролировать рекламу, без необходимости постоянно менять свою игру и выпускать новые ее версии.

Просмотрите концептуальную структуру игры HTML5 на этом рисунке. Пример кода доступен в разделе Пример структуры игры H5 .

Существует множество способов создания игр H5, используя непосредственно javascript или сторонние библиотеки для 2D- и 3D-графики, которые отображают виджет холста, игровые движки и, в некоторых случаях, довольно сложные процессы кросс-компиляции из других языков.

Ad Placement API предназначен для работы в том же документе, что и игровой холст и тег adsbygoogle . Например, если вы добавляете игру в виде iFrame на большую страницу, тег и все вызовы API должны выполняться из этого iFrame.

Пример структуры игры H5

В следующем более подробном примере показаны ключевые части типичной игровой страницы.

Существует множество способов создания игр H5, используя непосредственно javascript или сторонние библиотеки для 2D- и 3D-графики, которые отображают виджет холста, игровые движки и, в некоторых случаях, довольно сложные процессы кросс-компиляции из других языков. Точные детали вашей игры могут отличаться от этого примера.

<head>
   ## The Ad Placement tag ##
   # Configure your monetisation settings here and place the standard
   # boilerplate code for initialising the API functions. This code may change
   # depending on where the game is being distributed (eg. a website, a super
   # app, different publishers).
   <script async
       data-ad-frequency-hint="30s"
       src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-123456789" # your publisher ID
       crossorigin="anonymous">
   </script>
   <script>
      window.adsbygoogle = window.adsbygoogle || [];
      var adBreak = adConfig = function(o) {adsbygoogle.push(o);}
   </script>
   [...]
</head>
<body>
   [...]

   ## Your game code ##
   # This is your game logic that renders the playable canvas. Once you've
   # integrated your game with the Ad Placement API, this code won't change due
   # to ad configuration updates.
   <canvas id="game_canvas" width="100%" height="100%"></canvas>
   <script src="game.js"></script>
   [...]
</body>

Ad Placement API предназначен для работы в том же документе, что и игровой холст и тег adsbygoogle . Например, если вы добавляете игру в виде iFrame на большую страницу, тег и все вызовы API должны выполняться из этого iFrame.

<head>
  <!-- The adsbygoogle tag is not here -->
</head>
<body>
  <iframe src="https://www.my-game.com" title="My game" allow="autoplay">
    <!-- The game is loaded here and contains the adsbygoogle tag -->
  </iframe>
</body>

Как распространяются игры H5

Игры H5 можно распространять разными способами и на разных платформах. Часто в создании и распространении игр могут участвовать разные организации, в том числе:

  • Разработчики — люди, которые создают игры
  • Двигатели — компании, которые предоставляют инструменты для их создания
  • Хостинг-провайдеры - которые размещают игры
  • Дистрибьюторы - которые работают с разработчиками над созданием богатых каталогов игр.
  • Издатели , которые владеют источником трафика и хотят размещать игры на своих сайтах или в приложениях.

Во многих случаях организации могут выполнять эти роли — вы можете разрабатывать, размещать и публиковать свои собственные игры.

В игры можно играть по-разному, включая:

  • Полноэкранный режим — когда они занимают весь экран для полного погружения.
  • iFrame/WebView — где они служат частью более крупного документа.
  • Встроенные — когда они размещаются непосредственно на страницах с другим содержимым.

Диаграмма того, как на самом деле показываются объявления

Полноэкранный режим и возможности iFrame применимы как к веб-приложениям, так и к приложениям («iFrame» в данном случае также может относиться к WebView, встроенному в приложение) — мы ожидаем, что большинство игр будут распространяться таким образом. Встроенные игры предназначены только для Интернета.

Запомнить

  1. HTML-документ, содержащий тег, показывает рекламу.
  2. Объявление всегда должно полностью закрывать вложенный документ.
  3. Тег и игра всегда должны находиться в одном документе.