Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

Pixelbox

Create 2D games in JavaScript, made easier · By Cedric Stoquer

How do I use sprite atlases?

A topic by Futura created Apr 17, 2020 Views: 327 Replies: 6
Viewing posts 1 to 3

How would I go about drawing a sprite from a sprite atlas?

Well technically you could use a tilesheet as a sprite atlas...

Pixelbox can pack images in a spritesheet for you. If you have sprites as separate images, put theses in a same folder inside 'assets'. Then, in the assets editor, right click on this folder and click "set as atlas":


If you want to reuse an atlas created by another software, you can have a look at the Sprite class in the engine. You'll have to convert your atlas data into Sprite instances. Then, you should be able to draw these sprites like normal images:

draw(mySprite, x, y)

Thanks!

My understanding is that an image would be generated that includes all the images from the parent folder marked as an atlas. When building an archive or running the game however, I don't see any such image being generated. Could you explain how this should work please? I assume this is just an optinization allowing fewer requests for images in the browser since you can access those images without them being in an atlas. 

Atlases are generated in a special folder: assets/.atlas/ (this folder might be hidden by your OS)

This optimize assets request to make the game load faster. It also optimize WebGL rendering by allowing consecutive draw calls from the same atlas to be batched together.

Thanks, I see the file now. That makes sense about WebGL rendering. It'd be great to have a page that mentioned all these hidden features.