Unity練習帳:埋め込みWebGLの表示をウィンドウサイズに合わせて拡大縮小させる

スポンサーリンク

みなさんこんにちは!Unity勉強しながらゲームつくるマンです。今回はWebブラウザに埋め込んだUnityのWebGLをウィンドウサイズに合わせて拡大縮小できるようにする方法の紹介です。

埋め込みWebGLの表示をウィンドウサイズに合わせて拡大縮小させる

これまではUnityでビルドしたWebGLファイルをブログに埋め込む時、幅を560ピクセル固定にしていたのですが、これはYouTubeの動画ページに表示される埋め込みコードに合わせておこうという理由でした。

大体この幅がちょうどいい幅のサイズなのかな?みたいな感じですね。しかしフルスクリーン表示に切り替えられるものの、埋め込みの表示サイズが小さいなぁと感じていました。

それを今回、色々と調べてWebブラウザのウィンドウサイズに合わせて拡大縮小できるようにできたので見ていきましょう。まずはこれまでの埋め込みタグを確認してみましょう。次のような内容でサイズをwidth=”560″ height=”358″で固定しています。

WebGLコンテンツの実表示サイズはwidth=”560″ height=”315″(16:9)ですが、コンテンツ下にWebGLのロゴとフルスクリーンロゴがあるのでそれを合わせた高さがheight=”358″に設定しています。

iframe要素をサイズ比率を維持した状態で拡大縮小させる

解決方法を探すために、とりあえずGoogle先生に「iframe レスポンシブ」でたずねてみました。沢山の検索結果とリンク先の内容から次のことが分かりました。

  • iframe要素をdiv要素で囲む。
  • 親div要素とiframe要素にpositionプロパティを指定、親div要素にはrelative、iframe要素にはabsoluteを指定する。
  • 親divの要素にpadding-topプロパティ(またはbottomプロパティ)に縦横比率をパーセントで指定する。

…なんだかよくわかりません。


画像:勉強が分からない男の子のイラスト かわいいフリー素材集 いらすとや

…とにかく見よう見まねで、WordPressのテーマに次のプロパティを追加しました。

コメントを書きながら理解した範囲でまとめると、div要素の前または後ろに実態のない要素のプロパティを追加し、div要素の幅に対する高さを指定しているということみたいです。

WebGLの埋め込みコードについてはdiv要素”webgl”を追加してiframe要素のサイズ指定を削除しました。以外はそのままで次の通りです。

埋め込み元のWebGLを縦横比率を維持したまま拡大縮小させる

ここまでの改造で縦横比率を固定したままWebブラウザの幅に応じてWebGL表示範囲が拡大縮小するようになりました。しかし、埋め込み元のWebGL自体が拡大縮小しないのでこんなことになります。分かりやすいように埋め込み表示範囲をグレーにしています。Webブラウザ幅を縮小するとこんな感じ。埋め込んだWebGLが見切れてしまっています。

Webブラウザ幅を拡大するとこんな感じ。埋め込み表示部分だけが拡大しています。

そこで、埋め込んでいる元のWebGLを表示しているhtmlを縦横比を維持したままで拡大縮小できるように改造します。方法は先ほどの埋め込み先の改造と同じようにスタイルシートの調整になります。

一点、重要なのが、Unityから書き出されたデフォルトのスタイルシートに書いてあるdiv要素名”webgl-content”のプロパティに”width: 100%”を追加することです。この要素はWebGLを表示するdiv要素と下部に表示されるdiv要素名”footer”(ロゴやフルスクリーンボタン)の包んでいる構造になっています。このdiv要素名”webgl-content”に幅を指定し、WebGLを表示するid名”gameContainerのdiv要素のサイズ指定は100%にします。スタイルシートのdiv要素名”webgl-content”プロパティは次のようになります。

WebGLサムネイル画像のスタイル設定

ここまでの修正でWebGLはWebブラウザのサイズを変更に合わせて縦横比維持のまま拡大縮小できるようになりました。しかしページ読み込み時のサムネイル画像がサイズ固定のままでロゴやフルスクリーンボタンとスペースができてしまい残念な状態です。

サムネイル画像も拡大縮小できるよう修正します。この画像はインプットボタンの画像として設定していますので、スタイルシートにプロパティを追加します。

改造を終えた埋め込み元WebGLのhtmlのスタイルシートはこのようになりました。

埋め込み元のhtmlファイルはこの通りです。

それで、完成したWebGLを埋め込んだのがこちらになります。Webブラウザのウィンドウサイズを変更すると埋め込みWebGLの表示サイズも追従して拡大縮小するのを確認できます。

ゲーム再生中にウィンドウサイズを変更するとWebGLの表示範囲が見切れてしまったりしますが、ページをリロードするとちゃんと表示サイズが更新されます。

脱出ゲームやパズルゲームといったコンパクトなゲームがWebブラウザで手軽に遊べるのがWebGLでビルドするメリットだと思います。Web関連は勉強不足で分からないことばかりですが、Webブラウザで楽しめるゲームを作ることができるように、これからも色々改良をしてきたいと思います。

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

スポンサーリンク

シェアする

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