This demo load multiple textures and generate a Texture Atlas Asset from them at runtime.
If not all textures can fit in a single texture atlas, it will generate multiple textures instead.
In this demo we limit the atlas textures size to 512x512, so we'll get more than one texture. Without providing a size limit it will create textures as big as WebGL allows us.
On the left side of the canvas you'll see the generated atlas textures. On the right we'll extract a random image from the atlas and render it, just to show how to use the atlas.
The following code generate and uses a texture atlas.
// create a texture atlas without size limit
let textureAtlas = await Shaku.assets.createTextureAtlas('texture-atlas',
[
'assets/stone_wall.png',
'assets/sprite.png',
'assets/sprite-sm.png',
'assets/skelly.png',
'assets/level_block.jpg',
'assets/orcy.png',
'assets/lava.png',
'assets/baum.png',
'assets/overlay.png',
'assets/tilemap.png',
'assets/fishy/skeleton_icon.png',
'assets/fishy/seaweed.png',
'assets/fishy/bubble.png',
'assets/fishy/eye.png',
'assets/colors.png',
]);
// get texture from atlas
// texture asset will be under textureInAtlas.texture
// source rectangle in texture will be under textureInAtlas.sourceRectangle
let textureInAtlas = textureAtlas.getTexture('assets/stone_wall.png');
// we can draw a texture-in-atlas directly and it will set source rectangle automatically.
// if we provide a source rectangle, it will be adjusted to the top-left corner of the texture source rectangle in texture atlas.
let size = textureInAtlas.sourceRectangle.getSize();
spritesBatch.begin();
spritesBatch.drawQuad(textureInAtlas, new Shaku.utils.Vector2(250, 250), size);
spritesBatch.end();
// or, you can use the internal texture and source rectangle manually.
// with this method the source rectangle won't be adjusted.
let size = textureInAtlas.sourceRectangle.getSize();
spritesBatch.begin();
spritesBatch.drawQuad(textureInAtlas.texture, new Shaku.utils.Vector2(250, 250), size, textureInAtlas.sourceRectangle);
spritesBatch.end();