Ενότητα

Εκτέλεση του Unity WebGL με ASP.NET Core

Σελίδα ενημέρωση :
Ημερομηνία δημιουργίας σελίδας :

Περιβάλλον επαλήθευσης

παράθυρα
  • Παράθυρα 11
Επεξεργαστής ενότητας
  • 2020.3.25στ1
Οπτικό στούντιο
  • Visual Studio 2022
ASP.NET Πυρήνας
  • ASP.NET Core 6.0
Υπηρεσίες Internet Information Services (IIS)
  • IIS 10.0

Αρχικά

Μάθετε πώς μπορείτε να εκτελέσετε μια έξοδο παιχνιδιού ως WebGL στο Unity σε έναν διακομιστή web που εκτελεί το ASP.NET Core. Για προγράμματα παιχνιδιών, χρησιμοποιήστε αυτά που εξάγονται στα παρακάτω βήματα συμβουλών. Το παράδειγμα παιχνιδιού χρησιμοποιεί το 2D Platformer Microgame, το οποίο μπορεί να δημιουργηθεί από το Unity Hub.

Θα εξηγήσω πώς να ρυθμίσετε το "Uncompressed WebGL", το "WebGL compressed with Gzip" και το "WebGL compressed with Brotli" για την εκτέλεση παιχνιδιών WebGL. Η διαδικασία είναι η ίδια για όλους.

Χρησιμοποιούμε το Visual Studio 2022, ASP.NET Core 6.0, αλλά οι παλαιότερες εκδόσεις πιθανότατα θα λειτουργούν. Ωστόσο, η δομή του αρχικού κώδικα είναι διαφορετική για κάθε έκδοση, οπότε κατανοήστε μόνοι σας τις διαφορές.

Δημιουργία ενός βασικού έργου ASP.NET

Εκκινήστε το "Visual Studio 2022" από το μενού έναρξης.

Επιλέξτε Δημιουργία νέου έργου.

Αυτή τη φορά, επιλέξτε "ASP.NET Core Web App" ως δείγμα. Εάν εκτελείτε ASP.NET Core, μπορείτε να εκτελέσετε άλλα πρότυπα, αλλά θα πρέπει να ακολουθήσετε κάθε πρότυπο σχετικά με τον τρόπο δημιουργίας του.

Ορίστε το όνομα και τη θέση του έργου αυθαίρετα.

Αφήστε τις πρόσθετες πληροφορίες ως έχουν.

Το έργο έχει δημιουργηθεί.

Εκτελέστε μη συμπιεσμένο WebGL

Προετοιμάστε ένα πρόγραμμα WebGL που δημιουργήθηκε χωρίς συμπίεση.

Βεβαιωθείτε ότι το παιχνίδι λειτουργεί γρήγορα

ASP.NET Δοκιμάστε να εκτελέσετε ένα παιχνίδι WebGL με λιγότερες ρυθμίσεις χωρίς να ακολουθήσετε την εθιμοτυπία Core.

Στο ASP.NET Core, δεν μπορείτε να αποκτήσετε πρόσβαση σε ορισμένα αρχεία WebGL που εκπέμπονται από το Unity στην προεπιλεγμένη κατάσταση. Κάντε αυτό προσβάσιμο.

Πρόγραμμα.cs

Ανοίξτε από το έργο σας Program.cs . Ισχύει για παλαιότερες εκδόσεις Startup.cs ASP.NET Core .

Προσθέστε ένα χώρο ονομάτων στην κορυφή του κώδικα και αντικαταστήστε τα ακόλουθα στον κώδικα app.UseStaticFiles(); :

// ここから追加
using Microsoft.AspNetCore.StaticFiles;
// ここまで追加

var builder = WebApplication.CreateBuilder(args);

// --- 省略 ---

app.UseHttpsRedirection();

//app.UseStaticFiles();
// ここから追加
var provider = new FileExtensionContentTypeProvider();
provider.Mappings[".data"] = "application/octet-stream";
provider.Mappings[".wasm"] = "application/wasm";

app.UseStaticFiles(new StaticFileOptions()
{
  ContentTypeProvider = provider,
});
// ここまで追加

