Tutorial update (#366)

Update to OLD label tutorials
added icons to tutorial page.

docs/en/en.json

@@ -461,7 +461,8 @@
             {
                 "path": "/tutorials/texture-scrolling",
                 "name": "Texture scrolling",
-                "description": "In this tutorial you will learn how to use a shader to scroll a repeating texture."
+                "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"
             },
             {
                 "path": "/tutorials/runner",
@@ -499,7 +500,8 @@
             {
                 "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."
+                "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"
             },
             {
                 "path": "/tutorials/grading",
@@ -527,22 +529,26 @@
             {
                 "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."
+                "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"
             },
             {
                 "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."
+                "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"
             },
             {
                 "path": "https://github.com/defold/sample-shadertoy",
                 "name": "Shadertoy",
-                "description": "This sample project shows how to port a Shadertoy shader to to Defold."
+                "description": "This sample project shows how to port a Shadertoy shader to to Defold.",
+                "image": "/tutorials/images/shadertoy/quad_material.png"
             },
             {
                 "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."
+                "description": "This sample shows one method of creating very large screen based RPG maps in Defold.",
+                "image": "/tutorials/images/icons/screen_rpgmap.png"
             },
             {
                 "path": "/tutorials/platformer",
@@ -552,23 +558,27 @@
             },
             {
                 "path": "/tutorials/main-menu",
-                "name": "Main menu (OLD)",
-                "description": "In this sample, you learn effects to present a main menu."
+                "name": "Main menu",
+                "description": "In this sample, you learn effects to present a main menu.",
+                "image": "/tutorials/images/icons/screen_menu_animation.png"
             },
             {
                 "path": "/tutorials/parallax",
-                "name": "Parallax (OLD)",
-                "description": "In this sample, you learn how to use a parallax effect to simulate depth in the game world."
+                "name": "Parallax",
+                "description": "In this sample, you learn how to use a parallax effect to simulate depth in the game world.",
+                "image": "/tutorials/images/icons/screen_parallax.png"
             },
             {
                 "path": "/tutorials/hud",
-                "name": "Hud (OLD)",
-                "description": "In this sample, you learn effects for score counting."
+                "name": "Hud",
+                "description": "In this sample, you learn effects for score counting.",
+                "image": "/tutorials/images/icons/screen_hud.png"
             },
             {
                 "path": "/tutorials/level-complete",
-                "name": "Level complete (OLD)",
-                "description": "In this sample, you learn effects to show the score counting that could occur when a level has been completed."
+                "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"
             }
         ],
         "resources": [

docs/en/tutorials/hud.md

@@ -2,9 +2,9 @@
 title: HUD code sample
 brief: In this sample, you learn effects for score counting.
 ---
-# HUD
+# HUD - sample project
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/bcU9PCrPAeY" frameborder="0" allowfullscreen></iframe>
+<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.
 
@@ -143,3 +143,22 @@ function on_message(self, message_id, message, sender)
     end
 end
 ```
+
+In the main.script we take in touch/mouse input then send a message to the gui script creating new scores using the touch position.
+
+```lua
+-- On click/touch get touch position and send it via message to hud gui script as well as the scored point amount.
+
+function init(self)
+    msg.post(".", "acquire_input_focus")
+end
+
+function on_input(self, action_id, action)
+    local pos = vmath.vector3(action.x, action.y, 0) -- use input action.x & action.y as x & y positions of touch
+    if action_id == hash("touch") then
+        if action.pressed then
+            msg.post("main:/hud#hud", "add_score" , { position = pos, amount = 1500})
+        end
+    end
+end
+```

docs/en/tutorials/level-complete.md

@@ -2,9 +2,9 @@
 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.
 ---
-# Level complete
+# Level complete - sample project
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/t9I9gqbmyj8" frameborder="0" allowfullscreen></iframe>
+<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.
 

docs/en/tutorials/main-menu.md

@@ -1,12 +1,13 @@
 ---
-title: Main menu code sample
+title: Main menu animation sample
 brief: In this sample, you learn effects to present a main menu.
 ---
-# Main menu
+# Main menu animation sample
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/ndkyRuXUr-4" frameborder="0" allowfullscreen></iframe>
+<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.
+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.
 
@@ -26,66 +27,66 @@ The background has a special slight fade out at the end, which is applied in `an
 -- anim5 fades down alpha and is only used for the background
 
 local function anim5(self, node)
-    if gui.get_node("background") == node then
-        -- special case for background. animate alpha to 60%
-        local to_color = gui.get_color(node)
-        to_color.w = 0.6
-        gui.animate(node, gui.PROP_COLOR, to_color, gui.EASING_OUT, 1.2, 0.1)
-    end
+	if gui.get_node("background") == node then
+		-- special case for background. animate alpha to 60%
+		local to_color = gui.get_color(node)
+		to_color.w = 0.6
+		gui.animate(node, gui.PROP_COLOR, to_color, gui.EASING_OUT, 2.4, 0.1)
+	end
 end
 
 local function anim4(self, node)
-    -- animate scale to 100%
-    local s = 1
-    gui.animate(node, gui.PROP_SCALE, vmath.vector4(s, s, s, 0), gui.EASING_INOUT, 0.12, 0, anim5)
+	-- animate scale to 100%
+	local s = 1
+	gui.animate(node, gui.PROP_SCALE, vmath.vector4(s, s, s, 0), gui.EASING_INOUT, 0.24, 0, anim5)
 end
 
 local function anim3(self, node)
-    -- animate scale to 106%
-    local s = 1.06
-    gui.animate(node, gui.PROP_SCALE, vmath.vector4(s, s, s, 0), gui.EASING_INOUT, 0.12, 0, anim4)
+	-- animate scale to 106%
+	local s = 1.06
+	gui.animate(node, gui.PROP_SCALE, vmath.vector4(s, s, s, 0), gui.EASING_INOUT, 0.24, 0, anim4)
 end
 
 local function anim2(self, node)
-    -- animate scale to 98%
-    local s = 0.98
-    gui.animate(node, gui.PROP_SCALE, vmath.vector4(s, s, s, 0), gui.EASING_INOUT, 0.12, 0, anim3)
+	-- animate scale to 98%
+	local s = 0.98
+	gui.animate(node, gui.PROP_SCALE, vmath.vector4(s, s, s, 0), gui.EASING_INOUT, 0.24, 0, anim3)
 end
 
 local function anim1(node, d)
-    -- set scale to 70%
-    local start_scale = 0.7
-    gui.set_scale(node, vmath.vector4(start_scale, start_scale, start_scale, 0))
-
-    -- get current color and set alpha to 0 to fade up
-    local from_color = gui.get_color(node)
-    local to_color = gui.get_color(node)
-    from_color.w = 0
-    gui.set_color(node, from_color)
-
-    -- animate alpha value from 0 to 1
-    gui.animate(node, gui.PROP_COLOR, to_color, gui.EASING_IN, 0.2, d)
-
-    -- animate scale from %70 to 110%
-    local s = 1.1
-    gui.animate(node, gui.PROP_SCALE, vmath.vector4(s, s, s, 0), gui.EASING_IN, 0.2, d, anim2)
+	-- set scale to 70%
+	local start_scale = 0.7
+	gui.set_scale(node, vmath.vector4(start_scale, start_scale, start_scale, 0))
+
+	-- get current color and set alpha to 0 to fade up
+	local from_color = gui.get_color(node)
+	local to_color = gui.get_color(node)
+	from_color.w = 0
+	gui.set_color(node, from_color)
+
+	-- animate alpha value from 0 to 1
+	gui.animate(node, gui.PROP_COLOR, to_color, gui.EASING_IN, 0.4, d)
+
+	-- animate scale from %70 to 110%
+	local s = 1.1
+	gui.animate(node, gui.PROP_SCALE, vmath.vector4(s, s, s, 0), gui.EASING_IN, 0.4, d, anim2)
 end
 
 function init(self)
-    -- start animations for all nodes
-    -- background, button-boxes and text are animated equally
-    -- d is the animation start delay
-    local d = 0.4
-    anim1(gui.get_node("new_game"), d)
-    anim1(gui.get_node("new_game_shadow"), d)
-    anim1(gui.get_node("new_game_button"), d)
-
-    d = 0.3
-    anim1(gui.get_node("quit"), d)
-    anim1(gui.get_node("quit_shadow"), d)
-    anim1(gui.get_node("quit_button"), d)
-
-    d = 0.1
-    anim1(gui.get_node("background"), d)
+	-- start animations for all nodes
+	-- background, button-boxes and text are animated equally
+	-- d is the animation start delay
+	local d = 0.4
+	anim1(gui.get_node("new_game"), d)
+	anim1(gui.get_node("new_game_shadow"), d)
+	anim1(gui.get_node("new_game_button"), d)
+
+	d = 0.3
+	anim1(gui.get_node("quit"), d)
+	anim1(gui.get_node("quit_shadow"), d)
+	anim1(gui.get_node("quit_button"), d)
+
+	d = 0.1
+	anim1(gui.get_node("background"), d)
 end
 ```

docs/en/tutorials/parallax.md

@@ -4,7 +4,8 @@ brief: In this sample, you learn how to use a parallax effect to simulate depth
 ---
 # Parallax
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/rv7GrtmUrPU" frameborder="0" allowfullscreen></iframe>
+<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.
 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.