Merge pull request #86 from Aggror/intermediatetutorials

New tutorial section - Intermediate C#

en/tutorials/csharpbeginner/index.md

@@ -1,7 +1,6 @@
 # C# Beginner
 These tutorials cover the beginner principles of using C# when working with the Stride game engine. Start here if you are new to Stride. Note: these tutorials are not a introduction to C# itself. Although having some coding experience is useful, it is not mandatory to get started with these tutorials. You can create the C# beginner tutorial project by starting the Stride launcher. Create a new project and select the template: Tutorials -> C# beginner. Every single scene is loaded as a child scene and demonstrates a sample script. 
 
-
 ## Youtube Tutorial Series
 All tutorials have a Youtube video. You can watch the entire C# Beginners playlist here: https://www.youtube.com/playlist?list=PLRZx2y7uC8mNySUMfOQf-TLNVnnHkLfPi 
 

en/tutorials/csharpintermediate/animation-basics.md

@@ -0,0 +1,8 @@
+# Animation basics
+
+This C# Intermediate tutorial covers the basics of animation with Stride. All animations exist as animation clips assets in your project. From there on we can start, pause and fade animations by using Stride's animation component.
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/o924grDYDjU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## Code
+[!code-csharp[AnimationBasics](..\..\..\..\stride\samples\Tutorials\CSharpIntermediate\CSharpIntermediate\CSharpIntermediate.Game\07_Animation\AnimationBasics.cs)]

en/tutorials/csharpintermediate/async-scripts.md

@@ -0,0 +1,19 @@
+# Async scripts
+
+This C# Intermediate tutorial covers the usage of asynchronous scripts or 'async' scripts. Up until this point every tutorial has been using Sync scripts. That means that those scripts are executed right after each other. If one particular sync script would take 1 second to complete, our game would freeze that 1 second, until the update loop is complete. All of the previously made Sync scripts can be made into an Async script.  
+
+With Async scripts we can perform heavy duty operations or reach out to an api without it freezing our application. A game can be made entirely with either Sync or Async scripts, or a combination of them both. 
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/xWozou1AJGM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## Code
+### Retrieving data from a web api
+A common use case for async scripts is retrieving data from a web API. Depending on the speed of the API and the amount of data to be retrieved, this can take up to somewhere between 20 milliseconds and 2 seconds. 
+[!code-csharp[AsyncWebApi](..\..\..\..\stride\samples\Tutorials\CSharpIntermediate\CSharpIntermediate\CSharpIntermediate.Game\05_Async\AsyncWebApi.cs)]
+
+### Async Collision trigger
+In a previous tutorial we made a collision trigger script that would notify the user once an object is passing through it. We can make a similar script using Async script.
+[!code-csharp[AsyncCollisionTrigger](..\..\..\..\stride\samples\Tutorials\CSharpIntermediate\CSharpIntermediate\CSharpIntermediate.Game\05_Async\AsyncCollisionTriggerDemo.cs)]
+
+
+

en/tutorials/csharpintermediate/audio.md

@@ -0,0 +1,13 @@
+# Audio
+
+## Explanation
+This C# Intermediate tutorial covers the basics of audio in your game. We learn about the various types of audio formats and settings. We cover how to use 3d spatialized audio and we also look at streaming audio.
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/Guf7PESCwnc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## Code
+### Audio sounds and spatial sounds
+[!code-csharp[audio](..\..\..\..\stride\samples\Tutorials\CSharpIntermediate\CSharpIntermediate\CSharpIntermediate.Game\08_Audio\AudioDemo.cs)]
+
+### Streaming sounds
+[!code-csharp[streamingaudio](..\..\..\..\stride\samples\Tutorials\CSharpIntermediate\CSharpIntermediate\CSharpIntermediate.Game\08_Audio\LoadMusic.cs)]

en/tutorials/csharpintermediate/collision-triggers.md

