DragonBones 入門

DragonBones 概要とインストール(リンク先へ)
動作環境やインストールまでの手順を記載しました。

DragonBones サンプルを使ってみる(リンク先へ)
DragonBones_Tutorial_Assets/DragonBones_tutorial_Start.flaより
データをインポートし、利用方法までを記載しました。

DragonBones アニメーションデータを利用する(リンク先へ)
FlashBuilderでライブラリプロジェクトとサンプルプログラムを使って
利用しました。テクスチャの切り替え方法も記載しました。

DragonBones アニメーションデータを利用する

FlashBuilderを利用してソースコード上からDragonBonesのデータを利用します。

ライブラリプロジェクトファイルの作成

プロジェクトファイル内にサンプルコードを入れる

DragonBonesライブラリプロジェクトの作成と、サンプルを試す為のプロジェクトファイルを作成します。

ライブラリは、DragonBones2.2のSkeletonAnimationLibraryから

サンプルプロジェクトは、DragonBones_Tutorial_AssetsのCodeより取り込みました。

サンプルプロジェクトのビルドに成功すると、歩行しながらアニメーションしたり、ジャンプするドラゴンの操作ができます。

テクスチャの切り替え

次にドラゴンの着ている服を任意の操作やタイミングで切り替えると言う処理を行なってみます。

サンプルDragonBones_Tutorial_ChangeClothes.flaより、服がレイヤーに追加されています。

変更したい服をライブラリ内のpartsのclothes1からclothes4まで追加します。

では、DBStarlingClothes.asから実際に切り替え処理を行う方法を見てましょう。

private var textures:Array = ["parts/clothes1","parts/clothes2","parts/clothes3","parts/clothes4"];

ライブラリの階層と同じように、clothesの配列を作成します。

var _textureName:String = textures[textureIndex];
var _image:Image = factory.getTextureDisplay(_textureName) as Image; 

StarlingFactoryクラスのgetTextureDisplayを利用する事で指定のテクスチャを取得します。

var _texture:Texture = assetManager.getTexture("clothes"+(textureIndex+1).toString());
var _image:Image = new Image( _texture );

また、flaファイルを利用せずに外部テクスチャを利用する方法としてAssetManagerからTextureを利用する事が可能です。

DragonBones サンプルを使ってみる

DragonBones 2.2のファイルにあるDragonBones_Tutorial_Assets/DragonBones_tutorial_Start.flaを使ってみます。

ライブラリ 

タイムライン 

シーンに配置されたドラゴン

DragonBonesのアニメーションデータを構成する上で大事な２つの用語があります。

アーマチュア(Armature)

上記サンプルではDragonになります。

アーマチュアは、スケルトンの管理とアニメーションを担当します。

ボーン(Bone)

上記サンプルではDragonのarmLやlegL等の各パーツになります。

ボーンはソースコード内でも制御(回転処理やその他色々)ができるようになっています。

では、このデータを実際にImportしてみます。

ウィンドウメニューのエクステンションよりDragonBonesDesignPanelを選択します。

DragonBonesDesignPanel

DragonBonesDesignPanel起動後、ImportよりAll Library Itemsという選択状態になっている事を確認して、OKボタンを押します。

ライブラリ内にあるアニメーションデータがDragonBonesのフォーマットとして作成されます。この中でアニメーションのタイミング調整や、データのエクスポートを行います。

Behavior Listの<<をクリックすると、上記のような設定が行えます。

Total Times：アニメーション運動の終了時間

Blending Times：アニメーションから別のアニメーションに移行する時の時間(ここはよく解っていませんので、間違っているかもしれません)

Keyframe Ease：モーション内のキーフレーム間のEase値

Loop：アニメーションのループ

エクスポート

データのエクスポートでは、Zip(XML and PNG)形式の他に、PNGのメタデータ内にアニメーションデータを含める事で、使用するソースコード内でPNGファイル１つを読み込むだけでアニメーションを利用するといった事もできます。

DragonBones 概要とインストール

DragonBonesはFlash Professional(CS6以降)を利用したアニメーションツールです。StarlingFrameworkとも連携ができます。

今回は以下の条件で試してみました。
Adobe Flash Pro CC (リンク先へ)
Adobe Extension Manager CC (リンク先へ)
Adobe FlashBuilder 4.6
DragonBones 2.2 (リンク先へ)

作業は大きく２つに分けると、アニメーションデータ作成とソースコード組み込みがあります。

アニメーションデータ作成

Flash Proffesional(CS6以降)で行う作業

1.タイムラインでアニメーションを作成

2.DragonBonesDesignPanelに作成したアニメーションをImportする

3.DragonBonesDesignPanelでアニメーションの調整を行う

4.DragonBonesDesignPanelのExportからデータを書き出す

ソースコード組み込み作業

1.書きだしたアニメーションデータをインポートして使用する

DragonBonesを使用する方法ですが、DragonBones 2.2のダウンロードファイル内にあるDragonBonesDesignPanel.zxpをAdobe Extension Manager CC経由でFlashProCCにインストールする事で使用が可能になります。

Adobe Extension Manager CCを利用して、DragonBonesDesignPanelをインストール

ApplicationVerificationFailed エラーについて

FlashProCCを利用してairForiOSのパブリッシュを行う時に
こういうエラーが出る時があります

Installation Error: ApplicationVerificationFailed.

このエラーはiOS デジタル署名を付けた時に証明書のファイルやアプリケーションIDに

ミスがある場合に表示されます。このエラーの説明だけだとわかりにくい気がします。

確認1:iOS Provisioning ProfilesのApp ID:の項目がAIR for iOS設定のアプリケーションIDと同じかチェックする。

確認2:キーチェーンアクセスのiPhone Developerから書き出した証明書である事。
また、書き出し時のパスワードとiOS証明書のパスワードが間違っていないかチェック
する。

こちらも合わせてお読み下さい

Installation Error: ApplicationVerificationFailed
（リンク先へ）