【Unity】WebGLビルドをWordPressで公開する

Unity
マイケル
マイケル
みなさんこんにちは!
マイケルです!
エレキベア
エレキベア
クマ〜〜〜〜
マイケル
マイケル
今日はUnityのWebGLビルドをWordPressで公開する方法
について紹介するよ!
エレキベア
エレキベア
WebGLって何クマ?
マイケル
マイケル
WebGLはブラウザ上でグラフィック描画するためのJavaScriptAPIで、
例えばunityroomのようにブラウザ上で動作させることができるんだ!

フリーゲーム投稿サイト unityroom

エレキベア
エレキベア
unityroomもWebGLのビルドを使用していたクマね
ということはこのブログでも公開することができるというクマか
マイケル
マイケル
iOSやAndroidのビルドと同じ要領でビルドして
簡単に公開することができるからやってみよう!
エレキベア
エレキベア
やったるクマ〜〜〜〜
スポンサーリンク

WebGLのビルド

マイケル
マイケル
まずWebGLのビルド設定ですが、デフォルトだとビルドエラーが発生するようなので
Decompression Fallbackにチェックを入れておきましょう!
マイケル
マイケル
そしてこの状態でも自分の環境だとブラウザ実行時にエラーが発生してしまいました。
Compression Format(圧縮設定)をDisabledに設定することで解決しましたが、
こちらを変更すると容量が膨れ上がるため注意が必要です。
20220412 07↑Compression Format、Decompression Fallbackを変更
マイケル
マイケル
あとはResolution and Presentationから画面サイズを指定しておきましょう!
20220412 08↑画面サイズの指定
マイケル
マイケル
ビルド設定は以上です!
あとはBuildSettingからビルドを実行しましょう!
エレキベア
エレキベア
簡単クマ〜〜〜〜

WordPressへのアップロード

マイケル
マイケル
ビルドが実行したらまずはindex.htmlを開いてローカルで確認・・・・
しようとしてもUnityのWebGLビルドは「file://」でのアクセスを許可していないため、直接開くことはできません。
そのため確認するにはローカルサーバを立ち上げるorサーバにアップロードする必要があります。
マイケル
マイケル
ここではこのブログでも使用しているWordPress環境にアップロードしてみます。
場所はどこでもいいですが、アクセスしやすい
public_html/wp-content/uploads 配下にフォルダを作成し、ビルドをアップロードしました。
20220412 04↑WordPress環境にアップロード
エレキベア
エレキベア
画像等が格納されるフォルダクマね
マイケル
マイケル
完了したら、あとはiframeタグで指定するのみ!
下記のようにアップロードしたパスのindex.htmlを設定するとブラウザで起動することができます!
<iframe id="test" width="800" height="524" src="https://XXX.com/wp-content/uploads/【フォルダ名】/index.html" frameborder="0" scrolling="no"></iframe>
エレキベア
エレキベア
簡単クマ〜〜〜〜
マイケル
マイケル
まだ整備中ですが、アップロードした例としては下記のようになります!
20220412 09
エレキベア
エレキベア
綺麗に開けてるクマね

注意点1:iframeのサイズにはUnityのフレームも含まれる

マイケル
マイケル
注意点としては、iframeのサイズにはUnityのフレームも含まれることです!
例えば下記は800×480で出力したビルドですが、
20220412 05
マイケル
マイケル
実際に必要なサイズはUnityフレームの高さ44pxを含めた800×524になります!
サイズ調整がうまくいかない方はこちらを確認してみてください!
20220412 06
エレキベア
エレキベア
これはじゃm・・・いや何でもないクマ

注意点2:iframeのキャッシュがしぶとい

マイケル
マイケル
そしてアップロードしたビルドを変更したり、サイズを変更しても適用されない!
そんな時はiframeのキャッシュの影響かもしれません・・・。
iframeのキャッシュはかなりしぶといようなので、下記のようにスクリプトで強制的にリロードさせてあげると解決するかもしれません。
<script>
$('iframe').contentWindow.location.reload();
</script>
↑iframeを強制リロード
エレキベア
エレキベア
これは中々な罠クマね

おわりに

マイケル
マイケル
というわけで今回はWebGLビルドの公開手順についてでした!
どうだったかな??
エレキベア
エレキベア
思っていたよりも簡単だったから
クマもサイトを作って公開するクマ〜〜〜
マイケル
マイケル
気が早いな・・・
だけどモバイルのように審査がなくて手軽なのもいいよね!
マイケル
マイケル
というわけで、今後はブログにも小さなゲームを
ちまちま出していく予定なのでお楽しみに!!
アデュー!!
エレキベア
エレキベア
クマ〜〜〜〜

【Unity】WebGLビルドをWordPressで公開する 〜完〜

コメント