dragonbones / dragonbonesjs Goto Github PK

pixi.js 4.3.0 ok!
pixi.js 4.3.1 error!
pixi.js 4.3.2 error!
pixi.js 4.3.3 error!

Phaser 3 is released and I was wondering if you would consider supporting it, and publishing the module on npm. if you wanted to release all your JS plugins, you could consider a tool like lerna. This way you can keep your monorepo, but released the different run-times seperately

I am working on a boilerplate called create-phaser-app. I'd love to include this in the "templated project" because its free and open source.

If you released a Phaser 3 plugin could also support CommonJs modules? Module-tree-shaking and similar technology can work to reduce the size of the package. In Phaser 3, modules are fully supported, instead of relying only on global namespaces. Maybe something with this structure

I spent some time last night taking a try to port the code. Yet, the dragonbones-runtime and common-module are more complex than I expected. I saw that you extended the Slot and the BaseFactory inside of your .ts files, yet a many of the methods deprecated in 5.5. For example the DataParser methodes. I wasn't completely sure what was the right approach

Here are some thing that might help to know:

• Phaser 3 is out, and they released the ability to use containers
  
• They are currently working on Spine and Creature support, since containers are released

Let me know if there's anything I can do to help, thank you!

有些浏览器的console.assert使用会有差异，使用dragonBone.js的时候会报TypeError: Type error，
我要手动的改成 DragonBones.assert = console.assert.bind(console)才行,不知道具体的原因。

I want to take an image and replace the current on on a specific slot.
Right now the only option i see is to replace the entire texture.

Hello.
I'm baby in webdevelopment, and want to use animation, created in DragonBones Pro inside my website. So i'v downloaded pixi.js, and DragonBones.js from this repository and put them in lib folder together.
Then in main.js trying to do that:

• import "./lib/pixi.js" //ver pixi.js - v4.8.1
• import "./lib/dragonBones.js" //ver 5.6.300

After that i can create:

• let cvs= document.getElementById("canvasId");
• let app = new PIXI.Application({view: canvasId});

and want to use dragonBone instance, but can't:

• console.log(dragonBones); // dragonBones is not defined
• console.log(DragonBones); // DragonBones not defined
• console.log(dragonBones.DragonBones); // dragonBones not defined
• console.log(new dragonBones()); // dragonBones not defined
• console.log(new DragonBones()); // DragonBones is not defined
• console.log(PIXI.dragonBones.DragonBones); // not defined

the same results if importing that way:

• import {dragonBones} from "./lib/dragonBones.js" //ver 5.6.300
• import {dragonBones as DragonBones} from "./lib/dragonBones.js" //ver 5.6.300
• import * as dragonBones from "./lib/dragonBones.js" //ver 5.6.300

also i tried like this
let db = require("./lib/dragonBones.js")
console.log(db); // returns empty object {}

i looked in Spine2d.js sources and they do in IIFE
PIXI.spine = pixi_spine;
to incapsulate to PIXI namespace and use PIXI.spine.Spine(...), but there is no such way in DragonBones.

I tried to install it like you wrote:

• npm install -g dragonbones-runtime
• dbr [email protected]
  and put that files to lib, but again can't import use it

2 ways i found for fix, but both are bad in my opinion:

• add exports.dragonBones = dragonBones; at the end of dragonBones.js
• or npm i dragonbones-pixi from (https://www.npmjs.com/package/dragonbones-pixi) I don't know if the publisher is official dragonbone developer, but an export is already exists in the end of the file.
  Also the files are different for about 1500+ rows of code (14227 vs 15850).

Please help me, how import and use that lib in a proper way. Thanks, and sorry for my bad english.

不用自己重头写一个
https://github.com/borisyankov/DefinitelyTyped/tree/master/easeljs
https://github.com/borisyankov/DefinitelyTyped/tree/master/tweenjs
https://github.com/borisyankov/DefinitelyTyped/tree/master/soundjs
https://github.com/borisyankov/DefinitelyTyped/tree/master/preloadjs

I am trying to compile the head@master branch, but get these errors:

src/dragonBones/pixi/PixiArmatureDisplay.ts(165,30): error TS2345: Argument of type 'string' is not assignable to parameter of type 'InteractionEventTypes'.
src/dragonBones/pixi/PixiArmatureDisplay.ts(171,33): error TS2345: Argument of type 'string' is not assignable to parameter of type 'InteractionEventTypes'.

It seems that the docs doesn't define what blob of pixi.js.d.ts was used to compile.
I would love to see

• the dependencies bundled or link in the README to a specific blob (eg, https://github.com/pixijs/pixi-typescript/blob/38f0fec6c682fe865fccc948f3674cf359549caf/pixi.js.d.ts)
• DragonbonesPixi updated to the latest PIXI ;)

"color": [{
        "time": 0
   }, {
         "time": 0.1
   }, {
         "time": 0.15
   }, {
        "time": 0.3
 }],

Uncaught TypeError: Cannot read property 'charAt' of undefined
    at Color.setFromString (pixi-spine.js:5095)
    at SkeletonJson.readAnimation (pixi-spine.js:4009)
    at SkeletonJson.readSkeletonData (pixi-spine.js:3880)
    at Loader.<anonymous> (pixi-spine.js:5341)
    at Loader.js:590
    at async.js:35

for (var i = 0; i < timelineMap.length; i++) {
       var valueMap = timelineMap[i];
       var color = new core.Color();
       color.setFromString(valueMap.color);
       timeline.setFrame(frameIndex, valueMap.time, color.r, color.g, color.b, color.a);
       this.readCurve(valueMap, timeline, frameIndex);
       frameIndex++;
 }

DragonBones can support export > [email protected]

So this one is weird... used to work "as expected" in dragonbones v2.4.
I attach this simple animation arrow_nested.zip
It contains:

• outer_animation (1 keyframe at 0, duration 60 frames )
• on the keyframe there is an instance/nested clip that has the "real" animation, with multiple keyframes

Now, "outer_animation" once placed on screen it plays its nested animation, but when i call it's .play() method nothing happens.
It seems that the first time it is played on construction (even without telling it to play) by a call from BaseFactory.buildArmature >> Armature.advanceTime >> Slot._update, and later on i can´t get it to play by playing the parent/main armature...

Any ideas how to solve this use case? Although it is a simplified example, i have some animations that make heavy use of this "feature"/"bug" with v2.4, but would LOVE to update to the latest dragonbones and PIXI.

Error on line 3145 of dragonbones.js

Bone.prototype._arriveAtFrame = function (frame, timelineState, animationState, isCross) {
if (frame) {
var mixingType = animationState.getMixingTransform(name);

name is not defined.

I tried switching it to
var mixingType = animationState.getMixingTransform(animationState.name);
and that seemed to work ok.

When I create armatures, it is possiblie to see big textures of the armatures in the top left corner of the screen. They are too big and it is bad to be able to see them while creating much smaller characters/armatures. I suppose this happens while the buildArmatureDisplay loads the textures. Is it possible to solve this issue? Maybe change their spawning position from x: 0, y:0 to something like x: -1000, y: 0 to hide them from the screen? Or hide them in other way. Can you give me a hint where I can change it? Thank you very much for developing DragonBones.

看5.3版本新支持二进制格式，性能有大幅度提升，我用的是pixi.js+ db，请问什么时候可以支持呢

Hello,

If you downloaded the demos for phaser.io, chances are that you started a server in Phaser/Demos/ and went to visit localhost:xxxx in your browser... then you just got a black screen.

To resolve the issue, you need to:

1. create a folder libs in Phaser/Demos
2. copy-paste the content of Phaser/2.x/out in the folder Phaser/Demos/libs/
3. change the line 9 of Phaser/Demos/index.html from:

    <script src="./libs/dragonBones/dragonBones.js"></script>

to

    <script src="./libs/dragonBones.js"></script>

Now refresh the page on your browser and you should have a big robot idling on the screen.

Maybe a pull request could be made based on the above?

Hello, with the recent release of pixi 4.6.0 (including a relevant bugfix of "textures from atlas as mask") the masking of slots/armatures should be possible.
I am trying to achieve something similar to this gist - please have a look at the _updateBlendMode method.

For now (and for the lack of a better idea) if i find a sprite with blending set to alpha, i add it as it's parents mask (should use z-order instead?), and i don't handle removing the display (i'm confused where it's necessary to check this) at all.

Pixijs supports PIXI.Sprite, PIXI.Graphics (stencil) and scissor masking.

I think a correct implementation could include:

• differentiate between displays of type PIXI.Sprite and Armature (PIXI.Container)
• ...rendering the Containers content into a local texture before applying it as mask (Container types can't be currently used as masks)
• apply the mask to any underlying Slot/Armature, using z-order to determine the masking target.

Do You have any plans to add support for this?

error log :

> [email protected] start ~/dev/DragonBonesJS/Pixi/Demos
> tsc & copyfiles -u 3 -s ../4.x/out/* libs/dragonBones/ & anywhere

Running at http://192.168.5.101:8000/
Also running at https://192.168.5.101:8001/
libs/dragonBones/dragonBones.d.ts(4406,24): error TS2503: Cannot find namespace 'PIXI'.
libs/dragonBones/dragonBones.d.ts(4413,24): error TS2503: Cannot find namespace 'PIXI'.
libs/dragonBones/dragonBones.d.ts(4421,39): error TS2304: Cannot find name 'PIXI'.
libs/dragonBones/dragonBones.d.ts(4585,103): error TS2503: Cannot find namespace 'PIXI'.
libs/dragonBones/dragonBones.d.ts(4613,83): error TS2503: Cannot find namespace 'PIXI'.

...

I've put pixi in to libs

https://github.com/DragonBones/DragonBonesJS/blob/master/docs/DragonBones_4.5_data_format_zh.md

"armature":[] is list, should be "armatures":[]
"bone": [] -> "bones":[]
"slot":[] -> "slots":[]
etc

Hi!

I have a game where I'm using sprites with other sprites as children and when I include the dragonbones.js in my project all the children sprites go to position 0,0 and loses all parent properties.

Can you help me? Thanks!

疑问：phaser目录下2.x 3.x目录是什么意思？区别是什么？

Hi and thanks for the cool update!
Here are some errors I get on compilation (VSCode) with PIXI project (causes crashing in browser):

PixiArmatureDisplay.ts
-Class "PixiArmatureDisplay" incorrectly implements interface "IArmatureProxy"- (27, 18)

PixiFactory.ts
-Argument of type "PixiArmatureDisplay" is not assignable to parameter of type "IEventDispatcher"- (43, 57)
-Argument of type "PixiArmatureDisplay" is not assignable to parameter of type "IArmatureProxy"- (99, 17)
-Type "IEventDispatcher" cannot be converted to type "PixiArmatureDisplay"- (194, 20)
-Property "clock" does not exist on type "PixiFactory"- (208, 40)

PixiSlot.ts
-Property "_armatureData" does not exist on type "Armature". Did you mean "armatureData"?- (243, 95)
-Property "_armatureData" does not exist on type "Armature". Did you mean "armatureData"?- (273, 42)

hi i have a strange bug in the draw order?
ex:step
1: put a object under object.
2: save project
3: move object again
4: bug it showed hover object

if i save project, and move the object , it will draw render over again the body object ????
i made a video to show you the bugs
https://youtu.be/2kQ0rxA7iSA

am new on dragonBone, so if am doing mistake thank to tell me.
thank a lot for help me understand this bug and what am do bad.

EDIT:
I notice that it seems to happen with small element only, how fix this ?
EDIT:2
after some test, it not affect export, and the test preview in file> preview.
Only bug in preview sofware box.
I wonder if this is not a problem of harware, I have a gtx 1070.
Someone else has this problem. ?
This bug make animation very hard.
i try edit my gpu config , but this not solved the issue.
I do not know the source code of the software, but I think there is a problem when an object contains less than 250 pixel for rendering preview order in box.

请问

DragonBonesJS 的 pixi版本支持 mesh网格变形吗? 是cpu(js)里实现的还是gpu(shader)里实现的呢?

谢谢

Hi, I have been using dragon bones to do animation on a createjs game that i have been working on.

However i found that the bones seem to screw up (the head goes off to a corner of the screen), when the animation plays on the android default browser (Galaxy Tab 2). This does not happen all the time.

Also on the google chrome browser on the same tablet, it works perfectly fine.

Any ideas?

For armatures using flipped images in the bone (like let's say a character facing towards the viewer and the left arm of the character is the flipped image of the right arm), the image doesn't properly flip on Android and Apple devices.

It looks like (from dragonBonesCreateJS) dragonBones normally uses skew functions to flip the image in the CreateJSDisplayBridge.prototype.updateTransform function. However, the Cocos2DDisplayBridge.prototype.updateTransform is just using rotation for when its transforming for the canvas (not webGL), so the sprite doesn't flip for mobile devices.

I also noticed that setting skewX and skewY to the same angle in createJS can rotate the image, but in Cocos2D setSkewX and setSkewY (with Y value negative since origin is bottom left) not only rotates the image but also scales it up.

below code is not working in DragonBonesEvent.ts

this._armatureDisplay.addDBEventListener(dragonBones.EventObject.COMPLETE, this._animationEventHandler, this);

Im running Pixi demo, but the display is incorrect.

How I can Solve it?

Apparently...

hi，现在dragonbones.ts是写在一个文件里的，你们开发时应该是分成多个文件开发的吧，能不能把分开的文件传上来呢

如果可以的话，希望能添加对phaser支持的SDK。

Hi. First of all, thank you for this PIXI renderer, it's working great for us!

I am trying to understand how to reliably load assets, then dispose of them, then re-load them again.

If I use armature.destroy(true) and then later attempt to re-build the same armature, I get the following error:

Uncaught TypeError: Cannot read property 'hasLoaded' of null
at Sprite.set (pixi.js:21089)

Here is an example: http://www.spacejack.ca/dragonbones-test/

Click "Startup" - load assets, start animatoin
Click "Shutdown" - stop animation, dispose of assets
Click "Startup" - throws exception

Demo code is here: http://www.spacejack.ca/dragonbones-test/js/app.js

If I change my code to armature.destroy() then it does not crash. Upon re-loading, I get the warning:

Same name data. Zombie_Run
	BaseFactory.addDragonBonesData @ dragonBones.js:9493

I would like to be sure the resources are being desposed of. We're working on a game that contains mini-games, so we need to load the mini-game assets then dispose of them, load a different mini-game, etc.

I'm not sure where the assets are stored from here:

dbFactory.parseDragonBonesData(resources['zombieSkel'].data)
dbFactory.parseTextureAtlasData(resources['zombieAtlas'].data, resources['zombieTex'].texture)
armature = dbFactory.buildArmatureDisplay('Zombie')

Any advice would be much appreciated, thanks.

I just created an issue in the tools repo, but could not decide where it belongs (tools or dragonbones)....

Pixi 版本 4.5.4
在 Dragon Bones Pro 制作的tint和动画， 在pixi中没有效果， 是还没添加这个功能？

we found that js enter infinite loop and go into OutOfMemory soon when system time changed backward with [email protected]。And I will show the whole steps in master branch.

1. passedTime got negative number when system time changed backward at WorldClock.ts#L106
2. then, this.time -= passedTime made this.time become larger indeed ( subtracting a negative number means adding a positive number) at WorldClock.ts#L114
3. after serveral ticks, this.time became a huge number such as 1e308
4. and passedTime got a negative maximum after it is subtracted from the huge this.time in next tick at WorldClock.ts#L106
5. then every IAnimatable instances got the wrong passedTime such as -1e308 at WorldClock#45
6. after a series of process,
   • WorldClock.advanceTime
   • Armature.advanceTime
   • negative -1e308 changed to positive 1e308 at Animation.advanceTime#L151
   • this._time got Infinity after this._time += passedTime; due to JavaScript Number accuracy issues at AnimationState.advanceTime #L744
   • this.currentTime got NaN at TimelineState.update#L149
   • frameIndex get undefined because NaN at TimelineState.update#L150
   • enter infinite loop because crossedFrameIndex(always number) === frameIndex(always undefined) at TimelineState.update#L247
   • finally infinite NewObject caused OOM TimelineState.update#L69

hi guy, great work .
do you plan to integrate export JSON for spine 3.5> soon or where is it better to get the spine 2d pro software?
thank

Hey guys, thanks for the great framework!
It would be super helpful if you added build instructions to the readme - how to build the js version of the lib from the ts sources.
Thanks!

i see dragon bone is free and open source , im looking up source in github, where is it? i cant find DragonBone Pro source code

感谢开源的贡献，希望能够支持construct3，

Thanks for all your wonderful jobs, hope support for construct3

In AS3 you can set the Armature colorTransform property... but in the JS there doesn't seem to be a property? Is there a way to change the color of the armature in JS?

Are there any docs for Dragon Bones JS?

The updateTransform override in PhaserArmatureDisplay.js (line 276) seems to be breaking the positioning of bitmapText objects, and images using bitmapData directly as their textures, in the project I'm working on. Think this can be fixed by extending the Phaser.Image class for use with slot images. Not sure of the contribution rules on this project - ok for me to have a crack and open a PR?

hi, I saw you have a cpp runtime for cocos2dx, but as cocos now supports javascript through JSB, I wonder if the CPP runtime will work or it is needed to create a specific javascript runtime?

:)

The arguments passed to PIXI.Texture are incorrect.
The second (currently null) definitely should be the rectangle of the sub-texture (aka "frame"), not sure about the following parameters though ("The area of original texture" vs "Trimmed rectangle of original texture").
I get the same (correct) result with both

textureData.texture = new PIXI.Texture(
    textureAtlasTexture,
    <PIXI.Rectangle><any>textureData.region,
    null,
    originSize,
    textureData.rotated as any // .d.ts bug
);

and

textureData.texture = new PIXI.Texture(
    textureAtlasTexture,
    <PIXI.Rectangle><any>textureData.region,
    originSize,
    null,
    textureData.rotated as any // .d.ts bug
);

Without submerging into the depths of both libraries, i would go with the second one though, since pixijs docs name it similar - "orig", "The area of original texture".
I used pixi 4.5.1, but since the constructors signature hasn't changed between previous (3.x) and current version, i would say it shouldn't make a difference which version You use.

Looks like when I use a Type Mesh and a deform animation with the PIXI plugin, my other textures of type image stop working.

They display as the full texture map scaled down. Tried to switch everything over to meshes to compensate, but meshes to not seem to support texture-swap animations.

Will start looking into causes for more information.
Thanks! DBones is pretty great.

Hello,

I am using DragonBones to animate some of my characters (e.g. wasps).
I would like to simply restart my game after the player killed all the "wasps" on the screen. What I do for now is simply:

    public onWaspDeath () {
        console.log("Dead Wasps: " + this._wasps.countDead());
        if(this._wasps.countLiving() <= 1){ // the currently killed wasp is not dead yet
            console.log("You killed all the Wasps!")
            this.game.sound.play("congrats");
            this.game.state.restart();
        }
    }

That lead to this error in Chrome:

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'
    at i.Image.s.Sprite._renderCanvas (phaser.js:15696)
    at a.s.Sprite._renderCanvas (phaser.js:15701)
    at i.Group.s.DisplayObjectContainer._renderCanvas (phaser.js:15072)
    at i.World.s.DisplayObjectContainer._renderCanvas (phaser.js:15072)
    at i.Stage.s.DisplayObjectContainer._renderCanvas (phaser.js:15072)
    at s.CanvasRenderer.renderDisplayObject (phaser.js:20563)
    at s.CanvasRenderer.render (phaser.js:20488)
    at Game.updateRender (phaser.js:36186)
    at Game.update (phaser.js:36102)
    at i.RequestAnimationFrame.updateRAF (phaser.js:64166)

I added a conditional breakpoint before the problematic function call, so that I can check the parameter passed to that function when the game restarts.

So basically, with this method, I could see what this.texture.baseTexture.source is returning just after I called this.game.state.restart().

Note that the problematic function renderSession.context.drawImage() in part of a loop that iterates over the objects to display.

Here the results:

At the third iteration, for some reason this.texture.baseTexture.source is null. That means that my third object to be displayed is null.

After trying to find out which object was that third object, I start to think that it might be the wasp that I animated with DragonBones... So basically the wasp would load correctly when running the game, but it would fail to load when restarting the current phaser state.

Any body has already encountered a similar problem with DragonBones and Phaser?

Thank you very much for your help.

I think that on this line _frameFloatArray should be a Float32Array rather than Int16Array.

Otherwise the compiler complains about this line:

hi 现在代码里数组的for循环都是for(index in arr){} , 如果我在ie8-的浏览器中给数组的prototype加个indexOf方法，它把数组的indexOf都循环出来然后报错

Are there any plans to support Babylon JS?

Thanks

Hello,

I was very excited by the mesh feature in DragonBones, and I had good fun with it in DragonBones Pro.

However, when I imported successfully my animation into Phaser, I got the warning message: "mesh are not suppored in phaser-ce" (I write the message from memory, so might not be accurate).
In practice, the game is running but the mesh animated parts of my DragonBones' animation are not displayed ... :( so sad.

Is there any technology roadblock that prevents implementing the mesh animations in Phaser? or is it actually possible to do but not implemented yet?
If so, any plan to implement it in the near future? or maybe in Phaser 3?

Thank you for your amazing work again.

Hi, I'm playing with DragonBonesJS 3.0.1 + PIXI 4.5.3 in VS Code (in typescript).

When I add a click listener to the stage and click my added armatureDisplay nothing happens and the event doesn't shoot. The Code throws two errors:
PixiArmatureDisplay.ts > [ts] 'Argument of type 'string' is not assignable to parameter of type 'InteractionEventTypes'.' (165,30).
PixiArmatureDisplay.ts > [ts] 'Argument of type 'string' is not assignable to parameter of type 'InteractionEventTypes'.' (171,33).

Everything is set up like in HelloDragonBones example - the only difference is different texture and armature data files. The added armatureDisplay is visible on stage and the proper animation is playing.

Have you guys given up on the JS library?

Hi, I'm new with DragonBone but notice that we only have Egret and Pixi support, so is there any plan for CreateJS ?