Bläddra i källkod

Added base pages for intermediate tutorials

Aggror Desktop 3 år sedan
förälder
incheckning
ed6f790a88

+ 13 - 0
en/tutorials/csharpintermediate/animation-basics.md

@@ -0,0 +1,13 @@
+# Virtual buttons
+You can find this sample in the tutorial project: **Menu** → **Virtual buttons** 
+
+## Explanation
+This C# Beginner tutorial covers how to create virtual buttons. Lets say that you want a player to jump when a key is pressed. The space bar is a common option, but what if a gamer wants to have a different key bind to this 'Jump' action? The answer here is the 'Virtual button'. Virtual buttons allow the mapping of one or more keyboard keys, mouse buttons or joystick buttons to a single 'Virtual button'. We can check for the name of that virtual button to see if any of the virtual buttons are triggered.
+
+![Virtual buttons](media/virtual-buttons.png)
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/uWgson2IIhs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+
+## Code
+[!code-csharp[VirtualButtons](..\..\..\..\stride\samples\Tutorials\CSharpBeginner\CSharpBeginner\CSharpBeginner.Game\Code\VirtualButtonsDemo.cs)]

+ 17 - 0
en/tutorials/csharpintermediate/async-scripts.md

@@ -0,0 +1,17 @@
+# Editor properties
+You can find this sample in the tutorial project: **Menu** &rarr; **Editor properties** 
+
+## Explanation
+This C# Beginner tutorial covers how to expose editor properties for Stride Game Studio. By creating a public variable at the top of our script, we can create editor properties. Some of the most common properties are demonstrated. We can also create public variables that are not shown in the editor.
+
+![Editor properties](media/editor-properties2.png)
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/GPiWbfsG5F0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+
+## Code
+[!code-csharp[Entity](..\..\..\..\stride\samples\Tutorials\CSharpBeginner\CSharpBeginner\CSharpBeginner.Game\Code\PropertiesDEmo.cs)]
+
+The code above will result in the following properties inside Stride game studio.
+
+![Editor properties](media/editor-properties.png)

+ 12 - 0
en/tutorials/csharpintermediate/audio.md

@@ -0,0 +1,12 @@
+# Keyboard input
+You can find this sample in the tutorial project: **Menu** &rarr; **Keyboard input** 
+
+## Explanation
+This C# Beginner tutorial covers how to handle keyboard input. We can check for the existence of a keyboard and then we can use various methods to check if a key is pressed, held down or released.
+
+![Keyboard input](media/keyboard-input.png)
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/UvKizPFAego" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## Code
+[!code-csharp[Entity](..\..\..\..\stride\samples\Tutorials\CSharpBeginner\CSharpBeginner\CSharpBeginner.Game\Code\KeyboardInputDemo.cs)]

+ 12 - 0
en/tutorials/csharpintermediate/collision-triggers.md

@@ -0,0 +1,12 @@
+# Delta Time
+You can find this sample in the tutorial project: **Menu** &rarr; **Delta Time** 
+
+## Explanation
+This C# Beginner tutorial covers the retrieval and usage of delta time. A games tries to update itself as often as possible. The amount of times it updates in a single second is called 'Frames Per Second' or shortened to 'FPS'. If we wanted to update a timer value, we would need a value that takes into account what the current amount of frames per second is. That is what delta time is used for. So whether your game runs 30 FPS or 120 FPS: you always want to have the same time scale.
+
+![Delta Time](media/deltatime.png)
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/WMGY8JOqzeE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## Code
+[!code-csharp[DeltaTime](..\..\..\..\stride\samples\Tutorials\CSharpBeginner\CSharpBeginner\CSharpBeginner.Game\Code\DeltaTimeDemo.cs)]

+ 13 - 0
en/tutorials/csharpintermediate/first-person-camera.md