@@ -0,0 +1,16 @@
+# Collision triggers
+
+This C# intermediate tutorial covers the use of collision triggers. It teaches about rigid bodies and how to set those up in the editor.
+
+Rigid bodies determine how entities in our scene behave on gravity, whether they collide with other objects or in the case of this tutorial": trigger collision events in our code. We do this by setting up a collider box in our scene and letting a sphere roll through this object. The events that are triggered are then processed by the script that we will make for it.
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/SIy3pfoXfoQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## Code
+### Rigidbodies and collisions
+The code below looks for the rigidbody component that is attached to our entity. The rigidbody component contains all information we need for setting up triggers. The "IsTrigger" property determines that our collider doesn't stop other physics objects, but that it does trigger events in code (if they are set up at least).
+
+We spawn a sphere which also has a rigidbody. This sphere has a mass and is affected by gravity. The sphere will fall down and eventually roll through our collider box. In our update loop we check if there are collisions happening. If there are collisions, we get the colliding object and print out some text on screen. Once the sphere leaves the trigger box, our update loop sees that we no longer have collisions.
+
+Instead of using our update loop, we can also use collision events. 
+[!code-csharp[collisiontriggerdemo](..\..\..\..\stride\samples\Tutorials\CSharpIntermediate\CSharpIntermediate\CSharpIntermediate.Game\02_Collision-Triggers\CollisionTriggerDemo.cs)]

en/tutorials/csharpintermediate/first-person-camera.md

@@ -0,0 +1,13 @@
+# First person camera
+
+This C# Intermediate tutorial covers the implementation of first person camera. You learn about mouse movement and how to convert that into a 3d rotation. We set up camera angle limits and finally we apply movement to a first person character controller.
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/MSFXydzbtuE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+
+## Code
+### Camera controller
+[!code-csharp[firstpersoncamera](..\..\..\..\stride\samples\Tutorials\CSharpIntermediate\CSharpIntermediate\CSharpIntermediate.Game\09_FirstPersonCamera\FirstPersonCamera.cs)]
+
+### Character movement
+[!code-csharp[charactermovement](..\..\..\..\stride\samples\Tutorials\CSharpIntermediate\CSharpIntermediate\CSharpIntermediate.Game\10_ThirdPersonCamera\CharacterMovement.cs)]

en/tutorials/csharpintermediate/index.md

