今回はUnityで2D歩行アニメをつくる方法について勉強するッピ！
歩行アニメをつくる方法？
まだ習ったことないわ！
今回の記事で、
・アニメの作り方
・アニメの制御
・左右上下のキャラの動かし方
を学べるッピ！
これからこの2D歩行アニメをつくる方法を一緒に勉強して行くッピよ～
歩行アニメをつくる方法【2D版】
必要なもの
まずは必要なものを用意するッピ！
- Unity
- Windows または Mac のパソコン
が必要ッピよ～！
まだ Unity をダウンロードしてない人は
↓ の記事を参考に必要なものをインストールするといいッピ！
その他には
- マップ
- キャラクター画像
も必要ッピよ～！
とってもクオリティの高い素材ッピ！
みんなもここから借してもらうと良いッピ！
ここからダウンロードさせてもらえばいいのね！
ついでにDLsiteにも
素敵なチップ素材が売ってるッピよ！＜露骨なPR＞
キャラクター画像の設定
さっそくキャラクター画像をセッティングするっぴ！
ダウンロードした素材を
アセットに向かってドラッグ＆ドロップするッピ！
オッケー！
キャラチップのスプライトモードを設定する
まずは
インスペクター→スプライトモードを「複数」に設定
ッピ！
こうすることで、あとからキャラチップを
ポーズごとに分割することができるッピ！
次は
ユニット毎ピクセル数を「32」に設定
ッピ！
そのまま
押出エッジを「０」に設定
ッピよ～！
キャラチップの分割
次はスプライトエディターでキャラチップを分割するッピよ～
まずは
「Sprite Editor」を
クリックするッピ！
次に
「スライス」→「タイプ」→「Grid By Cell Size」
クリックするッピ！
わかったわ！
次は
「ピクセルサイズ」→「32*32」→「スライス」
クリックするッピ！
最後は「適用する」を選ぶッピよ～
これでいいのか？
おお、バラバラになってる！
すごいわっ
スプライトエディタの説明
ちなみにスプリクトはこんな風になってるッピ！
覚えておくと良いッピ
| 名称 | 解説 |
|---|---|
| テクスチャタイプ | 画像を何に使うかを指定します。 ここでは2DとUIの画像として使います。 |
| スプライトモード | （単数）テクスチャを1枚の画像として使用します。 （複数）１枚の中の画像に複数のキャラクターやポーズが含まれている場合に使用します。 （ポリゴン）3Dなどで使うモードです。 |
| 単位毎のピクセス数 | 1枚の画像に複数のキャラクターやポーズが含まれている場合、1キャラクターまたはポーズの大きさを指定できます。 |
| メッシュタイプ | スプライトに生成されるメッシュの種類を決めます。 タイトに設定すると、ピクセルに基づいたメッシュを作ります。 |
| 押し出しメッシュ | スプライト（画像）の周囲に残す、透明な枠を設定します。 |
| ピポッド | ゲーム上で画像を配置・認識するための、場所を決めます。（ジャンプ処理のための足元設定など） |
| 物理形状を生成する | これによって、スプライトのメッシュ形状が自動で作られます。 |
| ラップモード | 画像シートを使ったアニメのラップ方法を設定します。 |
| フィルターモード | 画像を縮小拡大したときの処理方法を設定できます。 バイナリはぼやけた感じ、ポイントだとドットの質感が残ります。 |
アニメーションの作成
アニメーションを作成するには、まず
スプライトエディタでバラバラにした
キャラ画像の「▶」をクリック
するッピ！
画像が展開できたら
正面を向いている3ポーズを選んで
ヒエラルキーへドラッグ＆ドロップ
するッピ！
オッケー！
するとウィンドウが出てくると思うッピ！
そのまま
Front
と名前をつけて保存するっぴ！
同じように
・Left
・Right
・Back
のアニメも作るッピよ～
・Left
・Right
・Back
も作るのね！
できたぜ！
余分なファイルを消す
ヒエラルキーの中の、
正面以外のキャラを消すッピよ～！
ついでにアニメコントローラーも消すッピ！
アニメコントローラーって、
こんなやつかしら？
それッピ！
オッケー！
レイヤーの追加
次はレイヤーを追加するッピよ～
このレイヤーがあることで、
キャラを確実に建物より前に表示できるッピ！
面白そうだな！
さっそくやってみようぜ
まずは
インスペクター→追加設定→ソートレイヤー→Default
[ Add Sorting Layer ]
と選択するッピ！
ソートレイヤー→ [ + ]
Leyer 1に「character」
と入力するッピよ～
オッケー
次は実際にレイヤーを変更するッピ！
ヒエラルキー→プレイヤーを選択→Sprite Render →
ソートレイヤー→「 character 」
レイヤーを変更するッピ！
できたわ！
アニメコントローラーの作成
次はアニメーションを制御する
コントローラーを作るッピ！
アセット→右クリック→作成
アニメーターコントローラーを選択→「Player」
と名前をつけるッピ！
作ったプレイヤーをキャラにセットするッピ！
ヒエラルキー→プレイヤー→アセット→
アニメーションコントローラーを
インスペクターのコントローラーへドラッグ＆ドロップ
するッピ！
ついにアニメーションを制御するッピ！
アニメーションコントローラーを
ダブルクリックして、設定画面に向かうッピ！
パラメーターを入力するッピ！
まずは
「 + 」→「int」
【direction】と名前をつける
ッピよ～！
まかせろ！
できたわ！
方向ステートの作成
次は方向のステートをつくるッピ！
まずBaseLayerの中で、右クリックをして
ステートの作成→[ 空 ]
を選ぶッピ！
New State
が作られると思うから、
それをクリックして、正面の[ Front ]を作成するッピよ～
New State→インスペクター→Motion なし（モーション）
へ、Frontのアニメをドラッグ＆ドロップするッピ！
名前を「Front」にするのも忘れちゃいけないッピ♪
名前を
Front
っと・・・
ついでに残りの
左 右 後ろ
の3つのステートも作るッピ♪
New Stateを３つ追加して
・Left
・Right
・Back
の分を作れば良いんだな！
了解よ！
遷移の作成
次は遷移を作成するッピ！
「Any State」を選択、右クリック→遷移を作成
をするッピ！
線が結ばれたわ！
いい感じッピ♪
そのまま4方向、全部の線を引くッピよ～
Any Stateから遷移を作成して残りの
・Left
・Right
・Back
の分を作れば良いんだな！
その通りッピ♪
遷移（移り変わり）の制御
そういえば、遷移って何かしら？
それはアニメーションの移り変わりのことッピね～
このアニメーション制御を覚えると、
例えばビックリしたアニメの再生が終わったら、
倒れるみたいなアニメの制御ができるッピよ～
へ～便利だなあ
気を取り直して、
続きをいくッピ！
よくみると
「Any State」ー ▶ ー 「NewState」
があるっピ！
この「 ▶ 」をクリックするッピよ～
遷移アニメの設定
まずは「Front」の設定ッピ！
インスペクター→終了時間ありに[✓]チェック
ッピ！
次は
Condithons →「 + 」→ direction →Greater → Equals
に設定するッピ！
最後に横の数字を「 0 」にするッピね！
セッティング項目
インスペクター「終了時間あり」の下に
Settings設定項目があるっッピ♪
ここを
・終了時間「0.3」
・遷移間隔「0」
・遷移オフセット「0.3」
に設定するッピよ～！
左右後ろのアニメ設定
続いて左右後ろの設定ッピ！
まずは「Left」の設定ッピ！
インスペクター→終了時間ありに[✓]チェック
Condithons →「 + 」→ direction →Greater → Equals
ッピ！
次は
・終了時間「0.3」
・遷移間隔「0」
・遷移オフセット「0.3」
に設定するッピ！
最後に横の数字を「 １ 」にするッピね！
１
ね！
まずは「Right」の設定ッピ！
インスペクター→終了時間ありに[✓]チェック
Condithons →「 + 」→ direction →Greater → Equals
ッピ！
次は
・終了時間「0.3」
・遷移間隔「0」
・遷移オフセット「0.3」
に設定するッピ！
最後に横の数字を「 ２ 」にするッピね！
２
だな
まずは「Back」の設定ッピ！
インスペクター→終了時間ありに[✓]チェック
Condithons →「 + 」→ direction →Greater → Equals
ッピ！
次は
・終了時間「0.3」
・遷移間隔「0」
・遷移オフセット「0.3」
に設定するッピ！
最後に横の数字を「 ３ 」にするッピね！
３
だな
できたわ！
プレイヤーの当たり判定/質量の追加
プレイヤーの当たり判定をつけるッピ！
まず
プレイヤーをクリック
するッピ～
それからインスペクター
コンポーネントを追加→Physics2D→Circle Collider2D
を選択するッピ～
質量を追加するッピ！
インスペクターから
コンポーネントを追加→Physics2D→Rigidbody 2D
を選択するッピ～
重力や抵抗を設定するッピよ～！
インスペクターから
Rigidbody 2D
を選択するッピ～
そこから
リニアの抵抗０
回転抵抗 0
重力スケール 0
と入力し、
回転を固定 ☑Z にチェックを入れる
ッピよ～
まかせて！
歩くプログラムの作成
最後は歩くプログラムッピ！
やっときたか！
ヒエラルキー →キャラクター → インスペクター →
コンポーネントを追加→ New Script → 「Chara_move」
と名前をつけて追加をクリックするッピ！
↓の文をコピーして
using UnityEngine;
public class chara_move : MonoBehaviour
{
private float speed = 0.01f; //floatは小数点
private Animator animator;
private void Start()
{
animator = GetComponent<Animator>();
}
void Update()
{
Vector2 pos = transform.position;
if (Input.GetKey(KeyCode.DownArrow))//↓キーを押したら
{
pos.y -= speed;
animator.SetInteger("direction", 0);//正面を向く
}
else if (Input.GetKey(KeyCode.LeftArrow))//←キーを押したら
{
pos.x -= speed;
animator.SetInteger("direction", 1);//左を向く
}
else if (Input.GetKey(KeyCode.RightArrow))//→キーを押したら
{
pos.x += speed;
animator.SetInteger("direction", 2);//右を向く
}
else if (Input.GetKey(KeyCode.UpArrow))//↑キーを押したら
{
pos.y += speed;
animator.SetInteger("direction", 3);//後ろを向く
}
transform.position = pos;
}
}と入力→保存するッピ！
ちなみにこれは
using UnityEngine;
public class chara_move : MonoBehaviour
{
private float speed = 0.01f;
private Animator animator;
private void Start()
{
animator = GetComponent<Animator>();
}
void Update() {
Vector2 pos = transform.position;
if (Input.GetKey(KeyCode.DownArrow)){
pos.y -= speed;
animator.SetInteger(“direction“, 0);}
else if (Input.GetKey(KeyCode.LeftArrow))
{
pos.x -= speed;
animator.SetInteger(“direction“, 1);
}
else if (Input.GetKey(KeyCode.RightArrow))
{
pos.x += speed;
animator.SetInteger(“direction“, 2);
}
else if (Input.GetKey(KeyCode.UpArrow))
{
pos.y += speed;
animator.SetInteger(“direction“, 3);
}
transform.position = pos;
}}
という意味になるッピ♪
こういうことだったのか！
納得だわ！
using UnityEngine;
public class chara_move : MonoBehaviour
{
private float speed = 0.01f; //floatは小数点
private Animator animator;
private void Start()
{
animator = GetComponent<Animator>();
}
void Update()
{
Vector2 pos = transform.position;
if (Input.GetKey(KeyCode.DownArrow))//↓キーを押したら
{
pos.y -= speed;
animator.SetInteger("direction", 0);//正面を向く
}
else if (Input.GetKey(KeyCode.LeftArrow))//←キーを押したら
{
pos.x -= speed;
animator.SetInteger("direction", 1);//左を向く
}
else if (Input.GetKey(KeyCode.RightArrow))//→キーを押したら
{
pos.x += speed;
animator.SetInteger("direction", 2);//右を向く
}
else if (Input.GetKey(KeyCode.UpArrow))//↑キーを押したら
{
pos.y += speed;
animator.SetInteger("direction", 3);//後ろを向く
}
transform.position = pos;
}
}Unityのキーボード入力について
Unityのキーボード入力には、
Input.GetKeyメッソドを使うッピ！
| プログラムメッソド | 発動条件 |
|---|---|
| Input.GetMouseButton | マウスのボタンが押されていたら発動 |
| Input.GetKey | キーボードのキーが押されたら発動 |
インプットメッソド～？
って何だ？
インプットメッソドというのは、
マウスやキーボードなど、外部から入力があったときに
発動するプログラムをつくるときに使うものッピ！
インプットゲットキーというのは、
キーボードでキーを入力されたあとに発動するプログラムッピ！
そうなのね！
へ～
だけどさ、うさタブ
using UnityEngine;
public class chara_move : MonoBehaviour
{
private float speed = 0.01f; //floatは小数点
private Animator animator;
private void Start()
{
animator = GetComponent<Animator>();
}
void Update()
{
Vector2 pos = transform.position;
if (Input.GetKey(KeyCode.DownArrow))//↓キーを押したら
{
pos.y -= speed;
animator.SetInteger("direction", 0);//正面を向く
}
else if (Input.GetKey(KeyCode.LeftArrow))//←キーを押したら
{
pos.x -= speed;
animator.SetInteger("direction", 1);//左を向く
}
else if (Input.GetKey(KeyCode.RightArrow))//→キーを押したら
{
pos.x += speed;
animator.SetInteger("direction", 2);//右を向く
}
else if (Input.GetKey(KeyCode.UpArrow))//↑キーを押したら
{
pos.y += speed;
animator.SetInteger("direction", 3);//後ろを向く
}
transform.position = pos;
}
}この、
Input.GetKey (KeyCode.LeftArrow)
とかってやつ
左右とかのキー以外にもできないのか？
エンターキーとかスペースキーも使いたいんだけどな・・・
もちろんできるッピね～！
今回使ったエンターキー以外にも、
よく使うキーを紹介するッピ！
これをキーコードというッピ！ 覚えておくと良いッピよ～
| キーコード | 対応するキー |
|---|---|
| Return | エンターキー |
| Backspace | バックスペースキー |
| Delete | デリートキー |
| Tab | タブキー |
| Escape | エスケープキー |
| Space | スペースキー |
| UpArrow | ↑ |
| DownArrow | ↓ |
| RightArrow | → |
| LeftArrow | ← |
| 数字キーコード | 対応するキー |
|---|---|
| Alpha0 | 0 |
| Alpha1 | 1 |
| Alpha2 | 2 |
| Alpha3 | 3 |
| Alpha4 | 4 |
| Alpha5 | 5 |
| Alpha6 | 6 |
| Alpha7 | 7 |
| Alpha8 | 8 |
| Alpha9 | 9 |
すっげええ！
こんなにあるのか
まだまだあるッピよ～！
詳しくは、Unityのリファレンスをチェックすると良いッピ♪
勉強になったぜ！
今日もまたひとつ学んだわ！
学習のまとめ
using UnityEngine;
public class chara_move : MonoBehaviour
{
private float speed = 0.01f; //floatは小数点
private Animator animator;
private void Start()
{
animator = GetComponent<Animator>();
}
void Update()
{
Vector2 pos = transform.position;
if (Input.GetKey(KeyCode.DownArrow))//↓キーを押したら
{
pos.y -= speed;
animator.SetInteger("direction", 0);//正面を向く
}
else if (Input.GetKey(KeyCode.LeftArrow))//←キーを押したら
{
pos.x -= speed;
animator.SetInteger("direction", 1);//左を向く
}
else if (Input.GetKey(KeyCode.RightArrow))//→キーを押したら
{
pos.x += speed;
animator.SetInteger("direction", 2);//右を向く
}
else if (Input.GetKey(KeyCode.UpArrow))//↑キーを押したら
{
pos.y += speed;
animator.SetInteger("direction", 3);//後ろを向く
}
transform.position = pos;
}
}- ｜素材をインストール
- ｜キャラチップを分割
- ｜歩行アニメの作成
- ｜レイヤーの作成
- ｜アニメーションコントローラーを削除
- ｜新しいコントローラーを作成
- ｜上下左右のアニメを１つのコントローラーに設定
- ｜パラメーターで【Int型】を設定
- ｜名前の設定とモーションの設定
- ｜ConditionsをEqualsにして上下左右ごとに数字を変更
- ｜キャラクターにアニメコントローラーを設定
- ｜スプリクトの作成
- ｜テストプレイ
上手くできたッピか？
これからも色んなゲーム作りやプログラムの解説をしていくッピ！
次回も楽しみにしているッピよ～～！
UnityはC#を元に作られているッピ！
まだまだ Unity や C#について勉強したい人は↓の記事を参考にするッピ♪
