フラッピーバード風ゲームの作り方

Unityで2Dフラッピーバード風ゲームを作る方法その7:カメラの追従処理を作ろう

かとこう

ども!カトサンラボのかとこうです。

この記事は、フラッピーバード風ゲームを
作る方法その7ということで、

「カメラの追従処理」

を作る方法について解説していきます!

▼ 動画での解説はこちら(54分10秒くらいから)

スポンサーリンク

1、カメラ用のC#スクリプトを作ろう

まずはカメラ用のC#スクリプトを作っていきましょう。

プロジェクトウインドウを見ていきます。

プロジェクトウインドウの画像

プロジェクトウインドウの+ボタンを
クリックしてメニューを表示させましょう。

プロジェクトウインドウのプラスボタンの画像

メニューが表示されました。

プロジェクトウインドウのプラスボタンのメニュー画像

そうしたら、メニューの中から

「C# Script」

を選んでクリックします。

メニューからC#スクリプトを選んだ画像

そうすることで新しいC#スクリプトが
プロジェクトウインドウに作られました。

新しいC#スクリプトが作られた画像

名前が変更できるようになっているので、

「TrackingCamera」

という名前に変更して決定します。

これでカメラ用のC#スクリプトを
作る作業は完了です。

新しくできたC#スクリプトの名前を変更した画像

2、メインカメラにカメラ用のC#スクリプトをつけよう

次は、メインカメラにカメラ用の
C#スクリプトをつけていきましょう。

まずヒエラルキーでメインカメラをクリックします。

ヒエラルキーでメインカメラをクリックした画像

そしてインスペクターが表示されたら
プロジェクトウインドウにある
カメラ用のC#スクリプトをクリックしたまま
インスペクターへ動かしていきます。

トラッキングカメラスクリプトを選ぶ画像

インスペクターの下の方へ持って行ったら
クリックを離しましょう。

カメラ用のスクリプトをインスペクターに付ける画像

これでメインカメラにカメラ用の
C#スクリプトがつきました。

カメラ用のスクリプトがインスペクターに付いた画像

3、C#スクリプトにカメラが追従するコードを書こう

次はカメラ用のC#スクリプトにコードを書いていきます。

カメラ用のC#スクリプトをダブルクリックして
開きましょう。

カメラ用のスクリプトをダブルクリックで開く画像

コードエディタが立ち上がって
カメラ用のC#スクリプトの中身が
表示されました。

そうしたら、以下のコードを書いていきます。

カメラ用のスクリプトが開いて中身が表示された画像
using System.Colections;
using System.Colections.Generic;
using UnityEngine;

public class TrackingCamera : MonoBehaviour
{

 public GameObject target; // 追いかけるターゲットを設定する
 Vector3 trackingPosition; // 追いかけた先の位置を設定する


 // Start is caled before the first frame update
 void Start()
 {

 }


 // Update is caled once per frame
 void Update()
 {

    // 追いかけた先の位置の横軸にターゲットの横軸の位置を入れてあげる
    trackingPosition.x = target.transform.position.x ;

    // 追いかけた先の位置の縦軸にターゲットの縦軸の位置を入れてあげる
    trackingPosition.y = target.transform.position.y;

    // 追いかけた先の位置のz軸に-10を入れてあげる
    trackingPosition.z = -10;

    // メインカメラの位置に、追いかけた先の位置を入れてあげる
    Camera.main.gameObject.transform.position = trackingPosition;
 }
}

コードを書くことができたら
上のメニューからファイルを
選んでメニューを出します。

上のメニューからファイルを選んだ画像

そして表示されたメニューから

「保存」

をクリックしてセーブしましょう。

これでコードを書く作業は完了です。

ファイルのメニューから保存をクリックした画像

4、カメラが追従するターゲットを設定しよう

コードを書き終えたら次は、
カメラが追従するターゲットを
設定していきましょう

まずはヒエラルキーでメインカメラを
クリックしてインスペクターを表示させます。

ヒエラルキーでメインカメラをクリックした画像

そしてインスペクターの下の方にある
カメラ用のC#スクリプトの部分を見てみると、

カメラ用のスクリプトを確認している画像

「Target」という項目が追加されています。

ターゲットを決める欄を確認している画像

このTargetにプレイヤーを設定したいので、
ヒエラルキーからプレイヤーをクリックしたまま
動かしていきます。

ヒエラルキーでプレイヤーをクリックする画像

そしてTargetの部分に持って行ったら
クリックを離しましょう。

ヒエラルキーのプレイヤーをクリックしたままターゲットに持っていく画像

これでTargetという項目にPlayerが表示されました。

以上でターゲットの設定は完了となります。

インスペクターのターゲットにプレイヤーが設定された画像

5、テストプレイをしてカメラの追従を確認しよう

ここまで出来たらあとはテストプレイを
行ってカメラの動作を確認していきましょう。

シーンビューの上にあるプレイボタンを
クリックしてテストプレイを開始します。

シーンビューの上にあるプレイボタンを押してテストプレイを開始する画像

テストプレイが開始されてプレイヤーが動くと
カメラが一緒に動き、常にプレイヤーを
真ん中に映した状態になります。

テストプレイでカメラの動作を確認している画像1

これが確認できたらOKです。

プレイボタンをクリックして
テストプレイを終了します。

テストプレイでカメラの動作を確認している画像2

6、まとめ

はい、ということで今回の記事では
フラッピーバード風ゲームのカメラの
追従処理を作成してきました。

カメラの追従処理を作成しようのまとめ

カメラがプレイヤーを追いかけてくれないと
プレイヤーが移動した時に画面外に出てしまいます。

それが今回のカメラの追従処理を作ったことで、
改善されました。

ということで今回の作業は完了となります。

ここまで読んでいただきありがとうございました!

-フラッピーバード風ゲームの作り方