Struktur eines HTML5-Spiels (H5)

Normalerweise hosten die meisten Spielevertreiber ihre Spiele in einer Form, die ganz einfach im Vollbildmodus oder als iFrame auf einer anderen Webseite oder in einer WebView innerhalb einer App wiedergegeben werden kann.

Die Seite, auf der das Spiel gehostet wird (also der spielbare Canvas), enthält den AdSense-Code ('das Tag'), lädt die JavaScript-Logik für das Spiel und enthält normalerweise ein Canvas-Element, in dem das Spiel gerendert wird.

Mit der Ad Placement API möchten wir den Code für Ihr Spiel minimieren. Du kannst also die Anzeigen steuern, ohne dein Spiel ständig verändern oder neue Versionen veröffentlichen zu müssen.

In dieser Abbildung sehen Sie sich die konzeptionelle Struktur eines HTML5-Spiels an. Beispielcode finden Sie im Abschnitt Beispiel für eine H5-Spielstruktur.

Es gibt viele Möglichkeiten, H5-Spiele mit JavaScript direkt zu erstellen. Bibliotheken für 2D- und 3D-Grafiken, die in einem Canvas-Widget, Spiel-Engines und in einigen Fällen auch komplexe Kompilierungsprozesse aus anderen Sprachen rendern können, lassen sich aber auch von Drittanbietern nutzen.

Die Ad Placement API ist so konzipiert, dass sie im selben Dokument wie der Spiele-Canvas und das adsbygoogle-Tag ausgeführt wird. Wenn Sie beispielsweise ein Spiel als iFrame auf einer größeren Seite hinzufügen, sollten das Tag und alle API-Aufrufe innerhalb dieses iFrames ausgeführt werden.

H5-Spielstruktur

Das folgende detailliertere Beispiel zeigt die wichtigsten Teile einer typischen Spieleseite.

Es gibt viele Möglichkeiten, H5-Spiele mit JavaScript direkt zu erstellen. Bibliotheken für 2D- und 3D-Grafiken, die in einem Canvas-Widget, Spiel-Engines und in einigen Fällen auch komplexe Kompilierungsprozesse aus anderen Sprachen rendern können, lassen sich aber auch von Drittanbietern nutzen. Die genauen Spieldetails können von diesem Beispiel abweichen.

<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>

Die Ad Placement API ist so konzipiert, dass sie im selben Dokument wie der Spiele-Canvas und das adsbygoogle-Tag ausgeführt wird. Wenn Sie beispielsweise ein Spiel als iFrame auf einer größeren Seite hinzufügen, sollten das Tag und alle API-Aufrufe innerhalb dieses iFrames ausgeführt werden.

<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>

So werden H5-Spiele vertrieben

H5-Spiele können auf viele verschiedene Arten und auf vielen verschiedenen Plattformen vertrieben werden. Für die Erstellung und den Vertrieb von Spielen können verschiedene Entitäten gelten:

  • Entwickler: die Entwickler der Spiele
  • Engines – Unternehmen, die Tools zur Erstellung bereitstellen
  • Hostanbieter – Spielehosts
  • Vertreiber – Gemeinsam mit Entwicklern können zahlreiche Kataloge von Spielen erstellt werden.
  • Publisher, die die Besucherquelle haben und Spiele auf ihren Websites oder in ihren Apps platzieren möchten

In vielen Fällen können Entitäten diese Rollen umfassen – Sie können Ihre eigenen Spiele entwickeln, hosten und veröffentlichen.

Es gibt verschiedene Möglichkeiten, Spiele zu spielen:

  • Vollbild: Hier wird der gesamte Bildschirm eingeholt, um ein immersives Erlebnis zu bieten.
  • iFrame/WebView – wo sie Teil eines größeren Dokuments sind
  • Eingebettet: wo sie direkt auf Seiten mit anderen Inhalten platziert werden

Diagramm zur Darstellung der Anzeigen

Die Vollbild- und iFrame-Funktionen gelten sowohl für das Web als auch für Apps (in diesem Fall kann es sich auch auf ein WebView beziehen, das in einer App eingebettet ist). Wir gehen davon aus, dass die meisten Spiele auf diese Weise vertrieben werden. Eingebettete Spiele sind Web-Erlebnisse.

Wichtig

  1. Im HTML-Dokument mit dem Tag wird die Anzeige ausgeliefert.
  2. Die Anzeige muss das umschließende Dokument immer vollständig verdecken.
  3. Das Tag und das Spiel sollten sich immer im selben Dokument befinden.