【Egret Engine】DragonBones を使用したアニメーションの作成と読み込み

投稿者: | 2019年1月20日

はじめに

DragonBonesエディタを使用して、簡単なアニメーションの作成と読み込みを行います。

フィア
今回はボーンを使ったアニメーションだよ
カレン
Animate CCやBlenderとかの使い方とほとんど一緒だから、

結構簡単だと思うわ。

 

スポンサーリンク

 

目次

 

準備

前回の記事を読んで、適当なモデルを作成しておいてください。

【Egret Engine】DragonBones の基本操作と使い方

 

 

 

DragonBones を使用したアニメーションの作成

Animationの準備

エディタ左上のAnimationをクリック。

Timelineが現れます。

 

エディタ右下のAnimationタブの「animation0」をダブルクリックして名前を適当に変更してください。今回は「TestAnimation」にします。

 

エディタ左下のTimelineタブのAuto keyをクリックすると、アニメーションの自動記録が始まります。

 

Animationの作成

Animationはモデルを移動させるか、以下のフラグをクリックすると、ひし形のキーが打たれます。

基本的にはボーンを移動させるといいでしょう。

 

試しに、10フレーム目に適当なポーズのキーを打ってみました。

 

ここで、Auto keyをクリックしてアニメーションを保存。

 

再生ボタンを押すと、キーフレーム間を滑らかに補間したアニメーションが再生されます。

 

AnimationのExport

AnimationをExportするにはログインしている必要があります。

 

File > Exportをクリック。

 

以下の設定でFinishをクリック。

Output Pathのフォルダに保存されるので場所を覚えておいてください。

 

保存したフォルダ内にある、

・DragonTest_ske.json

・DragonTest_tex.json

・DragonTest_tex.png

を作成中のプロジェクト内にあるresourceフォルダに入れてください。今回はresourceフォルダ内に「DBAnimation」というフォルダを作成し、そこにjsonを入れました。

 

 

Animation の実行

プロジェクトをEgret Wingで開くと、アイテムを更新するよう求められるのでSave。

 

resource内にあるdefault.res.jsonを開くと、DBAnimationが追加されていると思います。

以下のコードを入力してください。

Main.ts

 

アニメーションファイルのロード

defoult.res.jsonを参考にして、先ほど追加したファイルに対応する名前を入力してください。

 

モデルのインスタンス化

4行目のdragonbonesFactory.buildArmature(“モデル名”);のモデル名には、DragonBonesに用いたモデル名を使用してください。

 

Animationの再生

DragonBonesで使用しているアニメーションの時間(WorldClock)を追加して、armature.animation.play(“アニメーション名”, 実行回数);でアニメーションを実行してください。

アニメーション名はDragonBonesを参照してください。

 

armature.animation.play(“TestAnimation”, -1);にすればアニメーションがループします。

 

おわりに

フィア
結構手順が多くて大変だったね…
カレン
DragonBoneには他にもいろいろ機能があるから、

自分でテンプレートを覗いてみてね!

 

参考URL

Egret Developer DragonBones

https://developer.egret.com/cn/docs/page/364

 

HTML5 Egret Engine入門へ戻る