UNPKG

dragonbones-pixijs

Version:

DragonBones runtime for pixi v8

github.com/SGGames/DragonBones-Pixi

SGGames/DragonBones-Pixi

137 lines (105 loc) ā€¢ 3.61 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
# DragonBones Runtime - Pixi (V8) DragonBones runtime and Demo for Pixi V8. ## Why? [Erget](https://egret.com) the company behind DragonBones seems have abandoned DragonBones and its libraries from years ago... But... there is Hope! [SGGames](https://sggame.us) 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 ```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() ``` ```typescript 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 ```typescript 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](https://sggames.github.io/DragonBones-Pixi/) - Click button in the top to go through different Examples ![ScreenshotAll](./public/screenshots/screenshot-all.jpg) ![Screenshot](./public/screenshots/screenshot-01.png) - 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