カメラ・背景の設定をしよう のバックアップ(No.10)

はじめに

ひつじを動かしてみよう その2の続きです。
前回はひつじの動きを完成させましたが、
今回はカメラ・背景の設定を行ってゲーム画面での見え方を改良していきます。

 

カメラ・背景の設定

 

今回は、

・ゲーム画面の解像度・アスペクト比の調整
・背景の挿入
・カメラのサイズの調整
・カメラ・背景のひつじへの追従の実装

　　を行います。

 

ゲーム画面の解像度・アスペクト比の調整

 

ゲーム画面の解像度・アスペクト比を調整していきます。
解像度とは縦横のピクセル数、アスペクト比とは、縦横の長さの比のことです。
Unityではこれらの設定が初期では「FreeAspect」という、
各デバイスの画面やWindowの大きさにあった形で自動調整される設定になっています。

 

今回のゲームではアスペクト比（画面の縦横比）を16：9にします。

 

ゲームウィンドウ > FreeAspect > 16:9Aspect　をクリック、でできます。

 
FreeAspect.png
 
16-9Aspect.png
 

背景を作る

 

今のままだと背景がブルーバックで味気ないので背景画像を作ります。

 

#download(background.jpg)

 

この画像をダウンロードして、これまでと同様に　プロジェクト > アセット　にドラッグ＆ドロップします。
他のオブジェクトと画像のピクセルを揃えるため、インスペクターから PixelsPerUnit の数値を100から32に変更してください。
画像の設定はこれだけです。次はこの画像をゲームオブジェクトにします。
カメラと背景は一緒に動いて欲しいので、背景のゲームオブジェクトはカメラの子要素にします。
（子要素のゲームオブジェクトは、親要素の移動に追従するため。）
アセットにある背景画像をヒエラルキーの MainCamera の上にドラッグ＆ドロップします。

 
子要素.png
 

これで背景画像はカメラの子要素としてゲームオブジェクト化されます。

 

背景の画像をhierarchyにドラッグ＆ドロップし MainCamera の子要素に追加

 

次に、背景を他のオブジェクトより後ろに表示されるように設定を変更します。
背景を選択し inspector > Layer をクリックし、
出てきたメニューから一番下 Add Layer をクリックし Tags & Layers のメニューを出します。
メニューから Sorting Layers で+を押し BackGround のレイヤーを追加し、
Layer0 になるようにドラッグして並べ替えます。
できたら、background の inspector に戻り
SpriteRenderer > Additional Setting > Sorting Layers を BackGround に変更します。

 

カメラのサイズを調整する

 

このままでは、背景画像とカメラの大きさが揃わず、
背景画像がはみ出す、あるいはブルーバックが見えてしまいます。
しかし、背景画像は既に他のオブジェクトと解像度を合わせているため引き延ばしたくありません。
そこで、カメラの大きさを背景画像に揃えます。
カメラの大きさは、インスペクター > Camera コンポーネント > Size から変更できます。
アスペクト比16：9におけるカメラの Size は、デフォルトは ５ で解像度 1706.66...×320 となります。
背景画像の解像度が 384×216 なので、比を取って 3.375 (216px/320px × 5) を指定してあげます。
これで、カメラと背景画像の大きさが揃います。

 

カメラ・背景をひつじに追従するように設定する

 

最後に、ひつじがカメラの外に出て行ってしまわないように、
カメラがひつじに追従するようにしたいと思います。
追従には様々な方法がありますが（子要素にするなど）、今回は汎用性の高い、スクリプトを用いた方法で実装します。

 

MainCameraを選択し、AddComponent > New Script からスクリプトを追加します。
スクリプト名は MoveCamera などとしておきます。
スクリプトを書く前に追従の仕様を考えておきます。
スクリプトでの実装なのでいくらでもこだわることはできますが、ここでは最も単純な仕様

・ひつじがカメラの中心に来るように追従する

とします。

 

この仕様を実現するには、

処理１　ひつじの座標を取得する
処理２　カメラの座標を取得したひつじの座標と同じにする

のような処理を毎フレーム行うことが考えられます。

 

ひつじの座標を取得するには、まずはひつじのゲームオブジェクトを取得する必要がありますが、
Findメソッド の処理には時間がかかるため、Update で毎フレーム Find を使っていると動作がもたつきます。
そこで、Startの時に一回だけ Find して、private変数にひつじのゲームオブジェクトの参照先を保存しておきます。

 
  1. // 略

  2.  

  3. public class MoveCamera : MonoBehaviour

  4. {

  5.     //ひつじの参照先を保存しておく変数

  6.     private GameObject sheep;

  7.  

  8.     void Start()

  9.     {

  10.         // ひつじのゲームオブジェクトを取得し保存用の変数に代入

  11.         sheep = GameObject.Find("hitsuji_dot");

  12.     }

  13.  

  14.     //略

  15.  

  16. }

ここまでの考えを実際にスクリプトに書きました。
次に、ひつじのゲームオブジェクトから座標を取り出し、カメラの座標をそれと同じにします。
この処理は毎フレーム行いたいので、Update の中に書きます。
座標は transform コンポーネントの position で管理されています。

transform は GetComponent で取得しなくても、gameobject.transform のように参照できる特別なコンポーネントです。
もちろん、前回のように GetComponent を使ってアクセスすることもできます。

 

これでも動きそうですが、このまま実行すると画面に何も表示されなくなります。
この原因は、3Dで考えるとわかります。作っているのは2Dゲームですが、Unityのカメラは2Dのゲーム画面をz方向から俯瞰しています。
プリントを上から撮影しているのと同じです。映すものとカメラが同じ場所にあっては、なにも表示されないのも納得。
ひつじを中心に映すには、ひつじとx, y座標を同じにして、z座標を上にずらせばよさそうです。

 
  1. public class MoveCamera : MonoBehaviour

  2. {

  3.  

  4.     // 略

  5.  

  6.     void Update()

  7.     {

  8.         // ひつじの座標を取得

  9.         Vector3 pos = sheep.transform.position;

  10.         // ひつじの座標のままだと 俯瞰して見られないので、z座標を-10だけずらす

  11.         this.transform.position = pos + new Vector3(0.0f, 0.0f, -10f);

  12.     }

  13. }

これでカメラの追従の完成です。