LoginSignup
0
4

More than 1 year has passed since last update.

@kuro_take

[Unity]2D牧場ゲームを作ってみる　その１[歩行アニメーション]

Last updated at Posted at 2022-02-11

前置き

子供からの夢で「牧場物語やルーンファクトリーみたいな牧場ゲームを作ってみたい！」と思っていました。
QiitaでUnityを使った2Dゲームはないかと調べたところ、素晴らしい記事を発見しました。

こちらの神記事を参考に2D牧場ゲームを作成していこうと思います。

今回作成するもの

  • 1.キャラのドット絵
  • 2.画像の読み込み、分割
  • 3.キャラの歩行アニメーション
  • 4.スクリプトの作成

1.キャラのドット絵を作成

  • EDGEでドット絵を作成

  • ゲームの主人公をルーンファクトリー4の女主人公に設定。ルーンファクトリー4は神ゲームなのでプレイしましょう

  • ドット絵制作に慣れてきたら、オリジナルの主人公描く予定。

image.pngimage.png

2.画像の読み込み、分割

2-1.画像の読み込み

  • 画像をドラッグ＆ドロップすることで、下の画像のように登録ができます。
    image.png

  • 登録した画像を選択すると右側にinspectorタブが表示されます。

  • 下の画像のように、6つの箇所の初期値を変更します。

image.png

設定値 説明
Texture Type Sprite (2D and UI) 2Dゲームでスプライト（2Dグラフィックオブジェクト）としてテクスチャを使用する場合に選択します。
Sprite Mode Multiple 画像に複数の要素がある場合に選択する必要がある。
Pixels Per Unit 1 デフォルトでは100。1ユニットの幅に対して100pixel詰め込むという意味になります。今回は1ユニットに1pixel詰め込むため1に設定する。
Mesh Type Full Rect スプライトをマッピングするクアッドが生成されます。
Filter Mode Pointer (no filter) ピクセルを1つ1つブロックのように表示する
Compression None テクスチャを圧縮しません。

2-2.画像の分割

  • Sprite Editorをクリックします。

image.png

  • TypeをGrid By Cell Count、C:3、R:4と変更をします。（横を３，縦に４に分けるため）

image.png

  • Applyボタンを押すと完了。Asset内の画像の右矢印を押すと、分割した状態が見れます。

image.png

3.キャラの歩行アニメーション

3-1.AnimationClipファイルの作成

  • 画面を分割したので、歩行アニメーションを作成していきます。
  • 先ほど作成した画像ファイルを左のhierarchyタブにドラッグ＆ドロップします。
  • 追加しらオブジェクトを選択した状態でWindows > Animation > Animationを指定します。

image.png

  • 別ウィンドウにTo begin animationg Grid,…のメッセージが表示されます、Createボータンを押すとAnimationファイルが新規作成されます。
  • 左上にファイル名が表示され、Add Propertyボタンを押しSprite Renderer -> Spriteを選択します。

image.png

  • プロパティが追加されたらファイル名の横に表示されているSamplesを4にしましょう。
  • Samplesが表示されない場合は、右上の：を押し、Show Sample Rateをクリックしましょう。

image.png

  • 以下の通りのアニメーションを繰り返して設定します。
右足前　＞　静止　＞　左足前　＞　静止

image.png

  • ▶ボタンを押すことで動きを確認できます。
  • 今は前に進むchar_cro_downを作成しました。
  • Create New Clipを押して別方向のアニメーションを作成していきましょう。
    • char_cro_down:下方向
    • char_cro_left:左方向
    • char_cro_right:右方向
    • char_cro_up:上方向
  • 名前は自由ですが、downやupと名前を付けたほうがわかりやすいです。

image.png

3-2.AnimatorColtollerの作成

  • 次に「上移動のときに上に移動するアニメーションを再生する」というコントロール、AnimatorControllerを作成していきます。

  • BlenderTreeを使って、アニメーションを表示する制御をしてくれるものを使います。

  • アニメーションファイルと一緒に作成された下のファイルをダブルクリックします。

image.png

  • とりあえず、右クリック > Create State > From New Blend Treeを選択し、作成されたBlendTreeを右クリックしてSet as Layer Default Stateを選択します。
  • そうすると、Entryから生えている線が作ったブロックに向きます。

image.png

3-3.Parameterの設定

  • Parameterをクリックします。
  • +ボタンを押し、Floatを押します。
  • 名前をxに設定し、数値を0にします。yでも同じ作業をしましょう。
    image.png

3-4.BlenderTreeの設定

  • 上で作ったBlenderTreeをダブルクリックすると、下の画像のような何も設定されていない状態のBlenderTreeが表示されます。

