【Unity】Unityでドット絵キャラを動かしてみる!


今回は、unityを使ったドット絵キャラの動かし方をみていきます。

unityでは2Dでも3Dでも動かせるけど、初めての場合は、2Dから動かしてユニティの動かし方を学ぶのが良いんだにゃ。
<今回作成したもの↓>
今回のテーマは2Dドット絵キャラの動かし方です。個人的にはunityを始めて一番最初に通る関門だと思っています。
- ドラクエなどのRPG風動かし方
- マリオなどのアクションゲーム風動かし方
- ドラクエなどのRPG風動かし方
- マリオなどのアクションゲーム風動かし方
1は、マップを平坦にみるので、上下左右を自由に動けるのに対し、2は基本的には左右、上下は重力によりジャンプしたり、落下してのアクションといった感じですね。
今回動かしたのは、1のRPG風の動かし方です。重力や当たり判定などが必要ないので、比較的簡単なため、初めての方の練習にはちょうど良いと思います。
それではみていきましょう。
作成環境と動かすドット絵
作成環境
- 使用ソフト:Unity version 2021.3.4f1 LST
- 作成環境:MacBook (2020)
- ドット絵作成:Asepriteで作成後、GIFで書き出し、PNGに分割したもの

一応作成環境なんかから説明しておきますね。Unityは最新版ではなくLTS版を使用しています。

ドット絵は、有料版のAsepriteを使用しているんだにゃ。経験浅いからまだまだなんだけど、書いてみると面白いから、気になる人は使ってみると良いにゃ!
ドット絵

今回使用したのは、次のドット絵です。




16✖️16ピクセルで作っているから、ちょっと小さいんだにゃ。でも、ちゃんと歩いているように見えるかにゃ?
アニメーション作成
アニメーションの作成は、簡単です。
まずは、使いたいドット絵をAssetsウィンドからSceneビューへまとめてドラック&ドロップするだけ!簡単にアニメーションができます。

そうすると、アニメーションに名前をつけて保存ができるようになります。

保存をするとシーン上にアニメーションがついたキャラクターが登場し、アセット上にAnimationファイルとAnimatorファイルができます!

あとは、同様に前向き、横向きのアニメーションを作成します。
次に、アニメーターウィンドウを開き、その中に、それぞれのAnimationファイルを入れます。

アニメーターウィンド内で矢印を引っ張って切り替えもできるのですが、今回は、動きに合わせてアニメーションの切り替えをしたいので、スクリプトを書いていきます。
スクリプトについて
アニメーションや移動のスクリプトの書き方はいろいろありますが、今回は次のスクリプトを使用して、「neko_front」にアタッチしています。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class Player : MonoBehaviour
{
// どのアニメーションを使うかを入れる
public string upAnime = "";
public string downAnime = "";
public string leftAnime = "";
public string rightAnime = "";
// 歩くスピード
public float speed = 2.0f;
// 今のアニメーション
string modeNow = "";
// 歩く方向と位置
float vx = 0;
float vy = 0;
void Start()
{
// 初めは前を剥いた状態からスタート
modeNow = downAnime;
}
void Update()
{
// 方向を常に0に戻す(戻さないと、ずっとその方向に進んでしまう)
vx = 0;
vy = 0;
// 押した方角に移動し、アニメーションを指定する
if(Input.GetKey("up")){
modeNow = upAnime;
vy = speed;
}
if(Input.GetKey("down")){
modeNow = downAnime;
vy = -speed;
}
if(Input.GetKey("left")){
modeNow = leftAnime;
vx = -speed;
}
if(Input.GetKey("right")){
modeNow = rightAnime;
vx = speed;
}
}
void FixedUpdate(){
// 移動
this.transform.Translate( vx/50, vy/50, 0);
// アニメーションの切り替え
this.GetComponent<Animator>().Play(modeNow);
}
}

基本的には、コードを見てもらえればと思いますが、概要は次のとおりです。
- Input.GetKey()でコマンド入力を受け付ける
- 押された方向により、キャラクターの位置とアニメーション遷移を行う。
- 位置の変更は、transform.Translateを変更する
- アニメーションはGetComponent().Play()で遷移させる。
最後に、スクリプトを適用しているneko_frontのinspectorウィンドに表れているパブリック変数に、各アニメーターの名前を入れれば、動きに合わせてアニメーションが遷移します。
