Flexで動作毎にアニメーションさせる

この記事は「ActionScript Game Utility Library ‘ヤスメ'」v0.61 を対象にしています。

Flex は Flash のようにタイムラインが存在しないため、アニメーションをさせるための機構を自分で作る必要があります。「ActionScript Game Utility Library ‘ヤスメ'」には、動作単位でアニメーションを管理し、Flash のタイムラインっぽく操作するための機能があります。

サンプル（ソース）

サンプルでは、

• 待機
• 歩き
• 走り
• しゃがみ

の4動作をランダムに行っています。 実際の作り方は以下の通り。

1. 使用する画像ファイルのロード設定作成

表示に使用する、ロード設定を定義した XML ファイルを作成します。 今回使用する画像ファイルは以下です。

待機

1

移動

1	2	3

しゃがみ

1

以上の3種類をロードするための設定を XML ファイルへ記述します。今回のサンプルでは以下の XML ファイルを使用しています。 MahoutukaiGraphicsLoadSettings.xml

XML ファイルの詳細は以下です。

2～4行目

directory

swfファイル基準の画像格納ディレクトリ

usingArchive

画像のアーカイブを使用する場合 true を指定します。使用しない場合 false を指定します。（未実装）

archiveFileName

usingArchive が true である場合、読み込むアーカイブファイル名です。（未実装）

6～16行目

待機、移動、しゃがみの単位で、以下のようにロード設定を記述します。

file

ファイルをロードする単位となります。

@frameName

ファイルロード完了後、グラフィックデータを参照する際の識別子です。

subDirectory

画像ファイルを格納しているサブディレクトリです。（directory配下のディレクトリを指すことになります。）

baseFileName

読み込むファイルの基本ファイル名です。

extension

読み込むファイルの拡張子です。

length

読み込むファイル数です。例えば3を指定した場合、baseFileName + "0001" + extension、～ baseFileName + "0003" + extension の3つのファイルが読み込まれます。

centerPosition

画像の左上角を原点として、画像の中心点の座標を指定します。例では、キャラクターの足元を中心点としています。

2. タイムラインデータの作成

キャラクターのフレーム構成を定義した XML ファイルを作成します。

• 待機
• 歩き
• 走り
• しゃがみ

上記の4種類の動作を行うためのフレーム構成を XML ファイルへ記述します。今回のサンプルでは以下の XML ファイルを使用しています。 MahoutukaiTimelineData.xml XML ファイルの詳細は以下です。

2～10行目

デバッグ機能の設定です。

drawing

true とすると、当たり判定エリアの描画を行います。リリース時は通常 false にします。

color

当たり判定エリア毎の描画色を設定します。

12～25行目

待機、歩き、走り、しゃがみの単位で以下を記述します。

frame

動作の単位毎に定義します。

@name

フレームを参照するための識別名です。

graphicsFrameName

このフレームで使用する、グラフィックロード設定の@frameNameを指定します。

graphic

グラフィックロード設定で読み込んだ、画像の番号のカンマ区切りリストを指定します。ここで指定した数だけ、アニメーションのコマ数が増えます。詳しくは歩き、走りの設定を御覧ください。

loop

このフレームを再生する際、ループ再生する場合 true、ループ再生しない場合 false を指定します。

stageHitArea

ステージ当たり判定エリアの設定を行います。当たり判定エリアは他にもpushHitArea、damageHitArea、attackHitAreaがあります。（今回のサンプルでは、機能的には使用していません。）

3. プログラムに組み込む

1.、2.で作成した XML ファイルをプログラムに組み込みます。ここでYasumeライブラリのクラスを使用します。 グラフィックロード設定を読み込み、必要な画像ファイルをロードするクラスは以下です。 TimelineGraphicsLoader タイムラインデータを読み込むクラスは以下です。 MainTimelineFactory

63～73行目

まず、インスタンスの生成、設定ファイルのロードを行います。

75～90行目

各設定ファイルのロード完了を待ちます。 設定ファイルのロードが完了したら、グラフィックデータのロードを行います。

92～109行目

グラフィックデータのロード完了を待ちます。 ロードが完了すれば、グラフィックを利用出来る形式で作成、キャラクターのオブジェクトの生成、タイムラインの設定を行います。 利用出来る形式のグラフィックデータは、TimelineGraphicsクラス、タイムラインはMainTimelineクラスを使用します。

196～223行目

表示する動作を切り替えたい場合、MainTimeline.gotoFrame() メソッドで切り替えることができます。その際、タイムラインデータの@nameを指定します。

287～288行目

MainTimeline.animate() を実行することで、タイムラインをアニメーションさせます。

291～299行目

あとは、グラフィックを渡してタイムラインを描画します。

第3引数には、ITimelineDrawableインターフェイスを実装したオブジェクトを渡します。各メソッドの意味はリンク先を御覧ください。

サンプル以外の機能

MainTimelineクラスには他にも、フレームアクションを設定することも出来ます。これによって、あるグラフィックを表示したタイミングで音を出したり、動作を切り替えたりと、結構自由にできます。MainTimelineクラスは、あくまでフレームのデータ構造を保持しているだけですので、今回のようにTimelineGraphicsクラスと連携するだけでなく、通常のMovieClipをグラフィック代わりに使用することも出来るのではないかと思います。（試してませんが。）

ご質問や要望がありましたら、@asahiufoやコメント欄にて連絡下さい。