Unity WebGL Yandex Games SDK-Integration

67 jb557134

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

Unity WebGL Yandex Games SDK-Integration

Empfohlen

13 January 2026

Schwertkampf Unity WebGL Spiel HTML-Vorlage

18 December 2025

Unity WebGL Slope Plus Game Loader

HTML

<head>
  <meta charset="utf-8" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <link rel="stylesheet" href="./style.css" /> 
  
  <script src="https://cdn.jsdelivr.net/gh/gn-math/assets@main/yandex-sdk.js?lol"></script>
  <style>
    canvas:focus {
      outline: none;
    }

html,
    body {
      padding: 0;
      margin: 0;
      overflow: hidden;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      height: 100%;
    }
  </style>
  
</head>

<body class="dark">
  <div id="unity-container" class="unity-desktop">
    <canvas id="unity-canvas" tabindex="-1"></canvas>
  </div>
  <div id="loading-cover" style="display: none">
    <div id="unity-loading-bar">
      <div id="unity-logo"><img src="Images/logo.png" /></div>
      <div id="unity-progress-bar-empty" style="display: none">
        <div id="unity-progress-bar-full"></div>
      </div>
      <div class="spinner"></div>
    </div>
  </div>
  
  <script>
            function mergeFiles(fileParts) {
            return new Promise((resolve, reject) => {
                let buffers = [];

const container = document.querySelector("#unity-container");
    const canvas = document.querySelector("#unity-canvas");
    const loadingCover = document.querySelector("#loading-cover");
    const progressBarEmpty = document.querySelector(
      "#unity-progress-bar-empty"
    );
    const progressBarFull = document.querySelector(
      "#unity-progress-bar-full"
    );
    const spinner = document.querySelector(".spinner");

if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
      container.className = "unity-mobile";
    }

// The background image when loading the game. When building a build, the code changes depending on the project settings.

loadingCover.style.display = "";

let StartUnityInstance;
    let ygGameInstance = null;
    let ysdk = null;
    let initYSDK = false;
    let initGame = false;
    let syncInit = false;
    let isVisibility = true;
    let isPausedGame = false;
    const NO_DATA = "no data";

document.addEventListener("contextmenu", (event) =>
      event.preventDefault()
    );
    document.addEventListener("visibilitychange", () =>
      SetVisibility(!document.hidden)
    );
    window.addEventListener("blur", () => SetVisibility(false));
    window.addEventListener("focus", () => SetVisibility(true));

window.addEventListener("pointerdown", () => {
      FocusGame();
      SetVisibility(true);
    });

function InstallBlurFocusBlocker() {
      if (!("onblur" in document)) return;
      if (window.blurFocusHandlersInstalled) return;

window.addEventListener("blur", function() {
        let blockerButton = document.createElement("button");
        blockerButton.style.position = "fixed";
        blockerButton.style.top = "0";
        blockerButton.style.left = "0";
        blockerButton.style.width = "100%";
        blockerButton.style.height = "100%";
        blockerButton.style.zIndex = "9999";
        blockerButton.style.backgroundColor = "rgba(0, 0, 0, 0)";
        blockerButton.style.border = "none";
        blockerButton.style.cursor = "default";

document.body.appendChild(blockerButton);

function removeBlocker() {
          if (blockerButton && blockerButton.parentNode) {
            blockerButton.parentNode.removeChild(blockerButton);
          }
          window.removeEventListener("focus", removeBlocker);
        }

window.addEventListener("focus", removeBlocker);
      });

window.blurFocusHandlersInstalled = true;
    }

function FocusGame() {
      canvas.focus();
    }

const PauseCallback = () => {
      isPausedGame = true;
      YG2Instance("SetPauseGame", "true");
    };

const ResumeCallback = () => {
      isPausedGame = false;
      YG2Instance("SetPauseGame", "false");
    };

InstallBlurFocusBlocker();
      // Removed duplicate call, now handled after config is set

if (IsLocalHost() || syncInit) StartUnityInstance_IfUnloaded();
    };

function StartUnityInstance_IfUnloaded() {
      if (spinner.style.display !== "none") StartUnityInstance();
    }

function IsLocalHost() {
      return true;
      try {
        if (window.top !== window) {
          return false;
        }

const host = window.location.hostname;
        if (
          host === "localhost" ||
          host === "127.0.0.1" ||
          host.endsWith(".local")
        ) {
          LogStyledMessage("Local Host");
          return true;
        }
      } catch (error) {
        console.error("Error checking the local host:", error);
        return false;
      }
    }

function YG2Instance(method) {
      if (ygGameInstance == null) return;

if (!initGame) {
        setTimeout(function() {
          if (ygGameInstance)
            ygGameInstance.SendMessage("YG2Instance", method);
        }, 100);
      } else {
        ygGameInstance.SendMessage("YG2Instance", method);
      }
    }

function YG2Instance(method, arg) {
      if (ygGameInstance == null) return;

if (!initGame) {
        setTimeout(function() {
          ygGameInstance.SendMessage("YG2Instance", method, arg);
        }, 100);
      } else {
        ygGameInstance.SendMessage("YG2Instance", method, arg);
      }
    }

function LogStyledMessage(message, style) {
      console.log("%c" + message, style);
    }

function LogStyledMessage(message) {
      console.log(
        "%c" + message,
        "color: #FFDF73; background-color: #454545"
      );
    }

async function InitYSDK() {
      try {
        if (IsLocalHost()) return;

ysdk = await YaGames.init();
        ysdk.on("game_api_pause", PauseCallback);
        ysdk.on("game_api_resume", ResumeCallback);

// Additional init0 modules
        await RequestingEnvironmentData();
        LogStyledMessage("Init EnvirData ysdk");

// Additional init1 modules

// Additional init2 modules
        await InitPlayer();
        LogStyledMessage("Init Authorization ysdk");

// Additional init modules
        await LoadCloud();
        LogStyledMessage("Init Storage ysdk");

await InitPayments();
        LogStyledMessage("Init Payments ysdk");

await GetFlags();
        LogStyledMessage("Init Flags ysdk");

initYSDK = true;
        if (ygGameInstance != null)
          ygGameInstance.SendMessage("YG2Instance", "InitSDKComplete");

LogStyledMessage("Init YandexSDK Success");
      } catch (e) {
        console.error("CRASH Initialization SDK: ", e);
      }

if (!IsLocalHost() && !syncInit) StartUnityInstance_IfUnloaded();
    }

function InitGame() {
      initGame = true;

setTimeout(function() {
        if (isPausedGame == true) YG2Instance("SetPauseGame", "true");
      }, 100);

// Additional start modules
    }

// Additional script modules
    LogStyledMessage("PluginYG2 v2.0041  build: 7");

var cloudSaves = NO_DATA;

function Final(res) {
          cloudSaves = res;
          YG2Instance("SetLoadSaves", res);
          resolve(res);
        }
      });
    }

