اتحاد

ASP.NET کور کے ساتھ یونٹی ویب جی ایل چلانا

جب صفحے کی تازہ کاری :
صفحہ تخلیق تاریخ :

تصدیق کا ماحول

Windows
  • ونڈوز 11
یونٹی ایڈیٹر
  • 2020.3.25f1
Visual Studio
  • Visual Studio 2022
ASP.NET کور
  • ASP.NET کور 6.0
انٹرنیٹ انفارمیشن سروسز (IIS)
  • IIS 10.0

سب سے پہلے

کور پر چلنے والے ویب سرور پر یونٹی میں ویب جی ایل کے طور پر گیم آؤٹ پٹ چلانے ASP.NET طریقہ سیکھیں۔ گیم پروگراموں کے لئے ، نیچے دیئے گئے نکات کے مراحل میں آؤٹ پٹ کا استعمال کریں۔ گیم کی مثال 2 ڈی پلیٹ فارمر مائیکرو گیم کا استعمال کرتی ہے ، جسے یونٹی ہب سے بنایا جاسکتا ہے۔

میں وضاحت کروں گا کہ ویب جی ایل گیمز کو چلانے کے لئے "غیر کمپریسڈ ویب جی ایل"، "ویب جی ایل کو جیزپ کے ساتھ کمپریسڈ" اور "ویب جی ایل کو بروٹلی کے ساتھ کمپریسڈ" کیسے ترتیب دیا جائے۔ طریقہ کار ان سب کے لئے ایک ہی ہے.

ہم ویژول اسٹوڈیو 2022 ، کور 6.0 ASP.NET استعمال کر رہے ہیں ، لیکن پرانے ورژن شاید کام کریں گے۔ تاہم ، ابتدائی کوڈ کی ساخت ہر ورژن کے لئے مختلف ہے ، لہذا براہ کرم اختلافات کو خود سمجھیں۔

ایک ASP.NET کور پروجیکٹ بنانا

اسٹارٹ مینو سے "ویژول اسٹوڈیو 2022" لانچ کریں۔

نیا پروجیکٹ بنائیں کو منتخب کریں۔

اس بار ، نمونے کے طور پر "کور ویب ایپ ASP.NET" منتخب کریں۔ اگر آپ ASP.NET کور پر چل رہے ہیں تو ، آپ دوسرے ٹیمپلیٹس چلا سکتے ہیں ، لیکن آپ کو اسے بنانے کے طریقے پر ہر ٹیمپلیٹ کی پیروی کرنے کی ضرورت ہوگی۔

منصوبے کا نام اور مقام من مانے طریقے سے ترتیب دیں۔

اضافی معلومات کو اس طرح چھوڑ دیں۔

منصوبہ بنایا گیا ہے.

Run uncompressed WebGL

کمپریشن کے بغیر بنایا گیا ویب جی ایل پروگرام تیار کریں۔

یقینی بنائیں کہ کھیل تیزی سے کام کرتا ہے

ASP.NET بنیادی آداب پر عمل کیے بغیر کم ترتیبات کے ساتھ ویب جی ایل گیم چلانے کی کوشش کریں۔

ASP.NET کور میں ، آپ پہلے سے طے شدہ حالت میں یونٹی کے ذریعہ خارج ہونے والی کچھ ویب جی ایل فائلوں تک رسائی حاصل نہیں کرسکتے ہیں۔ اسے قابل رسائی بنائیں۔

پروگرام.cs

اپنے منصوبے سے کھولیں Program.cs . پچھلے ASP.NET کور ورژن Startup.cs پر لاگو ہوتا ہے۔

کوڈ کے اوپری حصے میں ایک نام کی جگہ شامل کریں اور کوڈ میں درج ذیل کو تبدیل کریں 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 Deployment

اپنے پروجیکٹ wwwroot میں یونٹی سے درج ذیل فائل فولڈر رکھیں۔

  • انڈیکس.html
  • تعمیر
  • TemplateData

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>

پروگرام چلائیں اور یقینی بنائیں کہ کھیل کام کرتا ہے.

