ความสามัคคี

ใช้ Unity WebGL กับ ASP.NET Core

ปรับปรุงหน้า :
วันที่สร้างเพจ :

สภาพแวดล้อมการตรวจสอบ

หน้าต่าง
  • หน้าต่าง 11
บรรณาธิการ Unity
  • ปี 2020.3.25f1
วิชวลสตูดิโอ
  • Visual Studio 2022
แกน ASP.NET
  • ASP.NET คอร์ 6.0
บริการข้อมูลทางอินเทอร์เน็ต (IIS)
  • IIS 10.0

ทีแรก

เรียนรู้วิธีเรียกใช้เอาต์พุตเกมเป็น WebGL ใน Unity บนเว็บเซิร์ฟเวอร์ที่ใช้ ASP.NET Core สําหรับโปรแกรมเกมให้ใช้ผลลัพธ์ที่ส่งออกในขั้นตอนเคล็ดลับด้านล่าง ตัวอย่างเกมใช้ 2D Platformer Microgame ซึ่งสามารถสร้างได้จาก Unity Hub

ฉันจะอธิบายวิธีตั้งค่า "Uncompressed WebGL", "WebGL บีบอัดด้วย Gzip" และ "WebGL ที่บีบอัดด้วย 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 ด้วยการตั้งค่าน้อยลงโดยไม่ปฏิบัติตามมารยาทหลัก

ใน ASP.NET Core คุณไม่สามารถเข้าถึงไฟล์ WebGL บางไฟล์ที่ปล่อยออกมาจาก Unity ในสถานะเริ่มต้น ทําให้สิ่งนี้สามารถเข้าถึงได้

โปรแกรม.cs

เปิดจากโครงการของคุณ Program.cs นําไปใช้กับเวอร์ชัน ASP.NET Core Startup.cs ก่อนหน้า

เพิ่ม namespace ที่ด้านบนของรหัสและแทนที่ต่อไปนี้ในรหัส 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 บนหน้า Razor

เกมก่อนหน้านี้ทํางานบนไฟล์ HTML แบบคงที่ดังนั้นจึงทํางานในสถานที่ที่ไม่เกี่ยวข้องกับ ASP.NET Core ไม่เป็นที่ต้องการมากสําหรับความสม่ําเสมอของโปรแกรมดังนั้นเราจะย้ายลักษณะการทํางานของไฟล์ HTML ไปยัง Razor Pages

คลิกขวาที่โฟลเดอร์ 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 สร้างไฟล์โดยใช้ขั้นตอนเดียวกับเมื่อไม่มีการบีบอัด

รหัสมีดังนี้โดยมีการอ้างอิงถึง Output in index.html Unity เส้นทางตรงกับโฟลเดอร์ที่คุณสร้าง 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-Typeapplication/x-gzipจะส่งคืนด้วย ตามที่เป็นอยู่ Unity WebGL บนไคลเอนต์ไม่สามารถระบุได้ดังนั้นฉันจึง.gzเขียนใหม่และส่งคืนตามContent-Typeนามสกุลของไฟล์ที่ไม่รวม Content-Encodingฉันยังตั้งค่าเพราะมันgzipเป็นสิ่งจําเป็น

อย่างไรก็ตามฉันยังใส่รหัส Brotli เข้าด้วยกันเพื่อให้คุณสามารถใช้รหัสนี้ได้ตามที่อยู่ในการติดต่อ Brotli ของรายการถัดไป Brotli ยัง.brตั้งค่าการเขียนContent-Encodingbrใหม่ให้ตรงกับContent-Typeนามสกุลของไฟล์โดยไม่ต้อง อย่างไรก็ตามไฟล์ไม่สามารถเข้าถึงได้โดยค่าเริ่มต้นใน ASP.NET Core.br ดังนั้นฉันจึงprovider.Mappingsเพิ่มด้วย.br

หลังจากนั้นให้เรียกใช้การตรวจแก้จุดบกพร่องและตรวจสอบว่าเกมทํางานอย่างถูกต้องหรือไม่

หากคุณตั้งค่าอย่างถูกต้องและเกมยังคงไม่แสดง ให้ลองล้างแคชของเว็บเบราว์เซอร์เพื่อล้างคุกกี้ของคุณ

การเรียกใช้ WebGL ที่บีบอัดด้วย Brotli

ขั้นตอนเกือบจะเหมือนกับ Gzip แทนที่ส่วน Gzip ด้วย Brotli อย่างไรก็ตาม ไฟล์ Brotli (.br) ไม่สามารถเข้าถึงได้โดยค่าเริ่มต้นใน ASP.NET Core คุณต้องกําหนดค่าเพื่อให้คุณสามารถเข้าถึงได้ แต่ถ้าคุณใช้รหัสในเวลาของ Gzip จะได้รับการสนับสนุน

ขั้นแรกให้สร้างการปรับใช้ไฟล์ WebGL และหน้า

การวางไฟล์ WebGL

wwwrootwebgl-brotliภายใต้ สร้างโฟลเดอร์ ให้คัดลอกโฟลเดอร์ , จากBuildTemplateDataไฟล์ WebGL ที่คุณสร้างด้วย Brotli

สร้างเพจมีดโกน

สร้างไฟล์โดยใช้ WebGLBrotli.cshtml ขั้นตอนเดียวกับ Gzip

รหัสมีดังนี้โดยมีการอ้างอิงถึง Output in index.html Unity เส้นทางตรงกับโฟลเดอร์ที่คุณสร้าง 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 คุณสามารถใช้รหัสเดียวกันได้

หลังจากแก้ไขแล้วให้เรียกใช้การดีบักและตรวจสอบว่าเกมใช้งานได้หรือไม่

หากคุณตั้งค่าอย่างถูกต้องและเกมยังคงไม่แสดง ให้ลองล้างแคชของเว็บเบราว์เซอร์เพื่อล้างคุกกี้ของคุณ

การทําความเข้าใจเกี่ยวกับอาการของการเข้าถึงแฟ้ม Brotli บนเว็บเซิร์ฟเวอร์ 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)

ส่งออกเกมที่ปรับให้เหมาะสมกับเว็บ (WebGL)
เปลี่ยนความละเอียดของเกม