DragonBones runtime and Demo for Pixi V8.
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! 🔥🔥🔥
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
https://www.npmjs.com/package/dragonbones-pixijs
npm install dragonbones-pixijs
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);
}
}
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"]);
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);
Work with Vite
npm install
npm run dev
npm run build
- Click button in the top to go through different Examples
- CodeSandBox.io samples (WIP)
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)
- Credit to SGGames.us
- Main contributor: @atomixnmc