app.UseRouting();

// --- 省略 ---

.data, έτσι ώστε όταν γίνεται πρόσβαση σε ένα αρχείο, .wasm να μπορεί να επιστραφεί στον πελάτη με το καθορισμένο Content-Type .

Ανάπτυξη WebGL

Τοποθετήστε τους ακόλουθους φακέλους αρχείων από το Unity στο έργο wwwroot σας .

  • ευρετήριο.html
  • Οικοδομώ
  • ΠρότυποΔεδομένα

Index.cshtmlindex.html Ανοίξτε τον σύνδεσμο, ώστε να έχετε πρόσβαση σε αυτόν.

<!-- 省略 -->

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

<!-- 追加 -->
<a href="index.html">index.html</a>

Εκτελέστε το πρόγραμμα και βεβαιωθείτε ότι το παιχνίδι λειτουργεί.

Εκτελέστε ένα πρόγραμμα WebGL σε μια σελίδα ξυραφιού

Το προηγούμενο παιχνίδι έτρεξε σε ένα στατικό αρχείο HTML, οπότε τρέχει σε ένα μέρος που δεν έχει καμία σχέση με ASP.NET Core. Δεν είναι πολύ επιθυμητό για την ομοιομορφία του προγράμματος, επομένως θα μετακινήσουμε τη συμπεριφορά του αρχείου HTML στο Razor Pages.

Κάντε δεξί κλικ στο φάκελο Σελίδες από το έργο σας για να προσθέσετε ένα νέο στοιχείο.

Επιλέξτε Razor Page - Empty. Δεν υπάρχει συγκεκριμένο όνομα, αλλά προστίθεται εδώ WebGL.cshtml .

Εμφανίζεται ο κωδικός.

index.html Ανατρέξτε στα περιεχόμενα του αρχείου και μεταβείτε στο WebGL.cshtml . link Υπάρχουν κάποια περίεργα σημεία, όπως ο τρόπος τοποθέτησης της ετικέτας, αλλά θα την αφήσω ως έχει για λόγους απλότητας της εξήγησης.

@page
@model UnityPublishWebglAspNetCore.Pages.WebGLModel
@{
}

<div id="unity-container" class="unity-desktop">
  <canvas id="unity-canvas" width=960 height=600></canvas>
  <div id="unity-loading-bar">
    <div id="unity-logo"></div>
    <div id="unity-progress-bar-empty">
      <div id="unity-progress-bar-full"></div>
    </div>
  </div>
  <div id="unity-warning"> </div>
  <div id="unity-footer">
    <div id="unity-webgl-logo"></div>
    <div id="unity-fullscreen-button"></div>
    <div id="unity-build-title">Platformer</div>
  </div>
</div>

