【Unity】ゲームをWebGLでウェブサイトに公開する方法【WordPress】

赤かぶくん

作ったゲームを皆に遊んでほしい。

自分のウェブサイトに公開するにはどうすれば良いの？

まつぼん

そんなお悩みにお答えします！

作ったゲームを多くの人にプレイしてみてほしいと思ったことはありませんか。

アプリストアやフリーゲーム投稿サイトに登録するのも1つの手ですが、自身のウェブサイトを持っているなら手軽にゲームを公開できます。

そこで本記事では、UnityのゲームをWebGLでウェブサイトに公開する方法をご紹介します。

環境
WebGLとは
UnityのゲームをWebGLでウェブサイトに公開するメリット
UnityのゲームをWebGLでウェブサイトに公開する方法　前準備
1. PlatformをWebGLに切り替える
2. InspectorのCanvas設定を確認
UnityのゲームをWebGLでウェブサイトに公開する方法
参考サイト
【Unity】ゲームをWebGLでウェブサイトに公開する方法【WordPress】　まとめ

環境

Unity　バージョン：2020.3.46f1

WordPress　バージョン：6.6.2

Windows10

WebGLとは

WebGL（ウェブジーエル）とは、ウェブブラウザ上で3Dグラフィックスを描画する技術のことです。

特別なプラグインやソフトウェアは必要なく、標準のHTML5とJavaScriptを使って動作します。

ゲームはもちろん、映画やECサイトなどでも活用されています。

UnityのゲームをWebGLでウェブサイトに公開するメリット

Unityで作ったゲームをWebGLでウェブサイトに公開するメリットは以下のとおりです。

ゲームにアクセスしやすい
クロスプラットフォーム対応
簡単に素早くアップロードできる

ゲームにアクセスしやすい

WebGLゲームはブラウザ上で直接プレイできます。

特別なソフトウェアやプラグインをインストールする必要がありません。

ハードルが下がり、多くのユーザーにゲームを遊んでもらえます。

クロスプラットフォーム対応

WebGLは互換性が高く、Windows・macOS・Linuxなど、多くのブラウザで動作します。

また、スマホでも動作可能です。

簡単に素早くアップロードできる

アプリストアは申請後、公開まで何日かかかります。

また、審査で落とされてゲーム自体を公開できないことも…。

対照的に、自サイトへアップロードすればすぐゲームを遊んでもらえます。

作ったゲームを早く皆に知らせたい、プレイしてもらいたい時などにも便利です。

UnityのゲームをWebGLでウェブサイトに公開する方法　前準備

まず、Unityで下記の設定を行います。

PlatformをWebGLに切り替える
InspectorのCanvas設定する

これらはゲームを作り始める前に設定することをお勧めします。

特にCanvas設定は途中で切り替えるとゲーム画面が崩れて、修正がとても大変になることがあります。

PlatformをWebGLに切り替える

Unityを起動したら、メニューから「File」→「Build Settings」を選択してください。

「WebGL」を選択して、「Switch Platform」をクリックしましょう。

PlatformがWebGLに切り替わればOKです。

InspectorのCanvas設定を確認

次に、InspectorのCanvas設定を確認します。

ウェブサイトのページを拡大・縮小しても、UIなどゲーム画面が崩れないように必要です。

Unity「Hierarchy画面」の「Canvas」をクリックすると、Inspectorが表示されます。

設定内容は以下のとおりです。

設定	備考
Render Mode	Screen Space – Camera
Render Camera	Main Camera(Camera)
UI Scale Mode	Scale With Screen Size
Reference Resolution	希望の解像度を入力
Screen Match Mode	Expand

UnityのゲームをWebGLでウェブサイトに公開する方法

では、Unityで作ったゲームをWebGLでウェブサイトに公開しましょう。

手順は以下のとおりです。

WebGLでビルドする
WordPressウェブサイトにアップロードする
ウェブサイトに埋め込む

順番にご説明します。

WebGLでビルドする

作ったゲームをWebGLでビルドする方法です。

まず「Build Settings」の「Player Settings」をクリックしてください。

「Player」→「Resolution and Presentation」を選択します。

必要な設定は下記のとおりです。

設定	備考
Default Canvas Width	希望の解像度を入力。前述の「Reference Resolution」で大きすぎる場合は、調整してみましょう。
Default Canvas Height	希望の解像度を入力。前述の「Reference Resolution」で大きすぎる場合は、調整してみましょう。
Run In Background	非アクティブ時にも動作させるか。基本チェックを入れる。
WebGL Template	Minimal

次に「Publishing Settings」を選択します。

以下のとおり設定しましょう。

設定	備考
Compression Format	圧縮フォーマットを選択。汎用性の高い「Gzip」でOK
Decompression Fallback	ファイル展開エラー時に、開く可能性が上がる。チェックを入れる。

「Build Settings」の「Build」をクリックします。

フォルダー選択画面に変わるので、任意のフォルダーを作成してください。

ここではフォルダーの名前を「WebglGame1」としました。

フォルダーの名前は「半角英数字」で設定しましょう。

日本語を使うと、ビルドエラーの原因となります。

ゲームの容量により、ビルドに時間がかかることがあります。

ビルドが無事終わって、下記のファイルが作られていればOKです。

Build
StreamingAssets
index.html

WordPressウェブサイトにアップロードする

では、できたファイルをサーバーにアップロードしましょう。

利用サーバーの管理画面を開きます。

私の場合は「ConoHAWING」を利用しているので、「サイト管理」→「ファイルマネージャー」に進みます。

「自サイトのドメイン」→「wp-content」→「uploads」の中に、先ほどできたファイルを入れてください。

ちなみに「uploads」の配下にフォルダを作ることが可能です。

私は「unity」というフォルダを作りました。

ゲームごとにフォルダを作って「unity」フォルダに入れると管理しやすいかと思います。

今回の例ですと、「自サイトのドメイン」→「wp-content」→「uploads」→「unity」→「WebglGame1」というファイル構成になります。

ウェブサイトに埋め込む

あとは、該当ページにインラインフレームで埋め込めば完成です。

例えば、カスタムHTMLで下記のように記述します。

<iframe src="https://自サイトのドメイン/wp-content/uploads/unity/WebglGame1（フォルダ名）/index.html" width="360" height="640" scrolling="no" frameborder="0"></iframe>

こちらのページに埋め込んだゲームがあるので、ぜひ遊んでみてください。