# DragonBones improvments

**URL:** <https://phaser.discourse.group/t/dragonbones-improvments/7673>\
**Category:** Phaser 3\
**Created:** [October 13, 2020, 3:00pm UTC](https://phaser.discourse.group/t/dragonbones-improvments/7673 "2020-10-13T15:00:53Z")\
**Posts on this page:** 11\
**Page:** 2

<div class="post-metadata">

**Author:** ![Maddogmaycry](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@Maddogmaycry](https://phaser.discourse.group/u/Maddogmaycry)\
**Post date:** [January 8, 2023, 9:25am UTC](https://phaser.discourse.group/t/dragonbones-improvments/7673/21 "2023-01-08T09:25:09Z")

</div>

Hmm.  
We have a nice property “panZ”  
this is really strange, but when i inizialise this one as  
`this._renderDisplay.panZ(-this._renderDisplay.height / (2 * Math.tan(Math.PI / 16))+100);`  
then it’s works with normal dragonbones animatoin as espected, but, when animation cycle has some manipulations like SwordsMan in animation #6 has, then we become this behavior with body scaling and something with some special elements (like blue fires on his back).

On this momments i can fix it with a crunch, applying viewPosition object directly on mesh inizialisation step. Something like  
`this._renderDisplay.viewPosition.z = -this._renderDisplay.height / (2 * Math.tan(Math.PI / 16))+100;`  
I don’t sure its correct, and maby i need to come up with another way, but on this moment it’s looks good…

And so, I’ll play a little more with this thing, but it looks like the phaser is getting pretty good support for dragonbones in the face of this plugin.

And this is good my friends 🙂

---

<div class="post-metadata">

**Author:** ![Maddogmaycry](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@Maddogmaycry](https://phaser.discourse.group/u/Maddogmaycry)\
**Post date:** [January 8, 2023, 10:32am UTC](https://phaser.discourse.group/t/dragonbones-improvments/7673/22 "2023-01-08T10:32:07Z")

</div>

UPD  
Found a different 🙂 left: plugin, right: original.  
 ![Безымянный](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/5/5c60ce7c04309cb1e31e6af1369e23e1eae9aacc.png)

---

<div class="post-metadata">

**Author:** ![Maddogmaycry](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@Maddogmaycry](https://phaser.discourse.group/u/Maddogmaycry)\
**Post date:** [January 8, 2023, 1:45pm UTC](https://phaser.discourse.group/t/dragonbones-improvments/7673/23 "2023-01-08T13:45:17Z")

</div>

OK, i found all i need, and it’s seems to be i will fix it all. This time mesh and textures has been fixed, i only need to rebuild bones inversion logic and that’s it. 🙂

 ![Безымянный1](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/0/04b26e9eff70b85ad6753f70812c7da1d17765f3.png)

If bone has negative X or Y properties, then we need to recalculate frame. Hmm… it’s can be in animation or just in a basis armature. Or in in all of it in diffirent combinations 🙂

---

<div class="post-metadata">

**Author:** ![Maddogmaycry](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@Maddogmaycry](https://phaser.discourse.group/u/Maddogmaycry)\
**Post date:** [January 8, 2023, 10:00pm UTC](https://phaser.discourse.group/t/dragonbones-improvments/7673/24 "2023-01-08T22:00:44Z")

</div>

OK, problematic…  
If you change some bone parametr in animation (for example you trying change scale property to mirroring something), then we need detect it in each frame… this is a problem. I can’t see any event or something like this in the code.

And you have to detect all parents too, becuse when we change some parent, all chain going to change it’s self…

---

<div class="post-metadata">

**Author:** ![Maddogmaycry](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@Maddogmaycry](https://phaser.discourse.group/u/Maddogmaycry)\
**Post date:** [January 9, 2023, 1:26pm UTC](https://phaser.discourse.group/t/dragonbones-improvments/7673/25 "2023-01-09T13:26:01Z")

</div>

If you using mirror scaling on bones, in static poses or in animation, then `Bone.prototype._updateGlobalTransformMatrix = function (isCache) {`  
have to be redesigned ☹  
So, this is a bad practic using bone scaling for mirroring your graphical elements at all. But this is a part of DragonBones functionality and it’s have to be implemented. This time i’m not sure i have time for that maby later.

First things is to change this part of this function

```javascript
global.x = origin.x + offset.x + animationPose.x;
global.scaleX = origin.scaleX * offset.scaleX * animationPose.scaleX;
global.scaleY = origin.scaleY * offset.scaleY * animationPose.scaleY;

```

we can catch `this.origin.scaleX<0` for bonesX or Y and then find the right scaling parameters but this is only theory and it’s possible that we have a better way.

 ![Безымянный](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/b/b99f0b948d64294fb702724f27fb37760e124ec0.png)  
As u can see scaleX parameter has negative state (-0.71) and have to be special recalculation for each frame.

---

<div class="post-metadata">

**Author:** ![Maddogmaycry](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@Maddogmaycry](https://phaser.discourse.group/u/Maddogmaycry)\
**Post date:** [January 10, 2023, 11:11am UTC](https://phaser.discourse.group/t/dragonbones-improvments/7673/26 "2023-01-10T11:11:11Z")

</div>

OK, we have to fix this function

```javascript
* - A transform relative to the armature coordinate system.
* @see #updateGlobalTransform()

```

What for problem over there. When we have a bone with negative scaling  
 ![Безымянный](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/d/d1fdce79564a575aa73de34c748b8520db43b2ba.png)  
then we become a wrong calculation in armature coordinate system space.  
 ![Безымянный](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/1/16fc2096ec9d2fa559a00530adcacdc96441afbf.png)

OK, i make a CRUNCH again, and it’s seems to be it’s working. CRUNCH trying to catch negative scaled bones and then does nagative calculation for scaling  
 ![Безымянный](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/3/318a7a8490474eb81d08a820949e05c059ce75f5.png)  
but we need a super hero to implement it correctly 🙂 Maby i take a look on this problem later with a fresh eyes.

Fix for X negative scaled bones

```javascript
if(this.parent.global.scaleX<0){
                            this._renderDisplay.setScale(transform.scaleX * this._textureScale, -transform.scaleY * this._textureScale);
                            return;
                        }

```

But how about parent’s tree… don’t sure it’s a right way  
UPD  
And animation poses… So, let’s wait.

---

<div class="post-metadata">

**Author:** ![Maddogmaycry](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@Maddogmaycry](https://phaser.discourse.group/u/Maddogmaycry)\
**Post date:** [January 11, 2023, 11:20pm UTC](https://phaser.discourse.group/t/dragonbones-improvments/7673/28 "2023-01-11T23:20:26Z")

</div>

UPD 🙂

 ![Безымянный](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/8/810ad5d97541fc9b470158428da9d506f0e5710c.png)  
I think i no wanna go to the next stages 🙂

[Phaser3DragonBonesFixMesh.zip](https://phaser.discourse.group/uploads/short-url/kX9ash1DHQ1mZ81VzKzV6p5YHVa.zip) (7.2 MB)  
It’s have to be FIXED, i just found whats wrong, and installed a crunches to get Scale. Maby later i will found a solutions for some parts but not sure.

Anyway, you can only using this for MESH and normal animation with out negative scaling in animation.

---

<div class="post-metadata">

**Author:** ![Maddogmaycry](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@Maddogmaycry](https://phaser.discourse.group/u/Maddogmaycry)\
**Post date:** [January 12, 2023, 9:41pm UTC](https://phaser.discourse.group/t/dragonbones-improvments/7673/29 "2023-01-12T21:41:52Z")

</div>

3.55.2  
parentContainer.displayList = null… hmm, seems to be something was changed in this version.  
Hmm, in 3.55.2 mesh it’s just a image  
For example - Dragon  
First object is container and scene bellow…

 ![Безымянный](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/d/db42abf6b96084a89fb43fb0bc93cb67143553ca.png)  
 ![Безымянный](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/0/044a62b7b346825f7e66d8708cf3bc8540c593b1.png)  
And this is a 3.5.0beta9  
 ![3.5.0beta9](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/e/e508f7ecb90b83d9eccf65e44ab6762f130b4cda.png)  
So, 5 Mesh’s transformed to images in 3.55.2 on the scene and meshes hidden from scene.

---

<div class="post-metadata">

**Author:** ![Maddogmaycry](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@Maddogmaycry](https://phaser.discourse.group/u/Maddogmaycry)\
**Post date:** [January 13, 2023, 9:07pm UTC](https://phaser.discourse.group/t/dragonbones-improvments/7673/30 "2023-01-13T21:07:53Z")

</div>

Files for @rich (not for use)  
[Phaser3DragonBonesFixMesh.zip](https://phaser.discourse.group/uploads/short-url/qoUW6woxCP30F31yESLZTZ8zo4H.zip) (7.2 MB)

---

<div class="post-metadata">

**Author:** ![Baegus](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/baegus/32/8159_2.png) [@Baegus](https://phaser.discourse.group/u/Baegus)\
**Post date:** [March 22, 2024, 4:27pm UTC](https://phaser.discourse.group/t/dragonbones-improvments/7673/31 "2024-03-22T16:27:14Z")

</div>

Hey man, thank you for all your fixes! Your latest vesrion ( [Phaser3DragonBonesFixMesh.zip](https://phaser.discourse.group/uploads/short-url/kX9ash1DHQ1mZ81VzKzV6p5YHVa.zip)) still seems to be working in Phaser 3.80.1, except for one thing, which is, unfortunately, crucial for my current project:

When I restart a scene (or switch to another one and then come back to the previous one), my armature/mesh disappears completely. It’s actually still there, just invisible. When I call armature.animation.reset(), it actually displays, but once I play my animation, it’s gone again.

I have created a [CodePen example here](https://codepen.io/baegus/pen/eYoWWzL) showing the issue.

It seems to be an issue with caching animation frames. I tried everything I could think of, but I couldn’t make it work.

I’d be extremely thankful for any kind of help!

---

<div class="post-metadata">

**Author:** ![Baegus](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/baegus/32/8159_2.png) [@Baegus](https://phaser.discourse.group/u/Baegus)\
**Post date:** [March 24, 2024, 1:37pm UTC](https://phaser.discourse.group/t/dragonbones-improvments/7673/32 "2024-03-24T13:37:47Z")

</div>

So, I managed to find a workaround for this. The animation doesn’t stop working on scene restart if I remove line 16463:

```javascript
ee.once('shutdown', this.shutdown, this);

```

This probably means that DragonBones will never shutdown, but it doesn’t seem to matter for my use.

If anyone stumbles upon this issue, [here’s my “fixed” version](https://gist.github.com/Baegus/1c5027b98ca8717b1d0e78ba770ba92a).

[Previous page](https://phaser.discourse.group/t/dragonbones-improvments/7673.md?page=1)