@@ -0,0 +1,211 @@
+# C# Intermediate
+These tutorials cover various intermediate principles of using C# when working with the Stride game engine. It is recommended that you go through all the C# Beginner tutorials first before going through all the intermediate tutorials. You can create the C# intermediate tutorial project by starting the Stride launcher. Create a new project and select the template: Tutorials -> C# intermediate. Every single tutorial has a 'Start' and a 'Completed' scene. You can view the Completed scenes to see what the end result of each tutorial will roughly look like. If you are following along with the videos, you can use the Start scenes as a good starting point. Those scenes only contain the bare minimum setup. 
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLRZx2y7uC8mOE6_L0ZiFxNBE7HmzU2dP7" 
+title="Stride C# intermediate youtube playlist" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+# All tutorials 
+<div class='tutorial'>
+    [
+    <div class='tutorial_title'>
+       <h2>UI Basics</h2>
+    </div>
+    <div class='stride-documentation-image'>
+        ![UI Basics](media/ui-basics_thumb.png "UI basics") 
+    </div>
+    <div class='tutorial_description'>
+
+        <ul>
+            <li>UI editor</li> 
+            <li>Hooking up events</li> 
+            <li>UI by code</li> 
+        </ul>
+    </div>
+    ](ui-basics.md) 
+</div>
+
+<div class='tutorial'>
+    [
+    <div class='tutorial_title'>
+       <h2>Collision triggers</h2>
+    </div>
+    <div class='stride-documentation-image'>
+        ![Collision triggers](media/collision-triggers_thumb.png "Collision triggers") 
+    </div>
+    <div class='tutorial_description'>
+        <ul>
+            <li>Colliders</li> 
+            <li>Trigger events</li> 
+            <li>Colliding entities</li> 
+        </ul>
+    </div>
+    ](collision-triggers.md) 
+</div>
+
+<div class='tutorial'>
+    [
+    <div class='tutorial_title'>
+       <h2>Raycasting</h2>
+    </div>
+    <div class='stride-documentation-image'>
+        ![Raycasting](media/raycasting_thumb.png "Raycasting") 
+    </div>
+    <div class='tutorial_description'>
+        <ul>
+            <li>Raycasting</li> 
+            <li>Collision groups</li> 
+            <li>Pentrative raycasting</li> 
+        </ul>
+    </div>
+    ](raycasting.md) 
+</div>
+
+
+<div class='tutorial'> 
+    [
+    <div class='tutorial_title'>
+       <h2>Project and Unproject</h2>
+    </div>
+    <div class='stride-documentation-image'>
+        ![Project and Unproject](media/project-unproject_thumb.png "Project and Unproject")  
+    </div>
+    <div class='tutorial_description'>
+        <ul>
+            <li>Projecting</li> 
+            <li>Unprojecting</li> 
+            <li>Viewports</li> 
+        </ul>
+    </div>
+    ](project-and-unproject.md) 
+</div>
+
+<div class='tutorial'>
+    [
+    <div class='tutorial_title'>
+       <h2>Async scripts</h2>
+    </div>
+    <div class='stride-documentation-image'>   
+        ![Async scripts](media/async-scripts_thumb.png "Async scripts")
+    </div>
+    <div class='tutorial_description'>
+        <ul>
+            <li>Asynchronous scripts</li> 
+            <li>Async collision triggers</li> 
+            <li>Async web api</li> 
+        </ul>
+    </div>
+    ](async-scripts.md) 
+</div>
+
+<div class='tutorial'>
+    [
+    <div class='tutorial_title'>
+       <h2>Scenes</h2>
+    </div>
+    <div class='stride-documentation-image'>
+        ![Scenes](media/scenes_thumb.png "Scenes")
+    </div>
+    <div class='tutorial_description'>
+        <ul>
+            <li>Child scenes</li> 
+            <li>Removing a scene</li> 
+            <li>(Re)loading a scene</li> 
+        </ul>
+    </div>
+    ](scenes.md) 
+</div>
+
+
+<div class='tutorial'> 
+    [
+    <div class='tutorial_title'>
+       <h2>Animation basics</h2>
+    </div>
+    <div class='stride-documentation-image'>
+        ![Animation basics](media/animation-basics_thumb.png "Animation basics")
+    </div>
+    <div class='tutorial_description'>
+        <ul>
+            <li>Animation clips</li> 
+            <li>Play and pause</li> 
+            <li>Cross fade</li> 
+        </ul>
+    </div>
+    ](animation-basics.md) 
+</div>
+
+<div class='tutorial'>
+    [
+    <div class='tutorial_title'>
+       <h2>Audio</h2>
+    </div>
+    <div class='stride-documentation-image'>
+        ![Audio](media/audio_thumb.png "Audio")
+    </div>
+    <div class='tutorial_description'>
+        <ul>
+            <li>Sounds and music</li> 
+            <li>Spatialized sound</li> 
+            <li>Streaming music</li> 
+        </ul>
+    </div>
+    ](audio.md) 
+</div>
+
+<div class='tutorial'>
+    [
+    <div class='tutorial_title'>
+       <h2>First person camera</h2>
+    </div>
+    <div class='stride-documentation-image'>
+        ![First person camera](media/first-person-camera_thumb.png "First person camera")   
+    </div>
+    <div class='tutorial_description'>
+        <ul>
+            <li>Mouse movement</li> 
+            <li>Applying rotation</li> 
+            <li>Limited camera angles</li> 
+        </ul>
+    </div>
+    ](first-person-camera.md) 
+</div>
+
+
+<div class='tutorial'>
+    [
+    <div class='tutorial_title'>
+       <h2>Third person camera</h2>
+    </div>
+    <div class='stride-documentation-image'>
+        ![Third person camera](media/third-person-camera_thumb.png "Third person camera")   
+    </div>
+    <div class='tutorial_description'>
+        <ul>
+            <li>Third person offset</li> 
+            <li>Wall clamping</li> 
+            <li>First person fallback</li> 
+        </ul>
+    </div>
+    ](third-person-camera.md) 
+</div>
+
+<div class='tutorial'>
+    [
+    <div class='tutorial_title'>
+       <h2>Navigation</h2>
+    </div>
+    <div class='stride-documentation-image'> 
+        ![Navigation](media/navigation_thumb.png "Navigation")
+    </div>
+    <div class='tutorial_description'>
+        <ul>
+            <li>Navigation meshes</li> 
+            <li>Navigation settings</li> 
+            <li>Pathfinding</li> 
+        </ul>
+    </div>
+    ](navigation.md) 
+</div>
+
+
+