@section Scripts {
  <link rel="shortcut icon" href="TemplateData/favicon.ico">
  <link rel="stylesheet" href="TemplateData/style.css">
  <script>
    var container = document.querySelector("#unity-container");
    var canvas = document.querySelector("#unity-canvas");
    var loadingBar = document.querySelector("#unity-loading-bar");
    var progressBarFull = document.querySelector("#unity-progress-bar-full");
    var fullscreenButton = document.querySelector("#unity-fullscreen-button");
    var warningBanner = document.querySelector("#unity-warning");

    // 一時的なメッセージバナー/リボンを数秒間表示するか、
    // type == 'error'の場合はキャンバスの上部に永続的なエラーメッセージを表示します。
    // type == 'warning'の場合、黄色のハイライト色が使用されます。
    // この関数を変更または削除して、重要ではない警告とエラーメッセージがユーザーに表示されるように
    // 視覚的に表示される方法をカスタマイズします。
    function unityShowBanner(msg, type) {
      function updateBannerVisibility() {
        warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
      }
      var div = document.createElement('div');
      div.innerHTML = msg;
      warningBanner.appendChild(div);
      if (type == 'error') div.style = 'background: red; padding: 10px;';
      else {
        if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
        setTimeout(function() {
          warningBanner.removeChild(div);
          updateBannerVisibility();
        }, 5000);
      }
      updateBannerVisibility();
    }

    var buildUrl = "Build";
    var loaderUrl = buildUrl + "/WebGL.loader.js";
    var config = {
      dataUrl: buildUrl + "/WebGL.data",
      frameworkUrl: buildUrl + "/WebGL.framework.js",
      codeUrl: buildUrl + "/WebGL.wasm",
      streamingAssetsUrl: "StreamingAssets",
      companyName: "DefaultCompany",
      productName: "Platformer",
      productVersion: "2.1.0",
      showBanner: unityShowBanner,
    };

    // デフォルトでは、Unity は WebGL キャンバスレンダリングのターゲットサイズを
    // キャンバス要素の DOM サイズ（window.devicePixelRatio でスケーリング）と一致させます。
    // この同期がエンジン内で発生しないようにする場合は、これを false に設定し、
    // 代わりにサイズを大きくします。 キャンバスの DOM サイズと WebGL は、
    // ターゲットサイズを自分でレンダリングします。
    // config.matchWebGLToCanvasSize = false;

    if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
      container.className = "unity-mobile";
      // モバイルデバイスでフィルレートのパフォーマンスを低下させないようにし、
      // モバイルブラウザで低 DPI モードをデフォルト/オーバーライドします。
      config.devicePixelRatio = 1;
      unityShowBanner('WebGL builds are not supported on mobile devices.');
    } else {
      canvas.style.width = "960px";
      canvas.style.height = "600px";
    }
    loadingBar.style.display = "block";

    var script = document.createElement("script");
    script.src = loaderUrl;
    script.onload = () => {
      createUnityInstance(canvas, config, (progress) => {
        progressBarFull.style.width = 100 * progress + "%";
      }).then((unityInstance) => {
        loadingBar.style.display = "none";
        fullscreenButton.onclick = () => {
          unityInstance.SetFullscreen(1);
        };
      }).catch((message) => {
        alert(message);
      });
    };
    document.body.appendChild(script);
  </script>
}

Index.cshtmlWebGL Προσθήκη συνδέσμου στο .

<!-- 省略 -->

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

<!-- 追加 -->
<ul>
  <li><a href="index.html">index.html</a></li>
  <li><a href="WebGL">WebGL</a></li>
</ul>

Προσπαθήστε να εκτελέσετε το πρόγραμμα. Μπορείτε να δείτε ότι η κεφαλίδα και το υποσέλιδο _Layout.cshtml εμφανίζονται στη σελίδα WebGL σύμφωνα με το .

Αλλάξτε τη θέση των αρχείων WebGL

Τοποθέτησα το αρχείο WebGL απευθείας κάτω από το , αλλά αυτή η μέθοδος θα το αντικαταστήσει όταν τοποθετήσετε δύο ή περισσότερα αρχεία WebGL wwwroot . Θα εξηγήσω πώς να το τοποθετήσετε σε ξεχωριστούς φακέλους και να το μετακινήσετε.

Πρώτα απ 'όλα, δημιουργήστε έναν νέο φάκελο που ονομάζεται "webgl" και μετακινήστε τον εκεί. Οι δύο φάκελοι που Buildθα μετακινηθούν είναι , TemplateData . index.html Το έχω ήδη μεταφέρει στο Razor Pages και μπορώ να το διαγράψω με ασφάλεια.

Δεδομένου ότι WebGL.cshtml έχουμε εμβαθύνει την ιεραρχία φακέλων, θα εμβαθύνουμε επίσης τη διαδρομή που περιγράφεται στο . Η διόρθωση είναι 3 γραμμές.

Πριν από τη διόρθωση

<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">

    var buildUrl = "Build";

Μετά τη διόρθωση

<link rel="shortcut icon" href="webgl/TemplateData/favicon.ico">
<link rel="stylesheet" href="webgl/TemplateData/style.css">

    var buildUrl = "webgl/Build";

Εκτελέστε το πρόγραμμα για να δείτε αν λειτουργεί σωστά.

Εκτέλεση WebGL συμπιεσμένο με Gzip