image.png

  • BlendTypeを1Dから2D Simple Directionalを選択します。

image.png

  • ParametersをBlendからxに変えましょう。yでも同じ作業をしましょう。

image.png

  • +ボタンを押し、Add Motion Fieldを押しましょう。

image.png

  • Motionの左下の+を押すと、新しいMotionを追加できます。
  • 上下4方向のMotionを作成するため、3回ほどクリックしましょう。

image.png

  • 下の画像のようになればOK。

image.png

  • これでAnimatorColtrolerの設定が完了です。

4.スクリプトの作成

4-1.RididBody2Dをセットする

  • 先ほど作成したオブジェクトをクリックし、右のInspectorを表示します。
  • Add Componentをクリックし、RigidBody2Dを選択しましょう。

image.png

  • RididBody2Dという枠が表示されます。
  • Body TypeをKinematicにすることで、物理演算が無視され2Dっぽい動きになります。

image.png

4-2.スクリプトの作成

  • 右クリックからCreate > C# Scriptを選択してファイルを作成します。
  • できればAsset > Scriptsというフォルダを作成して、そこでファイルを作ったほうがわかりやすいです。

image.png

  • #をいうアイコンのファイルがされます。
  • MoveController.csの名前を付けましょう。

image.png

  • キー操作でオブジェクトを動かすスクリプトを作成。とむおさんのコードをそのままコピペしてます。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

/**
 * キャラの座標を変更するController
 */
public class MoveController : MonoBehaviour {
    [SerializeField]
    float SPEED = 1.0f;
    private Rigidbody2D rigidBody;
    private Vector2 inputAxis;

    void Start() {
        // オブジェクトに設定しているRigidbody2Dの参照を取得する
        this.rigidBody = GetComponent<Rigidbody2D>();
    }

    void Update() {
        // x,ｙの入力値を得る
        // それぞれ+や-の値と入力の関連付けはInput Managerで設定されている
        inputAxis.x = Input.GetAxis("Horizontal");
        inputAxis.y = Input.GetAxis("Vertical");
    }

    private void FixedUpdate() {
        // 速度を代入する
        rigidBody.velocity = inputAxis.normalized * SPEED;
    }
}
  • 次はキー操作にあわせてアニメーションに状態をわたすスクリプトを作成
  • 名前はAnimationStateController.csに設定。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

/**
 * キャラの向き状態を変更するController
 */
public class AnimationStateController : MonoBehaviour {
    Animator animator;

    void Start() {
        // 初期化
        // コントローラをセットしたオブジェクトに紐付いている
        // Animatorを取得する
        this.animator = GetComponent<Animator>();
    }

    /**
     * Update は MonoBehaviour が有効の場合に、毎フレーム呼び出されます
     * https://docs.unity3d.com/ja/current/ScriptReference/MonoBehaviour.Update.html
     */
    void Update() {

        if (Input.anyKeyDown) {
            Vector2? action = this.actionKeyDown();
            if (action.HasValue) {
                // キー入力があればAnimatorにstateをセットする
                setStateToAnimator(vector: action.Value);
                return;
            }
        }
        // 入力からVector2インスタンスを作成
        Vector2 vector = new Vector2(
            (int)Input.GetAxis("Horizontal"),
            (int)Input.GetAxis("Vertical"));

        // キー入力が続いている場合は、入力から作成したVector2を渡す
        // キー入力がなければ null
        setStateToAnimator(vector: vector != Vector2.zero? vector : (Vector2?)null);

    }

    /**
     * Animatorに状態をセットする
     *    
     */
    private void setStateToAnimator(Vector2? vector) {
        if (!vector.HasValue) {
            this.animator.speed = 0.0f;
            return;
        }

        Debug.Log(vector.Value);
        this.animator.speed = 1.0f;
        this.animator.SetFloat("x", vector.Value.x);
        this.animator.SetFloat("y", vector.Value.y);

    }

    /**
     * 特定のキーの入力があればキーにあわせたVector2インスタンスを返す
     * なければnullを返す   
     */
    private Vector2? actionKeyDown() {
        if (Input.GetKeyDown(KeyCode.UpArrow)) return Vector2.up;
        if (Input.GetKeyDown(KeyCode.LeftArrow)) return Vector2.left;
        if (Input.GetKeyDown(KeyCode.DownArrow)) return Vector2.down;
        if (Input.GetKeyDown(KeyCode.RightArrow)) return Vector2.right;
        return null;
    }
}

完成

Videotogif.gif

次回作成するもの（仮）

  • マップの作成

参考にしたサイト

0
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
4