Unity WebGL uitvoeren met ASP.NET Core
Verificatieomgeving
- Ramen
-
- Voor Windows 11
- Unity Editor
-
- 2020.3.25f1
- Visual Studio
-
- Visual Studio 2022
- ASP.NET Core
-
- ASP.NET Core 6.0
- Internet Information Services (IIS)
-
- IIS 10.0
Eerst
Leer hoe u een game-uitvoer uitvoert als WebGL in Unity op een webserver waarop ASP.NET Core wordt uitgevoerd. Voor gameprogramma's gebruikt u de uitvoer in de onderstaande stappen met tips. Het spelvoorbeeld maakt gebruik van de 2D Platformer Microgame, die kan worden gemaakt vanuit de Unity Hub.
Ik zal uitleggen hoe u "Uncompressed WebGL", "WebGL compressed with Gzip" en "WebGL compressed with Brotli" instelt om WebGL-games uit te voeren. De procedure is voor iedereen hetzelfde.
We gebruiken Visual Studio 2022 ASP.NET Core 6.0, maar oudere versies zullen waarschijnlijk werken. De structuur van de initiële code is echter voor elke versie anders, dus begrijp de verschillen zelf.
Een ASP.NET kernproject maken
Start "Visual Studio 2022" vanuit het startmenu.
Selecteer Nieuw project maken.
Selecteer deze keer "ASP.NET Core Web App" als voorbeeld. Als u ASP.NET Core gebruikt, kunt u andere sjablonen uitvoeren, maar u moet elke sjabloon volgen om deze te bouwen.
Stel de projectnaam en locatie willekeurig in.
Laat de aanvullende informatie zoals deze is.
Het project is gemaakt.
Ongecomprimeerde WebGL uitvoeren
Bereid een WebGL-programma voor dat zonder compressie is gemaakt.
Zorg ervoor dat het spel snel werkt
ASP.NET Probeer een WebGL-game uit te voeren met minder instellingen zonder de Core-etiquette te volgen.
In ASP.NET Core hebt u geen toegang tot sommige WebGL-bestanden die door Unity worden verzonden in de standaardstatus. Maak dit toegankelijk.
Programma.cs
Open vanuit uw Program.cs
project. Van toepassing op eerdere ASP.NET Core-versies Startup.cs
.
Voeg een naamruimte toe aan de bovenkant van de code en vervang het volgende in de 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
, zodat wanneer een bestand wordt geopend, .wasm
het kan worden geretourneerd aan de client met de opgegeven Content-Type
.
WebGL-implementatie
Plaats de volgende bestandsmappen vanuit Unity in uw project wwwroot
.
- Inhoudsopgave.html
- Bouwen
- TemplateData
Index.cshtml
index.html
Open de koppeling zodat u deze kunt openen.
<!-- 省略 -->
<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>
Voer het programma uit en zorg ervoor dat het spel werkt.
Een WebGL-programma uitvoeren op een Razor-pagina
Het vorige spel draaide op een statisch HTML-bestand, dus het draait op een plek die niets te maken heeft met ASP.NET Core. Het is niet erg wenselijk voor programma-uniformiteit, dus we verplaatsen het gedrag van het HTML-bestand naar Razor Pages.
Klik met de rechtermuisknop op de map Pagina's in uw project om een nieuw item toe te voegen.
Selecteer Razor Page - Empty. Er is geen specifieke naam opgegeven, maar deze wordt hier WebGL.cshtml
toegevoegd .
De code wordt weergegeven.
index.html
Raadpleeg de inhoud van het bestand en de poort naar WebGL.cshtml
.
link
Er zijn een aantal vreemde punten, zoals hoe de tag te plaatsen, maar ik zal het laten zoals het is omwille van de eenvoud van uitleg.
@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.cshtml
WebGL
Voeg een link toe aan .
<!-- 省略 -->
<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>
Probeer het programma uit te voeren. U kunt zien dat de kop- en voettekst _Layout.cshtml
worden weergegeven op de WebGL-pagina volgens .
De locatie van WebGL-bestanden wijzigen
Ik heb het WebGL-bestand direct onder geplaatst, maar deze methode overschrijft het wanneer u twee of meer WebGL-bestanden wwwroot
plaatst.
Ik zal uitleggen hoe je dit in aparte mappen kunt plaatsen en verplaatsen.
Maak eerst een nieuwe map met de naam "webgl" en verplaats deze daarheen. De twee te verplaatsen mappen Build
zijn , TemplateData
.
index.html
Ik heb het al geport naar Razor Pages en kan het veilig verwijderen.
Omdat WebGL.cshtml
we de mappenhiërarchie hebben verdiept, zullen we ook het pad verdiepen dat wordt beschreven in . De correctie is 3 regels.
Voor correctie
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
var buildUrl = "Build";
Na correctie
<link rel="shortcut icon" href="webgl/TemplateData/favicon.ico">
<link rel="stylesheet" href="webgl/TemplateData/style.css">
var buildUrl = "webgl/Build";
Voer het programma uit om te zien of het goed werkt.
WebGL uitvoeren gecomprimeerd met Gzip
De extensie van het bestand gecomprimeerd door Gzip is , en het is .gz
een bestand dat kan worden afgehandeld door ASP.NET Core,
Unity WebGL Content-Type
en worden anders behandeld en vereisen conversie.
Maak eerst een WebGL-bestandsimplementatie en -pagina.
WebGL-bestandsplaatsing
wwwroot
webgl-gzip
Maak een map onder Gzip en kopieer de map , uit het WebGL-bestand Build
TemplateData
dat u met Gzip hebt gemaakt.
Een Razor-pagina maken
Maak het bestand deze keer WebGLGzip.cshtml
met dezelfde procedure als wanneer het niet is gecomprimeerd.
De code is als volgt met betrekking tot Output in index.html
Unity.
Het pad komt overeen met de map die u eerder hebt gemaakt webgl-gzip
voor de WebGL-bestanden.
@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>
}
Wijzigen om navigatie naar deze pagina toe Index.cshtml
te staan.
<!-- 省略 -->
<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>
Fix Programma.cs
app.UseStaticFiles
Wijzig het onderdeel dat de methode verwerkt als volgt.
Voor correctie
// ここから追加
var provider = new FileExtensionContentTypeProvider();
provider.Mappings[".data"] = "application/octet-stream";
provider.Mappings[".wasm"] = "application/wasm";
app.UseStaticFiles(new StaticFileOptions()
{
ContentTypeProvider = provider,
});
// ここまで追加
Na correctie
// ここから追加
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
retourneert het bestand Content-Type
application/x-gzip
met .
Zoals het is, kan Unity WebGL op de client het niet bepalen, dus .gz
ik herschrijf en retourneer het volgens Content-Type
de extensie van het bestand dat uitsluit .
Content-Encoding
Ik heb het ook ingesteld omdat het gzip
nodig is.
Overigens heb ik ook de Brotli-code in elkaar gezet, zodat je deze code kunt gebruiken zoals deze is in de Brotli-correspondentie van het volgende item.
Brotli stelt ook .br
rewrite Content-Encoding
br
in om overeen te komen met Content-Type
de extensie van het bestand zonder .
Het bestand is echter standaard niet toegankelijk in ASP.NET Core,.br
dus provider.Mappings
ik heb het toegevoegd met .br
.
Voer daarna de foutopsporing uit en controleer of het spel correct werkt.
Als je het correct hebt ingesteld en de game nog steeds niet wordt weergegeven, probeer dan het cachegeheugen van je webbrowser te wissen om je cookies te wissen.
WebGL uitvoeren gecomprimeerd met Brotli
De procedure is bijna hetzelfde als Gzip, waarbij het Gzip-onderdeel wordt vervangen door Brotli. Brotli-bestanden (.br) zijn echter niet standaard toegankelijk in ASP.NET Core. U moet het configureren zodat u er toegang toe hebt, maar als u de code gebruikt op het moment van Gzip, wordt deze ondersteund.
Maak eerst een WebGL-bestandsimplementatie en -pagina.
WebGL-bestandsplaatsing
wwwroot
webgl-brotli
Kopieer onder Een map maken de map , uit het Build
TemplateData
WebGL-bestand dat u met Brotli hebt gemaakt.
Een Razor-pagina maken
Maak het bestand met WebGLBrotli.cshtml
dezelfde stappen als voor Gzip.
De code is als volgt met betrekking tot Output in index.html
Unity.
Het pad komt overeen met de map die u eerder hebt gemaakt webgl-brotli
voor de WebGL-bestanden.
@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>
}
Wijzigen om navigatie naar deze pagina toe Index.cshtml
te staan.
<!-- 省略 -->
<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>
Fix Programma.cs
Als u het wijzigt wanneer Gzip wordt ondersteund, kunt u dezelfde code gebruiken.
Nadat u het hebt opgelost, voert u foutopsporing uit en controleert u of het spel werkt.
Als je het correct hebt ingesteld en de game nog steeds niet wordt weergegeven, probeer dan het cachegeheugen van je webbrowser te wissen om je cookies te wissen.
Wat zijn de symptomen van toegang tot Brotli-bestanden op een IIS-webserver?
Brotli wordt standaard niet ondersteund door IIS, dus configuratie aan de IIS-kant is vereist. Het lijkt erop dat het kan worden afgehandeld door geavanceerde instellingen te maken, maar ik zal het in deze tip niet uitleggen. Raadpleeg de onderstaande informatie.
- asp.net core 2.2 brotli-compressie werkt niet op IIS?
- Overzicht van IIS-compressie
- WebGL: Voorbeeld van serverconfiguratiecode
- WebGL - Gecomprimeerde builds implementeren
foutmelding
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)