UnityでWebGL版を作るにあたって、行った作業についてまとめていくよ😉☝

幾つかの記事に分割することになると思う。

関連記事に関してはタグから「WebGL」で辿っていただければ幸い。

 

WebGL版の環境構築からビルドまで

WebGLビルド環境構築

今回はすでに提供すべきアプリケーションが存在していることを前提に進めるよ😄

Unityを起動したら、メニュー項目から

File -> Build Settings…

を選択してBuild Settingsを開く。

画面を開いたら、他のPlatformをサポートする時と同様にPlatformを選択する。

今回はWebGL版なので「WebGL」を探して選択する。

なにも対応をしていない場合は、右側の領域に

 

No WebGL module loaded.

 

と表記されているはずだ👈😌

その際は下の「Open Download Page」をクリックすると、

ブラウザが立ち上がり自動的にインストーラがダウンロードされるので

そのままインストーラに従ってインストール作業を行おう💪😤👍

 

インストール中にUnityを一旦閉じる指示が出ると思うので、

Unityはインストーラのダウンロードが開始された時点で落としてしまって構わない。

 

 

WebGLテンプレートのインストール

さて、上記の対応だけでWebGLのビルドそのものはできるが、

WebGLを展開するHTML環境を用意するためにテンプレートをインストールする必要がある。

 

Unityをインストールしたときのインストーラは残しているかな😯❓

話は逸れるがUnityのインストーラは、どこかにまとめて管理しておくとよい。

Unityのバージョンによって挙動が異なる問題が発生した場合、

古いバージョンを再度インストールしたり、

追加コンテンツを拡張したいときにデータを展開することがあるからだ。

 

複数のバージョンのUnityを置いて比較を行うこともあるので、バックアップの意味も込めて残すことを推奨する😤✋

 

さて、Unityのインストーラを起動したら、画面の指示に従って

「Choose Components」のステップまで進めよう。

今回必要なコンポーネントは「WebGL Build Support」だ。

以下の通りこれにのみチェックボックスに✓を入れてインストールを開始しよう😄

するとWebGL用のテンプレート構築に必要なデータがインストールされる。

 

スポンサーリンク[pc-mieru][/pc-mieru][sp-mieru][/sp-mieru]

 

WebGL環境を試しにビルドしてみよう

Unityを再度起動したら、メニュー項目から

File -> Build Settings…

を選択してBuild Settingsを開き、先ほどと同様にWebGLを選択しよう。

その後、画面下部にある「Switch Platform」を選択すると、

データ環境内のmetaをWebGLに最適な形にアップデートしてくれるので処理完了までしばらく待とう😔🙏🍵

🐦　🐦　🐦　🐦　🐦

「Hold On」プログレスバーが完了したら、WebGLの提供の準備は完了だ。

Platformの項目を確認すると、UnityのアイコンがWebGLの横についていることが確認できたら、

ビルドターゲットがWebGLになったということだ😉👍

 

まずは試しにBuildしてみよう🙂☝

「Build」ボタンを押すと「Build WebGL」という名前でファイル選択ダイアログが開く。

ここではWebGLで展開するデータ郡を入れるフォルダを指定するよう求められるので、

任意の場所にフォルダを掘って指定しよう。

 

あとはUnityが勝手に環境を作り出してくれるので、Unityが操作できるようになるまで待とう。

デフォルトの状態だと上記のようにフォルダ内にindex.htmlが生成される。

これがWebGL版でコンテンツが起動されるページである☺🙌

 

ダブルクリックして開いてみると・・・。

ブラウザによるが、こんな感じのエラーが出るはずだ。

 

指示通りにインストールとビルドをしたのに

どうしてこんなことになってしまうのか‼😡💢

と怒りたくのもわからなくもない・・・が

結論から言うと、これはビルドに失敗したわけではないのだ😰

 

次回に続く！👋😇💨

 

スポンサーリンク