Posted at

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

こんにちは。

前回の記事の続きとなります。

前回は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を再生させてみましょう!

動かした方向に、キャラクターの向きをそろえることができました!

大変おつかれさまでした!次回は仕上げに入っていきます。それではまたこんど。