Η επέκταση του αρχείου που συμπιέζεται από το Gzip είναι .gz , και είναι ένα αρχείο που μπορεί να χειριστεί ο ASP.NET Core, Unity WebGL Content-Type και αντιμετωπίζονται διαφορετικά και απαιτούν μετατροπή.

Αρχικά, δημιουργήστε μια ανάπτυξη και σελίδα αρχείου WebGL.

Τοποθέτηση αρχείου WebGL

wwwrootwebgl-gzip Δημιουργήστε ένα φάκελο κάτω από το Gzip και αντιγράψτε το φάκελο , από το αρχείο BuildTemplateData WebGL που δημιουργήσατε με το Gzip.

Δημιουργία σελίδας ξυραφιού

Αυτή τη φορά WebGLGzip.cshtml δημιουργήστε το αρχείο χρησιμοποιώντας την ίδια διαδικασία όπως όταν δεν είναι συμπιεσμένο.

Ο κώδικας έχει ως εξής σε σχέση με την έξοδο στην index.html ενότητα. Η διαδρομή ταιριάζει με το φάκελο που δημιουργήσατε webgl-gzip νωρίτερα για τα αρχεία WebGL.

@page
@model UnityPublishWebglAspNetCore.Pages.WebGLGzipModel
@{
}

<div id="unity-container" class="unity-desktop">
  <canvas id="unity-canvas" width=960 height=600></canvas>
  <div id="unity-loading-bar">
    <div id="unity-logo"></div>
    <div id="unity-progress-bar-empty">
      <div id="unity-progress-bar-full"></div>
    </div>
  </div>
  <div id="unity-warning"> </div>
  <div id="unity-footer">
    <div id="unity-webgl-logo"></div>
    <div id="unity-fullscreen-button"></div>
    <div id="unity-build-title">Platformer</div>
  </div>
</div>

@section Scripts {
  <link rel="shortcut icon" href="webgl-gzip/TemplateData/favicon.ico">
  <link rel="stylesheet" href="webgl-gzip/TemplateData/style.css">
  <script>
    var container = document.querySelector("#unity-container");
    var canvas = document.querySelector("#unity-canvas");
    var loadingBar = document.querySelector("#unity-loading-bar");
    var progressBarFull = document.querySelector("#unity-progress-bar-full");
    var fullscreenButton = document.querySelector("#unity-fullscreen-button");
    var warningBanner = document.querySelector("#unity-warning");

    // 一時的なメッセージバナー/リボンを数秒間表示するか、
    // type == 'error'の場合はキャンバスの上部に永続的なエラーメッセージを表示します。
    // type == 'warning'の場合、黄色のハイライト色が使用されます。
    // この関数を変更または削除して、重要ではない警告とエラーメッセージがユーザーに表示されるように
    // 視覚的に表示される方法をカスタマイズします。
    function unityShowBanner(msg, type) {
      function updateBannerVisibility() {
        warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
      }
      var div = document.createElement('div');
      div.innerHTML = msg;
      warningBanner.appendChild(div);
      if (type == 'error') div.style = 'background: red; padding: 10px;';
      else {
        if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
        setTimeout(function() {
          warningBanner.removeChild(div);
          updateBannerVisibility();
        }, 5000);
      }
      updateBannerVisibility();
    }

    var buildUrl = "webgl-gzip/Build";
    var loaderUrl = buildUrl + "/WebGL_Gzip.loader.js";
    var config = {
      dataUrl: buildUrl + "/WebGL_Gzip.data.gz",
      frameworkUrl: buildUrl + "/WebGL_Gzip.framework.js.gz",
      codeUrl: buildUrl + "/WebGL_Gzip.wasm.gz",
      streamingAssetsUrl: "StreamingAssets",
      companyName: "DefaultCompany",
      productName: "Platformer",
      productVersion: "2.1.0",
      showBanner: unityShowBanner,
    };

    // デフォルトでは、Unity は WebGL キャンバスレンダリングのターゲットサイズを
    // キャンバス要素の DOM サイズ（window.devicePixelRatio でスケーリング）と一致させます。
    // この同期がエンジン内で発生しないようにする場合は、これを false に設定し、
    // 代わりにサイズを大きくします。 キャンバスの DOM サイズと WebGL は、
    // ターゲットサイズを自分でレンダリングします。
    // config.matchWebGLToCanvasSize = false;

    if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
      container.className = "unity-mobile";
      // モバイルデバイスでフィルレートのパフォーマンスを低下させないようにし、
      // モバイルブラウザで低 DPI モードをデフォルト/オーバーライドします。
      config.devicePixelRatio = 1;
      unityShowBanner('WebGL builds are not supported on mobile devices.');
    } else {
      canvas.style.width = "960px";
      canvas.style.height = "600px";
    }
    loadingBar.style.display = "block";

    var script = document.createElement("script");
    script.src = loaderUrl;
    script.onload = () => {
      createUnityInstance(canvas, config, (progress) => {
        progressBarFull.style.width = 100 * progress + "%";
      }).then((unityInstance) => {
        loadingBar.style.display = "none";
        fullscreenButton.onclick = () => {
          unityInstance.SetFullscreen(1);
        };
      }).catch((message) => {
        alert(message);
      });
    };
    document.body.appendChild(script);
  </script>
}

