While single images are often used as source for sprites, for performance reasons, images need to be combined into larger sets of images, called atlases. Combining sets of smaller images into atlases is especially important on mobile devices where memory and processing power is more scarce than on desktop machines or dedicated game consoles.
In Defold, an atlas resource is a list of separate images files, which are automatically combined into a larger image.
Select New... ▸ Atlas from the context menu in the Assets browser. Name the new atlas file. The editor will now open the file in the atlas editor. The atlas properties are shown in the Properties pane so you can edit them (see below for details).
You need to populate an atlas with images or animations before you can use it as a graphics source for object components like Sprites and ParticleFX components.
Make sure that you have added your images to the project (drag and drop image files to the right location in the Assets browser)
Select Add Images from the pop up context menu to add single images.
A dialog opens from which you can find and select the images you want to add to the Atlas. Note that you can filter the image files and select multiple files at once.
The added images are listed in the Outline and the full atlas can be seen in the center editor view. You may need to press F (View ▸ Frame Selection from the menu) to reframe the selection.
Select Add Animation Group from the pop up context menu to create a flipbook animation group.
A new, empty, animation group with a default name (“New Animation”) is added to the atlas.
Right click then new group and select Add Images from the context menu.
A dialog opens from which you can find and select the images you want to add to the animation group.
Press Space with the animation group selected to preview it. Adjust the Properties for the animation as needed (see below).
You can reorder the images in the Outline by selecting them and pressing Alt + Up/down. You can also easily create duplicates by copying and pasting images in the outline (From the Edit menu, the right click context menu or keyboard shortcuts).
Each atlas resource has a set of properties. These are shown in the Properties pane when you select the root item in the Outline view.
Here are examples of the different property settings with four square images of size 64x64 added to an atlas. Notice how the atlas jumps to 256x256 as soon as the images won’t fit 128x128, resulting in much wasted texture space.
In addition to the list of images that are part of an animation group, a set of properties are available:
Nonedoes not play back at all, the first image is displayed.
Once Forwardplays the animation one time from the first to the last image.
Once Backwardplays the animation one time from the last to the first image.
Once Ping Pongplays the animation one time from the first to the last image and then back to the first image.
Loop Forwardplays the animation repeatedly from the first to the last image.
Loop Backwardplays the animation repeatedly from the last to the first image.
Loop Ping Pongplays the animation repeatedly from the first to the last image and then back to the first image.
Did you spot an error or do you have a suggestion? Please let us know on GitHub!GITHUB