Esoteric Software

[brettstack]

Hey team,

How do I add a static background image to my renderer WebGL Canvas? Currently, I just have a transparent background rendering over a <div> with a background. This works, but I'd like to be able to save the canvas Data URI, right-click save image, etc. and have it include the background.

Thanks!

[Mario]

Assuming you use spine-webgl directly like illustrated here:
https://github.com/EsotericSoftware/spine-runtimes/blob/4.0/spine-ts/spine-webgl/example/barebones.html

You can load your background image in loadAssets via:

canvas.assetManager.loadTexture("mybackground.png");

You can then fetch the image texture in initialize() via:

backgroundImage = canvas.assetManger.require("mybackground.png");

And finally, in render(), you can draw the background image as the first thing each frame via:

canvas.renderer.begin();
canvas.renderer.drawTexture(background, x, y, width, height);
// rest of your rendering code
canvas.renderer.end();

[brettstack]

Thank you so much! Going to try this out today. I'm glad I asked here before going down the route of writing custom WebGL Shader logic...

[SilverStraw]

Thanks, Mario. Just what I was looking for.