2 – Defold Image Procedures – Part II

As a continuation of our Defold Image Processing tutorial which was started in Part I, this post will explain procedures for: (1) implementing a Sprite Flipbook to support image animation, (2) using script to move a Sprite around the game window and (3) incorporating property animation to modify game object position.


Implementing a Sprite Flipbook


Adding Animations to the Atlas

The Defold Sprite FlipBook is essentially the mechanism for processing animations on a spritesheet — but using a set of Atlas image files as the source. For this example, I am going to add a series of animations to the Atlas we created in Part I. During the Part I of this tutorial, we added the individual sprite animation images to the image folder within the Project Explorer — your images folder should look like the following:


At this point, place the Outline window focus on the entities.atlas.   By right-clicking the ‘Atlas’ heading within the Outline window, select the ‘Add Animation Group’ option.  Within the Properties window, I’ve renamed the animation group to ‘jumpAnimation’.



By right-clicking on the ‘jumpAnimation’ element, I can now ‘Add Images’ to this Animation Group.  From the images folder, add all the Jump_000.png through Jump_009.png files to the jumpAnimation Animation Group.


Double-click ‘entities.atlas’ in the project folder to see the current contents of the atlas….it should look similar to the following:

Note:  There is a risk that you will experience a visual artifact called edge bleeding if a neighboring image within the Atlas has colored pixels on its edge, their color might bleed over at the edges. The easiest way to fix this problem is to set the Extrude Border property.   I have set the ‘Extrude Borders’ parameter (in the Properties Window for the atlas) to 2.  This prevents any potential edge bleeding.


Placing an Animated GameObject into the Game

Finally, to place an animated Game Object within the game, the following steps are required:

  • Put focus within the Outline Window onto the gameEntities.collection by double-clicking gameEntities.collection within the Project Explorer;
  • Create a new Game Object within gameEntities.collection by right-clicking ‘collection’ — and I changed the id of this Game Object to ‘jumper’ within the Property Window;
  • I’ve added a Sprite to the jumper Game Object within the Outline window by right-clicking the jumper Game Object and selecting ‘Add Component | Sprite’ ;
  • I’ve changed to id of this new Sprite (in the Properties Window) to ‘jumpingGO’.
  • Within the Property Window for jumpingGO, I’ve pointed the Image source to the entities.atlas and have set the Default Animation to ‘jumpAnimation’.


The following Outline highlights the end result of these actions:


Using the Scene Editor, I’ve moved the three Game Objects on the screen to ensure all are visible.

Save All.   Let’s build the application to see what it does so far.   As seen below, the Game Object on the right is ‘jumper’…which illustrates the animation feature.


Active Defold Application — Flipbook Animation is being displayed.




Game Object Animations


Adding a Property Animation to the Project

The next extension to this short application will be adding Property Animation to the Wheel Game Object.   The initial step will be to add a Lua Script File to the project.  This can be done by right-clicking the ‘main’ folder within the Project Explorer, and selecting the ‘script’ option as shown below.



Once ‘script’ is selected, Defold will ask to name the script, I’ve named it ‘wheel_script’ for this example


The default script template will appear in the Scene Editor as shown below:


This default template can be deleted and replaced with the following script.


Finally, this new script must be added to the Wheel Game Object….using the following steps:

  • Double-click ‘gameEntities.collection’ in the Project Explorer;
  • In the Outline window, right-click the ‘cartoonWheel’ game object;
  • Select the ‘Add Component File’ option and pick the wheel_script.script entry

At this point, the ‘cartoonWheel’ game object now consists of two components: (1) a sprite, which includes the image, and (2) a Lua script — as highlighted below:


A quick explanation of the script:

  • An ‘init()’ function within a Game Object script file begins to execute immediately when a Game Object is instantiated, in this case upon the start of the application.


go.animate(url, property, playback, to, easing, duration, [delay], [complete_function]

  • The first parameter (url) is a reference to the game object, in Defold, ‘.’ refers to the self;
  • The second parameter is the property identifier of what will be animated, in this case the wheel’s y-position;
  • The third parameter provides the playback mode – in this case, we’re using a PingPong mode (the animation runs forward, and then backward).
  • The ‘to’ parameter is the target property value, in this case – a y-position of 200;
  • The ‘easing’ parameter defines how the animated value will change over time.  This is explained in detail within the Defold Animation Manual.
  • Lastly, there is a two-second delay prior to the animation beginning.


Here’s the current app output after we add this script — (1) a stationary cartoon character, (2) a FlipBook Animation of a cartoon jumper, and (3) a property animation of a cartoon wheel.  The following iframe provides an inline working version which highlights the Defold features discussed in this post:


Active Defold Application — Animation Techniques being displayed!



To close out this 2nd Tutorial, I have included the full project within a zipfile which can be downloaded by pressing the following button.




Appreciation to gameart2d.com — a great source for 2d graphics.  The images in this tutorial’s examples are the Temple  Run Free 2d Sprites.


Return to Introductory Tutorials