इस पेज का अनुवाद Cloud Translation API से किया गया है.

HTML5 (H5) गेम का स्ट्रक्चर

आम तौर पर, ज़्यादातर गेम डिस्ट्रिब्यूटर अपने गेम को ऐसे फ़ॉर्म में होस्ट करेंगे जिसे आसानी से फ़ुलस्क्रीन या iFrame किया जा सकता है. इसके अलावा, इसे किसी दूसरे वेब पेज या ऐप्लिकेशन में WebView में भी खेला जा सकता है.

गेम होस्ट करने वाले पेज (यानी गेम खेलने देने वाले गेम का कैनवस) में AdSense कोड (' टैग') मौजूद होता है. साथ ही, इसमें गेम के लिए JavaScript लॉजिक लोड होता है और आम तौर पर कैनवस एलिमेंट शामिल होता है, जहां गेम रेंडर किया जाता है.

Ad Placement API का लक्ष्य, गेम में जोड़े जाने वाले कोड को कम करना है. इससे, आपको अपने गेम में लगातार बदलाव करने और उसके नए वर्शन को रिलीज़ किए बिना, विज्ञापनों को कंट्रोल करने में मदद मिलेगी.

इस चित्र में दिए गए HTML5 गेम की सैद्धांतिक संरचना की समीक्षा करें. सैंपल कोड H5 गेम का उदाहरण का उदाहरण सेक्शन में उपलब्ध है.

H5 गेम कई तरीकों से बनाए जा सकते हैं. इनमें सीधे तौर पर JavaScript का इस्तेमाल करना या 2D और 3D ग्राफ़िक के लिए तीसरे पक्ष की लाइब्रेरी का इस्तेमाल करना शामिल है. ये लाइब्रेरी, कैनवस विजेट, गेम इंजन, और कुछ मामलों में दूसरी भाषाओं में क्रॉस-कंपाइलेशन की प्रोसेस के लिए मुश्किल होती हैं.

विज्ञापन प्लेसमेंट एपीआई, गेम कैनवस और adsbygoogle टैग वाले दस्तावेज़ के अंदर ही चलने के लिए डिज़ाइन किया गया है. उदाहरण के लिए, अगर आप किसी बड़े पेज में iFrame के तौर पर कोई गेम जोड़ते हैं, तो एपीआई को टैग और सभी कॉल उस iFrame में किए जाने चाहिए.

H5 गेम स्ट्रक्चर का उदाहरण

नीचे दिया गया उदाहरण, किसी सामान्य गेम पेज के अहम हिस्सों को दिखाता है.

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

<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" दोनों पर लागू होता है; इस मामले में, किसी ऐप्लिकेशन में जोड़े गए वेबव्यू से भी जुड़ा जा सकता है)—हम उम्मीद करते हैं कि ज़्यादातर गेम इस तरह से उपलब्ध कराए जाएंगे. एम्बेड किए गए गेम, सिर्फ़ वेब पर दिखने वाले अनुभव हैं.

याद रखें

टैग वाले एचटीएमएल दस्तावेज़ में विज्ञापन दिखाया जाता है.
विज्ञापन में हमेशा दस्तावेज़ को पूरी तरह से कवर करना चाहिए.
टैग और गेम हमेशा एक ही दस्तावेज़ में होने चाहिए.