Webブラウザ上で遊べるゲームを作りたい！

そんなときに活躍するのが「WebGL」と言われる技術です。

聞いたことはあるような…気になるけど複雑そう… という方も安心してください。

UnityのWebGLビルドを利用すれば、誰でも簡単にブラウザ版ゲームを公開することができます。

そこで今回は、Unityを使ったWebGLビルドの方法についてご紹介します。

|Unityとは

Unityは、アメリカのUnity Technologiesが開発した世界最大級のシェアを誇るゲームエンジンで、2D・3Dを問わずゲームが開発できるといった特徴があります。

Unityの強みは、WindowsやMac、Android、iOS、Play Station、Nintendo Switchなど、幅広いプラットフォームに対応している点です。

また、様々な開発ツールが提供されており、興味があれば有識者・初心者を問わず誰でもゲーム開発ができることも魅力の一つです。

原神やFall Guys、ポケットモンスターブリリアントダイアモンド・シャイニングパールなど、色々なジャンルのゲームがUnityを使って開発されています。

Unityについてもっと知りたいという方は、以下の記事をご覧ください。

Unityとは？特徴や作品事例、価格など徹底解説！

|WebGLとは

WebGLとはWeb Graphics Libraryの略で、ウェブブラウザ上で3次元のグラフィックスを高速描画する技術の一つです。

一般的にウェブブラウザは動作速度が遅く、3Dグラフィックスなどの処理を行うことが難しいものです。

ですが、WebGLを利用すれば、3Dの描写が多いゲームやアニメーションなどをブラウザ上で表現することが可能となります。

WebGLはプラグイン（機能を拡張するソフトウェア）を必要としないことも強みの一つです。

また、ChromeやFireFox、Safariなどすべてのブラウザで動作が可能な上、スマートフォンでも利用できます。

|WebGLで出力する方法

WebGLがどういったものかお伝えしたところで、ここからは実際にUnityを使ってWebGL形式で出力する方法についてご説明いたします。

事前準備

まず、WebGLで出力するためには下記画像の「WebGL Build Support」をあらかじめインストールしておく必要があります。

新たにエディターをインストールする場合は、Unity Hubを開いて左のタブにあるインストールから、右上にある「エディターをインストール」をクリックして「WebGL Build Support」にチェックを入れてインストールします。

もちろんすでにインストールしているエディターに追加することもできます。

その場合は、該当するエディターの右端にある歯車マークから「モジュールを加える」を選択し、「WebGL Build Support」にチェックを入れてインストールを開始してください。

インストールが終われば、これで事前準備は完了です。

プロジェクトを作成

WebGLで出力するための事前準備ができたら、次にプロジェクトを作成しましょう。

Unity Hubの左のタブからプロジェクトを開き、右上の「新しいプロジェクト」を選択します。

一先ずは、動きがわかればどんなものでも大丈夫です。

今回はテンプレートの「使い方を学ぶ」からダウンロードできる「Karting Microgame」をゲームとして出力してみます。

適当なプロジェクト名を付けて「プロジェクトを作成」すると、Unityが起動されシーンが読み込まれた状態になります。

WebGLで出力

それでは、実際にWebGLで出力していきましょう。

Unity上部のタブにある「File」から「Build Settings…」を選択します。

するとBuild Settingsウィンドウが表示されます。

Unityマークが付いているのが現在のビルド対象です。

今回はWebGLでビルドしたいので、WebGLを選択して「Switch Platform」を行います。

※WebGLを選択した際に「No WebGL module loaded.」と表示されている場合は、事前準備で説明した「WebGL Build Support」がインストールされていない状態のため、「Open Download Page」からダウンロードを行なってください。

無事に切り替わっていますね。（プラットフォームの切り替えには少し時間がかかります）

切り替えが完了すると、WebGLでの「Build」および「Build And Run」が実行できるようになっていると思います。

「Build And Run」を押すとエクスプローラーが表示されるので、新規フォルダを作成し適当な名前を付けて選択します。今回は「Sample_WebGL」としました。