var paymentsData = NO_DATA;
    let payments = null;

function InitPayments(sendback) {
      return new Promise((resolve) => {
        try {
          if (ysdk == null) {
            Final(NO_DATA);
            return;
          }

ysdk
            .getPayments()
            .then((_payments) => {
              payments = _payments;

payments.getCatalog().then((products) => {
                let productID = [];
                let title = [];
                let description = [];
                let imageURI = [];
                let price = [];
                let priceValue = [];
                let priceCurrencyCode = [];
                let currencyImageURL = [];
                let consumed = [];

payments.getPurchases().then((purchases) => {
                  for (let i = 0; i < products.length; i++) {
                    productID[i] = products[i].id;
                    title[i] = products[i].title;
                    description[i] = products[i].description;
                    imageURI[i] = products[i].imageURI;
                    price[i] = products[i].price;
                    priceValue[i] = products[i].priceValue;
                    priceCurrencyCode[i] = products[i].priceCurrencyCode;
                    currencyImageURL[i] =
                      products[i].getPriceCurrencyImage("medium");

consumed[i] = true;
                    for (i2 = 0; i2 < purchases.length; i2++) {
                      if (purchases[i2].productID === productID[i]) {
                        consumed[i] = false;
                        break;
                      }
                    }
                  }

let jsonPayments = {
                    id: productID,
                    title: title,
                    description: description,
                    imageURI: imageURI,
                    price: price,
                    priceValue: priceValue,
                    priceCurrencyCode: priceCurrencyCode,
                    currencyImageURL: currencyImageURL,
                    consumed: consumed,
                    language: ysdk.environment.i18n.lang,
                  };

Final(JSON.stringify(jsonPayments));
                });
              });
            })
            .catch((e) => {
              LogStyledMessage("Purchases are not available", e.message);
              Final(NO_DATA);
            });
        } catch (e) {
          console.error("CRASH Init Payments: ", e.message);
          Final(NO_DATA);
        }

function Final(res) {
          paymentsData = res;
          YG2Instance("PaymentsEntries", res);
          resolve(res);
        }
      });
    }