@@ -0,0 +1,13 @@
+# Instantiating Prefabs
+You can find this sample in the tutorial project: **Menu** &rarr; **Instantiating prefabs** 
+
+## Explanation
+This C# Beginner tutorial covers how to instantiate prefabs. A prefab is a "master" version of an object that you can reuse wherever you need. When you change the prefab, every instance of the prefab changes too. A prefab that is instantiated by code does not give you a new prefab object, but instead gives you a list of entities. As long as these entities are not added to the scene, they wont be visible and attached scripts will not be executed. 
+
+![Instantiating Prefabs](media/instantiating-prefabs.png)
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/19u2QACzdAk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+
+## Code
+[!code-csharp[Instantiating Prefabs](..\..\..\..\stride\samples\Tutorials\CSharpBeginner\CSharpBeginner\CSharpBeginner.Game\Code\InstantiatingPrefabsDemo.cs)]

+ 289 - 0
en/tutorials/csharpintermediate/index.md

@@ -0,0 +1,289 @@
+# 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. 
+
+All tutorials have a Youtube video. You can watch the entire Beginners playlist here: https://www.youtube.com/playlist?list=PLRZx2y7uC8mNySUMfOQf-TLNVnnHkLfPi 
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/Z2kUQhSmdr0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+
+## Youtube Tutorial Series
+There is a YouTube series covering this CSharpBeginner course.  It is a great companion and may be found here: https://www.youtube.com/watch?v=Z2kUQhSmdr0&list=PLRZx2y7uC8mNySUMfOQf-TLNVnnHkLfPi
+
+# All tutorials 
+<div class='tutorial'>
+    [
+    <div class='tutorial_title'>
+       <h2>Getting the Entity</h2>
+    </div>
+    <div class='stride-documentation-image'>
+        ![Getting the Entity tutorial](media/getting-the-entity_thumb.png "Getting the Entity") 
+    </div>
+    <div class='tutorial_description'>
+
+        <ul>
+            <li>Retrieve the entity</li> 
+            <li>Retrieve the parent</li> 
+            <li>Print debug text</li> 
+        </ul>
+    </div>
+    ](entity.md) 
+</div>
+
+<div class='tutorial'>
+    [
+    <div class='tutorial_title'>
+       <h2>Child entities</h2>
+    </div>
+    <div class='stride-documentation-image'>
+        ![Child entities tutorial](media/child-entities_thumb.png "Child entities") 
+    </div>
+    <div class='tutorial_description'>
+        <ul>
+            <li>Get a specific child entity</li> 
+            <li>Get children in a list</li> 
+            <li>Get children of children</li> 
+        </ul>
+    </div>
+    ](child-entities.md) 
+</div>
+
+<div class='tutorial'>
+    [
+    <div class='tutorial_title'>
+       <h2>The transform</h2>
+    </div>
+    <div class='stride-documentation-image'>
+        ![The transform tutorial](media/transform-position_thumb.png "The transform") 
+    </div>
+    <div class='tutorial_description'>
+        <ul>
+            <li>Accessing the Transform component</li> 
+            <li>Get the local position</li> 
+            <li>Get the world position</li> 
+        </ul>
+    </div>
+    ](transform-position.md) 
+</div>
+
+
+<div class='tutorial'> 
+    [
+    <div class='tutorial_title'>
+       <h2>Editor properties</h2>
+    </div>
+    <div class='stride-documentation-image'>
+        ![Editor properties tutorial](media/editor-properties_thumb.png "Editor properties")  
+    </div>
+    <div class='tutorial_description'>
+        <ul>
+            <li>Defining various editor properties</li> 
+            <li>Defining lists</li> 
+            <li>Hiding public properties</li> 
+        </ul>
+    </div>
+    ](editor-properties.md) 
+</div>
+
+<div class='tutorial'>
+    [
+    <div class='tutorial_title'>
+       <h2>Getting a component</h2>
+    </div>
+    <div class='stride-documentation-image'>   
+        ![Get a component tutorial](media/getting-a-component_thumb.png "Get a component")
+    </div>
+    <div class='tutorial_description'>
+        <ul>
+            <li>Getting a component</li> 
+            <li>Remove a component</li> 
+            <li>Access methods of other components</li> 
+        </ul>
+    </div>
+    ](get-component.md) 
+</div>
+
+<div class='tutorial'>
+    [
+    <div class='tutorial_title'>
+       <h2>Adding a component</h2>
+    </div>
+    <div class='stride-documentation-image'>
+        ![Add a component tutorial](media/adding-a-component_thumb.png "Add a component")
+    </div>
+    <div class='tutorial_description'>
+        <ul>
+            <li>Adding a component</li> 
+            <li>Removing all components of 1 type</li> 
+            <li>Create a component if it doesn't exists</li> 
+        </ul>
+    </div>
+    ](add-component.md) 
+</div>
+
+
+<div class='tutorial'> 
+    [
+    <div class='tutorial_title'>
+       <h2>Delta time</h2>
+    </div>
+    <div class='stride-documentation-image'>
+        ![Delta time tutorial](media/deltatime_thumb.png "Delta time")
+    </div>
+    <div class='tutorial_description'>
+        <ul>
+            <li>Retrieving delta time</li> 
+            <li>Making a simple timer</li> 
+            <li>Making a simple countdown timer</li> 
+        </ul>
+    </div>
+    ](delta-time.md) 
+</div>
+
+<div class='tutorial'>
+    [
+    <div class='tutorial_title'>
+       <h2>Cloning an entity</h2>
+    </div>
+    <div class='stride-documentation-image'>
+        ![Cloning an entity tutorial](media/cloning-entities_thumb.png "Cloning an entity")
+    </div>
+    <div class='tutorial_description'>
+        <ul>
+            <li>Cloning an entity</li> 
+            <li>Adding an entity to the current scene</li> 
+            <li>Adding an entity as a child to a parent entity</li> 
+        </ul>
+    </div>
+    ](cloning-entities.md) 
+</div>
+
+<div class='tutorial'>
+    [
+    <div class='tutorial_title'>
+       <h2>Removing an entity</h2>
+    </div>
+    <div class='stride-documentation-image'>
+        ![Removing an entity tutorial](media/removing-entity_thumb.png "Removing an entity")   
+    </div>
+    <div class='tutorial_description'>
+        <ul>
+            <li>Cloning new entities using a timer</li> 
+            <li>Removing entities using a timer</li> 
+            <li>Removing an entity from the scene</li> 
+        </ul>
+    </div>
+    ](removing-entities.md) 
+</div>
+
+
+<div class='tutorial'> 
+    [
+    <div class='tutorial_title'>
+       <h2>Keyboard input</h2>
+    </div>
+    <div class='stride-documentation-image'>
+        ![Keyboard input tutorial](media/keyboard-input_thumb.png "Keyboard input tutorial") 
+    </div>
+    <div class='tutorial_description'>
+        <ul>
+            <li>Holding down a key</li> 
+            <li>Clicking a key</li> 
+            <li>Releasing a key</li> 
+        </ul>
+    </div>
+    ](keyboard-input.md) 
+</div>
+
+<div class='tutorial'>
+    [
+    <div class='tutorial_title'>
+       <h2>Mouse input</h2>
+    </div>
+    <div class='stride-documentation-image'> 
+        ![Mouse input tutorial](media/mouse-input_thumb.png "Mouse input tutorial")
+    </div>
+    <div class='tutorial_description'>
+        <ul>
+            <li>Holding down a mouse button</li> 
+            <li>Clicking or releasing a mouse button</li> 
+            
+            <li>Using the mouse wheel </li> 
+        </ul>
+    </div>
+    ](mouse-input.md) 
+</div>
+
+<div class='tutorial'>
+    [
+    <div class='tutorial_title'>
+       <h2>Virtual buttons</h2>
+    </div>
+    <div class='stride-documentation-image'>
+        ![Virtual buttons tutorial](media/virtual-buttons_thumb.png "Virtual buttons tutorial")
+    </div>
+    <div class='tutorial_description'>
+        <ul>
+            <li>Defining a virtual key configuration</li> 
+            <li>Binding input to the configuration</li> 
+            <li>Using the virtual buttons</li> 
+        </ul>
+    </div>
+    ](virtual-buttons.md) 
+</div>
+
+
+<div class='tutorial'> 
+    [
+    <div class='tutorial_title'>
+       <h2>Linear Interpolation</h2>
+    </div>
+    <div class='stride-documentation-image'>
+        ![Linear Interpolation tutorial](media/lerp_thumb.png "Linear Interpolation tutorial") 
+    </div>
+    <div class='tutorial_description'>
+        <ul>
+            <li>Calculating 'lerp' value</li> 
+            <li>Lerp between vector 3</li> 
+            <li>Random values</li> 
+        </ul>
+    </div>
+    ](linear-interpolation.md) 
+</div>
+
+<div class='tutorial'> 
+    [
+    <div class='tutorial_title'>
+       <h2>Loading content</h2>
+    </div>
+    <div class='stride-documentation-image'>
+        ![Loading content tutorial](media/loading-content_thumb.png "Loading content tutorial") 
+    </div>
+    <div class='tutorial_description'>
+        <ul>
+            <li>Loading content from code</li> 
+            <li>Unloading content</li> 
+            <li>Attach models to entities</li> 
+        </ul>
+    </div>
+    ](loading-content.md) 
+</div>
+
+<div class='tutorial'> 
+    [
+    <div class='tutorial_title'>
+       <h2>Instantiating prefabs</h2>
+    </div>
+    <div class='stride-documentation-image'>
+        ![Instantiating prefabs tutorial](media/instantiating-prefabs_thumb.png "Instantiating prefabs tutorial") 
+    </div>
+    <div class='tutorial_description'>
+        <ul>
+            <li>Instantiate prefab</li> 
+            <li>Load prefab from content</li> 
+            <li>Parent prefab entity</li> 
+        </ul>
+    </div>
+    ](instantiating-prefabs.md) 
+</div>
+
+

