DragonBones Runtime - Pixi (V8)

DragonBones runtime and Demo for Pixi V8.

Why?

Erget the company behind DragonBones seems have abandoned DragonBones and its libraries from years ago...

But... there is Hope!

SGGames Our team will upgrade it to support modern Js/Ts runtime and adding a new shiny Editor too.

🔥🔥🔥 Stay tuned! 🔥🔥🔥

Feature list

Same as DragonBones.js at the moment:

• ✅ Modern typescript
• ✅ Pixi V8 with much better performance
• ✅ Animations
• ✅ Mesh
• ✅ IK
• ✅ Events
• ✅ Userdata

but soon with more next-gen features:

• 🔥 AI Generated images and characters with animation
• 🔥 2D/3D motion matching
• 🔥 Export to Threejs
• 🔥 Export to Babalonjs
• 🔥 Export to Unity
• 🔥 Export to Godot
• 🔥 Export to Unreal
• 🔥 Anigo the 2D editor
• 🔥 Blender plugin

To use as library

https://www.npmjs.com/package/dragonbones-pixijs

npm install dragonbones-pixijs

Example Typescript

export default class HelloDragonBones extends BaseDemo {
    public constructor() {
        super();

        this._resources.push(
            "resource/mecha_1002_101d_show/mecha_1002_101d_show_ske.json",
            "resource/mecha_1002_101d_show/mecha_1002_101d_show_tex.json",
            "resource/mecha_1002_101d_show/mecha_1002_101d_show_tex.png"
        );
    }

    protected _onStart(): void {
        const factory = PixiFactory.factory;
        factory.parseDragonBonesData(this._pixiResources["resource/mecha_1002_101d_show/mecha_1002_101d_show_ske.json"]);

        factory.parseTextureAtlasData(
            this._pixiResources["resource/mecha_1002_101d_show/mecha_1002_101d_show_tex.json"],
            this._pixiResources["resource/mecha_1002_101d_show/mecha_1002_101d_show_tex.png"]);

        const armatureDisplay = factory.buildArmatureDisplay("mecha_1002_101d", "mecha_1002_101d_show")!;
        armatureDisplay.animation.play("idle");

        this.container.addChild(armatureDisplay);
    }
}

Load data

From Pixi V8, Loader is gone, use await Assets.load instead.

await Assets.load()

const factory = PixiFactory.factory;
factory.parseDragonBonesData(this._pixiResources["resource/mecha_1002_101d_show/mecha_1002_101d_show_ske.json"]);

factory.parseTextureAtlasData(
    this._pixiResources["resource/mecha_1002_101d_show/mecha_1002_101d_show_tex.json"],
    this._pixiResources["resource/mecha_1002_101d_show/mecha_1002_101d_show_tex.png"]);

Add to Stage and Display

From Pixi v8,

• DisplayObject is gone, replaced with Container.
• Only Container can have children

const armatureDisplay = factory.buildArmatureDisplay("mecha_1002_101d", "mecha_1002_101d_show")!;
armatureDisplay.animation.play("idle");
this.container.addChild(armatureDisplay);

To start development

Work with Vite

npm install
npm run dev

To build

npm run build

Run demo

Examples

• Click button in the top to go through different Examples

• CodeSandBox.io samples (WIP)

References

Old version (PixiV4-5)

https://github.com/DragonBones/DragonBonesJS

Pixi.js

• https://pixijs.com/
• https://github.com/pixijs/pixijs
• https://pixijs.com/8.x/guides/migrations/v8 (How to migrate from old version)

License

MIT License

• Same as DragonBones.js
• Same as Pixi.js

Contributions

• Credit to SGGames.us
• Main contributor: @atomixnmc