How to render a PNG image with transparent pixels using spine-webgl ?

ronvey

I have an image as shown above. When I use the drawTextureRotated function, the transparent areas of the image are always rendered as white. I have tried using new Color(0, 0, 0, 1), and while the transparent areas are rendered correctly, the image itself turns black. Is there a way to render a PNG image with transparent pixels properly? Am I missing any logic?

load png by loadTexture function.
assetManager.loadTexture(url)
then texture = assetManager.require(url)
SceneRenderer.drawTextureRotated(texture, ...args)

Spinebot

To render a PNG image with transparent pixels using spine-webgl, you need to ensure that the transparent areas are handled correctly. Here is a step-by-step guide to achieve this:

Load the PNG Image:

   assetManager.loadTexture("mybackground.png");
   let texture = assetManager.require("mybackground.png");

Render the Image:
In your render() function, you need to ensure that the WebGL context is set up to handle transparency correctly. This involves enabling blending and setting the appropriate blend function.

   function render() {
       // Begin rendering
       canvas.renderer.begin();

       // Enable blending
       let gl = canvas.renderer.context;
       gl.enable(gl.BLEND);
       gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

       // Draw the texture
       canvas.renderer.drawTexture(texture, x, y, width, height);

       // End rendering
       canvas.renderer.end();
   }

Ensure Correct Color Handling:
If you are using drawTextureRotated and facing issues with transparency, make sure that the color parameter is set correctly. You can use new spine.Color(1, 1, 1, 1) to ensure the image is rendered with its original colors and transparency.

   canvas.renderer.drawTextureRotated(texture, x, y, width, height, rotation, new spine.Color(1, 1, 1, 1));

By following these steps, you should be able to render a PNG image with transparent pixels correctly using spine-webgl.

ronvey

Spinebot
Seems like working. Awesome.
let gl = canvas.renderer.context; gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

ronvey

when using color(0,0,0,1).