Rewrote side scroller for Ed2. Added some missing assets for project settings and dmengine for snake update.

docs/en/tutorials/side-scroller.md

@@ -40,44 +40,67 @@ The game is extremely simple. The player controls a space ship and is supposed t
 
 ## Setup
 
-1. Start by going to the [dashboard](//dashboard.defold.com), log in and click *New Project*.
-2. Select the "Side-scroller" tutorial as the template project.
-3. Start the editor and open the project you just created with <kbd>File ▸ Open Project</kbd> (the editor can be downloaded from the [dashboard](//dashboard.defold.com)).
-4. Select your project and click *Next*.
-5. 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 <kbd>File ▸ Synchronize</kbd>.
+1. Start by going to the [Defold Dashboard](//dashboard.defold.com), log in and click *New Project*.
+2. Select the *Side Scroller* tutorial as the template project.
 
-  ![New branch](images/side-scroller/side-scroller_new_branch.png)
+   ![New project](images/side-scroller/new_project.png)
 
-6. Try the game with <kbd>Project ▸ Build And Launch</kbd>.
+3. Click <kbd>Save</kbd>.
+
+Now your new project exist on our cloud servers and you can start work on it in the editor:
+
+1. Start Defold.
+2. In the project selector, click "Open Project" <kbd>From Dashboard</kbd>. The first time you do this you will need to log in with your account.
+3. Select your new project.
+4. Select a location on your hard drive where your working copy will be stored.
+5. Click <kbd>Import</kbd>.
+
+  ![Import](images/side-scroller/import.jpg)
+
+6. The editor now opens your new project:
+
+  ![Editor](images/side-scroller/editor.jpg)
+
+7. Try running the game by selecting the menu item <kbd>Project ▸ Build</kbd>. You can steer the space ship with the arrow keys and pick up stars.
 
   ![Run the game](images/side-scroller/side-scroller_run_game.png)
 
-## Tweaking
+## Tweaking the game
 
-We can tweak the game in order to make it more fun. You can exit the game with the <kbd>Esc</kbd> 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:
+The game is currently not much fun, but you can 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.
 
-1. Switch back to the editor and open the file *spaceship.script* with <kbd>Edit ▸ Open Resource...</kbd>
-2. In the beginning of the file, change:
+First, let's adjust the speed of the space ship:
 
-    ```lua
-    local max_speed = 60
-    ```
+1. In the editor, open the file "spaceship.script" with the menu item <kbd>File ▸ Open Asset...</kbd>. (Type "space" to searching among all the available assets and select the file "spaceship.script".)
 
-    to:
+   ![Open asset](images/side-scroller/open_asset.png)
 
-    ```lua
-    local max_speed = 150
-    ```
+3. Click <kbd>Open</kbd>. The file now opens in the Lua code editor.
+
+   ![Code editor](images/side-scroller/code_editor.jpg)
+
+4. At the top of the file, change:
+
+   ```lua
+   local max_speed = 60
+   ```
 
-    This will increase the movement speed of the space ship.
+   to:
 
-3. Reload the script file into the running game with <kbd>Edit ▸ Reload Resource</kbd>.
-4. Try moving the space ship with the arrow-keys on your keyboard. Notice how the it moves faster now.
+   ```lua
+   local max_speed = 150
+   ```
 
-Currently, the player only gets 1 point for each star collected. More score is more fun so let's take care of that.
+   This will increase the movement speed of the space ship.
 
-1. Open the file *star.script*.
-2. In the beginning of the file, change:
+3. Reload the script file into the running game with <kbd>File ▸ Hot Reload</kbd>.
+
+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 fix that.
+
+1. Open the file "star.script". Either use <kbd>File ▸ Open Asset...</kbd> or find the file in the *Assets* browser in the leftmost editor pane and double click it. The file is in the "star" folder.
+2. At the top of the file, change:
 
     ```lua
     local score = 1
@@ -89,52 +112,73 @@ Currently, the player only gets 1 point for each star collected. More score is m
     local score = 1000
     ```
 
-3. Reload the file again with <kbd>Edit ▸ Reload Resource</kbd>.
+3. Reload the script file into the running game with <kbd>File ▸ Hot Reload</kbd>.
 4. Collect some stars and notice how the score has dramatically increased.
 
-## Add a bonus star
+## Adding bonus stars
+
+![Bonus stars](images/side-scroller/bonus_star.jpg)
 
-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.
+The game would be a bit 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 called *bonus_star.go* in the *stars* directory with <kbd>File ▸ New ▸ Game Object File</kbd>.
-2. Add a *Sprite* component to the game object with <kbd>Game Object ▸ Add Component</kbd>. This attaches graphics to the bonus star.
-3. In the *Outline* view (upper right), a new item appeared called "sprite". Its properties are displayed in the Properties-view below.
+1. Add a new game object file. <kbd>Right-click</kbd> the "stars" folder in the *Assets* view and select <kbd>New... ▸ Game Object</kbd>. Name the new file "bonus_star". (The editor will automaticaly append a file ending so the full name will be "bonus_star.go".)
 
-    - 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.
+   ![New game object](images/side-scroller/new_game_object.png)
 
-    A green star should appear on the screen. Hit the <kbd>F</kbd> key or select <kbd>Scene ▸ Frame Objects</kbd> if the view of the star is not very good.
+2. The editor automatically opens the new file so you can edit it.
 
-4. Select the game object again by clicking on the *Game Object* item in the *Outline*-view.
-5. Add a _Collision Object_ component to the game object with <kbd>Game Object ▸ Add Component</kbd>. This lets the bonus stars collide with other game objects, specifically the player space ship in our case.
+3. Add a *Sprite* component to the game object. <kbd>Right-click</kbd> the root of the *Outline* view and select <kbd>Add Component ▸ Sprite</kbd>. This allows you to attach graphics to the bonus star.
 
-    - 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.
+   ![Add component](images/side-scroller/add_component.png)
 
-6. Scale the sphere in the scene view until it reasonably covers the star; press <kbd>R</kbd> to use the Scale tool. You can also move the sphere by pressing <kbd>W</kbd>.
-7. Select the *Game Object* item again and add the script *bonus_star.script* with <kbd>Game Object ▸ Add Component From File</kbd>. This script moves the bonus stars and make sure the player gets the right amount of points for catching them.
+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:
 
-![Bonus star game object](images/side-scroller/side-scroller_bonus_star.png)
+1. Set the *Image* property to "stars.atlas" by using the browse-button <kbd>...</kbd>. The atlas contains the graphics for the bonus star.
 
-## Create a factory component
+2. Set *Default Animation* to "bonus_star" and hit *ENTER*. "bonus_star" is an animation defined in the atlas.
 
-The factory component is responsible for making sure the bonus stars appear in the game.
+   ![Sprite properties](images/side-scroller/sprite_properties.jpg)
 
-1. Open the file *factory.go* with <kbd>Edit ▸ Open Resource...</kbd>
-2. Add another _Factory_ component to it with <kbd>Game Object ▸ Add Component</kbd>.
-    - Set the new factory component's _Prototype_ to `bonus_star.go` with the browse-button.
-    - Set its _Id_ to "bonus_factory".
+3. A green star should appear in the editor. Hit the <kbd>F</kbd> key or select <kbd>View ▸ Frame Selection</kbd> if the view of the star is not very good.
 
-![Factory component](images/side-scroller/side-scroller_factory.png)
+4. Add a *Collision Object* component to the game object. <kbd>Right click</kbd> the root "Game Object" item in the *Outline* view and select <kbd>Add Component ▸ Collision Object</kbd>. This lets the bonus stars collide with other game objects, like the player space ship which is necessary for it to be able to gather 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 its *Type* to "Kinematic". This means that the collision object will follow the game object it belongs to.
+
+7. <kbd>Right click</kbd> "collisionobject" in the *Outline* view and select <kbd>Add Shape ▸ Sphere</kbd>. 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.
+
+   ![Sphere size](images/side-scroller/sphere_size.jpg)
+
+7. <kbd>Right click</kbd> the root "Game Object" item in the *Outline* view again and select <kbd>Add Component File</kbd>, then select the script "bonus_star.script". This script moves the bonus stars and make sure the player gets the right amount of points for catching them.
+
+Now the bonus star game object file 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).
+
+![Bonus star game object](images/side-scroller/bonus_star_done.jpg)
+
+## Creating a 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 <kbd>File ▸ Open Assets...</kbd>. This game object file contains a script and a factory.
+
+2. Add a secondary factory component to it. <kbd>Right click</kbd> the root "Game Object" item in the *Outline* view and select <kbd>Add Component ▸ Factory</kbd>.
+
+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 (<kbd>...</kbd>).
+
+   ![Factory component](images/side-scroller/factory.jpg)
 
 ## Modify the factory script
 
-Now we will make sure the factory game object starts creating the bonus stars by modifying its 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 <kbd>File ▸ Open Assets...</kbd>
 
-1. Open *factory.script* with <kbd>Edit ▸ Open Resource...</kbd>
 2. Near the bottom of the file, change:
 
     ```lua
@@ -142,16 +186,16 @@ Now we will make sure the factory game object starts creating the bonus stars by
     ```
 
     to:
-    
+
     ```lua
     component = "#bonus_factory"
     ```
-    
-    This makes the bonus stars appear roughly 20% of the time.
 
-3. Restart the game by closing the window (or <kbd>Esc</kbd>) to exit, then <kbd>Project ▸ Build and Launch</kbd> in the editor.
+    This causes the bonus stars to appear roughly 20% of the time.
+
+3. Restart the game by closing the window (or <kbd>Esc</kbd>) to exit, then <kbd>Project ▸ Build</kbd> in the editor.
 
-    The new bonus stars will start to appear!
+   The new bonus stars will start to appear!
 
 ![Run final game](images/side-scroller/side-scroller_run_final.png)