Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
7
Help us understand the problem. What is going on with this article?
@hayu500ml

Unity初心者向け!MagicaVoxelの素材を使って、2.5Dのゲームを作ろう②〜キャラクターを動かす編〜

More than 1 year has passed since last update.

こんにちは。
前回の記事の続きとなります。
前回はMagicavoxelを使って素材の書き出しをしました。
今回は、書き出しをした素材を使って実際にUnityに素材を配置し、画面タップした位置にキャラクターを動かすところまでまとめていきます。

前回の記事で用意した素材(名前は一例です)

  • Earth.png 地面用素材
  • Player.png キャラクラー素材
  • Wall.png その他オブジェクト

※素材を用意してない方は、こちらをそのままご利用ください。

こちらの記事はUnity初心者向けのため、操作方法をかなり細かく書いています。
玄人さんはどんどん読み飛ばして進めていきましょう!

プロジェクト、シーンを作成する

Unityを起動して新規プロジェクトを作成します。
スクリーンショット 2018-12-01 17.50.58.png

プロジェクトが作成されたら、[File]->[Save Scene As]より、新規シーンを保存します。
Mainという名前にしました。
スクリーンショット 2018-12-01 17.58.32.png

使用する画像をUnityプロジェクトにつっこむ

使用する画像は作成したUnityのAssetsフォルダ内に入れます。
あああ.png

地面を配置、カメラの設定

地面を配置

地面となる画像を配置します。
配置したら、画像オブジェクトの位置座標を(0,0,0)に設定しましょう。
スクリーンショット 2018-12-02 11.19.30.png

小さいですね。

カメラの設定

画像を大きくすることもできますが、今回はカメラの位置を変えることで調整していきます。
スクリーンショット 2018-12-01 18.23.47.png

Hierarcy上のMainCameraを選択し、Size設定を変えます。
Gameウインドウを見ながら適当な値に調整しましょう。

キャラクターの配置

キャラクターの配置オブジェクトを作成

キャラクターを配置するオブジェクトを作成します。
Hierarcy上を右クリック->[Create Empty]で空のオブジェクトを作成しましょう。
名前をPlayerとし、位置を(0,0,0)に設定します。
スクリーンショット 2018-12-01 18.30.06.png

キャラクター画像の設定行う

Projectウインドウ上でPlayer画像を選択すると画像の設定を行うことができます。
画像のTexture設定をMultipleにしたら、SpriteEditorを開き更に設定を行っていきます。
スクリーンショット 2018-12-02 11.23.56.png
スクリーンショット 2018-12-02 11.27.18.png

実際にうまくスライスされたか確認してみましょう。
ProjectウインドウでPlayer画像を選択してみましょう
スクリーンショット 2018-12-02 11.31.36.png

キャラクターの画像をオブジェクトに配置

スライスしたプレイヤー画像を実際に配置してみましょう。
スクリーンショット 2018-12-02 11.36.15.png

スクリーンショット 2018-12-02 11.40.04.png

画像が大きすぎる上に、地面よりも下に描画されていますね。
これを調整していきます。

重なり順を考える

Sorting Layers

UnityにはSortingLayer機能があり、ペイントソフトのレイヤー機能と同じように重なり順を制御することができます。新規レイヤーを作成(Add Sorting Layer)しましょう。
スクリーンショット 2018-12-02 11.43.34.png

スクリーンショット 2018-12-01 18.51.49.png

これにてSortingLayerを作成することができました。下になるほど前に描画されます。
Sorting LayerとLayerは別物ですので、注意しましょう。

Sorting Layersの割当て

次に、実際にオブジェクトに対して並び替え順を設定します。
PlayerImageにPlayer、Eatrh画像にはEarthを設定します。
ついでにPlayerImageはScaleをいじり、ちょうどいいサイズにしましょう。

スクリーンショット 2018-12-02 11.45.36.png

