Blazorのページ上でUnityのゲームを動かしてみる
Unityで作成したゲームをBlazorのページに埋め込んでみた。
Blazorとゲームの公開はローカルにのみ行う。
公開用WebサーバーはDockerを使用する。
Webサーバの用意
DockerのコンテナイメージをBlazor用とUnity用の2つ用意する。
今回実行したコマンド
Unity用
docker run -d -p 8081:80 -v "\docker\tmp\unity:/usr/local/apache2/htdocs/" httpd
Blazor用
docker run -d -p 8080:80 -v "\docker\tmp\httpdHtdocs:/usr/local/apache2/htdocs/" httpd
\docker\tmp\unity が ホストのパス
/usr/local/apache2/htdocs/ が コンテナのパス
Unityでの作業
UnityでWebGLでビルドで出力された内容をコンテナ作成時に指定した ホストのパス の場所にコピーする。
http://localhost:8081/にアクセスすると公開されたゲームがプレイできる
使用アセット：
Sunny Land Forest | 2D Characters | Unity Asset Store
※WebGLビルドについて
Unityのバージョンが 2019.3.10f1 のとき
特に操作不要でビルドしたものを配置するだけで動いた。
Unityのバージョンが 20203.6f1 のとき
ビルドして実行だとそのときだけ動くが、ビルド後の内容を配置すると読み込みが途中で止まった。
圧縮形式を無効にしてビルドする必要があった。
Blazorの作業
表示したいBlazorのページにiframeでゲームのサーバーを指定するように記述する。
Blazorのコード
@page "/unity"
<h3>unitytest</h3>
<iframe
src="http://localhost:8081//index.html"
width="1060"
height="700"
scrolling="no"
frameborder="0">
</iframe>
<p>移動：方向キー</p>
<p>ジャンプ：Space</p>
Blazorを発行するとフォルダ「wwwroot」が出力されるのでBlazor用の ホストのパス の場所にコピーする。
http://localhost:8080/ にアクセスするとBlazorの画面が表示されるのでUnityのページを見てみる。
BlazorのページでUnityのゲームが遊べるようになった。
参考
Dockerについて
https://qiita.com/m_t_/items/13b969245d049589b86c
https://qiita.com/sugurutakahashi12345/items/dc23dab2613b0e6103e8
UnityのWebGLビルドについて
https://a4rcvv.net/unity-loading-webgl-stops/
Blazorの親から子へのデータバインドでエラーになった
子コンポーネントのプロパティにバインドさせる場合に下記のように書くとエラーが出たことがあった。
※後日試したところエラーになったコードでもエラーにならなかった。また同じエラーが出たときのために残しておく
エラーになったコード
@*親コンポーネントから子コンポーネントBindChildのMentalプロパティにバインドする*@ <BlazorBlogBind.Components.BindChild @bind-Mental="Mental"/>
エラー内容
The attribute names could not be inferred from bind attribute 'bind-Mental'. Bind attributes should be of the form 'bind' or 'bind-value' along with their corresponding optional parameters like 'bind-value:event', 'bind:format' etc.
解消例１
<BlazorBlogBind.Components.BindChild @bind-Mental="Mental" @bind-Mental:event="MentalChanged"/>
解消例２
@*usingを追加する*@ @using BlazorBlogBind.Components <BindChild @bind-Mental="Mental" />