en/tutorials/csharpintermediate/media/animation-basics_thumb.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e38e22b346b5ecd35445621d2321d874cdb3889b22277975b6d1080a19e88494
+size 63532

en/tutorials/csharpintermediate/media/async-scripts_thumb.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:25cb5dbc0cc21983add2d4a2f831a9fd5baf1c551f6d9e22e7490cf0dbc156ae
+size 48195

en/tutorials/csharpintermediate/media/audio_thumb.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6046ecec6a23141df0d0622d66c81ed9c32998ae17ac68d6ce67ca1b25a10b79
+size 58102

en/tutorials/csharpintermediate/media/collision-triggers_thumb.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b5ec532a5672d0d323dd512a54efd9fcc70d00fd7015c17615dd8fcf54f3bfbf
+size 49230

en/tutorials/csharpintermediate/media/first-person-camera_thumb.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:23275da55a731469d8931e9b2b1a905d8d8fda6c31479aba4a66b427e6ca5e57
+size 85485

en/tutorials/csharpintermediate/media/navigation_thumb.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:57d94e867768c008ebe934a0368b0454e2fc99f0bafb5ebfaf0e14c852a8c900
+size 89323

en/tutorials/csharpintermediate/media/project-unproject_thumb.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b1da3f5814ae4b0f92e8d3b5f9da9f5e2fc17fa7609fa61ea1571a0d6f822a8d
+size 74499

en/tutorials/csharpintermediate/media/raycasting_thumb.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:18d16caaac2db47120486623ac675b9df118c82fb5000fa0b139af1e2a50a909
+size 41065

en/tutorials/csharpintermediate/media/scenes_thumb.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6c32a0d936c68d69513600982ffa99af3ab66b3eac316f4eaf1e7c2cfeec1422
+size 41438

en/tutorials/csharpintermediate/media/third-person-camera_thumb.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ca92710d5d1fad4cc516110ed5011c2c420b809732001ee069cdcd3485a69459
+size 82678

en/tutorials/csharpintermediate/media/ui-basics_thumb.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c50c689d811932af6de9c5c13d120132b54e1a979af3f8dcb9d5a07684a0ad78
+size 35385

en/tutorials/csharpintermediate/navigation.md

@@ -0,0 +1,9 @@
+# Navigation
+
+This C# Intermediate tutorial covers the basics of the navigation system in Stride. In our world we can have so called 'navigation meshes'. These are meshes that are generated around your level geometry. The navigation mesh is used to calculate the quickest path to a destination. 
+We learn about the editors Navigation mesh settings, navigation bounding boxes and in code we learn how to move an object to a destination using the Navigation component that comes with the Stride engine.
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/_r7RAM-3neY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## Code
+[!code-csharp[NavigateCharacter](..\..\..\..\stride\samples\Tutorials\CSharpIntermediate\CSharpIntermediate\CSharpIntermediate.Game\11_Navigation\NavigateCharacter.cs)]

en/tutorials/csharpintermediate/project-and-unproject.md

@@ -0,0 +1,17 @@
+# Project and Unproject
+
+This C# Intermediate tutorial covers projecting and unprojecting coordinates from 3D to 2Dd and vice versa. When we want to 'convert' 3D coordinates to a 2D screen, we speak 'Projecting'. The other way around is called 'Unprojecting'. Both scenarios are fairly common in 3D games. 
+
+The 3D to 2D or projecting happens for instance when you have a 3d quest marker. When the target you need to travel to is somewhere in front of you in the world, then you want to draw a 2D quest marker on screen that gives you an indication of where in the 3D world that target is located.    
+
+From 2D to 3D is often used to convert a mouse coordinate into the looking direction of the camera. This can be used for firing a weapon or setting a target on a map when playing a strategy game.
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/r2sMWGPidis" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+
+## Code
+### Project
+[!code-csharp[project](..\..\..\..\stride\samples\Tutorials\CSharpIntermediate\CSharpIntermediate\CSharpIntermediate.Game\04_Project-UnProject\ProjectDemo.cs)]
+
+## Unproject
+[!code-csharp[unproject](..\..\..\..\stride\samples\Tutorials\CSharpIntermediate\CSharpIntermediate\CSharpIntermediate.Game\04_Project-UnProject\UnprojectDemo.cs)]

