Bir HTML5 (H5) oyununun yapısı

Genelde çoğu oyun distribütörü, oyunlarını tam ekran oynanabilen ya da bir uygulama içindeki Web Görünümü veya Web Görünümü

Oyunu barındıran sayfa (oynatılabilir oyun tuvali), AdSense kodunu ('etiket') içerir, oyunun JavaScript mantığını yükler ve genellikle oyunun oluşturulduğu tuval öğesini içerir.

Ad Placement API ile amacımız, oyununuza eklemeniz gereken kodu en aza indirmektir. Böylece, sürekli olarak oyununuzu değiştirmek ve oyununuzun yeni sürümlerini yayınlamak zorunda kalmadan reklamları kontrol edebilirsiniz.

Bu şekilde HTML5 oyunun kavramsal yapısını inceleyin. Örnek kod, Örnek H5 oyun yapısı bölümündedir.

H5 oyunlarının doğrudan JavaScript'i veya 2D ve 3D grafikler için kullanılan üçüncü taraf kitaplıklarını kullanarak kanvas widget'ı, oyun motorları ve bazı durumlarda diğer dillerdeki çok karmaşık çapraz derleme süreçleri birçok farklı şekilde oluşturulabilir.

Ad Placement API, oyun tuvali ve adsbygoogle etiketiyle aynı belgede çalışacak şekilde tasarlanmıştır. Örneğin, bir oyunu geniş bir sayfaya iFrame olarak eklerseniz etiket ve API'ye yapılan tüm çağrılar bu iFrame içinden yapılmalıdır.

Örnek H5 oyun yapısı

Aşağıdaki daha ayrıntılı bir örnek, tipik bir oyun sayfasının önemli parçalarını göstermektedir.

H5 oyunlarının doğrudan JavaScript'i veya 2D ve 3D grafikler için kullanılan üçüncü taraf kitaplıklarını kullanarak kanvas widget'ı, oyun motorları ve bazı durumlarda diğer dillerdeki çok karmaşık çapraz derleme süreçleri birçok farklı şekilde oluşturulabilir. Oyununuzun ayrıntıları bu örnekten farklı olabilir.

<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, oyun tuvali ve adsbygoogle etiketiyle aynı belgede çalışacak şekilde tasarlanmıştır. Örneğin, bir oyunu geniş bir sayfaya iFrame olarak eklerseniz etiket ve API'ye yapılan tüm çağrılar bu iFrame içinden yapılmalıdır.

<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 oyunları nasıl dağıtılır?

H5 oyunları birçok farklı şekilde ve birçok farklı platformda dağıtılabilir. Genellikle oyunların oluşturulmasında ve dağıtımında farklı tüzel kişiler bulunabilir. Örneğin:

  • Geliştiriciler: Oyunları oluşturan kullanıcılar
  • Motorlar: Kendilerini geliştirmek için gerekli araçları sağlayan şirketler
  • Barındırma sağlayıcıları: Oyun barındıran
  • Dağıtımcılar: Zengin oyun katalogları oluşturmak için geliştiricilerle birlikte çalışan
  • Yayıncılar: Trafik kaynağının sahibi olan ve sitelerine veya uygulamalarına oyun yerleştirmek isteyen yayıncılar

Varlıklar çoğu durumda bu rolleri kapsayabilir. Kendi oyunlarınızı geliştirebilir, barındırabilir ve yayınlayabilirsiniz.

Oyunlar farklı şekillerde oynanabilir. Örneğin:

  • Tam ekran: Daha sürükleyici bir deneyim için ekranın tamamını kaplar
  • iFrame/WebView: Daha büyük bir dokümanın bir parçasında sunulduğu yer
  • Yerleşik: Doğrudan başka içeriğe sahip sayfalara yerleştirilir

Reklamların gerçekte nasıl gösterildiğini gösteren şema

Tam ekran ve iFrame deneyimleri hem web hem de uygulama için geçerlidir (bu örnekte "iFrame" uygulaması da yerleşik olarak bulunan bir Web Görünümü'ne işaret edebilir). Oyunların çoğunun bu şekilde dağıtılmasını bekliyoruz. Yerleşik oyunlar yalnızca web deneyimleridir.

Unutmayın

  1. Etiketi içeren HTML dokümanı reklamın gösterildiği yerdir.
  2. Reklam, çevreleyen dokümanı her zaman tamamen kapsamalıdır.
  3. Etiket ve oyun her zaman aynı dokümanın içinde olmalıdır.