function ConsumePurchase(id, onPurchaseSuccess) {
      try {
        if (payments != null) {
          payments.getPurchases().then((purchases) => {
            for (i = 0; i < purchases.length; i++) {
              if (purchases[i].productID === id) {
                payments.consumePurchase(purchases[i].purchaseToken);

if (onPurchaseSuccess) YG2Instance("OnPurchaseSuccess", id);
              }
            }
          });
        } else {
          LogStyledMessage("Consume purchase: payments null");
        }
      } catch (e) {
        console.error("CRASH Consume Purchase: ", e.message);
      }
    }

function ConsumePurchases(onPurchaseSuccess) {
      try {
        if (payments != null) {
          payments.getPurchases().then((purchases) => {
            LogStyledMessage("Unprocessed purchases: ", purchases.length);
            for (i = 0; i < purchases.length; i++) {
              payments.consumePurchase(purchases[i].purchaseToken);

if (onPurchaseSuccess)
                YG2Instance("OnPurchaseSuccess", purchases[i].productID);
            }
          });
        } else {
          LogStyledMessage("Consume purchases: payments null");
        }
      } catch (e) {
        console.error("CRASH Consume purchases: ", e.message);
      }
    }

function SetLeaderboard(name, score, extraData) {
      if (!ysdk) return;

try {
        ysdk.leaderboards.setScore(name, score, extraData);
      } catch (e) {
        console.error("CRASH Set Leaderboard: ", e.message);
      }
    }

function GetLeaderboard(
      nameLB,
      quantityTop,
      quantityAround,
      photoSize,
      auth
    ) {
      if (!ysdk) return;

var jsonEntries = {
        technoName: "",
        isDefault: false,
        isInvertSortOrder: false,
        decimalOffset: 0,
        type: "",
      };

ysdk.leaderboards
        .getDescription(nameLB)
        .then((res) => {
          jsonEntries.technoName = nameLB;
          jsonEntries.isDefault = res.default;
          jsonEntries.isInvertSortOrder = res.description.invert_sort_order;
          jsonEntries.decimalOffset =
            res.description.score_format.options.decimal_offset;
          jsonEntries.type = res.description.type;

return ysdk.leaderboards.getEntries(nameLB, {
            quantityTop: quantityTop,
            includeUser: auth,
            quantityAround: quantityAround,
          });
        })
        .then((res) => {
          let jsonPlayers = EntriesLB(res, photoSize);
          let combinedJson = {
            ...jsonEntries,
            ...jsonPlayers
          };

YG2Instance("LeaderboardEntries", JSON.stringify(combinedJson));
        })
        .catch((err) => {
          if (err.code === "LEADERBOARD_PLAYER_NOT_PRESENT")
            LogStyledMessage("Leaderboard player not present");
          console.error(err);
        });
    }

function EntriesLB(res, photoSize) {
      let LbdEntriesText = "";
      let plCount = res.entries.length;

let ranks = new Array(plCount);
      let photos = new Array(plCount);
      let names = new Array(plCount);
      let scores = new Array(plCount);
      let uniqueIDs = new Array(plCount);
      let extraDataArray = new Array(plCount);

for (i = 0; i < plCount; i++) {
        ranks[i] = res.entries[i].rank;
        scores[i] = res.entries[i].score;
        uniqueIDs[i] = res.entries[i].player.uniqueID;
        photos[i] = res.entries[i].player.getAvatarSrc(photoSize);

if (
          res.entries[i].extraData == "" ||
          res.entries[i].extraData == null
        )
          extraDataArray[i] = NO_DATA;
        else extraDataArray[i] = res.entries[i].extraData;

if (res.entries[i].player.scopePermissions.public_name !== "allow")
          names[i] = "anonymous";
        else names[i] = res.entries[i].player.publicName;

LbdEntriesText +=
          ranks[i] + ". " + names[i] + ": " + scores[i] + "\n";
      }

if (plCount === 0) {
        LbdEntriesText = "no data";
      }

let jsonPlayers = {
        entries: LbdEntriesText,
        ranks: ranks,
        photos: photos,
        names: names,
        scores: scores,
        uniqueIDs: uniqueIDs,
        extraDataArray: extraDataArray,
      };

return jsonPlayers;
    }

let nowFullAdOpen = false;

