Updated Runner Tutorial (#218)

* updated car tutorial

* finished revised version of car tutorial

* updated two sections of runner tutorial

* completed revised version of runner tutorial

docs/en/en.json

@@ -342,6 +342,18 @@
                 "description": "In this tutorial you will convert a shader from shadertoy.com to Defold.",
                 "image": "/tutorials/images/videos/shadertoy.png"
             },
+            {
+                "path": "/tutorials/runner",
+                "name": "Runner",
+                "description": "In this tutorial you start with an empty project and build a complete runner game with an animated character, physics collision, pickups and scoring.",
+                "image": "/tutorials/images/runner/2/run_game.png"
+            },
+            {
+                "path": "/tutorials/car",
+                "name": "Building a car",
+                "description": "If you are new to Defold, this guide will help you getting your bearings right in the editor. It also explains the basic ideas and the most common building blocks in Defold - game objects, collections, scripts and sprites.",
+                "image": "/tutorials/images/car/start_car_collection_complete.png"
+            },
             {
                 "path": "https://defold.com/2021/03/02/Creating-online-games-using-Nakama-and-Defold/",
                 "name": "Creating online games using Nakama and Defold",
@@ -411,24 +423,12 @@
                 "description": "In this article, you go through the implementation of a basic tile-based 2D platformer in Defold. The mechanics you learn are moving left/right, jumping and falling.",
                 "image": "/tutorials/images/platformer/collision.png"
             },
-            {
-                "path": "/tutorials/runner",
-                "name": "Runner (OLD)",
-                "description": "In this tutorial you start with an empty project and build a complete runner game with an animated character, physics collision, pickups and scoring.",
-                "image": "/tutorials/images/runner/2/run_game.png"
-            },
             {
                 "path": "/tutorials/magic-link",
                 "name": "Magic link (OLD)",
                 "description": "In this tutorial you will build a complete little puzzle game with a start screen, the mechanics of the game and simple level progression in the form of increasing difficulty.",
                 "image": "/tutorials/images/magic-link/linker_connector_screen.png"
             },
