Changed and added all in-editor tutorials with start instructions and ref to github.

docs/en/en.json

@@ -5,6 +5,18 @@
             {
                 "name": "Tutorials",
                 "items": [
+                    {
+                        "path": "/tutorials/side-scroller",
+                        "name": "Side scroller"
+                    },
+                    {
+                        "path": "/tutorials/movement",
+                        "name": "Movement"
+                    },
+                    {
+                        "path": "/tutorials/colorslide",
+                        "name": "Colorslide"
+                    },
                     {
                         "path": "/tutorials/war-battles",
                         "name": "War battles"
@@ -17,10 +29,6 @@
                         "path": "/tutorials/15-puzzle",
                         "name": "15 puzzle"
                     },
-                    {
-                        "path": "/tutorials/side-scroller",
-                        "name": "Side scroller"
-                    },
                     {
                         "path": "/tutorials/platformer",
                         "name": "Platformer"

docs/en/manuals/images/test/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 47 47"><path d="M41 15.22l-5-2.87v-1.81L33.15 8.9c.88-.45 1.19-.72.42-1.46a3.79 3.79 0 0 0-1-.78l-.11-.11a1.67 1.67 0 0 1-.37-.55 3.68 3.68 0 0 0-.66-1 2.12 2.12 0 0 0-1.07-.69 2.77 2.77 0 0 1-.36-.23v-.21L28.5 3l-1.5.87v1.49l-3.5-2L11 10.54v5.07l2.16 1.24L6 21v5.07l7.21 4.15L11 31.47v5.07l12.5 7.2 15.55-9v-5.03l-7.21-4.15L41 20.29zm-23 5.91l-.46.26-1.54-.88v-6.09l.49-.27L18 15zm1-4.81l4.5 2.59 10.5-6v1.59l-10.5 6-4.5-2.59zM30.69 5.68c.56.63.43.93 1 1.55s.63.17 1.19.8h-.18a.07.07 0 0 0-.06 0h-.09l-.1.08a1.75 1.75 0 0 0-.2.19.57.57 0 0 1-.38.13c-.56 0-.69-.49-1.25-.51a.86.86 0 0 0-.51.18h-.07a.42.42 0 0 1-.16 0 .57.57 0 0 1-.27-.09V4.89a1.68 1.68 0 0 0 .29.27h.2a1.21 1.21 0 0 1 .59.52zM28 4.44l.5-.28v4.58L29 9v2.1l-.5.29-.5-.29zM13 11.7l10.5-6 3.5 2v4l1.5.87 1.5-.87V9.4l4 2.3-1.56.9-8.94 5.16-4.5-2.59v-.72L16.5 13l-.65.35L13 11.71zm0 2.76v-1.59L15 14v1.59zm-5 7.7l7-4.06v3l2.54 1.47 1.46-.86v-1.49l4.5 2.59 12.5-7.2v-.95l3 1.72-16.13 9.29-.37-.2-2.5 1.44v.42l-1.55.89L8 22.17zm15 4.72V33l-1.54.89-.46-.3v-6.1l1.51-.88zm-15-2v-1.55l10.5 6.05 1.5-.89v1.59l-1.55.92zm29.1 8.7l-13.6 7.85-10.5-6V33.8l10.5 6L37.05 32zm0-2.75l-13.6 7.86-10.5-6 2.17-1.25 3.28 1.89 1.55-.95v1.79l1.46.84L24 33.55v-3.48l5.83-3.36zm1.9-11.7l-15 8.64v-1.48l-.1-.05 15.1-8.7zM21.81 31.87l.79-.45v1l-.79.45zm0-1.85l.79-.45v1l-.79.45zm0-1.85l.79-.45v1l-.79.45zM16.4 19l.79.46v1L16.4 20zm.79-1.39v1l-.79-.46v-1zm-.79-2.31l.79.46v1l-.79-.46z" fill="#39a4e6"/></svg>

docs/en/manuals/test.md

@@ -116,6 +116,8 @@ Images are inserted into the document like this:
 
 ![A small image of sorts](images/test/tiny.png){.right} An image that is put at the start of a paragraph---inline with a class `.right`. This is useful for small images like icons and the like. The rendering of these is not optimal since the image size is needed to figure out image placement in relation to the text. Still, in some cases it can be useful, for paragraph decoration or similar.
 
+![A small icon](images/test/icon.svg){.icon} Images with class `.icon` are rendered inline aligned with the text. Use this to insert really small images (like ![A small icon](images/test/icon.svg){.icon}) into running text.
+
 Note that images are usually rendered centered in their own paragraph. Apply class `.inline` for inline behavior if you have several images as part of the same paragragh and you want to line up several images like this:
 
 ![A small image of sorts](images/test/small.png){.inline}

docs/en/tutorials/colorslide.md

@@ -0,0 +1,29 @@
+---
+title: Colorslide tutorial
+brief: In this medium difficulty tutorial you build an in-game GUI, a GUI screen for level selection and a start screen for a simple multi level mobile game.
+github: https://github.com/defold/tutorial-colorslide
+---
+
+# Colorslide tutorial
+
+In this medium difficulty tutorial you build an in-game GUI, a GUI screen for level selection and a start screen for a simple multi level mobile game.
+
+The tutorial is integrated with the Defold editor and easily accessible:
+
+1. Start Defold.
+2. Select *New Project* on the left.
+3. Select the *From Tutorial* tab.
+4. Select the "Colorslide tutorial"
+5. Select a location for the project on your local drive and click *Create New Project*.
+
+![new project](images/new-colorslide.png){srcset="images/[email protected] 2x"}
+
+The editor automatically opens the "README" file from the project root, containing the full tutorial text.
+
+![icon](images/icon-tutorial.svg){style="display:inline;margin:0 0.5rem 0 0;vertical-align: middle;"}
+[You can also read the full tutorial text on Github](https://github.com/defold/tutorial-colorslide)
+
+If you get stuck, head over to the [Defold Forum](//forum.defold.com) where you will get help from the Defold team and many friendly users.
+
+Happy Defolding!
+

docs/en/tutorials/images/icon-tutorial.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47" height="47" viewBox="0 0 47 47"><path d="M41 15.22l-5-2.87v-1.81L33.15 8.9c.88-.45 1.19-.72.42-1.46a3.79 3.79 0 0 0-1-.78l-.11-.11a1.67 1.67 0 0 1-.37-.55 3.68 3.68 0 0 0-.66-1 2.12 2.12 0 0 0-1.07-.69 2.77 2.77 0 0 1-.36-.23v-.21L28.5 3l-1.5.87v1.49l-3.5-2L11 10.54v5.07l2.16 1.24L6 21v5.07l7.21 4.15L11 31.47v5.07l12.5 7.2 15.55-9v-5.03l-7.21-4.15L41 20.29zm-23 5.91l-.46.26-1.54-.88v-6.09l.49-.27L18 15zm1-4.81l4.5 2.59 10.5-6v1.59l-10.5 6-4.5-2.59zM30.69 5.68c.56.63.43.93 1 1.55s.63.17 1.19.8h-.18a.07.07 0 0 0-.06 0h-.09l-.1.08a1.75 1.75 0 0 0-.2.19.57.57 0 0 1-.38.13c-.56 0-.69-.49-1.25-.51a.86.86 0 0 0-.51.18h-.07a.42.42 0 0 1-.16 0 .57.57 0 0 1-.27-.09V4.89a1.68 1.68 0 0 0 .29.27h.2a1.21 1.21 0 0 1 .59.52zM28 4.44l.5-.28v4.58L29 9v2.1l-.5.29-.5-.29zM13 11.7l10.5-6 3.5 2v4l1.5.87 1.5-.87V9.4l4 2.3-1.56.9-8.94 5.16-4.5-2.59v-.72L16.5 13l-.65.35L13 11.71zm0 2.76v-1.59L15 14v1.59zm-5 7.7l7-4.06v3l2.54 1.47 1.46-.86v-1.49l4.5 2.59 12.5-7.2v-.95l3 1.72-16.13 9.29-.37-.2-2.5 1.44v.42l-1.55.89L8 22.17zm15 4.72V33l-1.54.89-.46-.3v-6.1l1.51-.88zm-15-2v-1.55l10.5 6.05 1.5-.89v1.59l-1.55.92zm29.1 8.7l-13.6 7.85-10.5-6V33.8l10.5 6L37.05 32zm0-2.75l-13.6 7.86-10.5-6 2.17-1.25 3.28 1.89 1.55-.95v1.79l1.46.84L24 33.55v-3.48l5.83-3.36zm1.9-11.7l-15 8.64v-1.48l-.1-.05 15.1-8.7zM21.81 31.87l.79-.45v1l-.79.45zm0-1.85l.79-.45v1l-.79.45zm0-1.85l.79-.45v1l-.79.45zM16.4 19l.79.46v1L16.4 20zm.79-1.39v1l-.79-.46v-1zm-.79-2.31l.79.46v1l-.79-.46z" fill="#39a4e6"/></svg>

docs/en/tutorials/movement.md

@@ -0,0 +1,29 @@
+---
+title: Movement tutorial
+brief: In this beginner's tutorial you learn how to make realistic movement using vectors and some simple vector algebra.
+github: https://github.com/defold/tutorial-movement
+---
+
+# Movement tutorial
+
+In this beginner's tutorial you learn how to make realistic movement using vectors and some simple vector algebra.
+
+The tutorial is integrated with the Defold editor and easily accessible:
+
+1. Start Defold.
+2. Select *New Project* on the left.
+3. Select the *From Tutorial* tab.
+4. Select the "Movement tutorial"
+5. Select a location for the project on your local drive and click *Create New Project*.
+
+![new project](images/new-movement.png){srcset="images/[email protected] 2x"}
+
+The editor automatically opens the "README" file from the project root, containing the full tutorial text.
+
+![icon](images/icon-tutorial.svg){style="display:inline;margin:0 0.5rem 0 0;vertical-align: middle;"}
+[You can also read the full tutorial text on Github](https://github.com/defold/tutorial-movement)
+
+If you get stuck, head over to the [Defold Forum](//forum.defold.com) where you will get help from the Defold team and many friendly users.
+
+Happy Defolding!
+

docs/en/tutorials/side-scroller.md

@@ -1,204 +1,27 @@
 ---
 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.
+github: https://github.com/defold/tutorial-side-scroller
 ---
 
-# Side scroller
+# Side scroller tutorial
 
-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.)
-
-<div id="game-container" class="game-container">
-  <img id="game-preview" src="//storage.googleapis.com/defold-doc/assets/side-scroller/preview.jpg"/>
-  <canvas id="game-canvas" tabindex="1" width="1280" height="720">
-  </canvas>
-  <button id="game-button">
-    START GAME <span class="icon"></span>
-  </button>
-  <script src="//storage.googleapis.com/defold-doc/assets/dmloader.js"></script>
-  <script src="//storage.googleapis.com/defold-doc/assets/dmengine_1_2_106.js" async></script>
-  <script>
-      /* Load app on click in container. */
-      document.getElementById("game-button").onclick = function (e) {
-          var extra_params = {
-              archive_location_filter: function( path ) {
-                  return ("//storage.googleapis.com/defold-doc/assets/side-scroller" + path + "");
-              },
-              load_done: function() {},
-              game_start: function() {
-                  var e = document.getElementById("game-preview");
-                  e.parentElement.removeChild(e);
-              }
-          }
-          Module.runApp("game-canvas", extra_params);
-          document.getElementById("game-button").style.display = 'none';
-          document.getElementById("game-button").onclick = null;
-      };
-  </script>
-</div>
-
-## Setup
-
-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 project](images/side-scroller/new_project.png)
-
-3. Click <kbd>Save</kbd>.
-
-Now your new project exist on our cloud servers and you can start work on it in the editor:
+The tutorial is integrated with the Defold editor and easily accessible:
 
 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/run_game.jpg)
-
-## Tweaking the game
-
-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.
-
-First, let's adjust the speed of the space ship:
-
-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".)
-
-   ![Open asset](images/side-scroller/open_asset.png)
-
-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
-   ```
-
-   to:
-
-   ```lua
-   local max_speed = 150
-   ```
-
-   This will increase the movement speed of the space ship.
-
-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
-    ```
-
-    to:
-
-    ```lua
-    local score = 1000
-    ```
-
-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.
-
-## Adding bonus stars
-
-![Bonus stars](images/side-scroller/bonus_star.jpg)
-
-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. <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".)
-
-   ![New game object](images/side-scroller/new_game_object.png)
-
-2. The editor automatically opens the new file so you can edit it.
-
-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.
-
-   ![Add component](images/side-scroller/add_component.png)
-
-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 <kbd>...</kbd>. The atlas contains the graphics for the bonus star.
-
-2. Set *Default Animation* to "bonus_star" and hit *ENTER*. "bonus_star" is an animation defined in the atlas.
-
-   ![Sprite properties](images/side-scroller/sprite_properties.jpg)
-
-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.
-
-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
-
-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>
-
-2. Near the bottom of the file, change:
-
-    ```lua
-    -- component = "#bonus_factory"
-    ```
-
-    to:
-
-    ```lua
-    component = "#bonus_factory"
-    ```
-
-    This causes the bonus stars to appear roughly 20% of the time.
+2. Select *New Project* on the left.
+3. Select the *From Tutorial* tab.
+4. Select the "Side scroller tutorial"
+5. Select a location for the project on your local drive and click *Create New Project*.
 
-3. Restart the game by closing the window (or <kbd>Esc</kbd>) to exit, then <kbd>Project ▸ Build</kbd> in the editor.
+![create project](images/new-side-scroller.png){srcset="images/[email protected] 2x"}
 
-   The new bonus stars will start to appear!
+The editor automatically opens the "README" file from the project root, containing the full tutorial text.
 
-![Run final game](images/side-scroller/run_final.jpg)
+![icon](images/icon-tutorial.svg){style="display:inline;margin:0 0.5rem 0 0;vertical-align: middle;"}
+[You can also read the full tutorial text on Github](https://github.com/defold/tutorial-side-scroller)
 
-**You Win!**
+If you get stuck, head over to the [Defold Forum](//forum.defold.com) where you will get help from the Defold team and many friendly users.
 
-Now go ahead and create more games in Defold!
+Happy Defolding!

docs/en/tutorials/war-battles.md

@@ -1,11 +1,35 @@
 ---
 title: War battles tutorial
 brief: In this tutorial you will create the embryo of a small shooter game. This is a good starting point if you are new to Defold.
+github: https://github.com/defold/tutorial-war-battles
 ---
 
 # War battles tutorial
 
-This tutorial goes through the steps needed to create a small playable game embryo in Defold. You do not need to have any prior experience with Defold, but if you have done some programming in Lua, Javascript, Python or similar, that will help. To get an idea about what you are about to build, you can try the result here:
+In this tutorial you will learn how to create a small playable game featuring movement and firing mechanics.
+
+The tutorial is integrated with the Defold editor and easily accessible:
+
+1. Start Defold.
+2. Select *New Project* on the left.
+3. Select the *From Tutorial* tab.
+4. Select the "War battles tutorial"
+5. Select a location for the project on your local drive and click *Create New Project*.
+
+![new project](images/new-war-battles.png){srcset="images/[email protected] 2x"}
+
+The editor automatically opens the "README" file from the project root, containing the full tutorial text.
+
+![icon](images/icon-tutorial.svg){style="display:inline;margin:0 0.5rem 0 0;vertical-align: middle;"}
+[You can also read the full tutorial text on Github](https://github.com/defold/tutorial-war-battles)
+
+If you get stuck, head over to the [Defold Forum](//forum.defold.com) where you will get help from the Defold team and many friendly users.
+
+Happy Defolding!
+
+## The end result
+
+To get an idea about what you are about to build, you can try the result here:
 
 <div id="game-container" class="game-container">
     <img id="game-preview" src="//storage.googleapis.com/defold-doc/assets/war-battles/preview.jpg"/>
@@ -35,23 +59,3 @@ This tutorial goes through the steps needed to create a small playable game embr
         };
     </script>
 </div>
-
-## New project
-
-The tutorial is integrated with the editor so it is really easy to get going:
-
-1. Start Defold.
-2. Select *New Project* on the left.
-3. Select the *From Tutorial* tab.
-4. Select the "War battles tutorial"
-5. Select a location for the project on your local drive and click *Create New Project*.
-
-![create project](images/war-battles/create_project.png)
-
-The editor now automatically opens the "README" file from the project root, containing the full tutorial text.
-
-- If you are new to Defold, check out the [editor introduction](/manuals/editor).
-- If you get stuck, please head over to the [Defold Forum](//forum.defold.com) where you can talk to the Defold developers and many friendly users.
-- The tutorial is also available on Github: https://github.com/defold/tutorial-war-battles
-
-Happy Defolding!

docs/sass/preview-md.sass

@@ -96,6 +96,11 @@ body
     margin: 0.2em 0
     margin-left: 1.4em
 
+  img.icon
+    display: inline
+    margin: 0
+    vertical-align: middle
+
   .anchor
     display: block
     position: relative