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!
Kullanıcı avatarı
brettstack
  • Mesajlar: 10

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();
Kullanıcı avatarı
Mario

Mario
  • Mesajlar: 2965

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...
Kullanıcı avatarı
brettstack
  • Mesajlar: 10

SilverStraw

Thanks, Mario. Just what I was looking for.
SilverStraw
  • Mesajlar: 12


Dön Runtimes