【Unity】マリオ風の縦スクロールゲームをつくってみた

ゲームの概要

[完成までの流れ]
１．画像の用意
２．画像の配置
３．物理挙動の設定
４．キャラクター操作の設定
５．カメラ移動の設定
６．ゴールの当たり判定の設定
７．ボタン操作処理の追加
８．いろいろカスタマイズ

１．画像の用意

背景	プレイヤー	足場	各ボタン

２．画像の配置

・背景の配置
→スクロールした時に映るよう、画面表示範囲より広く配置します。

・プレイヤー、ゴールの配置
→適当な場所に配置します。

・足場の配置
→Prefabを作成し、任意の場所に配置します。

※Prefabとは
オブジェクトの設計図のようなもので、同じオブジェクトを多くの量使用したい場合に使用します。
一度シーンビューに配置した後、ヒエラルキーウィンドウからプロジェクトウィンドウにドロップすることで作成できます。

３．物理挙動の設定

・Rigidbody
物体に働く重力や摩擦などの力の設定ができる。
・Collinder
衝突など物体の当たり判定の設定ができる。

・プレイヤーの設定

・足場の設定

①オブジェクトの選択
プレイヤーはヒエラルキーウィンドウから、足場はPrefabを作成しているため
プロジェクトウィンドウからオブジェクトを選択します。

②コンポーネントの追加
インスペクター内、「Add Component」ボタンから「Physics 2D > Rigidbody 2D」及び
「hysics 2D > Box Collider 2D」をそれぞれ追加します。

③追加したコンポーネントの設定
追加したコンポーネントに対して、以下の設定をします。
・Rigidbody 2D
→足場のみ重力を無効にするため、Body Typeを「Kinematic」に変更。それ以外はデフォルト。
・Box Collider 2D
→Size項目を変更し、衝突判定する範囲を調整する。

４．キャラクター操作の設定

プロジェクトウィンドウにてプレイヤー用のC#スクリプトを作成し、
Updateメソッド内に下記を追加していきます。

・スペースキーでジャンプさせる

// 上方向へ加える力
float jumpForce = 680.0f;
Rigidbody2D rigid2D;

// ジャンプ処理
if(Input.GetKeyDown(KeyCode.Space))
{
    this.rigid2D.AddForce(transform.up * jumpForce);
}

・右キー、左キーで移動させる

// 歩く量、最大スピード
float walkForce = 15.0f;
float maxWalkSpeed = 2.0f;
Rigidbody2D rigid2D;

// 左・右キー押下処理
float speedx = Mathf.Abs(this.rigid2D.velocity.x);
if (Input.GetKey(KeyCode.RightArrow))
{
    // 右キー押下時
    transform.localScale = new Vector3(scale, scale, 1);
    this.rigid2D.AddForce(transform.right * walkForce);
    if (speedx < maxWalkSpeed)
    {
       this.rigid2D.AddForce(transform.right * walkForce);
    }
}
else if (Input.GetKey(KeyCode.LeftArrow))
{
    // 左キー押下時
    transform.localScale = new Vector3(-1 * scale, scale, 1);
    this.rigid2D.AddForce(transform.right * walkForce * -1);
    if (speedx < maxWalkSpeed)
    {
       this.rigid2D.AddForce(transform.right * walkForce * -1);
    }
}

・プレイヤー落下時の処理(初期状態に戻す)

// 落下した場合の処理
if(transform.position.y < -10)
{
    SceneManager.LoadScene("GameScene");
}

５．カメラ移動の設定

プレイヤーと同様、プロジェクトウィンドウにてカメラ用のC#スクリプトを作成し、
StartメソッドとUpdateメソッドを下記のように修正します。

public class CameraController : MonoBehaviour
{
    GameObject player;

    void Start()
    {
        this.player = GameObject.Find("goroyan");
    }

    void Update()
    {
        // カメラの位置をプレイヤーに合わせる
        Vector3 playerPos = this.player.transform.position;
        transform.position = new Vector3(transform.position.x, playerPos.y, transform.position.z);
    }
}

６．ゴールの当たり判定の設定

ゴールに到着した時の処理を発生させるため、下記の設定を行います。
① ゴールオブジェクトにColliderコンポーネントを追加し、Triggerモードにする。
② プレイヤーにアタッチしたスクリプト内に衝突時の処理を記述する。

・ゴールオブジェクトの設定

①オブジェクトの選択
ヒエラルキーウィンドウから、ゴールオブジェクトを選択します。

②コンポーネントの追加
インスペクター内、「Add Component」ボタンから
「hysics 2D > Box Collider 2D」を追加します。

③追加したコンポーネントの設定
追加したコンポーネントに対して、以下の設定をします。
・Box Collider 2D
→Size項目を変更し、衝突判定する範囲を調整する。
→「is Trigger」項目のチェックボックスを入れる。

