2015.07.03
WEB

初心者がUnity2Dでアクションゲームを作るチュートリアル

マイケルデザインちーむ

こんにちわ、マイケルです。
突然ですが、私、先日YouTubeで「スーパーマリオRPG」の動画を見て、懐かしいなと思い3Dゲームに興味を持ちはじめました。
思い出補正です。

そんなどうでもいい理由でネットで調べいたら、良いのを見つけました。

ここの記事です。

この記事に書いてあるUnityを使えば3D機能を駆使して、「スーパーマリオRPG」みたいなのが作れたら、そしたら素敵やんと思いましたので挑戦してみました。

1 2Dからつくってみる

2Dからつくってみる

3Dってリソースの確保難しい。

いきなり出鼻をくじかれた私は2Dゲームから挑戦することにしました。
Unityには2D専用ツールもあるので、それを使って試しに作成したものを紹介したいと思います。

Unityの起動

まずはUnityインストールして、起動。

New Projectをクリック

Unityのインストール

プロジェクト名と保存先を決め、2Dを選択しCreate Projectをクリック

Unityのインストール

起動したら、Unity公式サイトの2Dチュートリアルのここのページを参考にしながら、レイアウトやゲーム画面サイズの設定しておきます。

なので、ここではレイアウトは[2 by 3]、PlatFormは[Web Player]、ゲーム画面サイズは600 x 450に設定。

ゲームの画面

そしたら、まず青空を作りたいので、背景の色を変えます。Main Cameraをクリックして選択状態にしてInspectorのBackgroundで色を選びます。
ここでは、R:75 G:184 B:255 A:0とかに。とりあえずここで保存しておきます。Ctrl+Sで保存できます。名前は適当にmain_sceneにします。

名前をmain_sceneにする

画像をスライスして配置

ゲームの素材となるマリオっぽいブロック画像を用意して画面に配置していきます。下の画像使っていきます。これをProjectにドロップ&ドロップで持ってきます。

block

画像の設定は、下の画像を参考に設定していきます。この画像はスライスしていくのでSprite ModeはMultiple、Pixels Per UnitはUnityの単位である1Unitあたりのピクセル数のことで、ここでは80に設定。あとは、よく分からないので適当です。そしたら、Applyをクリックして適用しときましょう。

続いてSprite Editorっていうボタンがあるので、それをクリック。そしたら新しくウィンドウが開きます。
Sliceをクリックしてサイズを80×80にして、Sliceをクリックして右上にあるApplyをクリックしましょう。

Sprite Editorの設定

メインの画面に戻ってみると、Projectのとこにさっきの画像がスライスされてそれぞれ画像が単体になっています。
とりあえず、スライスされた画像のどれか1個をHierarchyか、Sceneにドロップしましょう。

Sceneにドロッグ&ドロップ

他の画像も同様に配置していきゲーム画面を作っていきます。画像の複製する場合はCtrl+Dでできます。また、Vキーを押しながら移動すると、画像がスナップされてキッチリ綺麗に並べることができます。

画像がきれいに並んだ様子

今度は、このブロックに当たり判定をつけていきます。全部のブロック画像を選択してInspectorのAdd Component->Physics 2D->Box Collider 2D

Box Collider 2Dをアタッチ

Hierarchyにブロックの画像が散乱しているの、個人的にはまとめた方がやりやすいと思います。
HierarchyのCreate->Create Emptyでオブジェクトを作って名前をBlockとかにして、先ほど作ったすべてのブロック画像をここにドロップすることで、まとめることができます。

ブロック画像をドラッグ&ドロップ

プレイヤーの配置

次のプレイヤーを作っていきます。いつものように小太りのおじさんキャラを用意し、さっきのブロック画像同様に設定し、80×80でスライスしておきましょう。

プレイヤーの配置

スライスしたら、画像をSceneのドロップして名前をPlayerに変更します。

名前をPlayerに変更

このPlayer画像にもあたり判定を付けます。

InspectorのAdd Component->Physics 2D->Circle Collider 2Dでアタッチする。

設定はX:0 Y:-0.09 Radius:0.4ぐらいが良いかと思います。

また、重さや重力があるものとして扱っていいくのでRigidbody2Dもアタッチしておきます。
Add Component->Physics 2D->Rigidbody2Dでアタッチする。
回転させないようFixed Angleにチェック。

現在の最新バージョン(5.1.1)では、Fixed Angleはなくなってます。代わりにRigidbody2DのConstraintsの中のFreeze RotationのZにチェックすればよいです。

Freeze RotationのZにチェック

これで、一度再生ボタンを押して確認します。

再生確認

おぉ、おっ立ち野郎。

プレイヤーを歩かせる