en/tutorials/csharpintermediate/raycasting.md

@@ -0,0 +1,15 @@
+# Raycasting
+
+This C# Intermediate tutorial covers raycasting. Raycasting is an essential subject in 3d games. With raycasts we can detect if and what kinds of objects are in our line of sight. This can be used for detecting enemies or how far an object really is. 
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/uIM6jxM7OyE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## Code
+### Raycast
+This script sends out a raycast from the weapons barrel and sends it to an endpoint a little further. We check if we hit something along the way. If we do, we calculate the distance between the weapon barrel and the hit point. We then scale a laser to that distance to visualize the actual raycast. Depending on the collision group and filters, some objects are ignored.
+[!code-csharp[editorpages](..\..\..\..\stride\samples\Tutorials\CSharpIntermediate\CSharpIntermediate\CSharpIntermediate.Game\03_Raycasting\RaycastDemo.cs)]
+
+
+### Penetrative raycast
+In our first script, the raycast returns to us as soon as it hits the first object along its path. We can also send out a raycast to an endpoint, and let it return to us when it has reached its endpoint. It gives us back a list of objects that it has hit along the way. This list can be empty but also exists out of various objects. Depending on the collision group and filters, some objects are ignored.
+[!code-csharp[editorpages](..\..\..\..\stride\samples\Tutorials\CSharpIntermediate\CSharpIntermediate\CSharpIntermediate.Game\03_Raycasting\RaycastPenetratingDemo.cs)]

en/tutorials/csharpintermediate/scenes.md

@@ -0,0 +1,14 @@
+# Scenes
+
+This C# Intermediate tutorial covers the concept of Scenes in Stride. Stride allows Scenes to have an infinite amount of child scenes which on their terms also can load an infinite amount of child scenes. However, every scene loaded is unique. A scene can not be loaded twice at the same time. Both the editor and when loading scenes through code, will prevent a scene from being loaded twice at the same time.
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/G7OvA-9erpE " frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## Code
+### Loading a child scene
+This script loads in a child scene by pressing a defined key. Pressing that same key again, will unload the loaded child scene. Every time we load the childscene again, we offset it a little in the Y direction to demonstrate the offsetting option for child scenes.
+[!code-csharp[editorpages](..\..\..\..\stride\samples\Tutorials\CSharpIntermediate\CSharpIntermediate\CSharpIntermediate.Game\06_Scenes\LoadChildScene.cs)]
+
+### (Re)loading a scene
+We can get the top most scene in our world which is called the RootScene. If we unload that scene, we can then load in a completely new scene in order to swap or switch to a new scene. That same script can also be used to reload the same scene in case you want to restart your scene,
+[!code-csharp[editorpages](..\..\..\..\stride\samples\Tutorials\CSharpIntermediate\CSharpIntermediate\CSharpIntermediate.Game\06_Scenes\LoadScene.cs)]

en/tutorials/csharpintermediate/third-person-camera.md

@@ -0,0 +1,13 @@
+# Third person camera
+
+This C# Intermediate tutorial covers the implementation of a third person camera. Since it reuses a large portion of the ![First person camera](first-person-camera.md), it is recommended that you watch that tutorial first.
+This tutorial teaches about how to use raycasting to position the camera behind the player. If the player is to close any walls, the camera will be moved closer to the player. Too close to the player? We simply switch to first person mode.
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/qSFZ4ISFcrE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## Code
+### Third person camera
+[!code-csharp[firstpersoncamera](..\..\..\..\stride\samples\Tutorials\CSharpIntermediate\CSharpIntermediate\CSharpIntermediate.Game\10_ThirdPersonCamera\ThirdPersonCamera.cs)]
+
+### Character movement
+[!code-csharp[firstpersoncamera](..\..\..\..\stride\samples\Tutorials\CSharpIntermediate\CSharpIntermediate\CSharpIntermediate.Game\10_ThirdPersonCamera\CharacterMovement.cs)]

en/tutorials/csharpintermediate/ui-basics.md

