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

スポンサーリンク
PC創作
マイケル
マイケル
今回はUnityを使って簡単な縦スクロールゲームを作ってみるよ!
エレキベア
エレキベア
Unityって何クマ?
マイケル
マイケル
Unityは開発環境を統合したゲームエンジンのことだよ!
まあゲーム作るための便利なツールって思っておけばいいよ
エレキベア
エレキベア
ゲームが作れるんクマね
マイケル
マイケル
マルチプラットフォームだから
androidやiOSアプリはもちろん、
PCゲームやSwitchなんかにも対応してるんだぜ
マイケル
マイケル
まず今回作ってみたのは2Dの簡単な縦スクロールゲーム!
その名も、、、
\ゴーゴーゴロヤン!/
スクリーンショット 2020 01 29 0 51 46
スクリーンショット 2020 01 29 0 53 49
ジャギィ
ジャギィ
お呼びのようだな
ゴロヤン
ゴロヤン
ゴロ〜〜〜〜
マイケル
マイケル
今回はゴロヤンにモデルをお願いしてみたんだ!
これくらいのレベルのゲームなら数時間あれば簡単に作れちゃうんだ!
エレキベア
エレキベア
ガーーーーン
なんで僕じゃないクマ・・・
ジャギィ
ジャギィ
モデル料はかかるんだろうな?
マイケル
マイケル
早速作ってみよう!
ジャギィ
ジャギィ
(流された・・・)
スポンサーリンク

ゲームの概要

マイケル
マイケル
下の図のようにジャンプと移動ができてゴールまでたどり着く
という内容のゲームを作るよ!
スクリーンショット 2020 01 29 18 47 52


[完成までの流れ]
1.画像の用意
2.画像の配置
3.物理挙動の設定
4.キャラクター操作の設定
5.カメラ移動の設定
6.ゴールの当たり判定の設定
7.ボタン操作処理の追加
8.いろいろカスタマイズ


マイケル
マイケル
それでは早速やってみよう!

1.画像の用意

マイケル
マイケル
まずは画像の用意!
以下の種類の画像をペイントソフト等で準備して
プロジェクトウィンドウに取り込みます!
  • 背景
    Background
  • プレイヤー
    Goroyan
  • 足場
    Wood
  • 各ボタン
    スクリーンショット 2020 01 29 19 23 04

2.画像の配置

マイケル
マイケル
取り込んだ画像をUnityのシーンビューに配置します!
スクリーンショット 2020 01 29 19 32 55


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

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

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

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

3.物理挙動の設定

マイケル
マイケル
次はオブジェクトの物理挙動の設定をしていくよ!
エレキベア
エレキベア
物理挙動って何クマ?
マイケル
マイケル
物理挙動を設定するとオブジェクトが衝突した時の挙動が出るようにしたり、
重力によって下方向に落ちるようにできるんだよ!
エレキベア
エレキベア
理解
マイケル
マイケル
今回は、RigidbodyColliderというコンポーネントを
オブジェクトに追加するよ!


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

マイケル
マイケル
物体として認識したいのはプレイヤー足場なので
この2つのオブジェクトに設定をします!

・プレイヤーの設定

スクリーンショット 2020 01 29 20 09 00

・足場の設定

スクリーンショット 2020 01 29 20 09 34

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

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

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

マイケル
マイケル
以上の設定でプレイヤーに重力が働き、
足場の上に乗るようになっているはず!
エレキベア
エレキベア
簡単クマ〜〜

4.キャラクター操作の設定

マイケル
マイケル
次は移動やジャンプなど、キャラクターの操作を設定していくよ!
スクリーンショット 2020 01 29 20 26 35


プロジェクトウィンドウにてプレイヤー用の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");
}
マイケル
マイケル
最終的にボタンで操作できるようにするけど、
ここではUnity内で確認できるよう矢印キーとスペースキーで操作するようにしているよ!
スクリプトを作成したらプレイヤーオブジェクトにアタッチしよう!
エレキベア
エレキベア
「AddForce」メソッドで加える力を指定するクマね
マイケル
マイケル
飲み込みはやいな

