PixiJs 4.x -> 5.x, textures are shifted and breaks displaying

[alcalyn]

I have a working animation in Pixi.js 4.8 + dragonbones.

I wanted to upgrade to pixi.js 5 and adapter DragonBones/Pixi/5.x.

This breaks all textures.

Broken, Pixi5.0 + DragonBones/Pixi/5.x:

Expected, Pixi4.8 + DragonBones/Pixi/4.x:

Reproducing with jsFiddle

• Bugged, pixi.js 5, Dragonbones/Pixi/5.x: https://jsfiddle.net/xorpu2em/
• Working, pixi.js 4, Dragonbones/Pixi/4.x: https://jsfiddle.net/50x6qmpa/

Both jsfiddles use the same textures.

I tried to reproduce with the example from the official documentation: https://pixijs.io/examples/#/plugin-dragonbones/robot.js by animating it with pixijs 4, but it works for both pixi4 and 5:

• Pixi 5: https://jsfiddle.net/x36ukt48/
• Pixi 4: https://jsfiddle.net/x36ukt48/2/

I checked into diffs between DragonBones/Pixi/4.x / 5.x to see if I could find the difference, but didn't found anything to fix.

Here are my textures and animation data, Front_ske and Front_tex: Front.zip

[JetLua]

Maybe @rtalon83 can help you.

[JetLua]

@ivanpopelyshev Do you have time to check it out? Maybe it has to do with mesh?

[ivanpopelyshev]

Maybe. Mesh textures are different in v5, need to adjust plugins for it. I'll try to make PR today or tomorrow.

[JetLua]

Fixed: https://jsfiddle.net/JetLu/g6854zbh/

if (currentTextureData.rotated) {
  uvs[i] = 1 - v
  uvs[i + 1] = u
} else {
  uvs[i] = u
  uvs[i + 1] = v
}

Replace the code below:

https://github.com/DragonBones/DragonBonesJS/blob/be28ef831bfd91bd1f1353352a7edd946de01c54/Pixi/5.x/src/dragonBones/pixi/PixiSlot.ts#L219-L230

[ivanpopelyshev]

yeah, rotations aren't needed in v5 because pixi does it automagically.

I think we can remove that if completely. I have some time now, ill look

[ivanpopelyshev]

@JetLua im not an expert on that DragonBones code, but it looks like Texture-related code can be simplified seriously.

Here is how it works in spine: https://github.com/pixijs/pixi-spine/blob/master/src/core/Texture.ts#L88

and that's all. If you assign texture with frame/orig/trim to mesh or sprite, pixi will take into account automatically.

I dont even understand why is there only single RenderTexture in this runtime. Maybe using textures with same BaseTexture will be easier here?

[JetLua]

I'm a novice, too.

There are indeed many things to optimize.

[rtalon83]

For me, dragonbones is outdated long time, but people continue using It because is free. I havent time to improve db code, my firts contribution here was very fast and run the firts time.

El dom., 4 ago. 2019 21:48, JetLu notifications@github.com escribió:

I'm a novice, too.

There are indeed many things to optimize.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/DragonBones/DragonBonesJS/issues/112?email_source=notifications&email_token=AC3S7DFRSXBT5AIYXKM43JTQC4XBPA5CNFSM4IFFM45KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3QIM6Y#issuecomment-518030971, or mute the thread https://github.com/notifications/unsubscribe-auth/AC3S7DDUPU45IUIA54UHU3TQC4XBPANCNFSM4IFFM45A .

[alcalyn]

Tried the version from this PR: https://github.com/DragonBones/DragonBonesJS/pull/114 and it works!

For me, dragonbones is outdated long time, but people continue using It because is free.

Actually I'm not using DragonBones Pro software, but just the json format (generated by a Blender plugin) and this Javascript Pixi plugin.

I found that DragonBones was the best solution to create skeleton. Its json format seems to be the most open (compared to Spine) and used, thanks to the work that has be done i.e in Godot or coa_tools blender plugin (https://github.com/ndee85/coa_tools/issues/26).