How to use the atlas file?

Hi guys! I found this card deck with the corresponding atlas file. How can I use this data to create separat card meshes?

Find nothing about in the documentation
https://doc.babylonjs.com/how_to/tiled

As far as I know there is no Babylon.js direct method of loading and reading a .atlas file. However you should be able to use Javascript to load the file and access the image and data. Once you know the relative position of a card and a back in the image then you can use Apply Different Material to Front and Back - Babylon.js Documentation

For example the 3 of diamonds has the data

diamonds
  rotate: false
  xy: 2, 2
  size: 200, 277
  orig: 200, 277
  offset: 0, 0
  index: 3

file size is

size: 2048,2048

the v of a uv is measure upwards and not downward so

var frontUVs = new BABYLON.Vector4(2 / 2048, (2048 - 279) / 2048, 202 / 2048,  (2048 - 2) / 2048 );

You could adjust 1 or -1 pixel if necessary for margins.

3 Likes

Also if you just want to use as a texture, relying on texture.uScale and uOffset (plus the v prefixed ones) should help.

2 Likes