+ 12 - 0
en/tutorials/csharpintermediate/navigation.md

@@ -0,0 +1,12 @@
+# Navigation
+You can find this sample in the tutorial project: **Menu** &rarr; **Keyboard input** 
+
+## Explanation
+This C# Beginner tutorial covers how to handle keyboard input. We can check for the existence of a keyboard and then we can use various methods to check if a key is pressed, held down or released.
+
+![Keyboard input](media/keyboard-input.png)
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/UvKizPFAego" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## Code
+[!code-csharp[Entity](..\..\..\..\stride\samples\Tutorials\CSharpBeginner\CSharpBeginner\CSharpBeginner.Game\Code\KeyboardInputDemo.cs)]

+ 14 - 0
en/tutorials/csharpintermediate/project-and-unproject.md

@@ -0,0 +1,14 @@
+# Linear Interpolation
+You can find this sample in the tutorial project: **Menu** &rarr; **Linear Iterpolation** 
+
+## Explanation
+This C# Beginner tutorial covers linear interpolation which is often shortened to 'Lerp'. Sometimes you want to gradually change a value from a start value to a target value. This process is called linear interpolation. Stride exposes several Lerp functions for various types. Among them are Vector2, Vector3 and Vector4.
+
+![Linear interpolation](media/lerp.png)
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/jBXGvLBwXqI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+
+## Code
+The example consists of a simple timer that resets after a couple seconds. When the timer starts, a start position and a randomly generated target position are stored. A box will move between these two positions. Every frame a 'Lerp value' is calculated. The lerp value is used to determined what the current position of a moving box should be. Once the timer is done, the current position will become the start position and a new target position is again randomly generated.
+[!code-csharp[Lerp](..\..\..\..\stride\samples\Tutorials\CSharpBeginner\CSharpBeginner\CSharpBeginner.Game\Code\LerpDemo.cs)]