Τροποποίηση για να επιτρέπεται η πλοήγηση σε Index.cshtml αυτήν τη σελίδα.

<!-- 省略 -->

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

<!-- 追加 -->
<ul>
  <li><a href="index.html">index.html</a></li>
  <li><a href="WebGL">WebGL</a></li>
  <li><a href="WebGLGzip">WebGLGzip</a></li>
</ul>

Πρόγραμμα διόρθωσης.cs

app.UseStaticFiles Τροποποιήστε το τμήμα που επεξεργάζεται τη μέθοδο ως εξής.

Πριν από τη διόρθωση

// ここから追加
var provider = new FileExtensionContentTypeProvider();
provider.Mappings[".data"] = "application/octet-stream";
provider.Mappings[".wasm"] = "application/wasm";

app.UseStaticFiles(new StaticFileOptions()
{
  ContentTypeProvider = provider,
});
// ここまで追加

Μετά τη διόρθωση

// ここから追加
var provider = new FileExtensionContentTypeProvider();
provider.Mappings[".data"] = "application/octet-stream";
provider.Mappings[".wasm"] = "application/wasm";
provider.Mappings[".br"] = "application/octet-stream";   // .br ファイルにアクセスできるように追加
provider.Mappings[".js"] = "application/javascript";     // 後の変換の為に追加

app.UseStaticFiles(new StaticFileOptions()
{
  ContentTypeProvider = provider,
  OnPrepareResponse = context =>
  {
    var path = context.Context.Request.Path.Value;
    var extension = Path.GetExtension(path);

    // 「.gz」「.br」ファイルにアクセスした場合は Content-Type と Content-Encoding を設定する
    if (extension == ".gz" || extension == ".br")
    {
      var fileNameWithoutExtension = Path.GetFileNameWithoutExtension(path) ?? "";
      if (provider.TryGetContentType(fileNameWithoutExtension, out string? contentType))
      {
        context.Context.Response.ContentType = contentType;
        context.Context.Response.Headers.Add("Content-Encoding", extension == ".gz" ? "gzip" : "br");
      }
    }
  },
});
// ここまで追加

Στο ASP.NET Core .gz , το αρχείο Content-Type application/x-gzip επιστρέφει με . Όπως είναι, το Unity WebGL στον πελάτη δεν μπορεί να το προσδιορίσει, οπότε .gz το ξαναγράφω και το Content-Type επιστρέφω σύμφωνα με την επέκταση του αρχείου που αποκλείει . Content-Encoding Το έβαλα επίσης επειδή gzip είναι απαραίτητο.

Παρεμπιπτόντως, έβαλα επίσης τον κώδικα Brotli μαζί, ώστε να μπορείτε να χρησιμοποιήσετε αυτόν τον κωδικό όπως είναι στην αλληλογραφία Brotli του επόμενου στοιχείου. Ο Brotli ορίζει επίσης .br την επανεγγραφή Content-Encoding br ώστε να ταιριάζει Content-Type με την επέκταση του αρχείου χωρίς . Ωστόσο, το αρχείο δεν είναι προσβάσιμο από προεπιλογή στο ASP.NET Core,.br οπότε provider.Mappings το πρόσθεσα με .br .