スクリーンショット 2018-12-01 19.06.56.png
いいかんじです:relaxed:

設定がおわったら、PlayerオブジェクトにPlayerImageをつっこみます。
スクリーンショット 2018-12-02 11.51.42.png

キャラクターを移動させる

実際にキャラクターを移動させましょう。
そのためには、C#スクリプトでキャラクターを制御する必要があります。

PlayerControllerを作成する

作成と同時に、スクリプトの名前を入力します。

スクリーンショット 2018-12-02 11.56.02.png

入力後、Create and Addでスクリプトが作成され、PlayerオブジェクトにAddされます。
スクリーンショット 2018-12-02 11.57.50.png

これでPlayerController.csが作成されました。

PlayerController.cs

PlayerController.csはその名の通り、プレイヤーをコントロールするスクリプトです。
スクリプトを開き(ProjectウインドウでPlayerController.csをダブルクリックすることで何かしらのエディタが開きます)、スクリプトに以下のコードを貼り付けます。

PlayerController.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PlayerController : MonoBehaviour {
    const float SPEED = 2.0f;
    Vector2 inputPosition;

    void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            inputPosition = Camera.main.ScreenToWorldPoint(Input.mousePosition);
        }

        transform.position = Vector2.MoveTowards(transform.position,
                                                 new Vector2(inputPosition.x, inputPosition.y),
                                                 SPEED * Time.deltaTime);
    }
}

再生すると、以下の動画のようにタップした場所にキャラクターが動きます。

動く方向によってキャラクターの画像を変更する

今のままですと、ひたすらキャラクターが回転しているだけなので、アニメーションの制御をしていきます。

まずは、先程適当に作ってしまったアニメーションを正しい名前にします。
AnimatorとAnimationが作成されていますので、それぞれ右クリックからRenameで名前を修正します。
こちらの画像をみながら、アイコン(AnimatorとAnimation)に気をつけて名前を変更しましょう。
スクリーンショット 2018-12-02 12.09.17.png

次に、Animation、Animatorウインドウをだします。
[Window]->[Animation]->[Animation]でAnimationのウインドウ
[Window]->[Animation]->[Animator]でAnimatorのウインドウ
を出すことができます。

AnimatorとAnimationの準備

実際に、AnimatorとAnimationウインドウにプライヤーのアニメーションを表示させましょう。
スクリーンショット 2018-12-02 12.17.51.png

また、AnimatorでPlayerと表示されているAnimationの名称をPlayerBottomに修正します。
スクリーンショット 2018-12-02 12.18.10.png

それでは、早速プレイヤーのBottom状態の画像をAnimationのPlayerBottomに割り当てていきましょう。

4つのAnimationを作成する

PlayerBottom

Animationウインドウをみてみます。
下の画像の▶をおすことで、実際にキーフレームに割り当てられている画像を確認することができます。
スクリーンショット 2018-12-02 12.23.23.png
現在の状態ですと、先程の動画のようにただ4つの画像が切り替わって表示されている(ぱらぱら漫画のようなもの)だけですので、PlayerBottomの画像だけにして、残りの画像のキーフレームを削除します。
スクリーンショット 2018-12-02 12.23.38.png

これでPlayerBottom状態を作成することができました。

PlayerTop、PlayerRight、PlayerLeft

次にPlayerTop状態を作成しましょう。
PlayerBottomと表示されているところを選択し、CreateNewClipをします。
新規のAnimationが作成されるので、名称を「PlayerTop」としましょう。
スクリーンショット 2018-12-02 12.28.58.png

そして、PlayerTop状態の画像をタイムライン上に設定します。
スクリーンショット 2018-12-02 12.30.53.png
これでPlayerTopの状態のAnimationが作成できました。
同様にPlayerRight、PlayerLeftを作成します。

スクリーンショット 2018-12-02 12.33.37.png
スクリーンショット 2018-12-02 12.34.42.png

AnimatorでAnimationをコントロールする

