關於Unity 如何與Blazor Server結合

LinSr發表於2023-09-20
UnityBlazorServer

關於Unity 如何與Blazor Server結合

一、介紹

最近工作中有Unity與Blazor Server結合的需求，在網上找了一圈，發現這方面的資料比較少，特此寫下這篇記錄一下自己的實現過程，希望可以幫到有需要的朋友。（下方多圖預警）

OS Version : windows 11

Unity Version： 2021.3.23f1c1

Blazor Server : net 7.0

二、實現步驟

第一步 準備Unity專案

建立一個Unity 專案

​ 然後得到下面的Unity專案

第二步 Unity專案釋出設定

​ 點選Unity 編輯器頂部選單欄 檔案 > 生成設定

​ 點選選擇< WebGL >點選對話方塊右下角<切換平臺> , 並等待平臺切換完成

切換完成狀態如下圖，可以看到有黃色字型警告提示 為了生成播放器，請轉到播放器設定中解決“顏色空間”與當前設定之間的不相容問題

點選上圖對話方塊左下角的<玩家設定>按鈕來到設定介面,進入<玩家>選單,選擇< WebGL >欄，展開<其他設定> , 看到<渲染> 下的<顏色空間>

​ 將<顏色空間> 由 線性改成伽馬 ,並等待切換成功,做完這一切後收起 <其他設定>項

​ 展開<釋出設定>項 ,勾選解壓縮回退 ,勾選之後關閉設定對話方塊, 到此 , 釋出設定設定完成

第三步 釋出Unity 專案 為 WebGL

​ 做完上一步釋出的前期設定之後，接下來就可以開始釋出Unity 專案啦，點選 Build Settings 對話方塊右下角的<生成>按鈕

​ 點選<生成>按鈕之後會彈出下列對話方塊讓你選擇一個釋出的路徑

​ 我本人是習慣於在Unity的專案根目錄下建立一個Build 資料夾作為生成路徑，讀者可以按照個人習慣放置在其他路徑，建立完Build資料夾之後，選擇它作為釋出路徑，然後等待生成完成即可

​ 生成成功後的Build 資料夾內容如下，至此，生成步驟完成

第四步 Blazor Server 準備

​ 建立一個net7.0 的 Blazor Server專案

​ 在Program.cs中進行配置，程式碼如下

using BlazorApp6.Data;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
}

//------------------將Unity作為靜態檔案引入------------------------------------------
app.UseStaticFiles();
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(Path.Combine(builder.Environment.ContentRootPath, "BlazorServerTest")),
    ServeUnknownFileTypes = true,
    RequestPath = "/unity"
});
//-----------------------------------------------------------------------------------
app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

​ 做完如上配置之後，將剛剛在第三步中釋出的Build資料夾複製到Blazor Server的專案根目錄下，並修改目錄名稱為 BlazorServerTest，做完這步之後至此第四步完成

第五步 最終效果

​ 做完上述四個步驟之後，啟動Blazor Server專案，在位址列輸入 http://localhost:{port}/unity/index.html 即可看到Unity畫面

三、總結

​ 本文透過將Unity 生成成WebGL，並透過靜態檔案的方式引入了Blazor Server 當中，完成了Blazor Server和Unity的結合，這篇部落格是本人寫的第一篇部落格，如有不對的地方，請大家指教。

相關文章