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キャラ表示に最適化されます。
スプライトのサイズ変更
RagePixelAssets フォルダ内の一番下の白い書類アイコンのファイルを選択。
Element 0 のピクセル指定部分を全て 32 に変更します。これはデフォルトのサイズで有る 16 だと小さすぎてよく見えないので変更しているだけです。 16 でも問題無い場合は変更する必要は有りません。
次にHierarchyビューの New Sprite を選択。
Inspectorビューの「NEW」ボタンを押します。
※この処理を入れないとちゃんと 32x32 として認識してない不具合が発生しました。
ドット絵を作成
次にHierarchyビューの New Sprite をダブルクリック。
塗りつぶし(バケツ)アイコンを選択。色選択アイコンをクリックして白色を選択。
アニメーションアイコンを選択し、「NEW」ボタンを2回押してフレームを3つにします。
※フレームとはアニメーションで使うパラパラマンガ部分の1枚を表す用語です。今回は3つ使うのは3フレームのアニメとなります。
次に選択しているを青色に変更して下さい。なお、白色選択(左上の位置を選択)している状態だと色選択のバーの変更が出来ません。一度、左上以外の位置に移動した後に青色を選択して下さい。
ペンアイコンを選択し、ペンの太さ「中」を選択(分りづらいですが赤枠で囲んだ所でペンの太さを変更出来ます)。青色でそれぞれのフレームに1、2、3と書いて下さい。
アニメーションの設定
New Sprite を選択した状態でInspectorの「EDIT」ボタンを押します。
するとこの様なビューが表示されます。ここでアニメーションの編集が出来ます。
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…と繰り返し再生させれる |
キャラクターアニメーションについては以上となります。画像をキャラクターに変えたり、表示時間の調整などをして気持ちの良い動きをするキャラクターアニメーションを作ってみて下さい。
次回はキー入力に対応したキャラクターアニメーションの切り替えについて解説する予定です。