DIP P1: Let's set up our game

00 - Download the resource file

In this tutorial, we will be using Kenney’s free game assets, which are excellent resources for game development. If you're looking for free 2D assets to create your own space game, this pack is perfect for you!

The asset that interests us for this tutorial is the "Simple Space" asset pack. You can download the Simple Space asset for free at: https://kenney.nl/assets/simple-space.

However, I recommend downloading the optimized zip file that I have prepared specifically for this course. It contains everything you need to follow along! ZipFile

01 - Setting Up the Project

Launch Defold and click “New Project” to start a project from scratch. Next, select “Empty Project,” name it "DeepIntoTheSpace," and then click “Create New Project”.

Once the software is launched, click on the game.project file. A window will open, then click on Project and type "Deep Into the Space" in the Title field.

Perfect! You can now close this window.

02- Creating Our First Assets

Now, we are going to create our first resource. But before that, let's organize the project by setting up a clear folder structure.

In the folder hierarchy, create a new folder named “assets,” which will contain an “images” folder and our Atlas resource.

Right-click within the folder hierarchy, select “New Folder,” and name it “assets”.

Also, create a folder named "images" inside the "assets" folder. Then, drag and drop all the downloaded images into the "images" folder.

Right-click again to create a new Atlas inside the "assets" folder.

Right-click -> New -> Atlas

What is an Atlas?

An Atlas is used to combine multiple images into a larger one, helping to save resources and memory.

Name it to "background" and click on "Create Atlas".

Double-click on "background.atlas" to open it. Then, right-click inside the editor and select "Add Images" to add an image. Choose "background.png".

Since Defold 1.10.0, you can also drag and drop images inside an atlas resource.

Next, in the Properties section, adjust the pivot values:

X: 0.0
Y: 1.0

This sets the image origin to the bottom-left corner.

💡 Pivot points explained:

The pivot defines the reference point of the image in units.
The top-left corner is (0,0), and the bottom-right corner is (1,1).
By default, the pivot is centered at (0.5, 0.5).
Pivot values can go beyond the 0-1 range, affecting how the image is positioned when used in a sprite.

Or you can also drag the blue pivot point and place it where you want in the image, Right Click + SHIFT

03 - Let's create our first level

We will use our first collection to create our level, where our spaceship will move through space! 🚀

When Defold is launched for the first time, a main.collection file is already created. This is the file that will be executed when you press F5 or Ctrl + B to run the game. This file is in the "main" folder, click on main.collection to open it.

What is a Collection?

A Collection is a file that structures our game. We add various Game Objects and other Collections to it. It is generally used to structure game levels, group enemies, or build complex objects or characters.

A window like this should open. It displays:

The viewport in the center, where you can see and arrange your game objects.
The hierarchy on the right, showing the structure of the objects inside the collection.
The properties panel at the bottom right, where you can adjust the settings of the selected component.

In Defold, the origin point of the viewport is located at the bottom-left corner, unlike other engines where it is usually at the top-left corner.

04 - Creating the Background Game Object

Right-click in the collection hierarchy and select "Add Game Object" to create a new Game Object.

Then, rename its ID to "background".

What is a Game Object?

A Game Object is a container with an identifier (essential for Defold's messaging system), a rotation, and a scale. It holds components and scripts.

Right-click on the "background" Game Object and select "Add Component → Sprite" to add a sprite component.

Then, in the Properties panel:

Click on "Image", select the "background" atlas, click on "ok".
In "Default Animation", select "background" as well.

Click again on the "Background" Game Object and set its Z position to -0.7 in its properties to ensure it appears below our other assets.

Normally, if you have correctly set the sprite's pivot point to (0.0, 1.0), your background should appear as shown below in your viewport.

05 - Creating the ship

Now, create another Atlas file in the assets folder and rename it to "main". Open it and add the following sprites: "ship_G.png" and "effect_yellow.png".

You should see the following result.

Now, open the "main.collection" file, create a Game Object, rename it "ship", and add two sprite components:

One to represent the spaceship
One for the rocket effect

Rename the spaceship sprite to "ship_spr" and the effect sprite to "effect_spr". Finally Apply the correct images to each sprite.

Modify the Z and Y values in the properties of the effect_spr sprite so that it appears below the spaceship and lower than the spaceship:

Z: -0.1
Y: -45.0

You will also need to modify the scale of each sprite :

X: 0.5, Y: 0.5, Z: 0.5

Now, click on the spaceship Game Object and set its position properties to:

X: 480
Y: 320

And there you go! Our spaceship is now centered on the screen.

How did I find these values? Well, the game window is 980x640, so I simply divided these values by two.

To find the window dimensions, click on the game.project file and then go to the display section.

Now, press F5 to run the game! 🚀

Incredible, we have a game! Well… not really. Now, we need to make the spaceship move!