facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(リサイズ対応)
(リサイズ対応)
行11: 行11:
 
function loadWindow() {
 
function loadWindow() {
 
     canvas.style.width = "100%";
 
     canvas.style.width = "100%";
     canvas.style.height = (document.documentElement.clientWidth * 0.5625) + "px"
+
     canvas.style.height = (document.documentElement.clientWidth * 540 / 960) + "px"
 
     window.setTimeout(resizeWindow, 5000);
 
     window.setTimeout(resizeWindow, 5000);
 
}
 
}
 
function resizeWindow() {
 
function resizeWindow() {
     if (document.documentElement.clientWidth / document.documentElement.clientHeight < 1.7777) {
+
     if (document.documentElement.clientWidth / document.documentElement.clientHeight < 960 / 540) {
 
         canvas.style.width = "100%";
 
         canvas.style.width = "100%";
         canvas.style.height = (document.documentElement.clientWidth * 0.5625) + "px"
+
         canvas.style.height = (document.documentElement.clientWidth * 540 / 960) + "px"
 
     } else {
 
     } else {
 
         canvas.style.height = "100%";
 
         canvas.style.height = "100%";
         canvas.style.width = ((document.documentElement.clientHeight - 20) * 1.7777) + "px"
+
         canvas.style.width = ((document.documentElement.clientHeight - 20) * 960 / 540) + "px"
 
     }
 
     }
 
}
 
}

2022年12月1日 (木) 15:47時点における版

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">

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

リサイズ対応

canvas.style.width = "100%" 辺りのところを以下に変更

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

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

TemplateData/style.css

body {
    text-align: center;
}