フォルダを選択するとビルドが開始され、完了後にブラウザが立ち上がります。

これで、実際にブラウザ上で3Dゲームをプレイすることができるようになりました。

出力ファイルを確認

出力されたファイルを見てみましょう。

先ほど作成したフォルダの中を見ると、以下のようにファイルが出力されているはずです。

「index.html」がゲーム画面を表示するもので、それ以外のフォルダが様々な処理を行うためのデータとなっています。

このWebGL用に出力されたファイルをサーバーに公開することで、他の人たちもブラウザ上でゲームを遊べるようになるのです。

ただし、「index.html」をエクスプローラーから開こうとすると、Chrome等のブラウザで下記のようなエラーが出ます。

Failed to download file Build/Sample_WebGL.data.gz. Loading web pages via a file:// URL without a web server is not supported by this browser. Please use a local development web server to host Unity content, or use the Unity Build and Run option.

簡潔に言うと、「このブラウザではこのファイルを開けませんよ」と言われています。

Mozilla Firefoxなどから開けるようなので、ローカルから開く場合はそちらを利用するか、先ほど同様「Build And Run」で表示されるブラウザを利用しましょう。

ビルドの詳細設定

先ほどはすぐにビルドを行いましたが、ビルドの詳細設定を変更することもできます。

まず、ビルド画面左下の「Player Settings…」を押します。

すると、Playerという項目が選択されたProject Settingsウィンドウが表示されます。

このウィンドウの上部にある「Product Name」が作品名となります。

今回は「Racing Kart」と名付けてみました。

また、Settings for WebGL内の「Resolution and Presentaion」タブから、ブラウザで表示するときの縦横比も調整できます。

タブを展開すると、「Default Canvas Width」「Default Canvas Height」という項目があるので、ここに数値を入力することで任意の縦横比に変更することができます。

設定が完了したら、さっきと同じようにビルドします。

右下に先ほど名付けた作品名「Racing Kart」の表記がありますね。

|WebGLの動作環境

Unityで出力したWebGLの動作環境は、次の3つすべてに当てはまるブラウザが推奨されています。

・WebGL1またはWebGL2に対応している（ただしWebGL１については非推奨で、いずれサポートしなくなります）

・HTML5に対応している

・64ビットで、WebAssemblyをサポートしている

上記に当てはまるブラウザおよびプラットフォームは以下の通りです。

また、UnityのWebGLは、パワーやメモリの不足といった観点からモバイルデバイスでの使用は推奨されておらず、ちゃんと作動しないことが多いようです。

|WebGLで出力する際の注意点

最後に、WebGLで出力するときに気を付けていただきたいことをご紹介します。

①プロジェクト名は半角英数字のみにする

最初にプロジェクトを作成する際にプロジェクト名を設定できますが、こちらにひらがな等の全角文字は入れないようにしてください。

「UnityEditor.BuildPlayerWindow+BuildMethodException: 2 errors」といったようなエラーが出てビルドを行うことができません。

全角文字の入ったプロジェクトをWebGLで出力したい場合は、エクスプローラーでそのプロジェクトのフォルダを丸ごと複製し、半角英数字に変更してUnity Hubの「リストに追加」より該当のプロジェクトを開いてください。

ただし、Player Settings…で設定する「Product Name」は全角文字が入っていても問題ありません。

②フォルダやファイルの名前は変更しない

WebGL出力時に生成されたフォルダやファイル、プロジェクトの名前は変更しないようにしてください。

ビルド時に新規作成したフォルダの名前も変えてはいけません。上手く動作しなくなります。

サーバーにアップロードする際は、生成されたフォルダやファイルをそのまま使用するようにしてください。

|まとめ

いかがでしたか。UnityのWebGL出力について、少しでも理解してもらえたでしょうか。

ご覧いただいた通り、Unityを利用すればWebブラウザ上で動くゲームを簡単に出力することができます。

ブラウザ上でみんなに遊んでほしい！というようなゲームができた際には、Unity RoomやGit Hubといったサーバーにアップロードしてみてくださいね。

最後までお付き合いいただきありがとうございました。