Updated tutorials and samples

docs/en/en.json

@@ -434,28 +434,32 @@
                 "name": "Side scroller",
                 "description": "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.",
                 "image": "/tutorials/images/videos/side-scroller.png",
-                "author": "Defold"
+                "author": "Defold",
+                "type": "tutorial"
             },
             {
                 "path": "/tutorials/astronaut",
                 "name": "Walking astronaut",
                 "description": "In this beginner's tutorial you learn how to capture player input and make a character move and animate. You will also learn about game objects, components and collections.",
                 "image": "/tutorials/images/videos/astronaut.png",
-                "author": "Defold"
+                "author": "Defold",
+                "type": "tutorial"
             },
             {
                 "path": "/tutorials/movement",
                 "name": "Movement",
                 "description": "In this beginner's tutorial you learn how to make realistic movement using vectors and some simple vector algebra.",
                 "image": "/tutorials/images/videos/movement.png",
-                "author": "Defold"
+                "author": "Defold",
+                "type": "tutorial"
             },
             {
                 "path": "/tutorials/colorslide",
                 "name": "Colorslide",
                 "description": "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.",
                 "image": "/tutorials/images/videos/colorslide.png",
-                "author": "Defold"
+                "author": "Defold",
+                "type": "tutorial"
             },
             {
                 "path": "/tutorials/war-battles",
@@ -467,166 +471,190 @@
             {
                 "path": "/tutorials/snake",
                 "name": "Snake",
-                "description": "If you are new to Defold, this guide will help you to get started with script logic together with a few of the building blocks in Defold.",
+                "description": "If you are new to Defold, this tutorial will help you to get started with script logic together with a few of the building blocks in Defold.",
                 "image": "/tutorials/images/snake/run_1.png",
-                "author": "Defold"
+                "author": "Defold",
+                "type": "tutorial"
             },
             {
                 "path": "/tutorials/15-puzzle",
                 "name": "15 puzzle",
-                "description": "If you are new to Defold, this guide will help you to lab with a few of the building blocks in Defold and run script logic.",
+                "description": "If you are new to Defold, this tutorial will help you to lab with a few of the building blocks in Defold and run script logic.",
                 "image": "/tutorials/images/15-puzzle/slide.png",
-                "author": "Defold"
+                "author": "Defold",
+                "type": "tutorial"
             },
             {
                 "path": "/tutorials/shadertoy",
                 "name": "Shadertoy",
                 "description": "In this tutorial you will convert a shader from shadertoy.com to Defold.",
                 "image": "/tutorials/images/videos/shadertoy.png",
-                "author": "Defold"
+                "author": "Defold",
+                "type": "tutorial"
             },
             {
                 "path": "/tutorials/texture-scrolling",
                 "name": "Texture scrolling",
                 "description": "In this tutorial you will learn how to use a shader to scroll a repeating texture.",
                 "image": "/tutorials/images/icons/screen_texture_scrolling.png",
-                "author": "Defold"
+                "author": "Master Mind",
+                "type": "tutorial"
             },
             {
                 "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",
-                "author": "Defold"
+                "author": "Defold",
+                "type": "tutorial"
             },
             {
                 "path": "/tutorials/magic-link",
                 "name": "Magic link",
                 "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",
-                "author": "Defold"
+                "author": "Defold",
+                "type": "tutorial"
             },
             {
                 "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.",
+                "description": "If you are new to Defold, this tutorial 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",
-                "author": "Defold"
+                "author": "Defold",
+                "type": "tutorial"
             },
             {
                 "path": "https://defold.com/2021/03/02/Creating-online-games-using-Nakama-and-Defold/",
                 "name": "Creating online games using Nakama and Defold",
                 "description": "In this tutorial we will look at how to create online multiplayer games in Defold using the open-source Nakama game server from Heroic Labs.",
-                "author": "Defold"
+                "author": "Defold",
+                "type": "tutorial"
             },
             {
                 "path": "https://defold.com/2021/04/21/Releasing-games-on-Yandex/",
                 "name": "Releasing HTML5 games on Yandex.Games",
                 "description": "In this blog post we’ll look at how to add the Yandex.Games SDK to a Defold game and how to submit your game to the Yandex.Games catalog.",
-                "author": "Defold"
+                "author": "Defold",
+                "type": "tutorial"
             },
             {
                 "path": "https://defold.com/2021/03/14/Releasing-html5-games-on-Game-Distribution/",
                 "name": "Releasing HTML5 games on Game Distribution",
                 "description": "In this blog post we'll look at how to add the Game Distribution SDK to an existing game or how to create one from scratch. We will also look at how to submit your game for distribution through the Game Distribution network.",
-                "author": "Defold"
+                "author": "Defold",
+                "type": "tutorial"
             },
             {
                 "path": "https://defold.com/2020/10/19/Shaders-for-beginners/",
                 "name": "Shaders for Beginners",
                 "description": "In this guest tutorial Paweł Jarosz, developer of Witchcrafter: Empire Legends, share his experience learning shader programming in general and for Defold in particular.",
                 "image": "/tutorials/images/icons/screen_shaders_for_beginners.png",
-                "author": "Pawel Jarosz"
+                "author": "Pawel Jarosz",
+                "type": "tutorial"
             },
             {
                 "path": "/tutorials/grading",
                 "name": "Color grading",
                 "description": "In this tutorial you will create a full screen post effect in Defold.",
                 "image": "/tutorials/images/grading/world_graded.png",
-                "author": "Defold"
+                "author": "Defold",
+                "type": "tutorial"
             },
             {
                 "path": "https://www.tactxstudios.com/",
                 "name": "Tactx Studios tutorials",
                 "description": "These tutorials illustrate several common features of the Defold Game Engine, to include: (a) Image Procedures, (b) Dragging and Dropping Game Objects, (c) various Game Object Movement Techniques, (d) Preliminary use of 2d Physics based Collisions, (e) Graphic User Interface (GUI), and (f) an introduction to Defold Levels, Messaging and Menu Development.",
-                "author": "Tactx Studios"
+                "author": "Tactx Studios",
+                "type": "tutorial"
             },
             {
                 "path": "https://github.com/defold/sample-lights-and-shadows",
                 "name": "Lights and Shadows",
                 "description": "This sample project shows how to achieve pixel perfect shadows in a 2D view.",
                 "image": "/tutorials/images/sample-lights-and-shadows.png",
-                "author": "Defold"
+                "author": "Defold",
+                "type": "sample"
             },
             {
                 "path": "https://github.com/defold/sample-pixel-line-platformer",
                 "name": "Pixel Line Platformer",
                 "description": "This sample project shows how to create a platformer game using original art created by Kenney.",
                 "image": "/tutorials/images/sample-pixel-line-platformer.png",
-                "author": "Defold"
+                "author": "Defold",
+                "type": "sample"
             },
             {
                 "path": "https://github.com/defold/sample-roids",
                 "name": "Asteroids",
                 "description": "This is a very simple 'Asteroids' clone where you turn the ship left and right with the arrow keys and fire at incoming meteors with space.",
                 "image": "/tutorials/images/icons/screen_asteroids.png",
-                "author": "Defold"
+                "author": "Defold",
+                "type": "sample"
             },
             {
                 "path": "https://github.com/defold/sample-linker",
                 "name": "Linker",
                 "description": "This sample project shows how to create a linker game. Click and drag and link three or more fish of the same color together to remove them from the board. Long chains of fish yields boosters.",
                 "image": "/tutorials/images/icons/screen_linker.png",
-                "author": "Defold"
+                "author": "Defold",
+                "type": "sample"
             },
             {
                 "path": "https://github.com/defold/sample-shadertoy",
                 "name": "Shadertoy",
                 "description": "This sample project shows how to port a Shadertoy shader to to Defold.",
                 "image": "/tutorials/images/shadertoy/quad_material.png",
-                "author": "Defold"
-            },
-            {
-                "path": "https://github.com/defold/sample-rpgmap",
-                "name": "RPG Map",
-                "description": "This sample shows one method of creating very large screen based RPG maps in Defold.",
-                "image": "/tutorials/images/icons/screen_rpgmap.png",
-                "author": "Defold"
+                "author": "Defold",
+                "type": "sample"
             },
             {
                 "path": "/tutorials/platformer",
                 "name": "Platformer",
-                "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.",
+                "description": "In this tutorial, 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",
-                "author": "Defold"
+                "author": "Defold",
+                "type": "tutorial"
+            },
+            {
+                "path": "/tutorials/rpgmap",
+                "name": "RPG Map",
+                "description": "This sample project shows one method of creating very large screen based RPG maps in Defold.",
+                "image": "/tutorials/images/icons/screen_rpgmap.png",
+                "author": "Defold",
+                "type": "sample"
             },
             {
                 "path": "/tutorials/main-menu",
                 "name": "Main menu",
-                "description": "In this sample, you learn effects to present a main menu.",
+                "description": "In this sample project, you learn effects to present a main menu.",
                 "image": "/tutorials/images/icons/screen_menu_animation.png",
-                "author": "Defold"
+                "author": "Defold",
+                "type": "sample"
             },
             {
                 "path": "/tutorials/parallax",
                 "name": "Parallax",
-                "description": "In this sample, you learn how to use a parallax effect to simulate depth in the game world.",
+                "description": "In this sample project, you learn how to use a parallax effect to simulate depth in the game world.",
                 "image": "/tutorials/images/icons/screen_parallax.png",
-                "author": "Defold"
+                "author": "Defold",
+                "type": "sample"
             },
             {
                 "path": "/tutorials/hud",
                 "name": "Hud",
-                "description": "In this sample, you learn effects for score counting.",
+                "description": "In this sample project, you learn effects for score counting.",
                 "image": "/tutorials/images/icons/screen_hud.png",
-                "author": "Defold"
+                "author": "Defold",
+                "type": "sample"
             },
             {
                 "path": "/tutorials/level-complete",
                 "name": "Level complete",
                 "description": "In this sample, you learn effects to show the score counting that could occur when a level has been completed.",
                 "image": "/tutorials/images/icons/screen_lvlcomplete.png",
-                "author": "Defold"
+                "author": "Defold",
+                "type": "sample"
             }
         ],
         "courses": [

docs/en/tutorials/hud.md

@@ -1,12 +1,12 @@
 ---
 title: HUD code sample
-brief: In this sample, you learn effects for score counting.
+brief: In this sample project, you learn effects for score counting.
 ---
 # HUD - sample project
 
 <iframe width="560" height="315" src="https://www.youtube.com/embed/NoPHHG2kbOk" frameborder="0" allowfullscreen></iframe>
 
-In this sample, we demonstrate effects for score counting. The scores appear randomly over the screen, simulating a game where the player obtains scores at different positions.
+In this sample project which you can [open from the editor](/manuals/project-setup/) or ([download from GitHub](https://github.com/defold/sample-hud)), we demonstrate effects for score counting. The scores appear randomly over the screen, simulating a game where the player obtains scores at different positions.
 
 The scores float for a while after they appear. To achieve this, we set the scores to transparent and then fade in their color. We also animate them upwards. This is done in `on_message()` below.
 

docs/en/tutorials/level-complete.md

@@ -1,12 +1,12 @@
 ---
 title: Level complete code sample
-brief: In this sample, you learn effects to show the score counting that could occur when a level has been completed.
+brief: In this sample project, you learn effects to show the score counting that could occur when a level has been completed.
 ---
 # Level complete - sample project
 
 <iframe width="560" height="315" src="https://www.youtube.com/embed/tSdTSvku1o8" frameborder="0" allowfullscreen></iframe>
 
-In this sample, we demonstrate effects to show the score counting that could occur when a level has been completed. A total score is counted up and three stars appears when different levels have been reached. The sample also uses the reload functionality for fast turn-around when tweaking values.
+In this sample project which you can [open from the editor](/manuals/project-setup/) or ([download from GitHub](https://github.com/defold/sample-levelcomplete)), we demonstrate effects to show the score counting that could occur when a level has been completed. A total score is counted up and three stars appears when different levels have been reached. The sample also uses the reload functionality for fast turn-around when tweaking values.
 
 The scene is triggered by a message from the game.
 The message contains the total score obtained and at which levels the three stars should appear.

docs/en/tutorials/main-menu.md

@@ -1,12 +1,12 @@
 ---
 title: Main menu animation sample
-brief: In this sample, you learn effects to present a main menu.
+brief: In this sample project, you learn effects to present a main menu.
 ---
-# Main menu animation sample
+# Main menu animation - sample project
 
 <iframe width="560" height="315" src="https://www.youtube.com/embed/dPQpSlt3ahw" frameborder="0" allowfullscreen></iframe>
 
-In this sample, we demonstrate effects to present a main menu. The menu contains a background and two menu items.
+In this sample project which you can [open from the editor](/manuals/project-setup/) or ([download from GitHub](https://github.com/defold/sample-main-menu-animation)), we demonstrate effects to present a main menu. The menu contains a background and two menu items.
 This project is ready setup with a menu.gui and menu.gui_script applied with code shown below. Image assets are added to an atlas named images.atlas and are applied to nodes in menu.gui.
 
 Each of the background and the two menu items, have the same animations applied to them, but with different delays. This is set up in `init()` below.

docs/en/tutorials/parallax.md

@@ -2,12 +2,12 @@
 title: Parallax code sample
 brief: In this sample, you learn how to use a parallax effect to simulate depth in the game world.
 ---
-# Parallax
+# Parallax - sample project
 
 <iframe width="560" height="315" src="https://www.youtube.com/embed/UdNA7kanRQE" frameborder="0" allowfullscreen></iframe>
 
 
-In this sample, we demonstrate how to use a parallax effect to simulate depth in the game world.
+In this sample project which you can [open from the editor](/manuals/project-setup/) or ([download from GitHub](https://github.com/defold/sample-parallax)), we demonstrate how to use a parallax effect to simulate depth in the game world.
 There are two layers of clouds, where one of the layers has the appearance of being further back than the other. There is also an animated saucer for flavor.
 
 The cloud layers are built as two separate game objects, containing a *Tile Map* and *Script* each.

docs/en/tutorials/rpgmap.md

@@ -0,0 +1,80 @@
+---
+title: RPG map sample
+brief: In this sample project, you learn one method of creating very large RPG maps.
+---
+# RPG map - sample project
+
+In this sample project which you can [open from the editor](/manuals/project-setup/) or [download from GitHub](https://github.com/defold/sample-rpgmap), we show one method of creating very large RPG maps in Defold. The design is based on the following assumptions:
+
+1. The world is presented one screen at a time. This allows the game to naturally contain enemies and NPC characters within the boundaries of a single screen. The level designer has full control over how the world is presented on the player's screen.
+2. The player character should be able to travel arbitrarily far without the game exhibiting floating point precision issues. These typically cause objects to flutter stangely when they move far from origin.
+3. The player's movement is restricted by obstacles on the map, so the level designer can lead the player between screens using trees, rocks, water and other obstacles.
+4. It should be possible to mix and match tilemaps, sprites and other visual content.
+
+First, [run the sample](defold://build) and walk through the 3x3 screen big world to get a feel for the sample's setup. You control the character with the arrow keys.
+
+## The main collection
+
+Open ["/main/main.collection"](defold://open?path=/main/main.collection) to view the bootstrap collection for this sample.
+
+<img src="doc/main_collection.png" srcset="doc/[email protected] 2x">
+
+The main collection contains the player character game object, controlled in 8 directions with the arrow buttons, and a second game object called "game" that controls the flow of the game. The "game" object consists of a script and one collection factory for each screen in the game. The factories are named according to the screen grid naming scheme.
+
+The script ["/main/game.script"](defold://open?path=/main/game.script) tracks on which screen the player currently is. The script also reacts to a custom message called "load_screen". This message loads a new screen and swaps it with the current screen in the direction the hero moves. Initially, a screen is loaded into the center of the screen and there is no other screen to switch place with.
+
+## Changing screens
+
+The hero is controlled by the script ["/main/hero.script"](defold://open?path=/main/hero.script). The script checks if the hero game object moves past a top, bottom, left or right line close to the screen edge:
+
+<img src="doc/change_screen.png" srcset="doc/[email protected] 2x">
+
+1. If the hero moves close enough to a screen edge, a message is sent to the "game" object script to load the next screen.
+2. The next screen collection is spawned by calling `factory.create()` on the correct collectionfactory component. The content of the collection is positioned outside the screen.
+3. The next screen is scrolled into the center of view and the current screen is scrolled out in the opposite direction. The player character is also scrolled the same distance and with the same speed.
+4. The old current screen, that is now off-screen, is deleted and the next screen is promoted to be the new current screen.
+5. The hero animates into view in the new screen and the player regains control.
+
+All of this happens within a second so the transition is smooth and non disruptive.
+
+## Screens
+
+Each screen in the game world is built inside a separate collection containing the tilemap, collision object and other game objects that are unique to the screen. To facilitate management and loading of the screens the screen collections are named according to a simple scheme:
+
+<img src="doc/screens.png" srcset="doc/[email protected] 2x">
+
+Each screen collection is named according to its position in the world grid. The first number is the X grid position and the second is the Y grid position.
+
+In the *Assets* view, navigate to and open the collection ["/main/screens/0-0.collection"](defold://open?path=/main/screens/0-0.collection) which describes the screen in the lowest left corner of the map:
+
+<img src="doc/screen_collection.png" srcset="doc/[email protected] 2x">
+
+Notice that there is a game object named "root" that is the parent to all of the screen's content. This is another convention used in the sample and it serves a very important purpose: when a screen is brought into view, only the "root" game object needs to be moved. All child objects are automatically moved along with the root parent. If there are special game objects on a screen, they can also be freely animated since their movement is relative to the root parent. When the the screen is scrolled in or out, these children moves with the screen. Special code is only needed if an object needs to move between screens.
+
+The bees on screen 0-1 are simple showcases of this idea:
+
+<img src="doc/bees.png" srcset="doc/[email protected] 2x">
+
+## Editing screens in the world context
+
+Each screen has its own tilemap that can be edited in the built in tilemap editor. However, the main drawback of editing each screen in isolation is that it is not possible to easily see how it connects to its adjacent screens, which is an important aspect of creating continuity through the game world.
+
+For this reason, a special collection was created. Open ["/main/map/test_layout.collection"](defold://open?path=/main/map/test_layout.collection) to view this world test layout collection:
+
+<img src="doc/test_layout.png" srcset="doc/[email protected] 2x">
+
+The only purpose of this collection is to be used as an editing tool during development. Editing a specific screen side by side with the test layout collection gives you context for the screen you currently work on and the editing process is much nicer:
+
+<img src="doc/side_by_side.png" srcset="doc/[email protected] 2x">
+
+Any edits to the screen tilemap (here on the right hand pane) are immediately reflected in the test collection (in the left pane). Also note that the test layout collection is not added to the static hierarchy so it is automatically excluded from all builds.
+
+## Summary
+
+As you have seen, this sample is built according to specific constraints regarding the game world and how the game hero traverses through it. If your game has different requirements you probably need to find a different solution. For instance, if your game demands that the camera should move seamlessly over the world map, you need a different way of splitting up your content, a different loading mechanism, and also different tools helping you to author your game world.
+
+This concludes the walkthrough of the RPG map sample. As always, you are free to use the content of the sample in any way you see fit. To learn more about Defold, check out our [documentation pages](https://defold.com/learn) for more examples, tutorials, manuals and API docs.
+
+If you run into trouble or have questions, [head over to our forum](https://forum.defold.com/).
+
+Happy Defolding!