You’d use the whole spritesheet as the image for the texture, and adjust the offsets/scalings on the fly. You can calculate the scaling by dividing the width (or height, whatever is significant) of the whole sheet by the desired width of the single sprite. The offset you get by dividing the offset of the sprite in x/y pixels by the width/height of the whole sheet.
Of course if you need multiple sprites at once, you need multiple texture objects. You can just call
.clone on them.
If I’m not mistaken there used to be an example/PG of that in the docs, but I can’t find it any more.
The only way you could do this (that I can think of) is taking a screenshot of a canvas (doesn’t have to be a babylon canvas, can be Pixi or vanilla JS) and then making an
HTMLImageElement from that (see the StackOverflow link). Maybe someone else has a better idea…
Actually if you set it all up in the beginning, the performance won’t be half bad. Only if you want to change the sprites you traverse half the browser’s lines of C++ each time. Another option is to cache all the
HTMLImageElements. Do you just want to load everything beforehand in one big file, or do you want to do animations etc.?
For GUI icons this would be a great feature actually. I think I would use it too.