今度は、クリックしたらプレイヤーを歩かせるよう、スクリプトを書いていくので、ProjectのCreateからC# Scriptをつくります。ファイル名はPlayerにします。

スクリプトを書く準備

スクリプトファイルができたら、Playerオブジェクトにアタッチします。それからスクリプトファイルを開き編集していきます。スクリプトはC#で書いてきます。

Playerオブジェクトにアタッチ

開くと下のような感じです。void Start () の中は最初の1回だけ処理する命令を書いて、void Update () の中は連続で何度も呼ばれる命令を書いていきます。


using UnityEngine;
using System.Collections;

public class Player : MonoBehaviour {

    // Use this for initialization
    void Start ()
　　　　{

    }

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

    }
}

そして、マウスの左クリックで歩くよう以下の方にコードを書き換えます。


using UnityEngine;
using System.Collections;

public class Player : MonoBehaviour
{

    public float speed = 5.0f; //プレイヤーの速さ
    public Sprite[] walk; //プレイヤーの歩くスプライト配列
    int animIndex; //歩くアニメーションのインデックス
    bool walkCheck; //歩いているかのチェック

    // Use this for initialization
    void Start()
    {
        animIndex = 0;
        walkCheck = false;
    }

    // Update is called once per frame
    void Update()
    {
        //歩いていたら歩くアニメーションの再生
        if (walkCheck)
        {
            animIndex++;
            if (animIndex >= walk.Length)
            {
                animIndex = 0;
            }
            GetComponent<SpriteRenderer>().sprite = walk[animIndex];
        }

        //マウスをクリックしたら歩き出す
        if (Input.GetButton("Fire1"))
        {
            walkCheck = true;
            GetComponent<Rigidbody2D>().velocity =
　　　　　　　　　　new Vector2(speed, GetComponent<Rigidbody2D>().velocity.y);
        }
　　　　//マウスのクリックを離すと止まる
        else if (Input.GetButtonUp("Fire1") && walkCheck)
        {
            walkCheck = false;
            GetComponent<Rigidbody2D>().velocity = Vector2.zero;
        }
    }
}

34行目のInput.GetButton(“Fire1”)でマウスの左クリック(又は、Ctrlキー)で、右に動くようにして、23～32行で歩くアニメーションの再生をしています。
そして、41行目のInput.GetButtonUp(“Fire1”)でクリックをボタンを離すと歩くのをやめるようにしています。

Unityに戻って、プレイヤーInspectorのスクリプトのコンポーネントを見ると、Walkというパラメータが出来上がっています。

これは、上で書いたコードのプレイヤーの歩くスプライト配列のSprite[] walkです。

sizeに3と入れるとElementができるので、そこにそれぞれプレイヤーの歩きのスプライト画像を入れときましょう。

スプライト画像を配置

また、ここで再生ボタンを押してクリックしてみます。

再生確認

最後に、説明テキストをリセットボタンを追加します。OnGUI関数でテキスト表示ができるので以下のように書き足します。


using UnityEngine;
using System.Collections;

public class Player : MonoBehaviour
{

    public float speed = 5.0f; //プレイヤーの速さ
    public Sprite[] walk; //プレイヤーの歩くスプライト配列
    int animIndex; //歩くアニメーションのインデックス
    bool walkCheck; //歩いているかのチェック

    // Use this for initialization
    void Start()
    {
        animIndex = 0;
        walkCheck = false;
    }

    // Update is called once per frame
    void Update()
    {
        //歩いていたら歩くアニメーションの再生
        if (walkCheck)
        {
            animIndex++;
            if (animIndex >= walk.Length)
            {
                animIndex = 0;
            }
            GetComponent<SpriteRenderer>().sprite = walk[animIndex];
        }

        //マウスをクリックしたら歩き出す
        if (Input.GetButton("Fire1"))
        {
            walkCheck = true;
            GetComponent<Rigidbody2D>().velocity =
　　　　　　　　　　new Vector2(speed, GetComponent<Rigidbody2D>().velocity.y);
        }
        //マウスのクリックを離すと止まる
        else if (Input.GetButtonUp("Fire1") && walkCheck)
        {
            walkCheck = false;
            GetComponent<Rigidbody2D>().velocity = Vector2.zero;
        }
    }

    // テキスト表示
    void OnGUI()
    {
        // 説明テキスト
        GUI.TextField(new Rect(5, 5, 400, 40), "ゲーム画面上でマウスの左ボタンを押し続けてる間は歩く。ボタンを離すと止まる。");
        // リセットボタン
        if (GUI.Button(new Rect(5, 50, 110, 30), "リセットボタン"))
        {
            Application.LoadLevel(Application.loadedLevelName);
        }
    }

}