Unity | WebGLをレスポンシブデザインに対応させる

UnityビルドのWebGLアプリケーションをレスポンシブデザインに対応させる記事です。

レスポンシブデザインとは複数の解像度が異なる画面に対して、レイアウト及びデザインを調整する事です。

また、アスペクト比の変化に対しても対応させる場合は、予めUnity Gameビュー「Free Aspect」による検証を事前に行います。

ビルドファイルの編集
1. index.html
サーバー(呼び出し側)へ設置するファイル
1. iframeタグにidを追加
2. CSS
関連・参考
1. 関連
2. 参考

ビルドファイルの編集

index.html

書き出されたindex.htmlファイル内のbody,canvasタグを以下のように変更します。

親となるiframeに合わせるためのスタイルです。

<!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</title>
  </head>
  <body style="
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #231F20;
  ">
    <canvas id="unity-canvas" style="
    position: relative;
    width: 100%;
    height: 100%;
    "></canvas>
  </body>
</html>

サーバー(呼び出し側)へ設置するファイル

iframeタグにidを追加

<iframe
 id="unity-webgl"
 loading="lazy" width="800px" height="600px"
 src="[index url]"
 scrolling="no" frameborder="0">
</iframe>

id=”unity-webgl”

次のCSSファイルでレスポンシブ対応するための属性です。

loading=”lazy”

chromeに搭載されている遅延読み込みです。

CSS

このファイルは、スクリーンの横幅に応じてiframe要素のサイズを変更します。

/*----------------------------------------------------------------------------
Unity-webgl
----------------------------------------------------------------------------*/
#unity-webgl{
	width: 800px ;/*デフォルトの横幅*/
	height: 600px ;/*デフォルトの縦幅*/
}
@media screen and (max-width: 1240px){/*1240px以下*/
	#unity-webgl{
		width: 800px ;
		height: 600px ;
	}
}
@media screen and (max-width: 1023px){/*1023px以下*/
	#unity-webgl{
		width: 800px ;
		height: 600px ;
	}
}
@media screen and (max-width: 834px){/*834px以下*/
	#unity-webgl{
		width: 480px ;
		height: 360px ;
	}
}
@media screen and (max-width: 480px){/*480px以下*/
	#unity-webgl{
		width: 400px ;
		height: 300px ;
	}
}

Webサイト

同じ階層にCSSファイルを設置する場合呼び出すHTMLファイルhead内に以下を追加します。

<link rel="stylesheet" href="style.css">

WordPress

WordPressの場合、「外観」＞「テーマエディタ」＞「スタイルシート（style.css）」もしくは該当記事の「カスタムCSS」に設置します。