Unity初心者が縦シューティング制作メモ（二日目）

2021年10月25日 12:16

Unityのバージョンを2018.4.23f1から2020.3.21.f1に変更しました。
変更するとどうなるかというと、UnityEditorの見た目が黒くなり、かっこよくなります。そしてwebGLでビルドした時に書き出されるhtmlやjsの起動のしかたが変更されてます。モバイルで開いたときのダイアログも出ないようになってますね。良き。

前回書いた自分用のindex.htmlとindex.jsも以前のままだとダメなので修正しました。

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>ShogiShooting</title>
   <script src="jquery-3.3.1.min.js"></script>
   <script src="index.js"></script>
   <script src="../bin/Build/bin.loader.js"></script>
   <link rel="stylesheet" href="index.css" type="text/css" media="screen" />
 </head>
   <body>
     <div id="gameContainer">
       <canvas id="unity-canvas"></canvas>
     </div>
   </body>
</html>

index.js

//読み込み完了時にリサイズ
window.onload = function () {
   resizeCanvas();
   startUnity();
};
//ブラウザのサイズ変更があった場合にリサイズ
var resizeTimer = null;
$(window).resize(()=>{
   if(resizeTimer) {
       clearTimeout(resizeTimer);
   }
   resizeTimer = setTimeout(() => {
       this.resizeCanvas();
   },500);
});
/**
* サイズ変更 縦横を収まる方でFIX
*/
function resizeCanvas(){
  
   const CONTENTS_WIDTH = 640;
   const CONTENTS_HEIGHT = 920;
   const CANVAS_CLIPPING = true;
   const element = document.getElementById("gameContainer");
 
   const ww = $(window).width();
   const wh = $(window).height();
   const dp = window.devicePixelRatio;
   let ratio;
   let canvasWidth = ww;
   let canvasHeight = wh;
   if(wh / CONTENTS_HEIGHT >= ww / CONTENTS_WIDTH){
       ratio =  ww / CONTENTS_WIDTH;
       if(CANVAS_CLIPPING){
           canvasWidth = ww;
           canvasHeight = ww * (CONTENTS_HEIGHT/CONTENTS_WIDTH);
       }
   }else{
       ratio =  wh / CONTENTS_HEIGHT;
       if(CANVAS_CLIPPING){
           canvasWidth = wh * (CONTENTS_WIDTH/CONTENTS_HEIGHT);
           canvasHeight = wh;
       }
   }
   element.width = canvasWidth * dp;
   element.height = canvasHeight * dp;
   element.style.width = canvasWidth+"px";
   element.style.height = canvasHeight+"px";
   const canvas_element = element.getElementsByTagName('canvas')[0];
   canvas_element.width = canvasWidth * dp;
   canvas_element.height = canvasHeight * dp;
   canvas_element.style.width = canvasWidth+"px";
   canvas_element.style.height = canvasHeight+"px";
}
function startUnity(){
   
   createUnityInstance(document.querySelector("#unity-canvas"), {
   dataUrl: "../bin/Build/bin.data",
   frameworkUrl: "../bin/Build/bin.framework.js",
   codeUrl: "../bin/Build/bin.wasm",
   streamingAssetsUrl: "StreamingAssets",
   companyName: "Nekogames",
   productName: "ShogiShooting",
   productVersion: "0.1",
   // matchWebGLToCanvasSize: false, // Uncomment this to separately control WebGL canvas render size and DOM element size.
   // devicePixelRatio: 1, // Uncomment this to override low DPI rendering on high DPI displays.
   });
}

この記事が気に入ったらサポートをしてみませんか？