Unity練習帳:埋め込みWebGLをクリックしてからロードする

スポンサーリンク

みなさんこんにちは!UnityやUnreal Engineを勉強しながらゲームつくるマンです。今回はブログに埋め込んでいるUnityのWebGLの表示の改良をやってみました。

WebGLのファイル処理中にページ表示が遅くなる問題

UnityのWebGLを埋め込んでいるブログ記事にアクセスすると、同時にWebGLのダウンロードと読み込み処理が行われます。その処理が終わるまでページのスクロールが引っ掛かる減少が気になっていました。そこで今回はYouTubeの動画埋め込みのように再生ボタンをクリックしたらWebGLの処理が行われるように改造してみることにしました。

まず、UnityのWebGLビルドでデフォルトで書き出されるhtmlファイルがどうなっているか確認しましょう。コードの内容は次の通りです。

<head>タグ内のScriptでWebGLをのダウンロードと読み込み処理を行っています。コードの11行目で変数”gameInstance”に”UnityLoader”を格納しています。

つまりページにアクセスすると同時にWebGLファイルの処理をはじめています。この部分をマウスクリックで実行すればよいのでは?と考えました。

ということで、さっそく改造です。上記のWebGLファイルの処理の部分を”function loadWebgl()”という名前の関数にしました。そしてタグ内で画像をクリックしたら関数”function loadWebgl()”を実行するようにしました。出来上がったのが次の通りです。

コード内のコメントにも書いたのですが、デフォルトのコードで宣言されていた変数”gameInstance”の頭に”var”をそのまま付けると、フルスクリーン表示切り替えができなくなっていました。

フルスクリーン切り替え処理のコードを見るとはonclick=”gameInstance.SetFullscreen(1)”となっています。つまり変数”gameInstance”に格納されたWebGLファイルの関数”SetFullscreen()”を実行するとなっています。

フルスクリーン切り替えができない原因としてはWebGL処理を関数”loadWebgl()”にまとめたことです。変数”gameInstance”が関数”loadWebgl()”の中でしか参照できなくなったということだと思います(たぶん)。

ということで、関数”loadWebgl()”の外側から変数”gameInstance”が参照できるように変数”gameInstance”の頭にある”var”を外しました。JavaScriptについては勉強不足ですが、とりあえずフルスクリーン切り替えができるようになったのでOKとしましょう。

埋め込みWebGLをフルスクリーン表示するには

実ははまだフルスクリーン切り替えには問題が残っています。WebGLをビルドしたデフォルトのhtmlファイル埋め込んでいる場合でもフルスクリーン切り替えができませんでした。しかしこれは調べるとすぐにわかりました。<iframe>タグの最後に”allowfullscreen”と書いてあげると解決しました。埋め込みタグは次のようになります。

ということで、改良した埋め込みWebGLが次の状態です。画像をマウスクリックするとWebGLのダウンロードと読み込みが始まります。

今回、色々と調べたもののまだわからない点はたくさんありますが、これでひとまずWebGLファイルの埋め込みの改良ができました。

今後のブログ記事はこの方法でWebGLを埋め込むことにしました。過去の記事についても埋め込み方法を修正していく予定です。

スポンサーリンク
スポンサーリンク

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加