Giter VIP home page Giter VIP logo

side-scroller-tutorial's Introduction

Side scroller tutorial

Welcome to the side scroller Defold tutorial where you will get a first taste of what making games in Defold is about. You will learn how to tweak a game to make it more fun and add then a new type of pickup. The tutorial should only take about 10 minutes.

The game you will work with 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.

The game is already set up for you so you need only to build and run the game to try it. (You can also select Project ▸ Build in the menu to build and run)

Try steering the space ship with the arrow keys and pick up stars for points.

Tweaking the game

The game is currently not much fun, but you can easily improve it with some simple tweaks. You will do the update tweaks to the game live so make sure that you keep the game running somewhere on your desktop.

First, let’s adjust the speed of the space ship:

  1. Open the file "spaceship.script" with the menu item File ▸ Open Asset...

  2. Type the word "space" to search among all the available assets and select the file "spaceship.script". Click the button Open to open the file in the Lua code editor.

  3. At the top of the file, change the line:

    local max_speed = 60

    to:

    local max_speed = 150

    This will increase the movement speed of the space ship.

  4. Reload the script file into the running game with File ▸ Hot Reload.

Try moving the space ship with the arrow-keys on your keyboard. Notice how it moves faster now.

Currently, the player only gets 1 point for each star collected. More score is more fun so let’s fix that.

  1. Open the file "star.script". Either use File ▸ Open Asset... or find the file in the Assets browser in the leftmost editor pane and double click it. The file is in the folder named "star".

  2. At the top of the file, change:

    local score = 1

    to:

    local score = 1000
  3. Reload the script file into the running game with File ▸ Hot Reload.

Try to collect some stars and notice how the score has dramatically increased.

Adding bonus stars

The game would be more interesting if bonus stars would appear now and then. In order to make that happen, you need to create a new game object file, which will work as a blueprint for the new type of star.

  1. Add a new game object file. Right-click the "stars" folder in the Assets view and select New... ▸ Game Object. Name the new file "bonus_star". (The editor will automaticaly append a file type suffix so the full name will be "bonus_star.go".)

  2. The editor automatically opens the new file so you can edit it.

  3. Add a Sprite component to the game object. Right-click the root of the Outline view and select Add Component ▸ Sprite. This allows you to attach graphics to the bonus star.

In the Outline view, you will see a new item called "sprite". When it is clicked, its properties are displayed in the Properties view below. The sprite currently has no graphics attached so you need to do that:

  1. Set the Image property to "stars.atlas" by using the browse-button (...) The atlas contains the graphics for the bonus star.

  2. Set Default Animation to "bonus_star". "bonus_star" is an animation defined in the atlas.

  3. A green star should now appear in the editor. Hit the F key or select View ▸ Frame Selection if the view of the star is not very good.

  4. Add a Collision Object component to the game object. Right click the root "Game Object" item in the Outline view and select Add Component ▸ Collision Object. This lets the bonus stars collide with other game objects, like the player's space ship. This is necessary so the player can gather the bonus stars as well as ordinary stars.

  5. Click on the "collisionobject" item in the Outline view to show its properties.

  6. In the Properties view, set the Type property to "Kinematic". This means that the collision object will follow the game object it belongs to.

  7. Right click "collisionobject" in the Outline view and select Add Shape ▸ Sphere. Any shape(s) you add to the collision object defines its boundary as far as collisions are concerned.

  8. Select the Scale Tool in the toolbar and use the scale handle to resize the sphere in the scene view until it reasonably covers the star. You can also edit the Diameter property directly in the Properties view.

  9. Right click the root "Game Object" item in the Outline view again and select Add Component File, then select the script file "bonus_star.script". This script moves the bonus stars and make sure the player gets the right amount of points for catching them.

The bonus star game object file that you have now created contains the blueprint for a game object containing graphics (the sprite), collision shapes (the collision object) and logic that moves the star and reacts to collisions (the script).

Creating the bonus star factory

Factory Components are responsible for making sure game objects of various kind appear in the game. For your new bonus stars, you need to create a factory:

  1. Open the file "factory.go" with File ▸ Open Assets.... This game object file contains a script and a factory.

  2. Add a secondary factory component to it. Right click the root "Game Object" item in the Outline view and select Add Component ▸ Factory.

  3. Set the new factory component's Id property to "bonus_factory".

  4. Set its Prototype property to "bonus_star.go" with the browse-button (...)

Modify the factory script

The last step is to make sure the factory game object starts creating the bonus stars by modifying its script.

  1. Open "factory.script" with File ▸ Open Assets...

  2. Near the bottom of the file, change:

    -- component = "#bonus_factory"

    to:

    component = "#bonus_factory"

    This causes the bonus stars to appear roughly 20% of the time.

  3. Restart the game by closing the window (or press Escape – assuming you have enabled the "Escape Quits Game" option in File ▸ Preferences), then select Project ▸ Build from the editor menu.

    The new bonus stars will start to appear!

You Win!

Now go ahead and create more games in Defold!

Check out the documentation pages for examples, tutorials, manuals and API docs.

If you run into trouble, help is available in our forum.

Happy Defolding!


side-scroller-tutorial's People

Contributors

adobbs avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.