ریزر صفحے پر ویب جی ایل پروگرام چلائیں

پچھلا گیم ایک جامد ایچ ٹی ایم ایل فائل پر چلتا تھا ، لہذا یہ ایسی جگہ پر چلتا ہے جس کا ASP.NET کور سے کوئی لینا دینا نہیں ہے۔ یہ پروگرام کی یکسانیت کے لئے بہت مطلوب نہیں ہے ، لہذا ہم ایچ ٹی ایم ایل فائل کے طرز عمل کو ریزر صفحات پر منتقل کریں گے۔

ایک نیا آئٹم شامل کرنے کے لئے اپنے پروجیکٹ سے صفحات کے فولڈر پر دائیں کلک کریں۔

ریزر صفحہ منتخب کریں - خالی۔ کوئی خاص نام متعین نہیں ہے ، لیکن یہ یہاں 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 ویب جی ایل کے صفحے پر ظاہر ہوتے ہیں۔

ویب جی ایل فائلوں کا مقام تبدیل کریں

میں نے ویب جی ایل فائل کو براہ راست نیچے رکھا ، لیکن جب آپ دو یا زیادہ ویب جی ایل wwwroot فائلیں رکھیں گے تو یہ طریقہ اسے اوور رائٹ کرے گا۔ میں وضاحت کروں گا کہ اسے الگ الگ فولڈروں میں کیسے رکھا جائے اور اسے منتقل کیا جائے۔

سب سے پہلے ، "ویبگل" نامی ایک نیا فولڈر بنائیں اور اسے وہاں منتقل کریں۔ منتقل کیے جانے Buildوالے دو فولڈر ہیں، TemplateData . index.html میں پہلے ہی اسے ریزر پیجز پر پورٹ کر چکا ہوں اور اسے محفوظ طریقے سے حذف کرسکتا ہوں۔

چونکہ 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";

یہ دیکھنے کے لئے پروگرام چلائیں کہ آیا یہ صحیح طریقے سے کام کرتا ہے۔

جیزپ کے ساتھ کمپریسڈ ویب جی ایل چلانا

جیزپ کے ذریعہ کمپریس کردہ فائل کی توسیع ہے .gz ، اور یہ ایک ایسی فائل ہے جسے کور کے ذریعہ سنبھالا جاسکتا ASP.NET ، یونٹی ویب جی ایل Content-Type اور مختلف طریقے سے سنبھالا جاتا ہے اور تبدیلی کی ضرورت ہوتی ہے۔

سب سے پہلے ، ویب جی ایل فائل کی تعیناتی اور صفحہ بنائیں۔

WebGL file placement

wwwrootwebgl-gzip جیزپ کے تحت ایک فولڈر بنائیں اور جی زپ کے ساتھ بنائی گئی ویب جی ایل فائل BuildTemplateData سے فولڈر کاپی کریں۔

ریزر صفحہ بنائیں

اس بار WebGLGzip.cshtml اسی طریقہ کار کا استعمال کرتے ہوئے فائل بنائیں جیسے غیر کمپریسڈ ہونے پر۔

یونٹی میں index.html آؤٹ پٹ کے حوالے سے کوڈ مندرجہ ذیل ہے۔ یہ راستہ اس فولڈر سے میل کھاتا ہے جو آپ نے ویب جی ایل فائلوں کے لئے پہلے بنایا 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>
}

اس صفحے پر نیویگیشن کی اجازت دینے کے لئے 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 کور .gz میں ، فائل Content-Type application/x-gzip کس کے ساتھ واپس آتی ہے۔ جیسا کہ یہ ہے ، کلائنٹ پر یونٹی ویب جی ایل اس کا تعین نہیں کرسکتا ہے ، لہذا .gz میں اسے فائل کی توسیع کے مطابق Content-Type دوبارہ لکھتا ہوں اور واپس کرتا ہوں جس میں شامل نہیں ہے۔ Content-Encoding میں نے بھی اسے مقرر کیا کیونکہ یہ gzip ضروری ہے.

