【unity】2D ToolKitでスプライトアニメをしてみる【アセット】

2Dゲームを作るのに便利な機能が満載な
「2D toolkit」（2Dツールキット）の紹介です。

主な機能としては、
・タイルマップエディター
・GUI関連
・スプライト機能
スプライト登録管理、スプライトアニメ
なんかがあります。

その中で備忘録も兼ねてこの記事ではスプライトアニメの方法を記述します。

準備

スプライトアニメに必要な絵は以下ホームページの一番下の絵（霊夢）をお借りしましょう。

東方ドット絵素材｜オイナルメモ帖

th0_reimu.png

アニメーション実装方法

◆Sprite Collection作成

・Projectビューで右クリック ＞ Create ＞ tk2d ＞ Sprite Collectionでプレハブを作成します。

プレハブの名前を変更する必要があるので、”TestSpriteCollection”に変更します。

・Inspectorビュー「TestTk2dSpriteCollection」のOpen Editorボタンを押します。

・ウィンドウが開くので Create ＞ Sprite Sheet を選択します

・上で用意したth0_reimu.pngをTextureの所にD&Dで持っていき、TileWidth 40・TileHeight 64に設定し、右下のApplyボタンを押すと、タイル毎に分かれたスプライトが表示されます。

そして右上のCommitを忘れずに押して、保存しましょう。

◆Sprite Animation作成

・Projectビューで右クリック ＞ Create ＞ tk2d ＞ Sprite Animationでプレハブを作成します。
名前をTestTk2dSpriteAnimationに変更しましょう

・Inspectorビュー「TestTk2dSpriteAnimation」のOpen Editorボタンを押すとウィンドウが開きます。

・アニメーションクリップを作成します。 Create ＞ Clip

・Collectionを先程作ったTestSpriteCollectionに変更すると霊夢が表示されます

 ・アニメーションを設定していきます
+ボタンを押してパターンを増やしていきます。

0→1→2→1とアニメパターンを追加します。

そして再生してみます。超早いスピードでアニメが行われるので時間を調整します。

・コマを選んでTimeを0.2に設定します。一コマのアニメ時間になります。

・これを全4コマに適応して、最後にCommitは忘れずに行いましょう。
これでアニメーションができました！

スクリプトで8方向にアニメーション

360パッドのジョイスティック入力で歩くアニメーションの方向を変えてみましょう。

tk2dSpriteAnimatorに霊夢スプライトを入れます。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using InControl;
public class ReimuRot : MonoBehaviour {
public tk2dSpriteAnimator animator;
// Update is called once per frame
void Update () {
var ad = InputManager.ActiveDevice;
float angle =  Mathf.Atan2( ad.LeftStick.Y,ad.LeftStick.X);
float angledeg = angle * Mathf.Rad2Deg + 180f;
if(angledeg > 337.5f || angledeg < 22.5f ){
animator.Play("walk_Left");
}
else if(angledeg >= 22.5f && angledeg <= 67.5f ){
animator.Play("walk_ButtomLeft");
}
else if(angledeg >= 67.5f && angledeg <= 112.5f ){
animator.Play("walk_Buttom");
}
else if(angledeg >= 112.5f && angledeg <= 157.5f ){
animator.Play("walk_ButtomRight");
}
else if(angledeg >= 157.5f && angledeg <= 202.5f ){
animator.Play("walk_Right");
}
else if(angledeg >= 202.5f && angledeg <= 247.5f ){
animator.Play("walk_UpperRight");
}
else if(angledeg >= 247.5f && angledeg <= 292.5f ){
animator.Play("walk_Upper");
}
else if(angledeg >= 292.5f && angledeg <= 337.5f ){
animator.Play("walk_UpperLeft");
}
}
}

全方向に歩きました！