Move tutorials in their own folders (#263)

docs/gdevelop5/events/standard/index.md

@@ -25,6 +25,6 @@ Remember that conditions also select *which* objects are affected by the actions
 
 Here is an event that will destroy the "Square" objects whose have a X position which is less than 100 pixels:
 
-![](/gdevelop5/tutorials/delete-square-condition.png)
+![](delete-square-condition.png)
 
 If you are still unsure how the events work, take a look at [basic game making concepts](/gdevelop5/tutorials/basic-game-making-concepts).

docs/gdevelop5/tutorials/.pages

@@ -1,17 +1,17 @@
 sort_type: natural
 nav:
     - Basic game making concepts:
-        - Basic concepts: basic-game-making-concepts.md
+        - Basic concepts: basic-game-making-concepts
         - Move objects: how-to-move-objects
-        - Rotate objects: how-to-rotate-objects.md
+        - Rotate objects: how-to-rotate-objects
         - Follow players with cameras: follow-player-with-camera
         - Keep UI on screen: keep-ui-on-screen
         - Work with randomness: randomness
-        - Find resources: resources.md
+        - Find resources: resources
     - asteroids
     - geometry-monster
     - platformer
     - space-shooter
-    - Video tutorials: videos.md
+    - Video tutorials: videos
     - More guides and How-To:
         - ...

docs/gdevelop5/tutorials/aligning-text.md → docs/gdevelop5/tutorials/aligning-text/index.md

@@ -19,29 +19,29 @@ To align a single line of text, you need to set its position relative to the thi
 
 To center your text in the scene window, use the **Center X position** action with a value of `SceneWindowWidth() / 2`. This will place the center of your text object at the middle of your scene's width.
 
-![](/gdevelop5/tutorials/aligning-text/pasted/20220825-133207.png)
-![](/gdevelop5/tutorials/aligning-text/pasted/20220825-135738.png)
+![](pasted/20220825-133207.png)
+![](pasted/20220825-135738.png)
 
 Or to right-align your text, use the **X position** action with a value of `SceneWindowWidth() - OBJECT.Width()`. This will place your text object so that its right edge sits on the right side of your scene.
 
-![](/gdevelop5/tutorials/aligning-text/pasted/20220825-133518.png)
-![](/gdevelop5/tutorials/aligning-text/pasted/20220825-135850.png)
+![](pasted/20220825-133518.png)
+![](pasted/20220825-135850.png)
 
 ### Aligning text to other objects
 
 The process for aligning text to other objects is similar. Consider placing a text object on a button. Use the **Center position** action with X and Y values `OBJECT.CenterX()` and `OBJECT.CenterY()` respectively to position the center of your text object over the center of your button object.
 
-![](/gdevelop5/tutorials/aligning-text/pasted/20220825-134322.png)
-![](/gdevelop5/tutorials/aligning-text/pasted/20220825-140056.png)
+![](pasted/20220825-134322.png)
+![](pasted/20220825-140056.png)
 
 ## Aligning a multi-line text object
 
 Multi-line text objects can also be positioned as described above, but that only affects the text object as a whole. It doesn't affect the text _within_ the object - that's still left-aligned by default.
 
 To change this, GDevelop comes with an **Alignment** action. Simply set it to `left`, `center` or `right` to change the alignment of your multi-line text.
 
-![](/gdevelop5/tutorials/aligning-text/pasted/20220825-135130.png)
-![](/gdevelop5/tutorials/aligning-text/pasted/20220825-140254.png)
+![](pasted/20220825-135130.png)
+![](pasted/20220825-140254.png)
 
 !!! note
 

docs/gdevelop5/tutorials/asteroids/end_result.md

@@ -6,13 +6,13 @@ title: Asteroids
 ## Series
 
 1. [Getting Started](/gdevelop5/tutorials/asteroids)
-2. [Ship and Movement Controls](/gdevelop5/tutorials/asteroids/ship_and_movement_controls)
-3. [Firing Mechanic](/gdevelop5/tutorials/asteroids/firing_bullet)
-4. [Setting Scene](/gdevelop5/tutorials/asteroids/setting_scene)
-5. [Splitting Asteroids](/gdevelop5/tutorials/asteroids/splitting_asteroids)
-6. [Screen Wrap](/gdevelop5/tutorials/asteroids/screen_wrap)
-7. [Fail State](/gdevelop5/tutorials/asteroids/fail_state)
-8. [End Result](/gdevelop5/tutorials/asteroids/end_result)
+2. [Ship and Movement Controls](ship_and_movement_controls)
+3. [Firing Mechanic](firing_bullet)
+4. [Setting Scene](setting_scene)
+5. [Splitting Asteroids](splitting_asteroids)
+6. [Screen Wrap](screen_wrap)
+7. [Fail State](fail_state)
+8. [End Result](end_result)
 
 !!! warning
 

docs/gdevelop5/tutorials/asteroids/fail_state.md

@@ -18,27 +18,27 @@ title: Asteroids
 
 Open the "Project manager", open "Functions/Behaviors", click "Search for new extensions", search for and install the "Health" extension.
 
-![](/gdevelop5/tutorials/asteroids/asteroids_gif_12_installing_health_extension.gif)
+![](asteroids_gif_12_installing_health_extension.gif)
 
 ## Player health
 
 Go to the Player object and give it the Health behavior, which will show up on your behavior list now that it has been installed.
 
 Give this behavior a 0.5 second cooldown, and 3 to both current and maximum health. Which will act as 3 lives.
 
-![](/gdevelop5/tutorials/asteroids/asteroids_gif_13_giving_player_health.gif)
+![](asteroids_gif_13_giving_player_health.gif)
 
 ## Lives icon
 
 Create a tiled sprite object, pick a ship image for a "Lives" icon, and then fill in the width and height of the tiled sprite corresponding to your selected image.
 
-![](/gdevelop5/tutorials/asteroids/fail_state/pasted/20220119-185438.png)
+![](fail_state/pasted/20220119-185438.png)
 
 ## Lives icon placement
 
 Click on the "Layers" panel button on the top right section of the screen, add a new layer and call it UI. Place the "Lives" tiled sprite object into the game, within the default border of your game. With that object selected, change its layer to the newly created UI layer.
 
-![](/gdevelop5/tutorials/asteroids/asteroids_gif_14_putting_the_lives_icon_on_ui_layer.gif)
+![](asteroids_gif_14_putting_the_lives_icon_on_ui_layer.gif)
 
 ## Losing lives
 
@@ -55,13 +55,13 @@ This will reduce the players health count by 1 point and then adjust the width o
 
 Note that it's easiest to find the expression for "player's health", by opening the expression builder and searching "health" and selecting it. Then multiply it ( * ) by whatever the width of your tiled sprite is.
 
-![](/gdevelop5/tutorials/asteroids/fail_state/pasted/20220119-190604.png)
+![](fail_state/pasted/20220119-190604.png)
 
 ## Show lives first
 
 To expand the size of the Lives tiled sprite object at the beginning of scene to display the starting lives count of 3, copy that action from the step above and paste it into the "At the beginning of scene" event, in our event sheet.
 
-![](/gdevelop5/tutorials/asteroids/fail_state/pasted/20220119-232141.png)
+![](fail_state/pasted/20220119-232141.png)
 
 ## Out of lives event
 
@@ -73,13 +73,13 @@ Condition:
 Action:
 -"Delete the object" with Player object selected.
 
-![](/gdevelop5/tutorials/asteroids/fail_state/pasted/20220119-191521.png)
+![](fail_state/pasted/20220119-191521.png)
 
 ## Game over text
 
 Create a text object and call it "GameOver". Change its font size to 100 and its color to white, and then write "game over" in the "Initial text to display" section. Place this text object in to your game, within the default border of your screen, and change this object's layer to the UI layer you created earlier.
 
-![](/gdevelop5/tutorials/asteroids/asteroids_gif_15_putting_game_over_text_in_screen.gif)
+![](asteroids_gif_15_putting_game_over_text_in_screen.gif)
 
 ## Game over event
 
@@ -89,8 +89,8 @@ Go to the event sheet, open the "Beginning of scene" event group and add the fol
 Then open the player event group and add the following action to the "player dead" event:
 "Show" with the "GameOver" text object selected.
 
-![](/gdevelop5/tutorials/asteroids/asteroids_gif_16_show_and_hide_game_over.gif)
+![](asteroids_gif_16_show_and_hide_game_over.gif)
 
 ## Finished
 
-Now that your game is finished, be sure to check out the [Original video example](/gdevelop5/tutorials/end_result) and see what differences there are between your finished game and the example project.
+Now that your game is finished, be sure to check out the [Original video example](/gdevelop5/tutorials/asteroids/end_result) and see what differences there are between your finished game and the example project.

docs/gdevelop5/tutorials/asteroids/firing_bullet.md

@@ -22,17 +22,17 @@ Be sure to orient the bullet so it is facing to the right, just like your ship s
 
 To do this, open up Piskel and click the resize tab.\\ In this tab, set the anchor to the middle of the image and deselect "maintain aspect ratio", then change the width to be the same as the current height and click the resize button. Now that it's a square, rotate the bullet to be facing to the right, and resize the image height to be that of the original width. Then save your work.
 
-![](/gdevelop5/tutorials/asteroids/asteroids_gif_6_rotate_bullet.gif)
+![](asteroids_gif_6_rotate_bullet.gif)
 
 ## Edit points
 
 Click the "Edit points" button for the Bullet object, and grab the origin point and move it to the center of the object.
 
-![](/gdevelop5/tutorials/asteroids/firing_bullet/pasted/20220119-162810.png)
+![](firing_bullet/pasted/20220119-162810.png)
 
 Go to your Player object and click "Edit points".\\ Add a new point and place it in the middle of your ship, close to the nose. Name this point "BulletSpawn".
 
-![](/gdevelop5/tutorials/asteroids/asteroids_gif_7_add_bullet_spawn_point.gif)
+![](asteroids_gif_7_add_bullet_spawn_point.gif)
 
 ## Create bullet
 
@@ -48,10 +48,10 @@ Action:
 -"Add a force (angle)" (Common Action, not Physics Engine) using the Player object's angle and a speed of 350 pixels per second. Select permanent instead of instant.
 -"Z order" and use the expression builder to find the Z order of the Player object, and subtract that by 1. So the expression should read Player.ZOrder()-1.
 
-![](/gdevelop5/tutorials/asteroids/asteroids_gif_8_setting_up_fire_bullet.gif)
+![](asteroids_gif_8_setting_up_fire_bullet.gif)
 
 ## Organization
 
 Create an event group called "Player" and put all of the events you just created into this group. Make sure none of the events get placed as sub events.
 
-![](/gdevelop5/tutorials/asteroids/firing_bullet/pasted/20220119-171618.png)
+![](firing_bullet/pasted/20220119-171618.png)

docs/gdevelop5/tutorials/asteroids/index.md

@@ -24,28 +24,28 @@ Download the art and familiarize yourself with what the pack contains.
 
 When you open the engine, you'll see this screen. Click on the button that has been highlighted in red.
 
-![](/gdevelop5/tutorials/asteroids_example_image1.png)
+![](asteroids_example_image1.png)
 
 ## Name project
 
 Give your project a name, and click on the create project button.
 
-![](/gdevelop5/tutorials/asteroids/pasted/20220121-152746.png)
+![](pasted/20220121-152746.png)
 
 ## Add a scene
 
 Add a scene by pressing on the highlighted button in the image below. Right click on that scene to rename it. Then left click on the scene to open it.
 
-![](/gdevelop5/tutorials/asteroids_example_image2.png)
+![](asteroids_example_image2.png)
 
 ## Set background color
 
 Right click on the background of the game scene, and click on "Scene properties". From there, click on the color selector and drag to select black.
 
-![](/gdevelop5/tutorials/asteroids_example_image3.png)
+![](asteroids_example_image3.png)
 
 ## Check game resolution
 
 Open the project manager, and go to the game settings.\\ Select properties, and make sure your game's resolution is 800 by 600 - or the preferred "Golden Ration" of 800x500
 
-![](/gdevelop5/tutorials/asteroids_gif_recording_1_check_game_resolution.gif)
+![](asteroids_gif_recording_1_check_game_resolution.gif)

docs/gdevelop5/tutorials/asteroids/screen_wrap.md

@@ -20,7 +20,7 @@ In your game scene, open the "objects groups editor" panel, which is found in th
 
 From this panel, create an object group called "Everything", and add your Player object, Bullet, and each type of asteroid to this group.
 
-![](/gdevelop5/tutorials/asteroids/asteroids_gif_11_everything_object_group.gif)
+![](asteroids_gif_11_everything_object_group.gif)
 
 ## Screen wrap
 
@@ -40,4 +40,4 @@ And then recreate this event for the Y position, making sure to use 630 instead
 
 So if an object goes 30 pixels off screen it will have it's position moved to the opposite X or Y position depending on what part of the screen it went through. But, we multiply it by 0.95 (or 95%) so it will no longer be out of bounds when flipped.
 
-![](/gdevelop5/tutorials/asteroids/screen_wrap/pasted/20220119-182309.png)
+![](screen_wrap/pasted/20220119-182309.png)

docs/gdevelop5/tutorials/asteroids/setting_scene.md

@@ -26,7 +26,7 @@ Action:
 - "Camera center Y position" with modification sign "= (set to)" and the value 0.  (Leave layer and camera number as they are)
 - "Change camera zoom" with a value of 0.5. (Leave layer and camera number as they are)
 
-![](/gdevelop5/tutorials/asteroids/camera_settings/pasted/20220119-172243.png)
+![](camera_settings/pasted/20220119-172243.png)
 
 ## Creating asteroids
 
@@ -41,4 +41,4 @@ Edit each of these objects so their origin points are at the center of the image
 
 Place a few of each of these objects into your scene.  Remember that your camera is zoomed out and centers on the 0,0 point.  This means that center of your game will be the top-left corner of the scene editor.  You will likely want to place your ship object at that top-left location (0,0)
 
-![](/gdevelop5/tutorials/asteroids/asteroids_gif_9_physics_behavior_and_place_in_scene.gif)
+![](asteroids_gif_9_physics_behavior_and_place_in_scene.gif)

docs/gdevelop5/tutorials/asteroids/ship_and_movement_controls.md

@@ -18,25 +18,25 @@ title: Asteroids
 
 Create a sprite object, give it a single ship animation, and name it Player.
 
-![](/gdevelop5/tutorials/asteroids_gif_2_creating_the_player_sprite_and_naming_it.gif)
+![](asteroids_gif_2_creating_the_player_sprite_and_naming_it.gif)
 
 ## Physics behavior
 
 Double click the Player sprite object. Give that object the Physics 2.0 behavior, and change the gravity value to 0.
 
-![](/gdevelop5/tutorials/asteroids_gif_3_giving_the_object_physics_behavior.gif)
+![](asteroids_gif_3_giving_the_object_physics_behavior.gif)
 
 Change the Player object's physics 2.0 behavior values to match the values in the image below.
 
-![](/gdevelop5/tutorials/asteroids/ship_and_movement_controls/pasted/20220130-045713.png)
+![](ship_and_movement_controls/pasted/20220130-045713.png)
 
 ## Align image and points
 
 Open the Player object and edit the animation through Piskel. Click to rotate the image until the nose of the ship is facing to the right. We do this because the base setting for 0 degrees within the engine is to the right. This properly aligns the movement controls and the object for any force that is applied to the object. A great example of the rotation/alignment can be found in the full length video.
 
 Next, edit the Player object's origin point from the Edit points screen. Drag the origin to the center of the object, so that when we apply a force to the object it will be applied at this point.
 
-![](/gdevelop5/tutorials/asteroids/asteroids_gif_5_rotate_image_and_points.gif)
+![](asteroids_gif_5_rotate_image_and_points.gif)
 
 ## Moving forward
 
@@ -51,10 +51,10 @@ Action:
 
 This force will be applied to the origin point.
 
-![](/gdevelop5/tutorials/asteroids_gif_4_moving_player_forward.gif)
+![](asteroids_gif_4_moving_player_forward.gif)
 
 ## Turning
 
 Create 2 more events, with the A/D keys being pressed as their conditions, but this time the action will be "Apply torque (rotational force)" and give them -0.5 or 0.5 based on the direction you would like them to go when either A or D is pressed.
 
-![](/gdevelop5/tutorials/asteroids_example_image4_showing_the_player_movement_controls.png)
+![](asteroids_example_image4_showing_the_player_movement_controls.png)

docs/gdevelop5/tutorials/asteroids/splitting_asteroids.md

@@ -22,7 +22,7 @@ Right click on a blank event in that group, hover over "Add Other", and select "
 
 Click the bar on the top of this event and select your big asteroid. This will check the event for every big asteroid in the scene every frame.
 
-![](/gdevelop5/tutorials/asteroids/asteroids_gif_10_creating_for_each_object_event_2.gif)
+![](asteroids_gif_10_creating_for_each_object_event_2.gif)
 
 ## Splitting the big asteroid
 
@@ -39,12 +39,12 @@ Action:
 -"Delete the object" and select the big asteroid.
 -"Delete the object" and select the bullet.
 
-![](/gdevelop5/tutorials/asteroids/splitting_asteroids/pasted/20220119-174917.png)
+![](splitting_asteroids/pasted/20220119-174917.png)
 
 ## Other asteroids
 
 For the medium asteroids, create the same event, but put the medium asteroid wherever the big asteroid was, and the small asteroid wherever the medium asteroid was.
 
 For the small asteroid, create the same event as above, but leave out the create, rotate, and apply force actions so that it just gets deleted.
 
-![](/gdevelop5/tutorials/asteroids/splitting_asteroids/pasted/20220119-180128.png)
+![](splitting_asteroids/pasted/20220119-180128.png)