title: Side scroller tutorial

brief: This tutorial is intended to give a taste of what making games in Defold is about. It goes through creating a new project, based on a simple side-scroller. You will then learn how to tweak the game to make it more fun. Finally you will add a new game object. The tutorial should only take about 10 minutes.

Side scroller

The game is extremely simple. The player controls a space ship and is supposed to collect stars that appear on the screen. The ship is controlled with the up and down arrow keys on the keyboard.

(You can try the game right here in the browser. Use the arrow keys to control the ship.)

START GAME

Setup

Start by going to the dashboard, log in and click New Project.
Select the "Side-scroller" tutorial as the template project.
Start the editor and open the project you just created with File ▸ Open Project (the editor can be downloaded from the dashboard).
Select your project and click Next.
Create a new branch. A branch is like a personal view of the project. Other members of your project won't see your changes until you synchronize your branch (which can be done with File ▸ Synchronize.

Try the game with Project ▸ Build And Launch.

Tweaking

We can tweak the game in order to make it more fun. You can exit the game with the Esc key, but let's keep the game running and update it live. The speed of the space ship could be faster so let's fix that first:

Switch back to the editor and open the file spaceship.script with Edit ▸ Open Resource...
In the beginning of the file, change:
```
local max_speed = 60
```
to:
```
local max_speed = 150
```
This will increase the movement speed of the space ship.
Reload the script file into the running game with Edit ▸ Reload Resource.
Try moving the space ship with the arrow-keys on your keyboard. Notice how the it moves faster now.

Currently, the player only gets 1 point for each star collected. More score is more fun so let's take care of that.

Open the file star.script.
In the beginning of the file, change:
```
local score = 1
```
to:
```
local score = 1000
```
Reload the file again with Edit ▸ Reload Resource.
Collect some stars and notice how the score has dramatically increased.

Add a bonus star

Finally, the game would be a bit more interesting if bonus stars would appear now and then. In order to have bonus stars appear, we first need to create a game object, which works as a blueprint.

Add a new game object file called bonus_star.go in the stars directory with File ▸ New ▸ Game Object File.
Add a Sprite component to the game object with Game Object ▸ Add Component. This attaches graphics to the bonus star.
In the Outline view (upper right), a new item appeared called "sprite". Its properties are displayed in the Properties-view below.
- Set Image property to stars.atlas by using the browse-button .... The atlas contains the graphics for the bonus star.
- Set Default Animation to "bonus_star" and hit ENTER. "bonus_star" is an animation defined in the atlas.
A green star should appear on the screen. Hit the F key or select Scene ▸ Frame Objects if the view of the star is not very good.
Select the game object again by clicking on the Game Object item in the Outline-view.
Add a Collision Object component to the game object with Game Object ▸ Add Component. This lets the bonus stars collide with other game objects, specifically the player space ship in our case.
- Click on the "collisionobject" item in the Outline-view to show its properties.
- In the Properties view, set its Type to Kinematic. This means that the collision object will follow the game object it belongs to.
- Right click "collisionobject" in the Outline view and select Add Shape. Add a Sphere shape to the collision object.
The shape(s) you add defines the boundary as far as collisions are concerned.
Scale the sphere in the scene view until it reasonably covers the star; press R to use the Scale tool. You can also move the sphere by pressing W.
Select the Game Object item again and add the script bonus_star.script with Game Object ▸ Add Component From File. This script moves the bonus stars and make sure the player gets the right amount of points for catching them.

Create a factory component

The factory component is responsible for making sure the bonus stars appear in the game.

Open the file factory.go with Edit ▸ Open Resource...
Add another Factory component to it with Game Object ▸ Add Component.
- Set the new factory component's Prototype to bonus_star.go with the browse-button.
- Set its Id to "bonus_factory".

Modify the factory script

Now we will make sure the factory game object starts creating the bonus stars by modifying its script.

Open factory.script with Edit ▸ Open Resource...
Near the bottom of the file, change:
```
-- component = "#bonus_factory"
```
to:
```
component = "#bonus_factory"
```
This makes the bonus stars appear roughly 20% of the time.
Restart the game by closing the window (or Esc) to exit, then Project ▸ Build and Launch in the editor.

The new bonus stars will start to appear!

You Win!

Now go ahead and create more games in Defold!

side-scroller.md 7.2 KB 히스토리 Raw