Dragonbone using phaser3

Hello, I’m new to dragonbones. I have created a new scene and play animation using dragonbone. Its working fine. When i switch to another scene and come back animation stopped. Can’t able to restart the animation. If anyone have idea please help me.

Would you share the relevant code that make it problem?

Hi @ReydVires, Thanks for your replay. Same issue persist while restart the scene also. Here are my sample code,

var SceneA = new Phaser.Class({

Extends: Phaser.Scene,

initialize:

    function SceneA() {
        Phaser.Scene.call(this, {
            key: 'sceneA'
        });
    },

preload: function () {
    //loading dragon bone files
    this.load.dragonbone("samplesprite", "assets/samplesprite_tex.png", "assets/samplesprite_tex.json", "assets/samplesprite_ske.json");
},

create: function () {
    samplesprite = this._armatureDisplay;
    samplesprite = this.add.armature("samplesprite", "samplesprite");
    samplesprite.setPosition(300, 483)
    samplesprite.animation.play("walk");

    this.input.once('pointerdown', function () {
        //restart scene
        this.scene.restart();

    }, this);
}});

is the samplesprite a variable global?
Since when restart happend, that global variable won’t restart. Try to change into local variable, and see what happend

No, its not working.I change it into local variable.

Hmm how do you switch the scene?

From above sample code i didn’t switch the scene.i just restart the scene. Same problems are faced on switching the scene also

By me too. Animations stop working after restart.
After level changing i cant load same armature with same name any more. No errors.

I got the same error and for a week I had tried everthing to get rid of this problem.
No one knows, where we can put the blame on: Phaser or Dragonbones…

But I came out with a workaround, that I will share with you.
In the first scene you have to store the current timestamp. This timestamp will be moved to the next scene, which will use it to create the identifier for the armature.
All created dragonbone-armatures will then be stored in a global scene variable. Those items will be cleared in the last step.

I came up with something like that:

class SceneA extends Phaser.Scene {
	
	private removeArmatures;

	...

	init( conf ): void {

        if( conf.hasOwnProperty( "removeArmatures" ) ) {

			this.removeArmatures = conf.removeArmatures;

        }

    }

	create() {

		if( this.game.scene.getScene( "SceneA" ) !== null ) {

            this.game.scene.remove( 'SceneA' ); // Maybe you mustn't delete the scene. I haven't tested it yet

			// Clear the dragonbone cache. You can't use the stored dragonbones anyway...
			for( var i=0; i < this.removeArmatures.length; i++ ) {
				if( typeof this.cache.custom.dragonbone.get( this.removeArmatures[ i ] ) !== "undefined" ) {
					
					// Dragonbones is storing the data in custom-cache and json-cache
					this.cache.custom.dragonbone.remove( this.removeArmatures[ i ] );
					this.cache.json.remove( this.removeArmatures[ i ] + "_atlasjson" );

				}
			}

        }

	}
	
	// Function for a click- or event-handler
	startScene() {

		if( this.game.scene.getScene( "SceneB" ) === null ) {

			this.game.scene.add( 'SceneB', new SceneB() );

		}

		this.game.scene.start( 'SceneB',
			{
				socket: this.time.now
			}
		);

	}

	...

}

class SceneB extends Phaser.Scene {

	private socket;
	private enemy;
	private armatures;

	...


	init( conf ) {

		this.socket = conf.socket;
		this.armatures = [];
	
	}

	create() {

		// I remove the scene, because I can load configs in function "loadFirstScene". Don't know, how I can hand over data in another way... :P
		if( this.game.scene.getScene( "Map" ) !== null ) {

            this.game.scene.remove( "Map" );

        }

	}

	// You also can use any other kind of logic. I make a little something like this:
	loadDragonboneData( texture ) {

		const armatureKey = armature + "_" + this.socket + "_show";
		
		this.load.dragonbone(
			texture.texture + "_" + this.socket + "_show",
			texture.img,
			texture.tex,
			texture.ske
		);

		this.armatures.push( armatureKey );
		addEnemy( texture.texture, armatureKey );

	}

	addEnemy( armature, armatureKey ) {

		this.armature = scene.add.armature( armature, armatureKey );
		this.enemy = new Enemy(); // You can setup your own enemy-logic in a seperate class

	}

	loadFirstScene() {

		if( this.game.scene.getScene( "Map" ) === null ) {

			this.game.scene.add( "Map", new Map() );

		}

		this.game.scene.start( 'Map', {
			removeArmatures: this.armatures
		});
		
	}
	...

}

Of course you have to edit the script to your needings.
Hope it helps :+1:

1 Like