• Runtimes

  • [spine-phaser] Some attachments not visible with Phaser.CANVAS

Hello ! 😃

I am testing the spine-phaser runtime and have a little question about the canvas renderer. I tried the basic example provided in the spine-phaser repository, and tried out of curiosity to switch the renderer type from WebGL to Canvas.

When doing so, the example was missing some attachments 😥

With Phaser.CANVAS renderer:

With Phaser.WEBGL renderer:

Am I missing something ? I saw that the Canvas renderer has some limitations (no meshes, tinting or blending modes) but I'm not sure why the spineboy doesn't work here (aside from the unsupported meshes?)

Related Discussions
...

The issue you're encountering with the Phaser Canvas renderer is due to its inherent limitations. The spine-phaser runtime, when using the Phaser Canvas renderer, does not support meshes, tint black, or blend modes. This is why some attachments are missing when you switch from WebGL to Canvas. Specifically, the Canvas renderer cannot handle mesh attachments, which are likely used in the Spineboy example.

For more details, you can refer to the spine-phaser Runtime Documentation and the compatibility notes.

To summarize, the missing attachments are due to the Canvas renderer's lack of support for certain Spine features, particularly meshes. Using the WebGL renderer is recommended for full feature support.

So it looks like it is indeed a limitation with meshes.
With the basic example, I could fix it by forcing triangleRendering on the canvas renderer of the SpinePlugin :
spineboy.plugin.canvasRenderer.triangleRendering = true;

You do not want to use that in production as it is slow and will result in rendering artifacts on some browser engines. If you want to get the full Spine feature set, you must use the WebGL rendering backend.