facebook twitter hatena line email

「Unity/WebGL/画面縦横幅拡大」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内、 検索
(ページの作成:「==WebGLで出力されてたcanvasを100%にする方法== #http://corevale.com/unity/1636 にある以下の.webgl-content * {}スタイルシートで、TemplateData/st...」)
 
(→‎リサイズ対応)
 
(同じ利用者による、間の12版が非表示)
行2: 行2:
 
#http://corevale.com/unity/1636 にある以下の.webgl-content * {}スタイルシートで、TemplateData/style.cssを更新
 
#http://corevale.com/unity/1636 にある以下の.webgl-content * {}スタイルシートで、TemplateData/style.cssを更新
 
#index.htmlに記載されてる縦幅横幅を100%に変更。
 
#index.htmlに記載されてる縦幅横幅を100%に変更。
 +
#出力されたhtmlに以下記載されてることを確認
 +
<pre>
 +
<link rel="stylesheet" href="TemplateData/style.css">
 +
</pre>
 +
style.css
 +
<pre>
 +
body {
 +
    text-align: center;
 +
}
 +
.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%;
 +
}
 +
</pre>
 +
参考：http://corevale.com/unity/1636
  
−
出力されたhtmlに以下記載されてることを確認
+
==リサイズ対応==
−
<link rel="stylesheet" href="TemplateData/style.css">
+
<pre>
 +
canvas.style.width = "{{{ WIDTH }}}px";
 +
canvas.style.height = "{{{ HEIGHT }}}px";
 +
</pre>
 +
上記辺りのところを以下に変更
 +
<pre>
 +
function loadWindow() {
 +
    if (document.documentElement.clientWidth / document.documentElement.clientHeight < {{{ WIDTH }}} / {{{ HEIGHT }}}) {
 +
        canvas.style.width = "100%";
 +
        canvas.style.height = (document.documentElement.clientWidth * {{{ HEIGHT }}} / {{{ WIDTH }}}) + "px";
 +
    } else {
 +
        canvas.style.height = "100%";
 +
        canvas.style.width = ((document.documentElement.clientHeight - 20) * {{{ WIDTH }}} / {{{ HEIGHT }}}) + "px";
 +
    }
 +
    window.setTimeout(resizeWindow, 5000);
 +
}
 +
function resizeWindow() {
 +
    if (document.documentElement.clientWidth / document.documentElement.clientHeight < {{{ WIDTH }}} / {{{ HEIGHT }}}) {
 +
        canvas.style.width = "100%";
 +
        canvas.style.height = (document.documentElement.clientWidth * {{{ HEIGHT }}} / {{{ WIDTH }}}) + "px";
 +
    } else {
 +
        canvas.style.height = "100%";
 +
        canvas.style.width = ((document.documentElement.clientHeight - 20) * {{{ WIDTH }}} / {{{ HEIGHT }}}) + "px";
 +
    }
 +
}
 +
window.addEventListener('resize', resizeWindow);
 +
window.addEventListener('load', loadWindow);
 +
</pre>
  
−
参考：http://corevale.com/unity/1636
+
==右に表示されてしまうのを中央表示に変更する方法==
 +
TemplateData/style.css
 +
<pre>
 +
body {
 +
    text-align: center;
 +
}
 +
</pre>

2023年1月26日 (木) 04:14時点における最新版

WebGLで出力されてたcanvasを100%にする方法

  1. http://corevale.com/unity/1636 にある以下の.webgl-content * {}スタイルシートで、TemplateData/style.cssを更新
  2. index.htmlに記載されてる縦幅横幅を100%に変更。
  3. 出力されたhtmlに以下記載されてることを確認
<link rel="stylesheet" href="TemplateData/style.css">

style.css 

body {
    text-align: center;
}
.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%;
}

参考：http://corevale.com/unity/1636

リサイズ対応

canvas.style.width = "{{{ WIDTH }}}px";
canvas.style.height = "{{{ HEIGHT }}}px";

上記辺りのところを以下に変更 

function loadWindow() {
    if (document.documentElement.clientWidth / document.documentElement.clientHeight < {{{ WIDTH }}} / {{{ HEIGHT }}}) {
        canvas.style.width = "100%";
        canvas.style.height = (document.documentElement.clientWidth * {{{ HEIGHT }}} / {{{ WIDTH }}}) + "px";
    } else {
        canvas.style.height = "100%";
        canvas.style.width = ((document.documentElement.clientHeight - 20) * {{{ WIDTH }}} / {{{ HEIGHT }}}) + "px";
    }
    window.setTimeout(resizeWindow, 5000);
}
function resizeWindow() {
    if (document.documentElement.clientWidth / document.documentElement.clientHeight < {{{ WIDTH }}} / {{{ HEIGHT }}}) {
        canvas.style.width = "100%";
        canvas.style.height = (document.documentElement.clientWidth * {{{ HEIGHT }}} / {{{ WIDTH }}}) + "px";
    } else {
        canvas.style.height = "100%";
        canvas.style.width = ((document.documentElement.clientHeight - 20) * {{{ WIDTH }}} / {{{ HEIGHT }}}) + "px";
    }
}
window.addEventListener('resize', resizeWindow);
window.addEventListener('load', loadWindow);

右に表示されてしまうのを中央表示に変更する方法

TemplateData/style.css 

body {
    text-align: center;
}
「http://wiki.nonip.net/index.php?title=Unity/WebGL/画面縦横幅拡大&oldid=16611」から取得