Frame rate too low

[Luncher]

Hi man, I have some questions to ask you, you use the animation on your phone will feel a low frame rate it? You have done and the official spine js runtime contrast it? About optimization you have any suggestions?

[flyover]

If the phone doesn't support the WebGL context, it will render using the Canvas2D context. This can be much slower, especially if the animation includes meshes. Can you provide an example and a spec for the phone you are using?

[Luncher]

case 'region':          
var bone = spine_pose.bones[slot.bone_key];             
ctxApplySpace(ctx, bone.world_space);           
ctxApplySpace(ctx, attachment.local_space);             
ctxApplyAtlasSitePosition(ctx, site);           
ctx.scale(attachment.width/2, attachment.height/2);             
ctxDrawImageMesh(ctx, render.region_vertex_triangle, render.region_vertex_position, render.region_vertex_texcoord, image, site, page);          
break;

When I did not use mesh function, the picture is packed with texturepacker before. Every big picture when rendering are drawn once (ctx.drawImage (image, 0, 0);). This position can not optimize?

[flyover]

Yes, this could be simplified to a call to ctx.drawImage, provided an atlas is not being used or an atlas site without rotation is being used. I left it this way, since it supports the most cases. Thanks for the feedback.

[Luncher]

I directly replace ctxDrawImageMesh into drawImage can it? Thank you, I went to try.

[flyover]

In the region draw case, you would nee to replace this:

            ctxDrawImageMesh(ctx, render.region_vertex_triangle, render.region_vertex_position, render.region_vertex_texcoord, image, site, page);

with this:

            if (site)
            {
                if (site.rotate)
                {
                    ctxDrawImageMesh(ctx, render.region_vertex_triangle, render.region_vertex_position, render.region_vertex_texcoord, image, site, page);
                }
                else
                {
                    ctx.scale(1, -1);
                    ctx.drawImage(image, site.x, site.y, site.w, site.h, -1, -1, 2, 2);
                }
            }
            else
            {
                ctx.scale(1, -1);
                ctx.drawImage(image, -1, -1, 2, 2);
            }

[Luncher]

We can not only convert a small map it? Rather than make a bigger change it? That is the ctxDrawImageMesh optimize it. I think this will greatly improve efficiency. thanks~~