Einheit

Ausführen von Unity WebGL mit ASP.NET Core

Diese Seite wurde aktualisiert :
Erstellungsdatum der Seite :

Verifizierungsumgebung

Fenster
  • Windows 11
Unity-Editor
  • 2020.3.25f1
Visual Studio
  • Visual Studio 2022
ASP.NET Kern
  • ASP.NET Kern 6.0
Internetinformationsdienste (IIS)
  • IIS 10.0

Zuerst

Erfahren Sie, wie Sie eine Spielausgabe als WebGL in Unity auf einem Webserver ausführen, auf dem ASP.NET Core ausgeführt wird. Verwenden Sie für Spielprogramme die Ausgabe in den folgenden Tipps-Schritten. Im Spielbeispiel wird das 2D-Plattformer-Mikrospiel verwendet, das über den Unity-Hub erstellt werden kann.

Ich werde erklären, wie man "Unkomprimiertes WebGL", "WebGL komprimiert mit Gzip" und "WebGL komprimiert mit Brotli" einrichtet, um WebGL-Spiele auszuführen. Das Verfahren ist für alle gleich.

Wir verwenden Visual Studio 2022 ASP.NET Core 6.0, aber ältere Versionen werden wahrscheinlich funktionieren. Die Struktur des ursprünglichen Codes ist jedoch für jede Version unterschiedlich, daher sollten Sie die Unterschiede selbst verstehen.

Erstellen eines ASP.NET Kernprojekts

Starten Sie "Visual Studio 2022" über das Startmenü.

Wählen Sie Neues Projekt erstellen aus.

Wählen Sie dieses Mal "ASP.NET Core Web App" als Beispiel aus. Wenn Sie ASP.NET Core verwenden, können Sie andere Vorlagen ausführen, aber Sie müssen jede Vorlage befolgen, um sie zu erstellen.

Legen Sie den Projektnamen und den Speicherort willkürlich fest.

Lassen Sie die zusätzlichen Informationen unverändert.

Das Projekt wurde erstellt.

Unkomprimiertes WebGL ausführen

Bereiten Sie ein WebGL-Programm vor, das ohne Komprimierung erstellt wurde.

Stellen Sie sicher, dass das Spiel schnell funktioniert

ASP.NET Versuchen Sie, ein WebGL-Spiel mit weniger Einstellungen auszuführen, ohne die Core-Etikette zu befolgen.

In ASP.NET Core können Sie im Standardzustand nicht auf einige WebGL-Dateien zugreifen, die von Unity ausgegeben werden. Machen Sie dies zugänglich.

Programm.cs

Öffnen Sie in Ihrem Program.cs Projekt. Gilt für frühere ASP.NET Core-Versionen Startup.cs .

Fügen Sie am Anfang des Codes einen Namespace hinzu, und ersetzen Sie Folgendes im Code 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, so dass beim Zugriff auf .wasm eine Datei diese mit der angegebenen Content-Type .

WebGL-Bereitstellung

Platzieren Sie die folgenden Dateiordner von Unity in Ihrem Projekt wwwroot .

  • Index.html
  • Bauen
  • TemplateData (Vorlagendaten)

Index.cshtmlindex.html Öffnen Sie den Link, damit Sie darauf zugreifen können.

<!-- 省略 -->

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

Führen Sie das Programm aus und stellen Sie sicher, dass das Spiel funktioniert.

Ausführen eines WebGL-Programms auf einer Razor-Seite

Das vorherige Spiel lief auf einer statischen HTML-Datei, also läuft es an einem Ort, der nichts mit ASP.NET Core zu tun hat. Dies ist für die Einheitlichkeit des Programms nicht sehr wünschenswert, daher verschieben wir das Verhalten der HTML-Datei nach Razor Pages.

Klicken Sie in Ihrem Projekt mit der rechten Maustaste auf den Ordner Seiten, um ein neues Element hinzuzufügen.

Wählen Sie Razor-Seite – Leer aus. Es ist kein bestimmter Name angegeben, aber er wird hier WebGL.cshtml hinzugefügt.

Der Code wird angezeigt.

index.html Beziehen Sie sich auf den Inhalt der Datei und portieren Sie nach WebGL.cshtml . link Es gibt einige seltsame Punkte, z. B. wie man das Tag platziert, aber ich werde es der Einfachheit halber so lassen, wie es ist.

@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 Fügen Sie einen Link zu .

<!-- 省略 -->

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

Versuchen Sie, das Programm auszuführen. Sie können sehen, dass die Kopf- und Fußzeile _Layout.cshtml auf der WebGL-Seite gemäß angezeigt werden.

Ändern des Speicherorts von WebGL-Dateien

Ich habe die WebGL-Datei direkt unter platziert, aber diese Methode überschreibt sie, wenn Sie zwei oder mehr WebGL-Dateien wwwroot platzieren. Ich erkläre, wie man dies in separaten Ordnern ablegt und verschiebt.

Erstellen Sie zunächst einen neuen Ordner mit dem Namen "webgl" und verschieben Sie ihn dorthin. Die beiden Ordner, die verschoben werden sollen, Buildsind , TemplateData . index.html Ich habe es bereits auf Razor Pages portiert und kann es sicher löschen.

Da WebGL.cshtml wir die Ordnerhierarchie vertieft haben, werden wir auch den in beschriebenen Pfad vertiefen. Die Korrektur beträgt 3 Zeilen.