-            {
-                "path": "/tutorials/car",
-                "name": "Building a car",
-                "description": "If you are new to Defold, this guide will help you getting your bearings right in the editor. It also explains the basic ideas and the most common building blocks in Defold - game objects, collections, scripts and sprites.",
-                "image": "/tutorials/images/car/start_car_collection_complete.png"
-            },
             {
                 "path": "/tutorials/main-menu",
                 "name": "Main menu (OLD)",

docs/en/tutorials/car.md

@@ -136,13 +136,13 @@ Next, add the following lines of code before the init function start starts.
 
 ```lua
 -- Constants
-local turn_speed = 0.1                           									 -- Slerp factor
+local turn_speed = 0.1                           									  -- Slerp factor
 local max_steer_angle_left = vmath.quat_rotation_z(math.pi / 6)     -- 30 degrees
 local max_steer_angle_right = vmath.quat_rotation_z(-math.pi / 6)   -- -30 degrees
-local steer_angle_zero = vmath.quat_rotation_z(0)									 -- Zero degrees
+local steer_angle_zero = vmath.quat_rotation_z(0)									  -- Zero degrees
 local wheels_vector = vmath.vector3(0, 72, 0)         		        	-- Vector from center of back and front wheel pairs
 
-local acceleration = 50 																						-- The acceleration of the car
+local acceleration = 100 																						-- The acceleration of the car
 
 -- prehash the inputs
 local left = hash("left")
@@ -328,16 +328,14 @@ end
 After completing the above steps, your *car.script* should look like :
 
 ```lua
-local turn_speed = 0.1                           					-- Slerp factor
+local turn_speed = 0.1                           				          	-- Slerp factor
 local max_steer_angle_left = vmath.quat_rotation_z(math.pi / 6)	    -- 30 degrees
 local max_steer_angle_right = vmath.quat_rotation_z(-math.pi / 6)   -- -30 degrees
-local steer_angle_zero = vmath.quat_rotation_z(0)					-- Zero degrees
-local wheels_vector = vmath.vector3(0, 72, 0)         				-- Vector from center of back and front wheel pairs
+local steer_angle_zero = vmath.quat_rotation_z(0)				          	-- Zero degrees
+local wheels_vector = vmath.vector3(0, 72, 0)         				      -- Vector from center of back and front wheel pairs
 
-local acceleration = 100 											-- The acceleration of the car
-local drag = 1.1	-- the drag constant
-
-local up = vmath.vector3(0, 1, 0)
+local acceleration = 100 		                      									-- The acceleration of the car
+local drag = 1.1                                                  	-- the drag constant
 
 function init(self)
 	-- Send a message to the render script (see builtins/render/default.render_script) to set the clear color.

docs/en/tutorials/runner.md

@@ -27,6 +27,8 @@ Throughout the tutorial, detailed descriptions on concepts and how to do certain
 
 So let's begin. We hope you will have a lot of fun going through this tutorial and that it helps you getting going with Defold.
 
+> Download the assets for this tutorial [here](images/runner/assets_runner.zip).
+
 <a name="part-1"></a>
 ## STEP 1 - Installation and setup
 
@@ -44,7 +46,7 @@ The first time you start the editor, the editor starts blank, without any projec
 
 Now, in the *Assets pane* you will see all files that are part of the project. If you double-click the file "main/main.collection" the file will open up in the editor view in the center:
 
-![Editor overview](images/runner/1/editor_overview.png)
+![Editor overview](images/runner/1/editor2_overview.png)
 
 The editor consists of the following main areas:
 
@@ -68,19 +70,11 @@ Console
 
 ## Running the game
 
-The "Empty" project template actually isn't completely empty. As you've already seen, it contains one game object with a simple image. Select <kbd>Project ▸ Build and Launch</kbd> to build the project and launch the game.
+The "Empty" project template actually is completely empty. Nonetheless, select <kbd>Project ▸ Build and Launch</kbd> to build the project and launch the game.
 
 ![Build and launch](images/runner/1/build_and_launch.png)
 
-It's perhaps not very exciting, but it's a running Defold game application and we can easily modify it into something more interesting. So let's do that.
-
-First of all, let's clean the *main.collection* file of the one game object it contains.
-
-* Double click the file *main.collection* to open it in the editor.
-* Select (click) "logo" in the *Outline* view to the right.
-* Right-click and select <kbd>Delete</kbd> from the pop up menu.
-* Save the file. Select <kbd>File ▸ Save</kbd> in the main menu.
-That's it!
+A black screen is perhaps not very exciting, but it's a running Defold game application and we can easily modify it into something more interesting. So let's do that.
 
 ::: sidenote
 The Defold editor works on files. By double-clicking a file in the *Assets pane* you open it in a suitable editor. You can then work with the contents of the file.
@@ -90,9 +84,13 @@ When you are done editing a file you have to save it. Select <kbd>File ▸ Save<
 ![File with unsaved changes](images/runner/1/file_changed.png)
 :::
 
-![Delete game object](images/runner/1/delete_go.png)
+## Setting up the project
+
+Before we begin, let's set up several settings for our projects. Open the `game.project` asset from the `Assets Pane` and scroll down to the Display section. Set the `width` and `height` of the project to `1280` and `720` respectively. 
 
-If you run the game again, the application window will be totally black.
+::: sidenote
+If your Display's refresh rate is greater than 60 hz then you might want to disable `vsync` and set a frame cap to a value like 60.
+:::
 
 <a name="part-2"></span></a>
 ## STEP 2 - Creating the ground
@@ -187,14 +185,16 @@ end
 6. Decrease the current X-position with the set speed. Multiply with `dt` to get framerate independent speed in pixels/s.
 7. Update the object's position with the new speed.
 
-![Ground script](images/runner/1/ground_script.png)
-
 ::: sidenote
 Defold is a fast engine core that manages your data and game objects. Any logic or behavior that you need for your game is created in the Lua language. Lua is a fast and light-weight programming language that is great for writing game logic. There are great resources available to learn the language, like the book http://www.lua.org/pil/[Programming in Lua] and the official http://www.lua.org/manual/5.3/[Lua reference manual].
 
 Defold adds a set of APIs on top of Lua, as well as a _message passing_ system that allows you to program communications between game objects. See the [Message passing manual](/manuals/message-passing) for details on how this works.
 :::
 
+::: sidenote
+You can toggle the Assets Pane, Console and Outline sections of the editor using the <kbd>F6</kbd>, <kbd>F7</kbd> and <kbd>F8</kbd> keys respectively
+:::
+
 Now that we have a script file, we should add a reference to it to a component in a game object. That way, the script will be executed as part of the game object lifecycle. We do this by creating a new game object in *ground.collection* and add a *Script* component to the object that refers to the Lua script file we just created:
 
 1. Right-click the root of the collection and select <kbd>Add Game Object</kbd>. Set the object's *id* to "controller".
@@ -271,13 +271,13 @@ It is important that we specify what the collision object should interact with:
 1. Set the *Group* property to a new collision group called "hero".
 2. Setting the *Mask* property to another group "geometry" that this collision object should register collisions with. Note that the "geometry" group does not yet exist, but we will soon add collision objects belonging to it.
 
-![Hero game object](images/runner/2/hero_game_object.png)
-
 Finally, create a new *hero.script* file and add it to the game object.
 
 1. Right-click the *hero* folder in the *Assets pane*  and select <kbd>New ▸ Script File</kbd>. Name the new file *hero.script*.
 2. Open the new file, then copy and paste the following code into the script file, then save it. (The code is pretty straightforward apart from the solver that separates the hero collision shape from what it collides with. That is done by the `handle_geometry_contact()` function.)
 
+![Hero game object](images/runner/2/hero_game_object.png)
+
 ::: sidenote
 The reason we are handling the collision ourselves is that if we instead set the type on the frog's collision object to dynamic, the engine will peform a Newtonian simulation of the bodies involved. For a game like this, such a simulation is far from optimal so instead of fighting the physics engine with various forces, we take full control.
 
@@ -384,7 +384,7 @@ function on_input(self, action_id, action)
 end
 ```
 
-3. Add the script as a *Script* component to the hero object (right-click the root of *hero.go* in the *Outline* and select <kbd>Add Component from File</kbd>, then select the *hero.script* file).
+1. Add the script as a *Script* component to the hero object (right-click the root of *hero.go* in the *Outline* and select <kbd>Add Component from File</kbd>, then select the *hero.script* file).
 
 If you want you can now try and temporarily add the hero frog to the main collection and run the game to see it fall through the world.
 
@@ -935,6 +935,8 @@ And now we have a simple, but functional game! If you make it this far you might
 2. Particle effects for the pickups and death
 3. Nice background imagery
 
+> Download the completed version of the project [here](images/runner/sample-runner.zip)
+
 That concludes this introductory tutorial. Now go ahead and dive into Defold. We have lots of [manuals and tutorials](//www.defold.com/learn) prepared to guide you, and if you get stuck, your're welcome to the [forum](//forum.defold.com).
 
 Happy Defolding!