function InterAdvShow() {
      YG2Instance("CloseInterAdv", "true");
      FocusGame();
      return;
      try {
        if (ysdk == null) {
          LogStyledMessage("Cancel InterAdvShow: SDK is not initialized");
          return;
        }
        if (nowFullAdOpen == true) {
          LogStyledMessage(
            "Cancel InterAdvShow: The advertisement is already open"
          );
          return;
        }

ysdk.adv.showFullscreenAdv({
          callbacks: {
            onOpen: () => {
              LogStyledMessage("Open Interstitial Adv");
              nowFullAdOpen = true;
              if (initGame === true) {
                YG2Instance("OpenInterAdv");
              }
            },
            onClose: (wasShown) => {
              LogStyledMessage("Close Interstitial Adv");
              nowFullAdOpen = false;
              if (initGame === true) {
                if (wasShown) {
                  YG2Instance("CloseInterAdv", "true");
                } else {
                  YG2Instance("CloseInterAdv", "false");
                }
              }
              FocusGame();
            },
            onError: (error) => {
              console.error("Error Interstitial Adv", error);
              nowFullAdOpen = false;
              YG2Instance("ErrorInterAdv");
              FocusGame();
            },
          },
        });
      } catch (e) {
        console.error("CRASH Interstitial Adv Show: ", e.message);
      }
    }

let flasgsData = NO_DATA;

function GetFlags() {
      return new Promise((resolve) => {
        if (ysdk == null) {
          Final(NO_DATA);
          return;
        }
        try {
          ysdk.getFlags().then((flags) => {
            let names = [];
            let values = [];

for (let key in flags) {
              if (flags.hasOwnProperty(key)) {
                names.push(key);
                values.push(flags[key]);
              }
            }

let jsonFlags = {
              names: names,
              values: values,
            };

Final(JSON.stringify(jsonFlags));
          });
        } catch (e) {
          console.error("CRASH Get Flags: ", e.message);
          Final(NO_DATA);
        }

function Final(res) {
          flasgsData = res;
          resolve(res);
        }
      });
    }

var environmentData = NO_DATA;

function RequestingEnvironmentData() {
      return new Promise((resolve) => {
        if (ysdk == null) {
          Final(NO_DATA);
          return;
        }
        try {
          var browser = navigator.userAgent;
          if (
            browser.includes("YaBrowser") ||
            browser.includes("YaSearchBrowser")
          )
            browser = "Yandex";
          else if (browser.includes("Opera") || browser.includes("OPR"))
            browser = "Opera";
          else if (browser.includes("Firefox")) browser = "Firefox";
          else if (browser.includes("MSIE")) browser = "IE";
          else if (browser.includes("Edge")) browser = "Edge";
          else if (browser.includes("Chrome")) browser = "Chrome";
          else if (browser.includes("Safari")) browser = "Safari";
          else browser = "Other";

let jsonEnvir = {
            language: ysdk.environment.i18n.lang,
            domain: ysdk.environment.i18n.tld,
            deviceType: ysdk.deviceInfo.type,
            isMobile: ysdk.deviceInfo.isMobile(),
            isDesktop: ysdk.deviceInfo.isDesktop(),
            isTablet: ysdk.deviceInfo.isTablet(),
            isTV: ysdk.deviceInfo.isTV(),
            appID: ysdk.environment.app.id,
            browserLang: ysdk.environment.browser.lang,
            payload: ysdk.environment.payload,
            platform: navigator.platform,
            browser: browser,
          };

Final(JSON.stringify(jsonEnvir));
          LogStyledMessage("Environment Data: " + JSON.stringify(jsonEnvir));
        } catch (e) {
          console.error("CRASH Requesting Environment Data: ", e.message);
          Final(NO_DATA);
        }

function Final(res) {
          environmentData = res;
          YG2Instance("SetEnvirData", res);
          resolve(res);
        }
      });
    }

var playerData = NO_DATA;
    let player = null;

async function InitPlayer() {
      return new Promise(async (resolve) => {
        try {
          if (!ysdk) return Final(NotAuthorized(false));

player = await ysdk.getPlayer();

if (!player.isAuthorized()) return Final(NotAuthorized());

const authJson = {
            playerAuth: "resolved",
            playerName: player.getName(),
            playerId: player.getUniqueID(),
            playerPhoto: player.getPhoto("small"),
            payingStatus: player.getPayingStatus(),
          };

return Final(JSON.stringify(authJson));
        } catch (e) {
          console.error("CRASH init Player: ", e.message);
          return Final(NotAuthorized(false));
        }

function Final(res) {
          playerData = res;
          YG2Instance("SetAuth", res);
          resolve(res);
        }
      });
    }

function NotAuthorized(isInitSDK = true) {
      let authJson = {
        playerAuth: "rejected",
        playerName: "unauthorized",
        playerId: isInitSDK ? player.getUniqueID() : "unauthorized",
        playerPhoto: "no data",
        payingStatus: "unknown",
      };
      return JSON.stringify(authJson);
    }

document.body.appendChild(script);
  </script>
</body>

</html>

Empfohlen

Schwertkampf Unity WebGL Spiel HTML-Vorlage

Unity WebGL Slope Plus Game Loader

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS