Unity WebGL'yi ASP.NET Core ile Çalıştırma

Sayfa güncel : 29 Eylül 2023 Cuma

Sayfa oluşturma tarihi : 24 Mart 2022 Perşembe

Doğrulama ortamı

Windows

Pencereler 11

Birlik Editörü

2020.3.25f1

Görsel Stüdyo

Visual Studio 2022

ASP.NET Çekirdeği

ASP.NET Çekirdek 6.0

Internet Information Services (IIS)

IIS 10.0

İlk başta

ASP.NET Core çalıştıran bir web sunucusunda Unity'de WebGL olarak bir oyun çıktısını nasıl çalıştıracağınızı öğrenin. Oyun programları için, aşağıdaki ipucu adımlarında çıkanları kullanın. Oyun örneği, Unity Hub'dan oluşturulabilen 2B Platformer Mikro Oyununu kullanır.

Web için optimize edilmiş (WebGL) bir oyun çıktısı alın

WebGL oyunlarını çalıştırmak için "Sıkıştırılmamış WebGL", "Gzip ile sıkıştırılmış WebGL" ve "Brotli ile sıkıştırılmış WebGL" nin nasıl kurulacağını açıklayacağım. Prosedür hepsi için aynıdır.

Visual Studio 2022, ASP.NET Core 6.0 kullanıyoruz, ancak eski sürümler büyük olasılıkla çalışacaktır. Ancak, ilk kodun yapısı her sürüm için farklıdır, bu nedenle lütfen farklılıkları kendiniz anlayın.

ASP.NET Çekirdek Proje Oluşturma

Başlat menüsünden "Visual Studio 2022" öğesini başlatın.

Yeni Proje Oluştur'u seçin.

Bu kez, örnek olarak "ASP.NET Core Web App" i seçin. ASP.NET Core üzerinde çalışıyorsanız, diğer şablonları çalıştırabilirsiniz, ancak nasıl oluşturulacağı konusunda her şablonu izlemeniz gerekir.

Proje adını ve konumunu rasgele ayarlayın.

Ek bilgileri olduğu gibi bırakın.

Proje oluşturuldu.

Sıkıştırılmamış WebGL'yi çalıştırma

Sıkıştırma olmadan oluşturulmuş bir WebGL programı hazırlayın.

Oyunun hızlı çalıştığından emin olun

ASP.NET Temel görgü kurallarına uymadan daha az ayara sahip bir WebGL oyunu çalıştırmayı deneyin.

ASP.NET Çekirdekte, Unity tarafından varsayılan durumda yayılan bazı WebGL dosyalarına erişemezsiniz. Bunu erişilebilir hale getirin.

Program.cs

Projenizden Program.cs açın. Şunun için geçerlidir: önceki ASP.NET Core sürümleri Startup.cs .

Kodun en üstüne bir ad alanı ekleyin ve kodda app.UseStaticFiles(); aşağıdakileri değiştirin:

// ここから追加
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, böylece bir dosyaya erişildiğinde, .wasm istemciye belirtilen Content-Type .

WebGL Dağıtımı

Unity'den aşağıdaki dosya klasörlerini projenize wwwroot yerleştirin.

dizini.html
Yapmak
TemplateData

Index.cshtmlindex.html Erişebilmek için bağlantıyı açın.

<!-- 省略 -->

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

Programı çalıştırın ve oyunun çalıştığından emin olun.

Razor sayfasında WebGL programı çalıştırma

Önceki oyun statik bir HTML dosyası üzerinde çalışıyordu, bu yüzden ASP.NET Core ile ilgisi olmayan bir yerde çalışıyor. Program tekdüzeliği için çok arzu edilmez, bu nedenle HTML dosyasının davranışını Razor Pages'a taşıyacağız.

Yeni bir öğe eklemek için projenizdeki Pages klasörünü sağ tıklatın.

Razor Page - Empty'i (Jiletli Sayfa - Boş) seçin. Belirtilen belirli bir ad yoktur, ancak buraya WebGL.cshtml eklenir .

Kod görüntülenir.

index.html Dosyanın içeriğine ve bağlantı noktasına WebGL.cshtml başvurun. link Etiketin nasıl yerleştirileceği gibi bazı garip noktalar var, ancak açıklamanın basitliği uğruna olduğu gibi bırakacağım.

@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 öğesine bağlantı ekleyin.

<!-- 省略 -->

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

Programı çalıştırmayı deneyin. Üstbilgi ve altbilginin _Layout.cshtml WebGL sayfasında .

WebGL dosyalarının konumunu değiştirme

WebGL dosyasını doğrudan altına yerleştirdim, ancak iki veya daha fazla WebGL wwwroot dosyası yerleştirdiğinizde bu yöntem üzerine yazacaktır. Bunu ayrı klasörlere nasıl koyacağımı ve taşıyacağımı açıklayacağım.

Her şeyden önce, "webgl" adlı yeni bir klasör oluşturun ve oraya taşıyın. Taşınacak Buildiki klasör , TemplateData . index.html Zaten Razor Pages'a taşıdım ve güvenle silebilirim.