// ゴール到着時の処理
void OnTriggerEnter2D(Collider2D other)
{
    Debug.Log("クリア");
}

７．ボタン操作処理の追加

①UI部品の追加
ヒエラルキーウィンドウから、「Create > UI > Button」を選択し、ボタンのUI部品を追加します。

②名前の変更
インスペクターより、ボタンの名前を設定します。

③レイアウトを調整
インスペクター内、「Rect Transform」内の値を変更して位置を調整します。
なお左上の四角い部分を選択すると、基準となる位置を変更することもできます。

④ボタンイメージを設定
プロジェクトウィンドウのボタンイメージをドラッグし、「Source Image」に追加します。

・ジャンプボタン押下時の処理

public class PlayerController : MonoBehaviour
{
・・・略・・・
    //　ジャンプボタン押下時 
    public void JumpButtonDown()
    {
        this.rigid2D.AddForce(transform.up * this.jumpForce);
    }
・・・略・・・
}

・移動ボタン押下時の処理

public class PlayerController : MonoBehaviour
{
・・・略・・・
    float walkForce = 15.0f;
    float maxWalkSpeed = 2.0f;
    bool push;
    bool boolLeft;
    bool boolRight;

    void Start()
    {
    ・・・略・・・
        this.push = false;
        this.boolLeft = false;
        this.boolRight = false;
    ・・・略・・・
    }
 
    void Update()
    {
    ・・・略・・・

        // 左・右ボタン長押し用
        if (!this.push)
        {
            this.boolRight = false;
            this.boolLeft = false;
        }

        // 左・右キー押下処理
        float speedx = Mathf.Abs(this.rigid2D.velocity.x);
        if (Input.GetKey(KeyCode.RightArrow) || boolRight)
        {
            // 右キー押下時
            transform.localScale = new Vector3(scale, scale, 1);
            this.rigid2D.AddForce(transform.right * this.walkForce);
            if (speedx < this.maxWalkSpeed)
            {
                this.rigid2D.AddForce(transform.right * this.walkForce);
            }
        }
        else if (Input.GetKey(KeyCode.LeftArrow) || boolLeft)
        {
            // 左キー押下時
            transform.localScale = new Vector3(-1 * scale, scale, 1);
            this.rigid2D.AddForce(transform.right * this.walkForce * -1);
            if (speedx < this.maxWalkSpeed)
            {
                this.rigid2D.AddForce(transform.right * this.walkForce * -1);
            }
        }
    ・・・略・・・
    }
    ・・・略・・・

    // 左移動ボタン離した時
    public void LButtonPushUp()
    {
        this.push = false;
    }

    // 左移動ボタン押下時
    public void LButtonPushDown()
    {
        this.boolLeft = true;
        this.push = true;
    }

    // 右移動ボタン離した時
    public void RButtonPushUp()
    {
        this.push = false;
    }

    // 右移動ボタン押下時
    public void RButtonPushDown()
    {
        this.boolRight = true;
        this.push = true;
    }
}

①コンポーネントの追加

インスペクター内、「Add Component」ボタンから、「Event > Event Trigger」を設定する。

②EventTypeの追加

「Add New Event Type」より、「Pointer Down(ボタン押下時の処理)」「Pointer Up(ボタンを離した時の処理)」を追加する。

③呼び出すメソッドの設定

追加したEvent Typeの左下にプレイヤーオブジェクトを設定し、
右上プルダウンより追加したメソッドを設定する。

８．いろいろカスタマイズ

・ダイマックス機能の追加

public class PlayerController : MonoBehaviour
{
    float scale = 0.2f;
    bool dimax = false;
    Image dimaxButtonImage;

    ・・・略・・・

    void Start()
    {
    ・・・略・・・
        this.dimaxButtonImage = GameObject.Find("DimaxButton").GetComponent();
    }

    ・・・略・・・

    // ダイマックスボタン押下時
    public void DimaxButtonDown()
    {
        if(this.dimax)
        {
            // ダイマックスしている時
            scale = 0.2f;
            transform.localScale = new Vector3(scale, scale, 1);
            this.dimax = false;
            this.dimaxButtonImage.color = new Color(255f / 255f, 255f / 255f, 255f / 255f, 180f / 255f);
        }
        else
        {
            // ダイマックスしてない時
            scale = 1.0f;
            transform.localScale = new Vector3(scale, scale, 1);
            this.dimax = true;
            this.dimaxButtonImage.color = new Color(255f/ 255f, 0f / 255f, 0f / 255f, 180f / 255f);
        }
    }
・・・略・・・
}

・アニメーションの追加

おわりに

【Unity】マリオ風の縦スクロールゲームをつくってみた 〜完〜