Starling2.0(β)上でDragonBonesを動かす


DragonBonesの旧バージョンがStarling2.0に対応してくれないので、無理やり動かしてみました。誰得な記事です。なお、Starling2.0は未だベータなので、今後挙動が変わる可能性もあります。

利用した各バージョン

  • Adobe Animate CC 15.1.1.13
  • DragonBones Design Panel V2.4.1
  • DragonBonesAS 3.0.1
  • Starling 2.0

DragonBonesの最新バージョンは4系なのですが、なぜ3系を使うかというと、4系は(SPINEくりそつな)スタンドアローンのアニメーションエディタ(AIR製ぽい)を使う前提だからです。FlashCCのエクステンションで動くDragonBones Design Panelで書き出したデータを扱えるのは、 2系か3系となります。そしてAnimateCCでもDesign Panelは動きます。SPINEそのまんまなツール使うならSPINE使えばいいと思うんだよね。(DragonBonesツールは、無料でメッシュまで対応してるというアドバンテージはありますが)。

具体的な作業

ビルドするとエラーになるので、DragonBones側のコードで以下の部分を書き換えます。

  • Starling2.0ではhandleLostContext設定ができなくなったので(自動で取り扱われる)
dragonBones.factorys.StarlingFactory.as
// l112くらい
if (Starling.handleLostContext)
↓
if (true)
  • プロパティ名が変わったので
dragonBones.factorysStarlingFactory.as
// l153くらい
image.smoothing = displaySmoothing;
↓
image.textureSmoothing = displaySmoothing;
  • transformationMatrixの扱いが変わったので
dragonBones.display.StarlingSlot.as
// l121くらい updateTransform関数の中 ずらっとコメントアウトして書き換える。
//if(pivotX || pivotY)
//{
//  displayMatrix.tx = _globalTransformMatrix.tx - (displayMatrix.a * pivotX + displayMatrix.c * pivotY);
//  displayMatrix.ty = _globalTransformMatrix.ty - (displayMatrix.b * pivotX + displayMatrix.d * pivotY);
//}
//else
//{
//  displayMatrix.tx = _globalTransformMatrix.tx;
//  displayMatrix.ty = _globalTransformMatrix.ty;
//}

displayMatrix.tx = _globalTransformMatrix.tx;
displayMatrix.ty = _globalTransformMatrix.ty;
_starlingDisplay.transformationMatrix = displayMatrix;
_starlingDisplay.pivotX = pivotX;
_starlingDisplay.pivotY = pivotY;

Starling2.0のtransformationMatrixでは参照側を書き換えても、設定がアップデートされないようですね。改めて代入すると動くようになるのですが、その際にpivot設定が消えてしまうのようなので、こちらも再設定してやります。

Enjoy!

以上です。意外と少ない変更で動きますが、最後の部分、Starling2.0側をちゃんと理解していないので怪しいです。あと、カラー効果とかレイヤー合成とか動作確認してませんので悪しからず。

おまけ

最近AIR開発のエディタも本格的にFlashBuilderからIntelliJ IDEAに乗り換えました。全く問題ないです。他の言語(業務)とおなじ高機能なエディタで開発できるのはとても効率がいいですね。

SPINEのActionScript3ランタイム(使ったことないけど)もStraling2対応してほしいな。自分でやるか。