Vor der Korrektur

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

    var buildUrl = "Build";

Nach der Korrektur

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

    var buildUrl = "webgl/Build";

Führen Sie das Programm aus, um zu sehen, ob es ordnungsgemäß funktioniert.

Ausführen von WebGL komprimiert mit Gzip

Die Erweiterung der von Gzip komprimierten Datei ist , und es ist .gz eine Datei, die von ASP.NET Core verarbeitet werden kann. Unity WebGL Content-Type und werden unterschiedlich gehandhabt und erfordern eine Konvertierung.

Erstellen Sie zunächst eine WebGL-Dateibereitstellung und -Seite.

Platzierung von WebGL-Dateien

wwwrootwebgl-gzip Erstellen Sie einen Ordner unter Gzip und kopieren Sie den Ordner , aus der WebGL-DateiBuildTemplateData, die Sie mit Gzip erstellt haben.

Erstellen einer Razor-Seite

Erstellen Sie die Datei dieses Mal WebGLGzip.cshtml mit dem gleichen Verfahren wie beim Entpacken.

Der Code lautet wie folgt in Bezug auf die Ausgabe in index.html Unity. Der Pfad stimmt mit dem Ordner überein, den Sie zuvor für die WebGL-Dateien erstellt haben webgl-gzip .

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

Ändern, um die Navigation zu dieser Seite zu Index.cshtml ermöglichen.

<!-- 省略 -->

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

Fixierprogramm.cs

app.UseStaticFiles Ändern Sie das Teil, das die Methode verarbeitet, wie folgt.

Vor der Korrektur

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

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

Nach der Korrektur

// ここから追加
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");
      }
    }
  },
});
// ここまで追加

In ASP.NET Core .gz wird die Datei Content-Type application/x-gzip mit zurückgegeben. So wie es ist, kann Unity WebGL auf dem Client es nicht bestimmen, also .gz schreibe ich es um und gebe es entsprechend Content-Type der Erweiterung der Datei zurück, die . Content-Encoding Ich stelle es auch ein, weil es gzip notwendig ist.

Übrigens habe ich auch den Brotli-Code zusammengestellt, so dass Sie diesen Code so verwenden können, wie er in der Brotli-Korrespondenz des nächsten Artikels steht. Brotli legt auch .br rewrite Content-Encoding br so fest, dass es mit der Erweiterung der Datei ohne Content-Type . Auf die Datei kann jedoch standardmäßig in ASP.NET Core nicht zugegriffen werden,.br daher provider.Mappings habe ich sie mit .br hinzugefügt.

Führen Sie danach das Debuggen aus und prüfen Sie, ob das Spiel ordnungsgemäß funktioniert.

Wenn Sie es richtig eingerichtet haben und das Spiel immer noch nicht angezeigt wird, versuchen Sie, den Cache Ihres Webbrowsers zu leeren, um Ihre Cookies zu löschen.

Ausführen von WebGL komprimiert mit Brotli

Das Verfahren ist fast das gleiche wie bei Gzip, wobei der Gzip-Teil durch Brotli ersetzt wird. Auf Brotli-Dateien (.br) kann in ASP.NET Core jedoch standardmäßig nicht zugegriffen werden. Sie müssen es so konfigurieren, dass Sie darauf zugreifen können, aber wenn Sie den Code zum Zeitpunkt von Gzip verwenden, wird er unterstützt.

Erstellen Sie zunächst eine WebGL-Dateibereitstellung und -Seite.

Platzierung von WebGL-Dateien

wwwrootwebgl-brotli Kopieren Sie unter Ordner erstellen den Ordner , aus der WebGL-Datei, die BuildTemplateData Sie mit Brotli erstellt haben.

Erstellen einer Razor-Seite

Erstellen Sie die Datei mit WebGLBrotli.cshtml den gleichen Schritten wie für Gzip.

Der Code lautet wie folgt in Bezug auf die Ausgabe in index.html Unity. Der Pfad stimmt mit dem Ordner überein, den Sie zuvor für die WebGL-Dateien erstellt haben webgl-brotli .

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

Ändern, um die Navigation zu dieser Seite zu Index.cshtml ermöglichen.

<!-- 省略 -->

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

Fixierprogramm.cs

Wenn Sie es ändern, wenn Gzip unterstützt wird, können Sie denselben Code verwenden.

Nachdem Sie das Problem behoben haben, führen Sie das Debuggen aus und prüfen Sie, ob das Spiel funktioniert.

Wenn Sie es richtig eingerichtet haben und das Spiel immer noch nicht angezeigt wird, versuchen Sie, den Cache Ihres Webbrowsers zu leeren, um Ihre Cookies zu löschen.

Grundlegendes zu den Symptomen des Zugriffs auf Brotli-Dateien auf einem IIS-Webserver

Brotli wird von IIS standardmäßig nicht unterstützt, daher ist eine Konfiguration auf der IIS-Seite erforderlich. Es scheint, dass es durch erweiterte Einstellungen gehandhabt werden kann, aber ich werde es in diesem Tipp nicht erklären. Bitte beachten Sie die unten verlinkten Informationen.

Fehlermeldung

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)

Ausgabe eines weboptimierten Spiels (WebGL)
Ändern der Spielauflösung