ویسے ، میں نے بروٹلی کوڈ کو بھی ایک ساتھ رکھا ہے ، تاکہ آپ اس کوڈ کو استعمال کرسکیں کیونکہ یہ اگلی شے کے بروٹلی خط و کتابت میں ہے۔ بروٹلی فائل کی توسیع سے میچ Content-Type کرنے کے لئے دوبارہ لکھنے br Content-Encoding کا بھی .br سیٹ کرتا ہے۔ تاہم ، فائل ASP.NET کور میں ڈیفالٹ طور پر ناقابل رسائی ہے ،.br لہذا provider.Mappings میں نے اسے اس کے ساتھ .br شامل کیا۔

اس کے بعد ، ڈی بگ چلائیں اور چیک کریں کہ آیا کھیل صحیح طریقے سے کام کرتا ہے۔

اگر آپ نے اسے صحیح طریقے سے ترتیب دیا ہے اور کھیل اب بھی ظاہر نہیں ہوگا تو ، اپنے کوکیز کو صاف کرنے کے لئے اپنے ویب براؤزر کے کیشے کو صاف کرنے کی کوشش کریں۔

بروٹلی کے ساتھ کمپریسڈ ویب جی ایل چلانا

یہ طریقہ کار تقریبا گزیپ جیسا ہی ہے ، جس میں گزیپ حصے کو بروٹلی کے ساتھ تبدیل کیا گیا ہے۔ تاہم ، بروٹلی (.بی آر) فائلیں ASP.NET کور میں پہلے سے طے شدہ طور پر قابل رسائی نہیں ہیں۔ آپ کو اسے تشکیل دینے کی ضرورت ہے تاکہ آپ اس تک رسائی حاصل کرسکیں ، لیکن اگر آپ جی زپ کے وقت کوڈ استعمال کررہے ہیں تو ، اس کی حمایت کی جاتی ہے۔

سب سے پہلے ، ویب جی ایل فائل کی تعیناتی اور صفحہ بنائیں۔

WebGL file placement

wwwrootwebgl-brotli فولڈر بنائیں کے تحت ، بروٹلی کے ساتھ بنائی گئی BuildTemplateData ویب جی ایل فائل سے فولڈر کاپی کریں۔

ریزر صفحہ بنائیں

جی زپ کی طرح ہی اقدامات کا استعمال کرتے ہوئے WebGLBrotli.cshtml فائل بنائیں۔

یونٹی میں index.html آؤٹ پٹ کے حوالے سے کوڈ مندرجہ ذیل ہے۔ یہ راستہ اس فولڈر سے میل کھاتا ہے جو آپ نے ویب جی ایل فائلوں کے لئے پہلے بنایا 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>
}

اس صفحے پر نیویگیشن کی اجازت دینے کے لئے 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

اگر آپ جیزپ کی حمایت کرنے پر اس میں ترمیم کرتے ہیں تو ، آپ وہی کوڈ استعمال کرسکتے ہیں۔

اسے ٹھیک کرنے کے بعد ، ڈی بگ چلائیں اور چیک کریں کہ آیا کھیل کام کرتا ہے۔

اگر آپ نے اسے صحیح طریقے سے ترتیب دیا ہے اور کھیل اب بھی ظاہر نہیں ہوگا تو ، اپنے کوکیز کو صاف کرنے کے لئے اپنے ویب براؤزر کے کیشے کو صاف کرنے کی کوشش کریں۔

آئی آئی ایس ویب سرور پر بروٹلی فائلوں تک رسائی کی علامات کو سمجھنا

بروٹلی کو پہلے سے طے شدہ طور پر آئی آئی ایس کی حمایت حاصل نہیں ہے ، لہذا آئی آئی ایس سائیڈ پر ترتیب کی ضرورت ہے۔ ایسا لگتا ہے کہ اسے جدید ترتیبات بنا کر سنبھالا جاسکتا ہے ، لیکن میں اس ٹپ میں اس کی وضاحت نہیں کروں گا۔ براہ مہربانی نیچے دی گئی معلومات کا حوالہ دیں۔

غلطی کا پیغام

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) گیم آؤٹ پٹ کریں
گیم ریزولوشن کو تبدیل کریں