+ 20 - 0
en/tutorials/csharpintermediate/raycasting.md

@@ -0,0 +1,20 @@
+# Raycasting
+You can find this sample in the tutorial project: **Menu** &rarr; **Adding a component** 
+
+## Explanation
+This C# Beginner tutorial covers how to add and remove components. In the previous tutorial we learned how we can retrieve components that are already attached to an entity through the editor. This tutorial shows that we can accomplish the same thing by code. We can add the same component several times to the same entity. We also learn how to remove all of components of the same type again.
+
+![Add a component](media/adding-a-component.png)
+
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/KGuBSRyRmVo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## Code
+### AmmoComponent
+This is the AmmoComponent. We will not attach it to the entity in the editor. Instead we will add it ourselves in the AddingAComponent script.
+[!code-csharp[AmmoComponent](..\..\..\..\stride\samples\Tutorials\CSharpBeginner\CSharpBeginner\CSharpBeginner.Game\Code\AmmoComponent.cs)]
+
+### Adding A Component
+This component script, will add the AmmoComponent script to the entity. We then add another component (of the same type) before we remove all components of that type.
+Finally we learn how to automatically create a component, attach it to the entity and get a reference all in 1 line of code. This only works if the entity doesn't have any components of the given attached yet.
+[!code-csharp[AddingAComponent](..\..\..\..\stride\samples\Tutorials\CSharpBeginner\CSharpBeginner\CSharpBeginner.Game\Code\AddingAComponentDemo.cs)]

