dynamic_texture_atlas_quickstart_add_image_get_uv_coords.ts

1import { Atlas, AtlasManager } from 'dynamic-texture-atlas';
2
3// Create a new Atlas Manager with a specified size (width, height)
4const manager = new AtlasManager(1024, 1024);
5
6// Create or get an atlas from the manager
7const atlas: Atlas = manager.getAtlas('default');
8
9// Load an image element (HTMLImageElement or HTMLCanvasElement)
10const img = new Image();
11img.src = 'path/to/your/image.png';
12
13img.onload = () => {
14  // Add the image to the atlas
15  // 'myIcon' is the unique identifier for this texture
16  const region = atlas.add('myIcon', img);
17
18  if (region) {
19    // Successfully added to the atlas
20    // region.uvs contains the [u0, v0, u1, v1] coordinates
21    console.log('Texture added at UVs:', region.uvs);
22    
23    // The canvas property of the atlas holds the actual combined texture
24    const atlasCanvas = atlas.canvas;
25    document.body.appendChild(atlasCanvas);
26  } else {
27    console.error('Failed to add image: Atlas might be full');
28  }
29};