WebGLテンプレートをカスタマイズする

Posted on 2017年5月23日 by wpmaster

海鳴り開発室

WebGL版はビルドしてそのままの状態でも、出力されたHTMLでそのまま遊べるが
縦画面が前提のアプリケーションだと、フルスクリーン化ボタンが邪魔になる。

実際の画面に合わせてリサイズされてしまうからだ😨

とはいえブラウザを確認する端末の画面も多種多様にあるので、
そのままのサイズだけでは少しユーザーに対して不親切だろう😠✊

今回はそんなケースに関して、WebGLテンプレートを調整して
画面サイズの可変切り替えができるようにしてみよう😉☝

テンプレートの追加方法

オリジナルのテンプレートを追加する方法はさほど難しくはない。
まずはベースとなるテンプレート用のデータを持ってこよう✨😄✋

Unityがインストールされたフォルダにエクスプローラ上で移動しよう。
デフォルトだと C:\Program Files\Unity になるだろうか。
自分でインストール先を変えている場合はそちらに移動だ😤

移動したら更に以下のアドレスまで掘り下げよう。

\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\WebGLTemplates

WebGL環境構築時に「WebGL Build Support」をインストールしていれば見つかるはずだ。
もしなければこちらの記事を参考にインストールを試行しよう😔

このフォルダ内に入っているものがUnityで初期状態でセットできるテンプレートの一式だ。
今回はこれをベースに独自のテンプレートを作成していくぞ💪😠

自分のUnityプロジェクト内のAssetsフォルダ以下に新しく「WebGLTempletes」というフォルダを作成し、
その階層内に、先ほどのWebGLTempletesフォルダ内のDefaultのフォルダをコピーして持ってこよう。

Assets以下のWebGLTempletesというフォルダがある場合、
Unity側で自動的にPlayer Settings内のWebGL Templeteに項目を追加するようになるんだ🤔

コピー先のフォルダ名がDefaultのままではアレなので任意の名前にリネームしよう。
そうするとこのフォルダ名がWebGL Templeteの名前になる。

Unityをアクティブにするとこんな感じのデータになるはずだ。
metaは自動生成されるが、特にこの項目内では影響はないだろう。

スポンサーリンク[pc-mieru][/pc-mieru][sp-mieru][/sp-mieru]

テンプレートのカスタマイズ

さて、上記で追加したテンプレート内に対して調整を加えていこう。

変更するのは主にindex.htmlだ。

こちらをテキストエディタ等で開き中身を確認していこう✨😉☝

<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | %UNITY_WEB_NAME%</title>
    <link rel="stylesheet" href="TemplateData/style.css">
    <link rel="shortcut icon" href="TemplateData/favicon.ico" />
    <script src="TemplateData/UnityProgress.js"></script>
  </head>
  <body class="template">
    <div class="template-wrap clear">
      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" height="%UNITY_HEIGHT%px" width="%UNITY_WIDTH%px"></canvas>
      <br>
      <div class="logo"></div>
      <div class="fullscreen"><img src="TemplateData/fullscreen.png" width="38" height="38" alt="Fullscreen" title="Fullscreen" onclick="SetFullscreen(1);" /></div>
      <div class="title">%UNITY_WEB_NAME%</div>
    </div>
    %UNITY_WEBGL_LOADER_GLUE%
  </body>
</html>

中身はこんな感じになっている。

%と%でくくられている箇所がUnityで置き換えられる箇所だ。

取りあえずfullscreenのdiv項目はフルスクリーン化ボタンを消すため不要だ。消してしまおう👊🗑

次にキャンバスサイズに関して、察しが良ければ気付いたかと思うけれど
UnityのPlayer Settingsで設定しているDefault Screen Width/Heightの値が

height="%UNITY_HEIGHT%px" width="%UNITY_WIDTH%px"

として引用されるようになっている。

つまりこのcanvasタグのフィールドサイズを調整することで画面サイズを弄ることができるということだ。

このあたりをJavaScriptでフォローしていこう😁🛠

<div class="screensize">      
ウィンドウサイズの変更
<p>
      <input type="button" value="180x320" onclick="resizeByHeight(320);" />
      <input type="button" value="360x640" onclick="resizeByHeight(640);" />
      <input type="button" value="540x960" onclick="resizeByHeight(960);" />
</p>
</div>
<script type="text/javascript">
function resizeByHeight( newsize ) {
      var targetCanvas = document.getElementById('canvas');
      var orgWidth  = targetCanvas.width;
      var orgHeight = targetCanvas.height;
      targetCanvas.height = newsize;      	
      targetCanvas.width = orgWidth * (targetCanvas.height / orgHeight);
}
</script>

divをscreensizeとして領域を作り、ウィンドウサイズ変更用の記述をまとめる。
inputでボタンを作り、これをクリックすると画面が切り替わるようにしよう。

scriptはシンプルにまとめるため、ベース辺として使用する高さ方向から
アスペクト比で計算して入力するようにする。
横画面タイプのゲームの場合は幅方向をベース辺にした計算式にするのがよい。

document.getElementByIdを使って先ほどのcanvasのidからキャンバスの属性を取得しよう。
あとはこのキャンバスの縦横を取得して、元の倍率から書き換えた倍率の比を取り
他方の辺の長さとして決定するスクリプトとする。

🐦　🐦　🐦　🐦　🐦

最終的にできたものがこんな感じだ。

<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | %UNITY_WEB_NAME%</title>
    <link rel="stylesheet" href="TemplateData/style.css">
    <link rel="shortcut icon" href="TemplateData/favicon.ico" />
    <script src="TemplateData/UnityProgress.js"></script>
  </head>
  <body class="template">
    <div class="template-wrap clear">
      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" height="%UNITY_HEIGHT%px" width="%UNITY_WIDTH%px"></canvas>
      <br>
      <div class="logo"></div>
      <div class="title">%UNITY_WEB_NAME%</div>
      <div class="screensize"> 
      ウィンドウサイズの変更
      <p>
       <input type="button" value="180x320" onclick="resizeByHeight(320);" />
       <input type="button" value="360x640" onclick="resizeByHeight(640);" />
       <input type="button" value="540x960" onclick="resizeByHeight(960);" />
      </p>
      </div>
      <script type="text/javascript">
      function resizeByHeight( newsize ) {
       var targetCanvas = document.getElementById('canvas');
       var orgWidth = targetCanvas.width;
       var orgHeight = targetCanvas.height;
       targetCanvas.height = newsize; 
       targetCanvas.width = orgWidth * (targetCanvas.height / orgHeight);
      }
      </script>
    </div>
    %UNITY_WEBGL_LOADER_GLUE%
  </body>
</html>

あとはこれを保存するとテンプレートの完成だ😤👌

Unityに戻ってWebGL出力をするだけだが、忘れずにPlayer Settingsで
今回作成したWebGL Templeteを選択してからビルドだ！💪😄📀

ビルド手順を忘れてしまった場合はこちらの記事を参考に行うこと😠💨

出力された環境のHTMLを確認すると、ちゃんと解像度ボタンが追加されて
これを押すとスクリーンサイズが切り替わることが確認できるはずだ！

こちらはcssが適用されてしまっているが、まぁ概ね似た形だろう。
デザイン面はcssで調整していこう💇🔜👧

今日のところはここまで

ではまた👋😇💨

タグ: CSS, HTML5, JavaScript, Unity, WebGL, WebGL Templates

テンプレートの追加方法

テンプレートのカスタマイズ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル