2 – Defold Image Procedures – Part I

Understanding how to manipulate images within any game engine certainly fall high on the list of priorities.   I’m going to be focusing on several aspects of image related processes using the Defold Game Engine — split between two postings:

Part I:

  • An overview of the Defold Building Blocks (Collections, Game Objects and Game Components);
  • Adding images to a Defold project, and use the Atlas feature;
  • Creating a Defold collection, adding Game Objects;

Part II:

  • Implementing Sprite Flipbooks as a means for animating sprite behaviour;
  • Moving a Game Object within the game window; and
  • Building a Game Object animation – focused on GO properties (e.g., the Alpha Property)


Building Blocks.


Collections of Game Objects

Defold implements a hierarchical structure for all game objects within a project — providing an object orientation which reduces dependencies between Game Objects, Code Modules or Components.  Basically, this structure reduces tight coupling and therefore improves overall program quality (and substantively reduces many common sources of bugs within the game).   Details of this approach are provided within the Defold online documentation under Building Blocks.   For this tutorial, we are going to create a couple in-place instances of a game object, which will consist of both a sprite and a source code component.   These game objects will be placed within a collection.

Game Objects (GO) are the fundamental element for building games.  A Game Object is essentially a container for the characteristics of an entity within your game.  For example, a Game Object can contain a sprite, a Lua Script File, and/or a Sound File.  The following diagram pulled from Defold’s Documentation illustrates the relationship between Collection, Game Object and Components within a Defold Project.

Our next step will be to add to our project all the components needed to create a simple Defold application highlighting Game Object movement.  The first step is to add some images to the project.


Adding Images to Project.

Download Images and Add to Project

Adding images and creating an Atlas file is a very simple process.  You can import the selected images by dragging and dropping them from a folder on your PC/Mac onto a folder (e.g., ‘images’)  within the Defold Project, within the Editor’s Project Explorer.  Images for this tutorial are provided within a zipfile which you can download by clicking the following button.



Once images have been added to the project, you can create a new Atlas file as highlighted within the following illustration.    The use of this Atlas feature essentially combines all selected images into a single file as a means for saving space and improving overall game performance.


Once the Atlas has been created within the Project Explorer, you can double-click on it within the Explorer window to bring it into focus within the Outline window on the right hand side of the Defold Editor.  I’ve changed the name of this atlas to ‘entities.atlas’.  After that, you can then add the image files to the Atlas by right-clicking the Atlas within the Defold Outline window as shown below and selecting the desired images from the popup dialog.

Additional information related to Defold’s handling of graphic files is provided within their 2d Graphics Manual.


Create a Defold Collection containing two Game Objects.

Create a Defold Collection for the Project

A Collection is Defold’s tree structure for holding Game Objects.  For this simple example, we are going to create a collection of game objects which will include a cartoon character and a wheel.  Creating this new collection is accomplished by right-clicking the main folder within the Defold Project Explorer | Selecting the New Option | Selecting Collection from the list.  A dialog box will ask for a name for this new collection, for this example, I’m using the name: ‘gameEntities’.



Add a GameObject to the Collection

Once the gameEntities collection is created within the Project Folder, you can double-click it to bring this new collection into focus within the Defold Outline window.  Right-Clicking ‘Collection’ within the Outline window enables you to select ‘Add Game Object’.


After you select ‘Add Game Object’, you can modify the id of this Game Object within the Properties Window (bottom right of Editor screen).  I’ve named this first Game Object as ‘cartoonCharacter’.


Add a Second GameObject to the Collection

I will repeat this process to add a second Game Object to the collection – with the id: cartoonWheel.  Once both Game Objects are created, the next step is to add a Sprite Component to each.  As illustrated in the following screenshot, the developer right-clicks a Game Object within the Outline window of the editor | selects the ‘Add Component’ option | Sprite.

At this point, the properties window needs to be updated with the name of the atlas that the image is located within…and the name of the image.

Click the ellipsis next to the Image field and a window will open enabling you to select the atlas where you uploaded the images for this project (entities.atlas).


I can now select the image resource that I want to associate with this sprite by: Selecting the entities.atlas as the image source, then selecting ‘wheel’ under the Default Animation property  as illustrated below.


I now perform a similar process for the cartoonCharacter Game Object: Add a Sprite Component | Rename the Sprite id to ‘character’ | Select the entities.atlas as the image source | Select the ‘character’ default animation as the element of the Atlas to use for this sprite.

Finally, I need to add this new gameEntities.collection to the main.collection of the game.  This is accomplished by double-clicking main.collection within the Project Explorer | Right-Clicking ‘Collection’ within the Outline window | Selecting ‘Add Collection File’ from the pull-down options, and | Selecting gameEntities.collection from the available elements.

With the Outline focus on main.collection – I can expand the collection by double-clicking ‘collection’, and selecting a game object.  A blue rectangle will appear within the Scene Editor (cartoonWheel in the following illustration) and I can move the Game Object around by dragging the yellow control box.


At this point, save the project under the ‘File’ menu item and build the project under the ‘Project’ menu item.  The current game will appear in a separate window, consistent with the game dimensions you indicated within the game.project file.

It’s now time to move onto Part II of this image process tutorial for Defold.


Return to Introductory Tutorials