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.
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.
Finally, to place an animated Game Object within the game, the following steps are required:
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.
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.
-- Lua Script Property Animation Example
go.animate('.', "position.y", go.PLAYBACK_LOOP_PINGPONG, 200, go.EASING_INBOUNCE, 2)
Finally, this new script must be added to the Wheel Game Object….using the following steps:
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:
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:
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