+ 14 - 0
en/tutorials/csharpintermediate/scenes.md

@@ -0,0 +1,14 @@
+# Transform Position
+You can find this sample in the tutorial project: **Menu** &rarr; **Transform Position** 
+
+## Explanation
+This C# Beginner tutorial covers the Transform component of an entity. The Transform component is such a commonly used component, that you can quick access it via 'Entity.Transform'. The transform contains all kinds of properties and methods for Position, Rotation and Scale. In this example we learn the difference between local and world position.
+
+![Transform Position](media/transform-position.png)
+
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/2N6NhijZuJk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+
+## Code
+[!code-csharp[Entity](..\..\..\..\stride\samples\Tutorials\CSharpBeginner\CSharpBeginner\CSharpBeginner.Game\Code\TransformPositionDemo.cs)]

+ 18 - 0
en/tutorials/csharpintermediate/third-person-camera.md

@@ -0,0 +1,18 @@
+# Getting a component
+You can find this sample in the tutorial project: **Menu** &rarr;  **Getting a component** 
+
+## Explanation
+This C# beginner tutorial covers how to get and remove components. Components are one of the most important concepts in Stride. Every entity in the scene has a list of components. The transform for instance is also a component. When we make custom scripts that inherit from SyncScript or AsyncScript, they turn into Components that we can attach to entities. We can attach these components to entities by using the editor or we can attach them by code.
+
+![Get a component](media/getting-a-component.png)
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/qRZG8qXkvDQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## Code
+### AmmoComponent
+This is the first component that we attach to an entity. In the second script, we will try to get this AmmoComponent.
+[!code-csharp[AmmoComponent](..\..\..\..\stride\samples\Tutorials\CSharpBeginner\CSharpBeginner\CSharpBeginner.Game\Code\AmmoComponent.cs)]
+
+### Getting A Component
+This component script, will retrieve the AmmoComponent script above and use its public method.
+[!code-csharp[GettingAComponent](..\..\..\..\stride\samples\Tutorials\CSharpBeginner\CSharpBeginner\CSharpBeginner.Game\Code\GettingAComponentDemo.cs)]

+ 12 - 0
en/tutorials/csharpintermediate/ui-basics.md

@@ -0,0 +1,12 @@
+# UI Basics
+You can find this sample in the tutorial project: **Menu** &rarr; **Removing entities** 
+
+## Explanation
+This C# Beginner tutorial covers how to remove existing entities from the scene and how to remove an entity that is a child of another entity. When we add entities to the Scene root we can remove that entity again by accessing the scene.Entities property. Entities that are added as children of other entities can be removed by accessing the children of an entity. 
+
+![Cloning entities](media/removing-entity.png)
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/TzwGe4RzAb4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+## Code
+[!code-csharp[Entity](..\..\..\..\stride\samples\Tutorials\CSharpBeginner\CSharpBeginner\CSharpBeginner.Game\Code\RemoveEntitiesDemo.cs)]

+ 16 - 0
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>
+

+ 14 - 2
en/tutorials/toc.md

@@ -13,7 +13,7 @@
 ### [Models](gamestudio/10-models.md)
 ### [Physics intro](gamestudio/11-physics-intro.md)
 ### [Static colliders](gamestudio/12-static-colliders.md)
-## [C# Beginner](csharpbeginner/index.md)
+## [C# intermediate](csharpbeginner/index.md)
 ### [Getting the Entity](csharpbeginner/entity.md)
 ### [Child entities](csharpbeginner/child-entities.md) 
 ### [Transform Position](csharpbeginner/transform-Position.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/racaysting.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/naviogation.md)