Animatorウインドウをみると、先程作成した4つのAnimationが追加されていることが確認できます。

スクリーンショット 2018-12-02 12.36.13.png

アニメーション切り替えに必要なパラメータ

次にアニメーション切り替えに必要なパラメータを追加します。
プレイヤーの向きは移動するX,Yの値によって決まるので、その2つの値を追加してあげます。
float型で、moveX、moveYを追加しました。
スクリーンショット 2018-12-02 12.48.29.png

BlendTreeを作る

次に、さきほど追加したパラメータによって4つのAnimationを切り替える作業をします。
今回はBlendTreeを使って、Animationの切り替えを行います。
Animatorウインドウを右クリックし、新しいBlendTreeを作成します。
スクリーンショット 2018-12-02 12.41.48.png

BlendTreeをダブルクリックすると、BlendTreeの編集画面に入ることができます。
デフォルトの名前をPlayerMovementに変更しておきましょう。
スクリーンショット 2018-12-02 12.53.05.png
さらにBlendTreeを選択すると、見るパラメータの設定をすることができます。
BlendTypeと、実際に見るパラメータを設定しましょう。
スクリーンショット 2018-12-02 12.55.47.png

BlendTreeのMotionを追加する

次に、AddMotionFieldで、Animationを追加します。まずはPlayerBottomを追加しましょう。

スクリーンショット 2018-12-02 13.01.19.png
スクリーンショット 2018-12-02 13.01.52.png

同様に他のAnimationをMotionに追加していきましょう。
すると、ちょっとかっこいい画面になります:point_up:
スクリーンショット 2018-12-02 13.04.42.png

それぞれのアニメーションのPosX、PosYは次の画像のとおりに入力してください。
スクリーンショット 2018-12-02 13.33.41.png

Animatorの設定

それでは、作成したBlendTreeを実際にAnimatorからつなぎ込みをおこないます。
AnimatorでPlayerTop、PlayerBottom、PlayerRight、PlayerLeftのAnimationを削除することで、Entryから初期状態をPlayerMovement(BlendTree)につなぐことができました。
スクリーンショット 2018-12-02 13.12.29.png

あとすこしです!

スクリプトで、制御

先程追加したパラメータmoveX、moveYの値はパラメータから設定します。
PlayerControllerをこのように書き換えてみましょう。

PlayerController.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PlayerController : MonoBehaviour {
    const float SPEED = 2.0f;
    Vector2 inputPosition;
    [SerializeField] Animator anim;

    void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            inputPosition = Camera.main.ScreenToWorldPoint(Input.mousePosition);
        }
        Vector2 moveDiff = inputPosition - (Vector2)transform.position;
        if (moveDiff != Vector2.zero)
        {
            SetAnimatorParam(moveDiff.normalized);
        }
        transform.position = Vector2.MoveTowards(transform.position,
                                                 new Vector2(inputPosition.x, inputPosition.y),
                                                 SPEED * Time.deltaTime);
    }

    void
    SetAnimatorParam (Vector2 moveVector)
    {
        anim.SetFloat("moveX", moveVector.x);
        anim.SetFloat("moveY", moveVector.y);
    }

}

Unityにもどり、コンパイルが完了したらPlayerオプジェクトにアタッチされているPlayerControllerのAnimにPlayerImageをドラッグアンドドロップします。
スクリーンショット 2018-12-02 13.29.48.png

お楽しみの確認タイム

それではUnityを再生させてみましょう!

動かした方向に、キャラクターの向きをそろえることができました!
大変おつかれさまでした!次回は仕上げに入っていきます。それではまたこんど。

7
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
hayu500ml
ON状態では、Unityを使ってクライアントエンジニアでゲームを作っています。 OFF状態では、MagicavoxelやらUnityやら嗜んでいます。ゲームは作るのもプレイするのも大好きです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
7
Help us understand the problem. What is going on with this article?