For this Defold Tutorial, I’d like to work through some capabilities that are similar to those found in many casual games, to include:
- Incorporation of Collision Objects with our Defold Game Objects as a basis for modeling the physical impacts of the effects of gravity – weight, friction and restitution (bounce);
- Placement of Boundaries to constrain Game Objects to the ‘world’;
- Leveraging the on_input feature of Defold to control cursor/game object spawning actions.
- Use of the Factory Component to a Game Object as the means for creating new game objects consistent with a Prototype at user selected locations;
- Animated surfaces affecting collision effects;
- Script logic driven deletion of a Game Object, and
- Inclusion of an explosion effect upon deleting a Game Object.
The end result of this tutorial is shown in the following advanced iframe. It’s not even close to a true game at this point, but (hopefully) it does highlight some key features that many games might include. To highlight these features, click the mouse button (or touch) anywhere within the game area and the application will create a wooden box game object, which then starts to fall based on 2d Physics.
Active Defold Application
Click anywhere on the following screen to spawn a new box!
Please note — I have intentionally retained some of my debugging messages (e.g., cursor/game object positions, etc.)….primarily to illustrate how I’m using them in the development of these examples. They’re easily deleted when the project is release ready. So…let’s walk through the steps required to develop this Defold Project.
Initial Defold Project Setup
Modify game.project Parameters
We’ll start by using the Defold Initial Template which was introduced within Tutorial #1. Our first step will be to modify the game.project file to reflect the new Title, bootstrap collection and display resolution associated with this project. I’ve decided to stay with the 1024px width/768px height screen size, in that it reflects the aspect ratio used on an iPad – while fitting with the iFrame I’m using on this website. In future tutorials, I’ll experiment with sizing/scaling features to illustrate how to best accommodate other popular screen resolutions. The following screenshot shows the project settings I’ve used for this example, within the game.project file.
Create Input Bindings for Left Mouse Button
The next step will be to configure the game.input.binding file (located within the input folder within the Project Explorer). Within the Mouse Triggers section, click the ‘+’ button and add a binding for the ‘mouse-button-1’ trigger – setting it to a ‘touch’ action. Once complete, your game.input.binding file should look like the following:
Building the Project Atlas
Upload Image (.png) Files to the Project
With basic project configurations applied to the game.project and game.input.binding files, we’re ready to start building the atlas. Here are the .png image files to be used within this project — to include (1) a paper texture as the background, (2) a bottom image which will represent the floor of a stage, (3) several box/crate images and (4) as set of smoke images which will serve as the basis of an explosion animation.
Attribution — many thanks for the ability to use the free graphic resources provided from the following sources:
Each of these sites is a great resource for 2d art assets – I highly recommend them.
You can download a zipfile containing these images by clicking the following ‘Download Now’ button.
Drag and drop each of these .png files into the images folder within the Project Explorer as highlighted below:
Construct an Atlas
As described in Tutorial #4, we need to construct an Atlas which contains each of these images. When adding images to a Defold Atlas, there are two general categories to keep in mind: (1) standalone images, similar to our background, and (2) images that are part of an animation.
Just to repeat how we did it in that tutorial, first right-click the ‘main’ folder shown on the Project Explorer: select ‘New’ | select ‘Atlas | name the Atlas as ‘graphics’. Now double-click this newly created Atlas in order to put it into focus within the Outline Window. Right-Click ‘Atlas’ in the Outline Window | select ‘Add Images’ . At this point, select those images which are not part of any animation, as shown below.
Add an Animation Group to the Atlas
Next, we can create within the Atlas an animation which will reflect an explosion. With focus on the Atlas within the Outline Window, right-click ‘Atlas’ | Add ‘Animation Group’. A ‘New Animation’ will appear at the bottom of the Atlas outline; you can change the name of it in the Properties Window just below it (I’ve changed it to ‘explosion’). I’ve also changed the Frames-Per-Second rate for this animation to 10 — given the number of frames we’ll be adding to this Group. I’ve also set the Playback to ‘OnceForward’ — since we’ll only want the animation to play once for each time an explosion occurs.
You can now add images to this Animation Group by: right-clicking ‘explosion’ | select ‘Add Images’ | identify the ten frames related to this activity. Once complete, the Atlas should look like the following:
A final set in setting up the Atlas — as described in a previous tutorial: We want to avoid any “edge bleeding” — where the edge pixels of neighboring pixels in the Atlas bleed into the image. We’ll do this by setting the Extrude Borders value to 1 in the Atlas Properties Window.
Adding a Background Game Object
Now we can start adding Game Objects and Game Components to our project. Adding a background is pretty straight-forward. Double-click ‘main.collection’ in our Project Explorer to put it into focus in the Outline Window. In the Outline Window, right-click ‘Collection’ | select ‘Add Game Object’. In the Properties Window, rename the Game Object as ‘background’…..we’ll also want to edit the Game Object’s position within the Properties Window to ensure the background is centered within the Project Window: x = 512 and y=384. Finally, right-click ‘background’ | select ‘Add Component’ | select ‘Sprite’. Once this sprite has been added as a Component to the Background Game Object, within the Properties Window ‘Image’ bar, select ‘graphics.atlas’ as the image resource and ‘paper_1024x768’ as the Default Animation using the drop-down menu features of the Property Window.
Placement of a Moving Platform
I thought it would be interesting to add a set of raised platforms, which move back and forth — as a means to better understand the impact they would have on boxes dropping due to gravity. As illustrated below, the stage is divided into two parts — one of which moves from the center to the left, the other from center to the right. To enable some future extensibility, I constructed each side of this platform using four Game Objects: (1) bottom_1 and bottom_2 on the left, (2) bottom_3 and bottom_4 on the right. In the final project, crates will be spawned anywhere within the play world, and will fall based on gravity — hitting either the platform and/or the floor.
Create a GameObject within the ‘Platform’ – bottom_1
Each of the platform Game Objects consists of three components: (1) a sprite, to include an image, (2) a collisionobject, which will control the physics based impacts of a crate colliding with the platform, and a script file to contain required game logic.
With ‘main.collection’ in focus within the Outline Window, add a new Game Object to the project: right-click ‘Collection’ | select ‘Add Game Object’ | in the Properties Window, name this GO as ‘bottom_1’. Add a Sprite to this Game Object by right-clicking ‘bottom_1’ | select ‘Add Component’ | select ‘Sprite’. Within the Properties window for this new sprite, identify the Image Resource ‘graphics.atlas’…and select the Default Animation to be: ‘bottom1’. Within the Outline and Properties windows, main.collection should look similar to the following.
Add a Collision Object to the Platform GameObject: bottom_1
Now we’re going to add a Collision Object to the bottom_1 Game Object. As described within the Defold Documentation, a collision object is a component you use to extend a game object with physical behavior. A collision object has different physical properties (like weight, restitution and friction) and its spatial extension is defined by one or more shapes that you attach to the component. Defold supports the following types of collision objects:
Static objects — These do not react in themselves, but any other object that collides with static objects will react. These are very useful (and cheap performance-wise) for building level geometry (i.e. ground and walls) that does not move. You cannot move or otherwise change static objects.
Dynamic objects — The physics engine solves all collisions for you and applies resulting forces. These are good for objects that should behave realistically, with the caveat that the only way you can manually control them is by applying forces to them.
Kinematic objects — These types of objects will collide with other physics objects, but the job of resolving the collisions (or ignoring them) is yours. Kinematic objects are good when you need objects that collide and you want fine grained control over all reactions.
Triggers — Triggers are objects that register simple collisions. These are good for game logic where you want some event to happen when some other object (i.e. the player character) reaches a specific spot.
For this project, we’ll be using a Kinematic type for the platform. To do this within the Outline Window (with main.collection in focus), right-click ‘bottom_1’ | select ‘Add Component’ | select ‘Collision Object’. Click on the newly created collisionobject and change its properties as follows:
To incorporate the shape for which collisions are to be determined associated with this Game Object, a shape needs to be added to the collision object. We can do this by: clicking ‘collisionobject’ | selecting ‘Add Shape’ | selecting ‘box’. We’ll set the dimensions of this box within its Properties Window as follows:
Add a Lua Script to the Platform GameObject – bottomLeft.script
The final step in creating all the components of the ‘bottom_1’ Game Object is to add a script file. Within the Project Explorer, right-click ‘main’ | select ‘New’ | select ‘Script’; I’ve changed the name of this script to: ‘bottomLeft’. I’ve replaced the default script content with the following.
-- Initiates an animation of the left side of the stage
local xPos = go.get_position().x
go.animate('.', "position.x", go.PLAYBACK_LOOP_PINGPONG, xPos - 100, go.EASING_LINEAR, 5)
The ‘go.animate’ function call will move the x position of this Game Object to the left by 100 pixels and then return to center every 5 seconds.
Create GameObjects for the rest of the Platform – bottom_2 / bottom_3 / bottom_4
The ‘bottom_2’ Game Object is created using the same approach as just described for ‘bottom_1’.
The ‘bottom_3’ and ‘bottom_4’ Game Objects are also created using the same approach, however, they will use the following script file which moves them to the right.
-- Initiates an animation of the right side of the stage
local xPos = go.get_position().x
go.animate('.', "position.x", go.PLAYBACK_LOOP_PINGPONG, xPos + 100, go.EASING_LINEAR, 5)
The final step in creating the platform is to position each of these Game Objects to line them appropriately on the screen. I’ve used the following positions, which are set in the Properties Window for Game Objects: ‘bottom_1’, ‘bottom_2’, ‘bottom_3’ and ‘bottom_4’.
[table id=1 /]
Adding a static Floor and Sides to the Game World
We want to add two features that are common to many games: (1) we want to establish walls on the left and right side of the screen, so that any crates being dropped remain within the game world, and (2) we’ll need to establish a floor, as a bottom to the game world.
Adding a Floor to the Project
The procedure for creating a game floor begins with adding a game object — double-click ‘main.collection’ within the Project Explorer to place it in focus within the Outline Window | right-click ‘collection’ | select ‘Add Game Object’. I’ve named this Game Object as ‘floorBoundary’. Within the properties window, set the x-position to 512 and the y-position to -15. This will locate the GO – centered at the bottom of the screen.
Within the Outline Window, let’s add a Collision Object by: right-clicking ‘floorBoundary’ | selecting ‘Add Game Component’ | select ‘Collision Object’…..we’ll add a box shape to this collision object by: right-clicking ‘collisionobject’ | select ‘Add Shape’ | select ‘Box’….and set it’s properties as follows.
Finally, we’ll need to add a short script to the floor, to capture it’s id to a global variable (floorID) — that’ll be used as a basis for only deleting crates that hit the floor (and not the sides, the raised platform or other crates).
-- Add initialization code here
floorID = go.get_id()
Adding a Left & Right Side to the Project
The process for adding these sides is relatively simple – we’ll create two Game Objects within main.collection – one for each side, adding a Collision Object to each, using a Box Shape.
Double-click ‘main.collection’ within the Project Explorer to place it in focus within the Outline Window | right-click ‘collection’ | select ‘Add Game Object’. I’ve named the first of these Game Objects as ‘leftBoundary’. Similarly, add another Game Object named ‘rightBoundary’. Within the properties window, set the the positions for these Game Objects as follows:
[table id=2 /]
Within the Outline Window, let’s add a Collision Object by: right-clicking ‘leftBoundary’ | selecting ‘Add Game Component’ | select ‘Collision Object’…..we’ll add a box shape to this collision object by: right-clicking ‘collisionobject’ | select ‘Add Shape’ | select ‘Box’. Set the Dimensions of ‘box’ to x: 20 and y: 768. Now you can add a collisionobject to the rightBoundary with the same shape and box dimensions.
Now we’re ready to create the real core of this project. In the next Tutorial, we’ll extend the Defold elements described here to complete the example shown at the top of this posting.
Return to Introductory Tutorials