今回はWebに埋め込んだUnityのWebGLをウィンドウサイズに合わせて拡大縮小できるようにする方法の紹介です。
埋め込んだWebGLの表示をウィンドウサイズに合わせて拡大縮小させる
これまではUnityでビルドしたWebGLファイルをブログに埋め込む時、幅を560ピクセル固定にしていたのですが、これはYouTubeの動画ページに表示される埋め込みコードに合わせておこうという理由でした。
|
1 |
<iframe width="560" height="315" src="https://www.youtube.com/embed/xxxxxx" frameborder="0" allowfullscreen></iframe> |
大体この幅がちょうどいい幅のサイズなのかな？みたいな感じですね。しかしフルスクリーン表示に切り替えられるものの、埋め込みの表示サイズが小さいなぁと感じていました。
それを今回、色々と調べてWebブラウザのウィンドウサイズに合わせて拡大縮小できるようにできたので見ていきましょう。まずはこれまでの埋め込みタグを確認してみましょう。次のような内容でサイズをwidth=”560″ height=”358″で固定しています。
|
1 |
<iframe src="http://corevale.com/wordpress/wp-content/uploads/webgl/_test_clicktoplay/clicktoplay.html" width="560" height="358" scrolling="no" frameborder="0" allowfullscreen></iframe> |
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のテーマに次のプロパティを追加しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/* WebGLの親になるdiv要素のプロパティ */ div.webgl { margin: 0 auto; /* 中央寄せ */ position: relative; /* 相対値にレイアウト */ width: 95%; /* 100%は欲張りなので少し遠慮 */ } /* WebGLの親になるdiv要素の前に付ける疑似要素のプロパティ */ div.webgl:before { /* div要素の前に追加するので":before”を指定 */ content: ""; /* 疑似要素の内容。空にするので"" */ display: block; /* ブロック要素にする */ padding-top: 64.0%; /* div要素の幅に対する高さの比率 */ } /* WebGLを埋め込むiframe要素のプロパティ */ div.webgl iframe { position: absolute; /* 絶対位置にレイアウト */ top: 0; /* 垂直位置指定 */ left: 0; /* 水平位置指定 */ width: 100%; /* 幅指定 */ height: 100%; /* 高さ指定 */ } |
コメントを書きながら理解した範囲でまとめると、div要素の前または後ろに実態のない要素のプロパティを追加し、div要素の幅に対する高さを指定しているということみたいです。
WebGLの埋め込みコードについてはdiv要素”webgl”を追加してiframe要素のサイズ指定を削除しました。以外はそのままで次の通りです。
|
1 |
<div class="webgl"><iframe src="http://corevale.com/wordpress/wp-content/uploads/webgl/_test_responsive/responsive_clicktoplay.html" scrolling="no" frameborder="0" allowfullscreen></iframe></div> |
埋め込み元のWebGLを縦横比率を維持したまま拡大縮小させる
ここまでの改造で縦横比率を固定したままWebブラウザの幅に応じてWebGL表示範囲が拡大縮小するようになりました。しかし、埋め込み元のWebGL自体が拡大縮小しないのでこんなことになります。分かりやすいように埋め込み表示範囲をグレーにしています。Webブラウザ幅を縮小するとこんな感じ。埋め込んだWebGLが見切れてしまっています。
Webブラウザ幅を拡大するとこんな感じ。埋め込み表示部分だけが拡大しています。
そこで、埋め込んでいる元のWebGLを表示しているhtmlを縦横比を維持したままで拡大縮小できるように改造します。方法は先ほどの埋め込み先の改造と同じようにスタイルシートの調整になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* WebGLの親になるdiv要素のプロパティ */ #gameContainer-wrapper { /* id名"gameContainer-wrapper"のdiv要素 */ position: relative; /* 相対値にレイアウト */ width: 100%; /* 幅指定 */ } /* WebGLの親になるdiv要素の前に付ける疑似要素のプロパティ */ #gameContainer-wrapper:before { /* div要素の前に追加するので":before”を指定 */ content: ""; /* 疑似要素の内容。空にするので"" */ display: block; /* 疑似要素をブロック要素にする */ padding-top: 56.25%; /* div要素の幅に対する高さの比率 */ } /* WebGLを表示する要素のプロパティ */ #gameContainer { position: absolute; /* 絶対位置にレイアウト */ top: 0; /* 垂直位置指定 */ left: 0; /* 水平位置指定 */ width: 100%; /* 幅指定 */ height: 100%; /* 高さ指定 */ } |
一点、重要なのが、Unityから書き出されたデフォルトのスタイルシートに書いてあるdiv要素名”webgl-content”のプロパティに”width: 100%”を追加することです。この要素はWebGLを表示するdiv要素と下部に表示されるdiv要素名”footer”（ロゴやフルスクリーンボタン）の包んでいる構造になっています。このdiv要素名”webgl-content”に幅を指定し、WebGLを表示するid名”gameContainerのdiv要素のサイズ指定は100%にします。スタイルシートのdiv要素名”webgl-content”プロパティは次のようになります。
|
1 2 3 4 5 6 7 8 9 |
/* WebGLを表示するdiv要素"gameContainer"とdiv要素"footer"を包むdiv要素 */ .webgl-content { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; /* 追加したプロパティ：幅を指定 */ } |
WebGLサムネイル画像のスタイル設定
ここまでの修正でWebGLはWebブラウザのサイズを変更に合わせて縦横比維持のまま拡大縮小できるようになりました。しかしページ読み込み時のサムネイル画像がサイズ固定のままでロゴやフルスクリーンボタンとスペースができてしまい残念な状態です。
サムネイル画像も拡大縮小できるよう修正します。この画像はインプットボタンの画像として設定していますので、スタイルシートにプロパティを追加します。
|
1 2 3 4 5 |
/* WebGLをロードするインプットボタン画像のサイズ指定 */ #gameContainer input { width: 100%; height: 100%; } |
改造を終えた埋め込み元WebGLのhtmlのスタイルシートはこのようになりました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
.webgl-content * { border: 0; margin: 0; padding: 0; } .webgl-content { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; /* 追加したプロパティ：幅を指定 */ } .webgl-content .logo, .progress { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .webgl-content .logo { background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px; } .webgl-content .progress { height: 18px; width: 141px; margin-top: 90px; } .webgl-content .progress .empty { background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block; } .webgl-content .progress .full { background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block; } .webgl-content .logo.Dark { background-image: url('progressLogo.Dark.png'); } .webgl-content .progress.Dark .empty { background-image: url('progressEmpty.Dark.png'); } .webgl-content .progress.Dark .full { background-image: url('progressFull.Dark.png'); } .webgl-content .footer { margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px; } .webgl-content .footer .webgl-logo, .title, .fullscreen { height: 100%; display: inline-block; background: transparent center no-repeat; } .webgl-content .footer .webgl-logo { background-image: url('webgl-logo.png'); width: 204px; float: left; } .webgl-content .footer .title { margin-right: 10px; float: right; } .webgl-content .footer .fullscreen { background-image: url('fullscreen.png'); width: 38px; float: right; } /*-------------------------------------------------- アスペクト比固定でレスポンシブ対応 --------------------------------------------------*/ #gameContainer-wrapper { position: relative; width: 100%; } #gameContainer-wrapper:before { content: ""; display: block; padding-top: 56.25%; } #gameContainer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #gameContainer input { width: 100%; height: 100%; } |
埋め込み元のhtmlファイルはこの通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Unity WebGL Player</title> <link rel="shortcut icon" href="TemplateData/favicon.ico"> <link rel="stylesheet" href="TemplateData/style.css"> <script src="TemplateData/UnityProgress.js"></script> <script src="Build/UnityLoader.js"></script> <script> // WebGLファイルのインスタンス作成（ダウンロード）処理 function loadWebgl() { // "var"なしでグローバル変数"gameInstance"にインスタンス格納 // "var"ありだとフルスクリーン表示切り替えボタンが働かない gameInstance = UnityLoader.instantiate("gameContainer", "Build/responsive.json", { onProgress: UnityProgress }); } </script> </head> <body> <div class="webgl-content"> <div id="gameContainer-wrapper"> <div id="gameContainer"> <!-- クリックで関数"loadWebgl()"の実行。--> <input type=image onclick="loadWebgl();" src="webgl-thumb.png"> </div> </div> <div class="footer"> <div class="webgl-logo"></div> <div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div> <div class="title">Unity WebGL Player</div> </div> </div> </body> </html> |
それで、完成したWebGLを埋め込んだのがこちらになります。Webブラウザのウィンドウサイズを変更すると埋め込みWebGLの表示サイズも追従して拡大縮小するのを確認できます。
ゲーム再生中にウィンドウサイズを変更するとWebGLの表示範囲が見切れてしまったりしますが、ページをリロードするとちゃんと表示サイズが更新されます。
脱出ゲームやパズルゲームといったコンパクトなゲームがWebブラウザで手軽に遊べるのがWebGLでビルドするメリットだと思います。Web関連は勉強不足で分からないことばかりですが、Webブラウザで楽しめるゲームを作ることができるように、これからも色々改良をしてきたいと思います。