[Solved] Wrong animation on canvas mode

cocos2d-x JavaScript
#1

left image is proper animation on WebGL, right image is wrong animation on canvas.

It uses same Armature file from CocoStudio.

Is there any issue about canvas mode rendering cannot supports?

best regards,

#2

@pandamicro Is there any feedback? :frowning:

#3

Can you attach the armature file so that we can test it ?

#4

File attached :slight_smile:

monster.zip (16.7 KB)

#5

We will test it on monday

#6

Thank you!

#7

@pandamicro Is there any progression? :smile:

Best regards,

#8

Yes, we are fixing it, I will check the progression tomorrow morning

#9

@pandamicro I’m waiting for your reply :smile:

#10

Hi, @gr8tact

Sorry for keeping you waiting, we have a conclusion now. The thing is that in your animation, there is a rotation on x axis which can not be supported on Canvas. On canvas, we simply rotate the two axis together. That’s why you are facing this problem. My suggestion is that you can change your rotation animation to skew animation so that it can be displayed correctly in both Canvas and WebGL

#11

@pandamicro OK! Thanks!!

#12

@pandamicro One more question!

How can I make skew animation on AnimationEditor or Flash?

#13

I’m not familiar with AnimationEditor or Flash, sorry that I couldn’t be more helpful

#14

@pandamicro I fixed this bug.

In core/renderer/rendererCanvas.js

all of the transform must be

    context.transform(t.a, -t.b, -t.c, t.d, t.tx * scaleX, -t.ty * scaleY);

not

    context.transform(t.a, t.c, t.b, t.d, t.tx * scaleX, -t.ty * scaleY);

This worked for me. And no side effects so far.

On my inspection, armature’s animation data cannot have rotation along 3rd axis :frowning: