見出し画像

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

Yoshio Ishii

Unityの習得を兼ねて、将棋シューティング裸王のリメイク版を制作します。

将棋シューティング裸王ってなに？

画像5

２００４年（１７年前！マジ？）のflash5時代にNekogamesによって制作された、将棋をモチーフにした縦シューティングゲームです。自機も敵機も将棋の駒で、駒の特徴にあってるんだかあってないんだかわからない攻撃や動きをします。全３ステージでエンド。flash亡き今、もうプレイできませんが（でもRuffleで余裕で動作しました）ごく一部の人に支持されたゲームでした。ググればプレイ動画とか見つかると思います。

Unity版の仕様を決めました。

・プラットフォームはwebGL。PCとスマホで動作可能にする。Unityみたいな重そうなものが、スマホで動作するのかは知らん。

・キャラクターや背景は３Dモデルを使用。３Dモデルの作成はBlenderを使用。

・画角を縦画面に変更。スマホブラウザゲーなら常識的に考えて縦画面だろう。

・ゲーム内容の変更。スマホでプレイさせるために操作方法は画面下部の左右のみする？

・使うUnityは2018.4.23f1。以前インストールしてたのをそのまま使う。ええんか？

プロジェクトを作る

いきなり「２Dか３Dを選べ！」って重大そうな決断を迫られ、慄くのですけど、３Dモデル使うなら３Dプロジェクトでいいみたい。Unityの日本語マニュアルにも書いてありました。ググる前にマニュアルに目を通しておくことが大事だと思いました。

BuildSettings

ビルドセッティング

File->BuildSetting..
-WebGL
-PlayerSetting -> Resolution Width:640 Height:920に設定しました。640,920がなんなのかというとcanvas２Dカジュアルゲーム作ってきた経験則と私が使っているiPhoneSEでブラウザでゲーム表示した時最適な比率なのです。

Game

Gameディスプレイ

[+]ボタンを押して新規ディスプレイをつくりました。
BuildSettingのResolutionに合わせて640x920の画面を追加しました。

カメラをお好みのアングルに。

画像3

単純なゲームの移植なので、完成形の画面のイメージするのは容易です。Cubeで仮レイアウトしてカメラの角度、位置とかをちまちまと調整します。せっかく３Dなのでちょっと奥行があった方がおもしろいかな？ってカメラを５度ほど傾けました。

ビルドしたらcanvasをブラウザウインドウにビッタビタに。

画像4

ビルドしますと、もろもろのバイナリ群とindex.htmlができあがります。このindex.htmlだとキャンバスサイズが640x920にがっつり固定されてて小さい画面で開くとcanvasが画面外にはみ出しますし、逆に糞デカ画面だと隙間ができてよろしくないです。そこで新規にindex2.htmlをつくりまして、ブラウザのサイズにジャストフィットして中央に表示するcanvasでゲーム作るときのど定番のjavascirpt処理及びcssをちょい足ししました。 ​

これでOKかな？まぁ大丈夫だろう。。つづく。

↓ど定番処理

★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>
   <link rel="stylesheet" href="index.css" type="text/css" media="screen" />
   <script src="jquery-3.3.1.min.js"></script>
   <script src="index.js"></script>
   <script src="../bin/Build/UnityLoader.js"></script>
   
   <script>
     var gameInstance = UnityLoader.instantiate("gameContainer", "../bin/Build/bin.json");
   </script>
 </head>
 <body>
   <div id="gameContainer"></div>
 </body>
</html>

★css

* { 
   border: 0; 
   margin: 0; 
   padding: 0; 
   border-style: none;
   background-color: rgb(0, 0, 0);
   position: absolute; 
   top: 50%; 
   left: 50%; 
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

★js

//読み込み完了時にリサイズ
window.onload = function () {
   resizeCanvas();
};
//ブラウザのサイズ変更があった場合にリサイズ
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";
}




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