Μετά από αυτό, εκτελέστε τον εντοπισμό σφαλμάτων και ελέγξτε εάν το παιχνίδι λειτουργεί σωστά.

Αν το έχετε ρυθμίσει σωστά και το παιχνίδι εξακολουθεί να μην εμφανίζεται, δοκιμάστε να εκκαθαρίσετε την προσωρινή μνήμη του προγράμματος περιήγησης web για να διαγράψετε τα cookie.

Εκτέλεση WebGL συμπιεσμένο με Brotli

Η διαδικασία είναι σχεδόν η ίδια με το Gzip, αντικαθιστώντας το τμήμα Gzip με το Brotli. Ωστόσο, τα αρχεία Brotli (.br) δεν είναι προσβάσιμα από προεπιλογή στο ASP.NET Core. Πρέπει να το διαμορφώσετε έτσι ώστε να έχετε πρόσβαση σε αυτό, αλλά εάν χρησιμοποιείτε τον κώδικα τη στιγμή του Gzip, υποστηρίζεται.

Αρχικά, δημιουργήστε μια ανάπτυξη και σελίδα αρχείου WebGL.

Τοποθέτηση αρχείου WebGL

wwwrootwebgl-brotli Στην περιοχή Δημιουργία φακέλου, αντιγράψτε το φάκελο , από το αρχείο WebGL που δημιουργήσατε με το BuildTemplateData Brotli.

Δημιουργία σελίδας ξυραφιού

Δημιουργήστε το αρχείο χρησιμοποιώντας WebGLBrotli.cshtml τα ίδια βήματα όπως και για το Gzip.

Ο κώδικας έχει ως εξής σε σχέση με την έξοδο στην index.html ενότητα. Η διαδρομή ταιριάζει με το φάκελο που δημιουργήσατε webgl-brotli νωρίτερα για τα αρχεία WebGL.

@page
@model UnityPublishWebglAspNetCore.Pages.WebGLBrotliModel
@{
}

<div id="unity-container" class="unity-desktop">
  <canvas id="unity-canvas" width=960 height=600></canvas>
  <div id="unity-loading-bar">
    <div id="unity-logo"></div>
    <div id="unity-progress-bar-empty">
      <div id="unity-progress-bar-full"></div>
    </div>
  </div>
  <div id="unity-warning"> </div>
  <div id="unity-footer">
    <div id="unity-webgl-logo"></div>
    <div id="unity-fullscreen-button"></div>
    <div id="unity-build-title">Platformer</div>
  </div>
</div>

