Creating a Game Level

So, we now know our way around the editor window, have imported some assets to work with and created a texture atlas so we can actually use them in the Defold engine. Now it’s time to get down to actually creating a game level.

Make sure that main.collection is open and the active tab in the editor. In the outline view, locate the root value Collection. Right-click and select Add Game Object.

Creating a game level tutorial in Defold

Game Objects are the core of any Defold engine game, these are the things that make up your game, things like background art, player models, enemies, power-ups, etc. On its own, a Game Object is pretty boring… it has positional data, a name/id, and a URL and that’s about it.

Properties Defold Screenshot

The key thing about game objects is that they contain other things. Select things one, change the id to background. Now right-click the newly renamed background in the Outline window, and select Add Component->Sprite.

Adding a Sprite Component in Defold

A Sprite is quite simply an image drawn on screen. In Defold this could be anything from a coin the player picks up, to the animated player themselves. In this case, we are populating a background image for our game.

Collection - Sprite Menu in Defold - Screenshot

You will notice that the sprite component is a leaf under background, which in turn is under Collection in the Outline. This relationship is important, as each leaf automatically inherits positioning information from its parent. Therefore if we move the background game object, the sprite will automatically move as well.

Now that we have a sprite, let’s populate it. With the sprite selected in Outline, in the properties, first pull-down Image and select our recently created atlas file. Every sprite also has to have an animation, but don’t worry, when we created the atlas, it automatically creates a single frame animation for every image it imported! In the Default Animation pull-down, select background:

Sprite Properties in Defold

Material can be used to perform special effects on this image, but we won’t be changing the default in this example. You also have options for how the sprite should be blended without sprites, but we will stick to the default of Alpha, which basically means the sprite will be rendered, except the transparent bits, as described in the textures alpha channel. This is useful if you are using images such as PNG that enable see-thru or empty portions and you want to draw images that aren’t necessarily solid rectangular shapes.

You will notice that our main.collection looks much more interesting in the editor now!

Collection view populated with a sprite

We are definitely getting much closer to having a viable level! Now it’s time to repeat the process a couple of times…. Create another game object called midground, patented to the root of the collection, then add a sprite to midground using the image mountains, then create another sprite with the image mountain, like so:

Creating the midground

Select the midground game object in the Outline, then switch to Move (W) mode, and move it down slightly. Notice as you move the game object, all of its children move as well.

Pasted Graphic 25

Now it’s perfectly possible that your screen doesn’t look like the one above. Remember earlier when I said that Defold was actually a 3D engine pretending to be 2D? Well, this is where that little bit of information becomes important. How do you determine that the background is drawn behind the midground? This is done by setting the Z coordinate in the position of each game object. With the background game object selected, go into its properties and set the Z value to -10.

Pasted Graphic 26

This will guarantee that the background is drawn behind anything with a higher (-9 or higher) Z value. Now repeat the same task for midground, but instead set the Z value to -5.

Finally, create two more game objects, create one called player but leave it empty for now. Will will come back to this in a bit when we create our player. For the other game object, call it foreground, give it a Z value of 10 (positive in this case), then create some new sprites as children of the foreground. Create a couple of sprites and use sprites like bushes to finish populating your level. When you’re done, your scene should look like this in the Outline.

Scene Outline

And your game should look somewhat like:

Scene in view

Wahoo, our first level… doesn’t look half bad, does it? Now let’s give our game a test run. Select the menu Debug->Run with Debugger or hit F5.

Pasted Graphic 29


First Running Application

Wahoo, all done!

Oh, wait a minute… this isn’t quite what we want now, is it? No, it isn’t, and there are a couple of reasons for it. Remember early on I said by default Defold renders the origin (0,0) at the bottom left corner of the top right quadrant of the Cartesian plane? In our case, we aligned our level centered to the origin. Additionally, it’s not properly handling the z-axis.

At this point, we can roll up our sleeves and create our own camera… or we can let someone else do the work for us. I’m lazy, guess which choice I took!


Scroll to Top