はじめに
準備
Animationの準備
Animationの作成
AnimationのExport
Animation の実行
1. 参考URL

はじめに

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

DoragonBonesのボーンを使用すれば、Animate CC や Blender などと同じようにアニメーションが構築できます。

準備

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

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

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

Animationの準備

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

Timelineが現れます。

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

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

Animationの作成

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

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

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

ここで、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

　class Main extends eui.UILayer {

    /**
     * ステージ追加時に一度発生する
     * (UILayerクラスの継承元(Groupクラス)のメソッド)
     */
    protected createChildren(): void {
        super.createChildren();
        
        this.runGame().catch(e => {
            console.log(e);
        })
    }

    /** 
     *  リソース準備後にゲームシーンを作成する
    */
    private async runGame() {
        await this.loadResource()
        this.createGameScene();
    }

    /** 
     * リソース読み込み準備
     * default.res.jsonから画像データを取得する為のRES設定を行う
    */
    private async loadResource() {
        try {
            await RES.loadConfig("resource/default.res.json", "resource/");
            await RES.loadGroup("preload");
        }
        catch (e) {
            console.error(e);
        }
    }

    /**
     * 引数のnameからBitmapデータを取得する。name属性の参考：resources/resource.json
     */
    private createBitmapByName(name: string): egret.Bitmap {
        let result = new egret.Bitmap();
        let texture: egret.Texture = RES.getRes(name);
        result.texture = texture;
        return result;
    }

    /**
     * ゲームシーンの作成
     */
    protected createGameScene(): void {
        //アニメーションファイルのロード
        const dragonbonesData = RES.getRes( "DragonTest_ske_json" );
        const textureData = RES.getRes( "DragonTest_tex_json" );
        const texture = RES.getRes( "DragonTest_tex_png" );

        //モデルのインスタンス化
        const dragonbonesFactory:dragonBones.EgretFactory = new dragonBones.EgretFactory();
        dragonbonesFactory.addDragonBonesData(dragonBones.DataParser.parseDragonBonesData(dragonbonesData));
        dragonbonesFactory.addTextureAtlas(new dragonBones.EgretTextureAtlas(texture,textureData));  
        const armature: dragonBones.Armature = dragonbonesFactory.buildArmature("TestModel");  
        this.addChild(armature.display);  

        //モデルの移動
        armature.display.x = 200;  
        armature.display.y = 300;  
        armature.display.scaleX = 0.5;  
        armature.display.scaleY = 0.5;  

        //アニメーションの再生
        dragonBones.WorldClock.clock.add( armature );  
        armature.animation.play("TestAnimation",1);  

        egret.Ticker.getInstance().register(  
        function(frameTime:number){dragonBones.WorldClock.clock.advanceTime(0.01)},  
        this  
        );  

       
    }
}

　class Main extends eui.UILayer {

/**

* ステージ追加時に一度発生する

* (UILayerクラスの継承元(Groupクラス)のメソッド)

protected createChildren(): void {

super.createChildren();

this.runGame().catch(e => {

console.log(e);

})

}

/**

* リソース準備後にゲームシーンを作成する

private async runGame() {

await this.loadResource()

this.createGameScene();

}

/**

* リソース読み込み準備

* default.res.jsonから画像データを取得する為のRES設定を行う

private async loadResource() {

try {

await RES.loadConfig("resource/default.res.json", "resource/");

await RES.loadGroup("preload");

}

catch (e) {

console.error(e);

}

/**

* 引数のnameからBitmapデータを取得する。name属性の参考：resources/resource.json

private createBitmapByName(name: string): egret.Bitmap {

let result = new egret.Bitmap();

let texture: egret.Texture = RES.getRes(name);

result.texture = texture;

return result;

}

/**

* ゲームシーンの作成

protected createGameScene(): void {

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

const dragonbonesData = RES.getRes( "DragonTest_ske_json" );

const textureData = RES.getRes( "DragonTest_tex_json" );

const texture = RES.getRes( "DragonTest_tex_png" );

//モデルのインスタンス化

const dragonbonesFactory:dragonBones.EgretFactory = new dragonBones.EgretFactory();

dragonbonesFactory.addDragonBonesData(dragonBones.DataParser.parseDragonBonesData(dragonbonesData));

dragonbonesFactory.addTextureAtlas(new dragonBones.EgretTextureAtlas(texture,textureData));

const armature: dragonBones.Armature = dragonbonesFactory.buildArmature("TestModel");

this.addChild(armature.display);

//モデルの移動

armature.display.x = 200;

armature.display.y = 300;

armature.display.scaleX = 0.5;

armature.display.scaleY = 0.5;

//アニメーションの再生

dragonBones.WorldClock.clock.add( armature );

armature.animation.play("TestAnimation",1);

egret.Ticker.getInstance().register(

function(frameTime:number){dragonBones.WorldClock.clock.advanceTime(0.01)},

this

);

}

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

const dragonbonesData = RES.getRes( "DragonTest_ske_json" );
const textureData = RES.getRes( "DragonTest_tex_json" );
const texture = RES.getRes( "DragonTest_tex_png" );

const dragonbonesData = RES.getRes( "DragonTest_ske_json" );

const textureData = RES.getRes( "DragonTest_tex_json" );

const texture = RES.getRes( "DragonTest_tex_png" );

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

モデルのインスタンス化

const dragonbonesFactory:dragonBones.EgretFactory = new dragonBones.EgretFactory();
dragonbonesFactory.addDragonBonesData(dragonBones.DataParser.parseDragonBonesData(dragonbonesData));
dragonbonesFactory.addTextureAtlas(new dragonBones.EgretTextureAtlas(texture,textureData));  
const armature: dragonBones.Armature = dragonbonesFactory.buildArmature("TestModel");  
this.addChild(armature.display);

const dragonbonesFactory:dragonBones.EgretFactory = new dragonBones.EgretFactory();

dragonbonesFactory.addDragonBonesData(dragonBones.DataParser.parseDragonBonesData(dragonbonesData));

dragonbonesFactory.addTextureAtlas(new dragonBones.EgretTextureAtlas(texture,textureData));

const armature: dragonBones.Armature = dragonbonesFactory.buildArmature("TestModel");

this.addChild(armature.display);

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

Animationの再生

dragonBones.WorldClock.clock.add( armature );  
armature.animation.play("TestAnimation",1);  

egret.Ticker.getInstance().register(  
function(frameTime:number){dragonBones.WorldClock.clock.advanceTime(0.01)},  
this  
);