RagePixelでキャラクターのアニメーションを再生する手順を解説します。
RagePixelをインポート
まずは、Asset StoreからRagePixelをインポートします。
この時、 RagePixel/Demo フォルダはチェックを外してImportします。既にImportしてしまった場合はProjectビューからDemoフォルダを削除して下さい。
スプライトの作成
次にメニューから GameObject → Create Other → RagePixel Sprite と選択し、スプライトを追加します。
すると以下の様なダイアログが表示されます。
「Create」ボタンを押して下さい。するとスプライトに使用するSpriteSheet(スプライトに使用するアニメーション画像の全フレームが格納されている画像ファイル)が作成されます。
※たまに表示されない場合が有ります。その場合には New Sprite をダブルクリックするかUnityを再起動した後に New Sprite を選択して下さい。
この処理で RagePixelAssets フォルダが作成され、中に以下のファイルが作成されます。
- spritesheet_1.asset
- spritesheet_1.mat
- spritesheet_1.png
続いて以下のダイアログが表示されます。
これはカメラの設定です。「Do It」ボタンを押して下さい。
この処理で Main Camera に Rage Pixel Camera (Script) が追加され、カメラが2Dキャラ表示に最適化されます。
Gameビューの表示設定を「Standalone (1024x768)」に切り替えます。
スプライトのサイズ変更
RagePixelAssets フォルダ内の一番下の白い書類アイコンのファイルを選択。
Element 0 のピクセル指定部分を全て 32 に変更します。これはデフォルトのサイズで有る 16 だと小さすぎてよく見えないので変更しているだけです。 16 でも問題無い場合は変更する必要は有りません。
次にHierarchyビューの New Sprite を選択。
Inspectorビューの「NEW」ボタンを押します。
※この処理を入れないとちゃんと 32x32 として認識してない不具合が発生しました。
新しく追加された枠が選択された状態になっているので先頭の枠をクリックし、選択を切り替えます。
ドット絵を作成
次にHierarchyビューの New Sprite をダブルクリック。
塗りつぶし(バケツ)アイコンを選択。色選択アイコンをクリックして白色を選択。
アニメーションアイコンを選択し、「NEW」ボタンを2回押してフレームを3つにします。
※フレームとはアニメーションで使うパラパラマンガ部分の1枚を表す用語です。今回は3つ使うのは3フレームのアニメとなります。
次に選択しているを青色に変更して下さい。なお、白色選択(左上の位置を選択)している状態だと色選択のバーの変更が出来ません。一度、左上以外の位置に移動した後に青色を選択して下さい。
ペンアイコンを選択し、ペンの太さ「中」を選択(分りづらいですが赤枠で囲んだ所でペンの太さを変更出来ます)。青色でそれぞれのフレームに１、２、３と書いて下さい。
アニメーションの設定
New Sprite を選択した状態でInspectorの「EDIT」ボタンを押します。
するとこの様なビューが表示されます。ここでアニメーションの編集が出来ます。
「Add」ボタンを押してアニメーションを追加します。
Name に TEST_ANIMATION と入力します。
Frame Time ではそのフレームが表示されている時間を設定出来ます。今回はアニメーションの動作が分かりやすい様にちょっと長めに変更します。1、2、3の画像を順番に選択し、全ての Frame Time の値を 1000 に変更して下さい。
これでアニメーションの作成は完了です。次は実際にアニメーションを再生してみましょう。
アニメーションの再生
今回はボタンを押したらアニメーションを再生するプログラムを作ります。
C#のファイルを作成し、ファイル名を StartAnimation として下さい。
プログラムはこの様に記述します。
using UnityEngine;
using System.Collections;
public class StartAnimation : MonoBehaviour {
private IRagePixel ragePixel;
// Use this for initialization
void Start () {
ragePixel = GetComponent<RagePixelSprite>();
}
void OnGUI () {
if(GUILayout.Button ("Test")) {
ragePixel.PlayNamedAnimation("TEST_ANIMATION", false);
}
}
}
StartAnimation を Main Camera にドラッグした後、ゲームを実行して下さい。
画面左上に「Test」ボタンが表示されるので押すとアニメーションが再生されます。
動作を確認出来たら他のアニメーションパターンについても確認しておきましょう。アニメーション編集のビューを表示し、Typeの部分を他のものに切り替えてからアニメーションを再生してみて下さい。
Typeによる再生パターンは以下の様になっています。
| Type | 再生パターン |
|---|---|
| Play Once | 1回だけ再生。1→2→3と再生される |
| Play Once Reverse | 1回だけ逆再生。3→2→1と再生される |
| Loop | 繰り返し再生。1→2→3と繰り返し再生される |
| Loop Reverse | 繰り返し逆再生。3→2→1と繰り返し再生される |
| Ping Pong | 再生、逆再生の順番で繰り返し再生。1→2→3→2→1→2…と繰り返し再生させれる |
キャラクターアニメーションについては以上となります。画像をキャラクターに変えたり、表示時間の調整などをして気持ちの良い動きをするキャラクターアニメーションを作ってみて下さい。
次回はキー入力に対応したキャラクターアニメーションの切り替えについて解説する予定です。