5.カメラ移動の設定

マイケル
マイケル
次にプレイヤーの動きに合わせてカメラを移動させて、
縦にスクロールできるようにするよ!


プレイヤーと同様、プロジェクトウィンドウにてカメラ用の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);
    }
}
マイケル
マイケル
transformでY軸のみプレイヤーの位置を指定することで、
上方向にスクロールさせるようにしてるんだね
マイケル
マイケル
こちらもスクリプトを作成したら、Main Cameraにアタッチしましょう!

6.ゴールの当たり判定の設定

マイケル
マイケル
ゴールに到達した時に処理が行われるように修正するよ!


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

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

スクリーンショット 2020 01 29 21 33 20

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

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

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

エレキベア
エレキベア
トリガーモードに設定するとどうなるクマ?
マイケル
マイケル
トリガーモードに設定することで「OnTriggerEnter2D」メソッド呼び出しで衝突判定を行うことができるんだ!
早速、プレイヤーのスクリプト内に下記処理を追加しよう!
// ゴール到着時の処理
void OnTriggerEnter2D(Collider2D other)
{
    Debug.Log("クリア");
}
マイケル
マイケル
これでプレイヤーがゴールに到達した時に
OnTriggerEnter2Dメソッド内の処理が実行されるようになってるはず!
マイケル
マイケル
例ではコンソールにログを出すだけにしてるけど、シーンの移動処理などを使ってクリア画面を表示するなど変えてあげたらそれっぽくなるね!
エレキベア
エレキベア
ゲームらしくなってきたクマ

7.ボタン操作処理の追加

マイケル
マイケル
ここまでで基本的な動きはできるようになってるはずだけど、
せっかくだから手持ちのスマートフォンでも動かしたいよね!
マイケル
マイケル
ボタンを追加してタッチ操作でも遊べるようにしましょう!
スクリーンショット 2020 01 30 0 01 24

①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;
    }
}
マイケル
マイケル
押している間を判定するため、boolean型で「push」変数と「boolLeft」「boolRight」変数を追加しているよ!
マイケル
マイケル
最後に、追加したメソッドを呼び出す設定を行います!
スクリーンショット 2020 01 30 0 01 37

①コンポーネントの追加

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

②EventTypeの追加

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

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

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

マイケル
マイケル
これでボタンを押した時、離した時に各メソッドが呼ばれるようになります!
マイケル
マイケル
onClickでもボタン押下の設定はできるけど、ボタンを離したときの処理のみになっちゃうからEvent Triggerでの設定にしたよ!

8.いろいろカスタマイズ

マイケル
マイケル
ここまでで一通り完成ですが、他にもいろいろな機能を追加することができるので紹介だけします!

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

マイケル
マイケル
下記のようにボタン押下時にスケールを変更することで、巨大化させたりボタンの色を変えたりすることができます!

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);
        }
    }
・・・略・・・
}

・アニメーションの追加

マイケル
マイケル
Mechanicという機能を使用することで、移動時やジャンプ時のアニメーションを設定することができます。
スクリーンショット 2020 01 30 0 53 56
マイケル
マイケル
アニメーションさせるための画像を用意して、AnimationClipを作成します!
今回は細かくは説明しないけどぜひこちらも試してみてね!
スポンサーリンク

おわりに

マイケル
マイケル
よっしゃー!
完成だー!!
エレキベア
エレキベア
イエーーイ!!
マイケル
マイケル
早速遊ぶぞ!
ダイマーーーックス!!
\ガガガガガガ/
スクリーンショット 2020 01 30 0 57 32
エレキベア
エレキベア
(クソゲーだ・・・)
ジャギィ
ジャギィ
(クソゲーだ・・・)
ゴロヤン
ゴロヤン
(クソゲーだ・・・)
マイケル
マイケル
(クソゲーだ・・・)

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

コメント