@@ -0,0 +1,17 @@
+# UI Basics
+
+This first C# intermediate tutorial covers the basics of creating UI with Stride. We will learn about the UI editor, acessing UI page elements and even how to setup UI entirely by code. The Stride editor comes with a UI editor which we can utilize to create UI pages. We can then add UI elements to these pages, like buttons and textfields.
+
+Those UI elements can be referenced in code, so that can set up events like "button-clicked" or "text-changed". 
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/rB5duwfs1mU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 
+<iframe width="560" height="315" src="https://www.youtube.com/embed/NnnbHn9LQUU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## Code
+### Stride editor UI pages
+The code below will look for a Page component that has been added to the current entity. On that page we search for UI elements like buttons and textfields. We than tell those UI elements what happens when we click on them, or that something needs to be done when a text value changes.
+[!code-csharp[editorpages](..\..\..\..\stride\samples\Tutorials\CSharpIntermediate\CSharpIntermediate\CSharpIntermediate.Game\01_UI-Basics\UIByEditor.cs)]
+
+### UI pages made entirely by code
+This script will create everything from scratch: a UI page, a stackpanel, a button, a textfield and the interactive logic behind it.
+[!code-csharp[uibycode](..\..\..\..\stride\samples\Tutorials\CSharpIntermediate\CSharpIntermediate\CSharpIntermediate.Game\01_UI-Basics\UIByCode.cs)]

en/tutorials/index.md

@@ -41,3 +41,19 @@ These pages contain tutorials to learn more about the Stride game engine.
     </a>
 </div>
 
+<div class='tutorial'>
+    <a href="csharpintermediate/index.md"> 
+        <div class='stride-documentation-image'>
+            ![C# intermediate tutorials](media/csharp-intermediate.png "C# intermediate tutorials")
+        </div>
+        <div class='tutorial_description'>
+            <ul>
+                <li>UI basics</li> 
+                <li>Collisions</li> 
+                <li>Racysting</li> 
+                <li>First person camera</li> 
+            </ul>
+        </div>
+    </a>
+</div>
+

en/tutorials/media/csharp-beginner.jpg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fab74fa1c5dfef79b59d5d931af7f422ffc22c0421e6ab320d7916de579f0c6c
+size 21849

en/tutorials/media/csharp-intermediate.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fedd21a35cd96bc80ef2394353957beea9f694eb8b2bd5700ecc0b5a06e4c4e7
+size 71698

en/tutorials/media/gamestudio.jpg

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4aae41174bd81fe41eadb55a522eddc2d4c0a8677953fe56eb910aaa9ce1e7f4
-size 335326
+oid sha256:ea415f1df3a4689657e7408a418301a5641b7ad512c208ba323a5c12fad65aa8
+size 20109

en/tutorials/media/tutorial_advanced.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:4aef0f50d837664433cf5dbe9112ac1cd78ab1c67475b75d06fd98415febf8ed
-size 25597

en/tutorials/media/tutorial_basics.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:8da14dd4f4d5e25604de9351fd5d7a163981ac388936c080fa345c678764b49f
-size 25711

en/tutorials/media/tutorial_intermediate.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:c049133a26fedf5eb2ce29f67fe46a55f3d4ee3ae6e809cc7f1041a691608c5a
-size 27428

en/tutorials/toc.md

@@ -28,4 +28,16 @@
 ### [Virtual buttons](csharpbeginner/virtual-buttons.md)
 ### [Linear Interpolation](csharpbeginner/linear-interpolation.md)
 ### [Loading content](csharpbeginner/loading-content.md)
-### [Instantiating prefabs](csharpbeginner/instantiating-prefabs.md)
+### [Instantiating prefabs](csharpbeginner/instantiating-prefabs.md)
+## [C# Intermediate](csharpintermediate/index.md)
+### [UI basics](csharpintermediate/ui-basics.md)
+### [Collision triggers](csharpintermediate/collision-triggers.md) 
+### [Racyasting](csharpintermediate/raycasting.md) 
+### [Project and Unproject](csharpintermediate/project-and-unproject.md) 
+### [Async scripts](csharpintermediate/async-scripts.md) 
+### [Scenes](csharpintermediate/scenes.md) 
+### [Animation](csharpintermediate/animation-basics.md) 
+### [Audio](csharpintermediate/audio.md) 
+### [First person camera](csharpintermediate/first-person-camera.md) 
+### [Third person camera](csharpintermediate/third-person-camera.md) 
+### [Navigation](csharpintermediate/navigation.md)