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

はじめに

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

 

カメラ・背景の設定

 

今回は、

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

　　を行います。

 

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

 

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

 

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

 

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

FreeAspect.png
 
16-9Aspect.png
 

背景を作る

 

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

 

#download(background.jpg)

 

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

子要素.png

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

 

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

 

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

 

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

 

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

 

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

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

にしておきます。　

#br　　
次に仕様を実現するには、

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

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

 

ひつじの座標を取得するには、まずはひつじのゲームオブジェクトを取得する必要がありそうです。
Findの処理には時間がかかるため、Updateで毎フレームFindを使っていると動作がもたつきます。
そこで、Startの時に一回だけ探して、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<>()で取得しないのか

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

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

 

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