Klasör WebGL.cshtml hiyerarşisini derinleştirdiğimizden, aşağıda açıklanan yolu da derinleştireceğiz. Düzeltme 3 satırdır.

Düzeltmeden önce

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

    var buildUrl = "Build";

Düzeltmeden sonra

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

    var buildUrl = "webgl/Build";

Düzgün çalışıp çalışmadığını görmek için programı çalıştırın.

Gzip ile sıkıştırılmış WebGL'yi çalıştırma

Gzip .gz tarafından sıkıştırılan dosyanın uzantısı , ve ASP.NET Core tarafından işlenebilen bir dosyadır, Unity WebGL Content-Type ve farklı şekilde ele alınır ve dönüşüm gerektirir.

İlk olarak, bir WebGL dosya dağıtımı ve sayfası oluşturun.

WebGL dosya yerleşimi

wwwrootwebgl-gzip Gzip altında bir klasör oluşturun ve Gzip ile oluşturduğunuz WebGL dosyasından BuildTemplateData , klasörünü kopyalayın.

Jiletli Sayfa Oluşturma

Bu kez WebGLGzip.cshtml , sıkıştırılmamışken olduğu gibi aynı yordamı kullanarak dosyayı oluşturun.

Kod, Unity'deki Çıktı'ya index.html referansla aşağıdaki gibidir. Yol, WebGL dosyaları için daha önce oluşturduğunuz webgl-gzip klasörle eşleşir.

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

Bu sayfada gezinmeye izin verecek şekilde Index.cshtml değiştirin.

<!-- 省略 -->

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

Sabitleme Programı.cs

app.UseStaticFiles Yöntemi işleyen bölümü aşağıdaki gibi değiştirin.

Düzeltmeden önce

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

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

Düzeltmeden sonra

// ここから追加
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 Çekirdek'te .gz , dosya Content-Type application/x-gzip ile döndürür. Olduğu gibi, istemcideki Unity WebGL bunu belirleyemez, bu yüzden .gz hariç tutan dosyanın uzantısına Content-Type göre yeniden yazıp döndürürüm. Content-Encoding Ben de gerekli olduğu için gzip ayarladım.

Bu arada, Brotli kodunu da bir araya getirdim, böylece bu kodu bir sonraki öğenin Brotli yazışmalarında olduğu gibi kullanabilirsiniz. Brotli ayrıca rewrite'ı br Content-Encoding dosyanın .br uzantısıyla eşleşecek Content-Type şekilde ayarlar. Ancak, ASP.NET Core'da dosyaya varsayılan olarak erişilemez,.br bu yüzden provider.Mappings .br .

Bundan sonra, hata ayıklamayı çalıştırın ve oyunun düzgün çalışıp çalışmadığını kontrol edin.

Doğru şekilde ayarladıysanız ve oyun hala görüntülenmiyorsa, çerezlerinizi temizlemek için web tarayıcınızın önbelleğini temizlemeyi deneyin.

Brotli ile sıkıştırılmış WebGL'yi çalıştırma

Prosedür neredeyse Gzip ile aynıdır ve Gzip kısmını Brotli ile değiştirir. Ancak, Brotli (.br) dosyalarına ASP.NET Core'da varsayılan olarak erişilemez. Erişebilmeniz için yapılandırmanız gerekir, ancak kodu Gzip sırasında kullanıyorsanız, desteklenir.

İlk olarak, bir WebGL dosya dağıtımı ve sayfası oluşturun.

WebGL dosya yerleşimi

wwwrootwebgl-brotli Klasör oluştur altında, Brotli ile oluşturduğunuz WebGL dosyasından BuildTemplateData , klasörünü kopyalayın.

Jiletli Sayfa Oluşturma

Gzip ile aynı adımları kullanarak WebGLBrotli.cshtml dosyayı oluşturun.

Kod, Unity'deki Çıktı'ya index.html referansla aşağıdaki gibidir. Yol, WebGL dosyaları için daha önce oluşturduğunuz webgl-brotli klasörle eşleşir.

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

Bu sayfada gezinmeye izin verecek şekilde Index.cshtml değiştirin.

<!-- 省略 -->

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

Sabitleme Programı.cs

Gzip desteklendiğinde değiştirirseniz, aynı kodu kullanabilirsiniz.

Düzelttikten sonra, hata ayıklamayı çalıştırın ve oyunun çalışıp çalışmadığını kontrol edin.

Doğru şekilde ayarladıysanız ve oyun hala görüntülenmiyorsa, çerezlerinizi temizlemek için web tarayıcınızın önbelleğini temizlemeyi deneyin.

IIS Web Sunucusundaki Brotli Dosyalarına Erişmenin Belirtilerini Anlama

Brotli varsayılan olarak IIS tarafından desteklenmez, bu nedenle IIS tarafında yapılandırma gereklidir. Gelişmiş ayarlar yapılarak ele alınabilir gibi görünüyor, ancak bu ipucunda açıklamayacağım. Lütfen aşağıda bağlantısı verilen bilgilere bakın.

hata mesajı

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 için optimize edilmiş (WebGL) bir oyun çıktısı alın

Oyun çözünürlüğünü değiştirin