dragonbones / dragonbonesjs Goto Github PK
View Code? Open in Web Editor NEWDragonBones TypeScript / JavaScript Runtime
License: MIT License
DragonBones TypeScript / JavaScript Runtime
License: MIT License
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.
passedTime
got negative number when system time changed backward at WorldClock.ts#L106this.time -= passedTime
made this.time
become larger indeed ( subtracting a negative number means adding a positive number) at WorldClock.ts#L114this.time
became a huge number such as 1e308
passedTime
got a negative maximum after it is subtracted from the huge this.time
in next tick at WorldClock.ts#L106passedTime
such as -1e308
at WorldClock#45negative -1e308
changed to positive 1e308
at Animation.advanceTime#L151this._time
got Infinity
after this._time += passedTime;
due to JavaScript Number accuracy issues at AnimationState.advanceTime #L744this.currentTime
got NaN at TimelineState.update#L149frameIndex
get undefined because NaN
at TimelineState.update#L150crossedFrameIndex(always number) === frameIndex(always undefined)
at TimelineState.update#L247I 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
Apparently...
感谢开源的贡献,希望能够支持construct3,
Thanks for all your wonderful jobs, hope support for construct3
I just created an issue in the tools repo, but could not decide where it belongs (tools or dragonbones)....
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:
After that i can create:
and want to use dragonBone instance, but can't:
the same results if importing that way:
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:
2 ways i found for fix, but both are bad in my opinion:
Please help me, how import and use that lib in a proper way. Thanks, and sorry for my bad english.
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.
below code is not working in DragonBonesEvent.ts
this._armatureDisplay.addDBEventListener(dragonBones.EventObject.COMPLETE, this._animationEventHandler, this);
pixi.js 4.3.0 ok!
pixi.js 4.3.1 error!
pixi.js 4.3.2 error!
pixi.js 4.3.3 error!
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?
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.
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.
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.
hi 现在代码里数组的for循环都是for(index in arr){} , 如果我在ie8-的浏览器中给数组的prototype加个indexOf方法,它把数组的indexOf都循环出来然后报错
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:
Let me know if there's anything I can do to help, thank you!
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
Have you guys given up on the JS library?
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.
hi,现在dragonbones.ts是写在一个文件里的,你们开发时应该是分成多个文件开发的吧,能不能把分开的文件传上来呢
请问
DragonBonesJS 的 pixi版本支持 mesh网格变形吗? 是cpu(js)里实现的还是gpu(shader)里实现的呢?
谢谢
看5.3版本新支持二进制格式,性能有大幅度提升,我用的是pixi.js+ db,请问什么时候可以支持呢
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!
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
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:
Do You have any plans to add support for this?
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?
Pixi 版本 4.5.4
在 Dragon Bones Pro 制作的tint和动画, 在pixi中没有效果, 是还没添加这个功能?
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:
libs
in Phaser/Demos
Phaser/2.x/out
in the folder Phaser/Demos/libs/
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?
I think that on this line _frameFloatArray should be a Float32Array rather than Int16Array.
Otherwise the compiler complains about this line:
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?
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.
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
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.
"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]
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
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.
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?
So this one is weird... used to work "as expected" in dragonbones v2.4.
I attach this simple animation arrow_nested.zip
It contains:
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.
:)
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.
疑问:phaser目录下2.x 3.x目录是什么意思?区别是什么?
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 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)
Are there any plans to support Babylon JS?
Thanks
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!
Hi, I'm new with DragonBone but notice that we only have Egret and Pixi support, so is there any plan for CreateJS ?
如果可以的话,希望能添加对phaser支持的SDK。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.