@section Scripts {
  <link rel="shortcut icon" href="webgl-brotli/TemplateData/favicon.ico">
  <link rel="stylesheet" href="webgl-brotli/TemplateData/style.css">
  <script>
    var container = document.querySelector("#unity-container");
    var canvas = document.querySelector("#unity-canvas");
    var loadingBar = document.querySelector("#unity-loading-bar");
    var progressBarFull = document.querySelector("#unity-progress-bar-full");
    var fullscreenButton = document.querySelector("#unity-fullscreen-button");
    var warningBanner = document.querySelector("#unity-warning");

    // 一時的なメッセージバナー/リボンを数秒間表示するか、
    // type == 'error'の場合はキャンバスの上部に永続的なエラーメッセージを表示します。
    // type == 'warning'の場合、黄色のハイライト色が使用されます。
    // この関数を変更または削除して、重要ではない警告とエラーメッセージがユーザーに表示されるように
    // 視覚的に表示される方法をカスタマイズします。
    function unityShowBanner(msg, type) {
      function updateBannerVisibility() {
        warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
      }
      var div = document.createElement('div');
      div.innerHTML = msg;
      warningBanner.appendChild(div);
      if (type == 'error') div.style = 'background: red; padding: 10px;';
      else {
        if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
        setTimeout(function() {
          warningBanner.removeChild(div);
          updateBannerVisibility();
        }, 5000);
      }
      updateBannerVisibility();
    }

    var buildUrl = "webgl-brotli/Build";
    var loaderUrl = buildUrl + "/WebGL_Brotli.loader.js";
    var config = {
      dataUrl: buildUrl + "/WebGL_Brotli.data.br",
      frameworkUrl: buildUrl + "/WebGL_Brotli.framework.js.br",
      codeUrl: buildUrl + "/WebGL_Brotli.wasm.br",
      streamingAssetsUrl: "StreamingAssets",
      companyName: "DefaultCompany",
      productName: "Platformer",
      productVersion: "2.1.0",
      showBanner: unityShowBanner,
    };

    // デフォルトでは、Unity は WebGL キャンバスレンダリングのターゲットサイズを
    // キャンバス要素の DOM サイズ（window.devicePixelRatio でスケーリング）と一致させます。
    // この同期がエンジン内で発生しないようにする場合は、これを false に設定し、
    // 代わりにサイズを大きくします。 キャンバスの DOM サイズと WebGL は、
    // ターゲットサイズを自分でレンダリングします。
    // config.matchWebGLToCanvasSize = false;

    if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
      container.className = "unity-mobile";
      // モバイルデバイスでフィルレートのパフォーマンスを低下させないようにし、
      // モバイルブラウザで低 DPI モードをデフォルト/オーバーライドします。
      config.devicePixelRatio = 1;
      unityShowBanner('WebGL builds are not supported on mobile devices.');
    } else {
      canvas.style.width = "960px";
      canvas.style.height = "600px";
    }
    loadingBar.style.display = "block";

    var script = document.createElement("script");
    script.src = loaderUrl;
    script.onload = () => {
      createUnityInstance(canvas, config, (progress) => {
        progressBarFull.style.width = 100 * progress + "%";
      }).then((unityInstance) => {
        loadingBar.style.display = "none";
        fullscreenButton.onclick = () => {
          unityInstance.SetFullscreen(1);
        };
      }).catch((message) => {
        alert(message);
      });
    };
    document.body.appendChild(script);
  </script>
}

Τροποποίηση για να επιτρέπεται η πλοήγηση σε Index.cshtml αυτήν τη σελίδα.

<!-- 省略 -->

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

<!-- 追加 -->
<ul>
  <li><a href="index.html">index.html</a></li>
  <li><a href="WebGL">WebGL</a></li>
  <li><a href="WebGLGzip">WebGLGzip</a></li>
  <li><a href="WebGLBrotli">WebGLBrotli</a></li>
</ul>

Πρόγραμμα διόρθωσης.cs

Εάν το τροποποιήσετε όταν υποστηρίζεται το Gzip, μπορείτε να χρησιμοποιήσετε τον ίδιο κώδικα.

Αφού το διορθώσετε, εκτελέστε το debug και ελέγξτε αν το παιχνίδι λειτουργεί.

Αν το έχετε ρυθμίσει σωστά και το παιχνίδι εξακολουθεί να μην εμφανίζεται, δοκιμάστε να εκκαθαρίσετε την προσωρινή μνήμη του προγράμματος περιήγησης web για να διαγράψετε τα cookie.

Κατανόηση των συμπτωμάτων πρόσβασης σε αρχεία Brotli σε διακομιστή Web των υπηρεσιών IIS

Το Brotli δεν υποστηρίζεται από τις υπηρεσίες IIS από προεπιλογή, επομένως απαιτείται ρύθμιση παραμέτρων από την πλευρά των υπηρεσιών IIS. Φαίνεται ότι μπορεί να αντιμετωπιστεί κάνοντας προηγμένες ρυθμίσεις, αλλά δεν θα το εξηγήσω σε αυτήν τη συμβουλή. Ανατρέξτε στις πληροφορίες που συνδέονται παρακάτω.

Μήνυμα λάθους

Unable to load file webgl-brotli/Build/WebGL_Brotli.framework.js.br! Check that the file exists on the remote server. (also check browser Console and Devtools Network tab to debug)

Εξάγετε ένα παιχνίδι βελτιστοποιημένο για το web (WebGL)
Αλλαγή της ανάλυσης παιχνιδιού