diff --git a/articles/tutorials/advanced/2d_shaders/01_introduction/index.md b/articles/tutorials/advanced/2d_shaders/01_introduction/index.md index 2b756e2e..a84ff486 100644 --- a/articles/tutorials/advanced/2d_shaders/01_introduction/index.md +++ b/articles/tutorials/advanced/2d_shaders/01_introduction/index.md @@ -29,3 +29,11 @@ Most of our shader files (`.fx`) will be created in the `Content/effects` folder Now that our project is set up, we can get to work. The focus for the first several chapters will be to create a workflow for developing shaders in MonoGame. Once we have a hot-reload system, a class to manage the effects, and a debug UI ready, we will carry on and build up 5 effects. The effects will range from simple pixel shaders and vertex shaders up to rendering techniques. As we develop these shaders together, we will build an intuition for how to tackle shader development. Continue to the next chapter, [Chapter 02: Hot Reload](../02_hot_reload/index.md). + +## Sample Source + +The full source for this tuturial can be located on the `3.8.5` branch of the main [MonoGame.Samples repository](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders) + +As shown below: + +### [https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders) diff --git a/articles/tutorials/advanced/2d_shaders/02_hot_reload/index.md b/articles/tutorials/advanced/2d_shaders/02_hot_reload/index.md index 2d4a2f3d..6e049973 100644 --- a/articles/tutorials/advanced/2d_shaders/02_hot_reload/index.md +++ b/articles/tutorials/advanced/2d_shaders/02_hot_reload/index.md @@ -19,6 +19,14 @@ A hot-reload system allows you to get to step 4, fix whatever bug appeared, and > [!note] > The hot-reload feature will be enabled during the _development_ of your game, but this system will not allow shaders to be dynamically reloaded in the final built game. +## Sample Source + +The full source for this tuturial can be located on the `3.8.5` branch of the main [MonoGame.Samples repository](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders) + +As shown below: + +### [https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders) + ## Time to get started! If you are following along with code, here is the code from the end of the previous tutorial series, [Starting Code](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.4/Tutorials/learn-monogame-2d/src/27-Conclusion/) diff --git a/articles/tutorials/advanced/2d_shaders/03_the_material_class/index.md b/articles/tutorials/advanced/2d_shaders/03_the_material_class/index.md index 6fc76a89..249c4691 100644 --- a/articles/tutorials/advanced/2d_shaders/03_the_material_class/index.md +++ b/articles/tutorials/advanced/2d_shaders/03_the_material_class/index.md @@ -17,6 +17,14 @@ If you are following along with code, here is the code from the end of the [prev > > ```dotnet build -t:WatchContent --tl:off``` +## Sample Source + +The full source for this tuturial can be located on the `3.8.5` branch of the main [MonoGame.Samples repository](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders) + +As shown below: + +### [https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders) + ## The Material Class The `_grayscaleEffect` serves a very specific purpose, but imagine instead of just _decreasing_ the saturation, the effect could also _increase_ the saturation. In that hypothetical, then calling it a "grayscale" effect only captures _some_ of the shader's value. Setting the `Saturation` to `0` would configure the shader to be a grayscale effect, but setting the `Saturation` really high would configure the shader to be a super-saturation effect. A single shader can be configured to create multiple distinct visuals. Many game engines use the term, _Material_, to recognize each _configuration_ of a shader effect. diff --git a/articles/tutorials/advanced/2d_shaders/04_debug_ui/index.md b/articles/tutorials/advanced/2d_shaders/04_debug_ui/index.md index 171d381b..8509c77a 100644 --- a/articles/tutorials/advanced/2d_shaders/04_debug_ui/index.md +++ b/articles/tutorials/advanced/2d_shaders/04_debug_ui/index.md @@ -9,6 +9,14 @@ In the previous tutorial series, you set up a UI using the [GUM framework](https If you are following along with code, here is the code from the end of the [previous chapter](https://github.com/MonoGame/MonoGame.Samples/blob/3.8.5/Tutorials/2dShaders/src/03-The-Material-Class). +## Sample Source + +The full source for this tuturial can be located on the `3.8.5` branch of the main [MonoGame.Samples repository](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders) + +As shown below: + +### [https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders) + ## Adding a Debug UI Library A common approach to building debug UIs in games is to use an _Immediate Mode_ system. An immediate mode UI redraws the entire UI from scratch every frame. `ImGui.NET` is a popular choice for MonoGame. It is a port of a C++ library called `DearImGui`. diff --git a/articles/tutorials/advanced/2d_shaders/05_transition_effect/index.md b/articles/tutorials/advanced/2d_shaders/05_transition_effect/index.md index e4c34ef0..2361b766 100644 --- a/articles/tutorials/advanced/2d_shaders/05_transition_effect/index.md +++ b/articles/tutorials/advanced/2d_shaders/05_transition_effect/index.md @@ -25,6 +25,14 @@ At the end of the chapter, you will have a screen transition effect like the one If you are following along with code, here is the code from the end of the [previous chapter](https://github.com/MonoGame/MonoGame.Samples/blob/3.8.5/Tutorials/2dShaders/src/04-Debug-UI). +## Sample Source + +The full source for this tuturial can be located on the `3.8.5` branch of the main [MonoGame.Samples repository](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders) + +As shown below: + +### [https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders) + ## The Scene Transition Effect Screen wipes are the bread and butter of transitions, you see them everywhere from Presentations, to window washers and even games (ok, I made the middle one up). The basic principle is sound, control what you draw and use a pattern to only draw part of an image, this is a useful technique for almost anything in game development, so let us get started with what you came here for, **BUILDING SHADERS**. diff --git a/articles/tutorials/advanced/2d_shaders/06_color_swap_effect/index.md b/articles/tutorials/advanced/2d_shaders/06_color_swap_effect/index.md index a50188b8..e1d24b81 100644 --- a/articles/tutorials/advanced/2d_shaders/06_color_swap_effect/index.md +++ b/articles/tutorials/advanced/2d_shaders/06_color_swap_effect/index.md @@ -15,6 +15,14 @@ At the end of this chapter, we will be able to fine-tune the colors of the game. If you are following along with code, here is the code from the end of the [previous chapter](https://github.com/MonoGame/MonoGame.Samples/blob/3.8.5/Tutorials/2dShaders/src/05-Transition-Effect). +## Sample Source + +The full source for this tuturial can be located on the `3.8.5` branch of the main [MonoGame.Samples repository](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders) + +As shown below: + +### [https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders) + ## The Basic Color Swap Effect At the moment, the game uses a lot of blue and gray textures. A common feature in retro-style games is to be able to change the color palette of the game. Another feature is to change the character's color during certain in-game events. For example, maybe the character flashes white when taking damage, or sparkles a gold color when picking up a combo. There are a few broad categories for implementing these styles of features: diff --git a/articles/tutorials/advanced/2d_shaders/07_sprite_vertex_effect/index.md b/articles/tutorials/advanced/2d_shaders/07_sprite_vertex_effect/index.md index 0190db44..f4d0438f 100644 --- a/articles/tutorials/advanced/2d_shaders/07_sprite_vertex_effect/index.md +++ b/articles/tutorials/advanced/2d_shaders/07_sprite_vertex_effect/index.md @@ -15,6 +15,14 @@ At the end of this chapter, we will be able to make our sprites appear with 3d p If you are following along with code, here is the code from the end of the [previous chapter](https://github.com/MonoGame/MonoGame.Samples/blob/3.8.5/Tutorials/2dShaders/src/06-Color-Swap-Effect). +## Sample Source + +The full source for this tuturial can be located on the `3.8.5` branch of the main [MonoGame.Samples repository](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders) + +As shown below: + +### [https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders) + ## Default Vertex Shader So far in this series, we have only dealt with pixel shaders. To recap, the job of a pixel shader is to convert some input `(u,v)` coordinate into an output color `(r,g,b,a)` value. diff --git a/articles/tutorials/advanced/2d_shaders/08_light_effect/index.md b/articles/tutorials/advanced/2d_shaders/08_light_effect/index.md index 49fca0bd..f8552bbd 100644 --- a/articles/tutorials/advanced/2d_shaders/08_light_effect/index.md +++ b/articles/tutorials/advanced/2d_shaders/08_light_effect/index.md @@ -24,6 +24,14 @@ Deferred rendering was popular for several years. MonoGame is an adaptation of X If you are following along with code, here is the code from the end of the [previous chapter](https://github.com/MonoGame/MonoGame.Samples/blob/3.8.5/Tutorials/2dShaders/src/07-Sprite-Vertex-Effect). +## Sample Source + +The full source for this tuturial can be located on the `3.8.5` branch of the main [MonoGame.Samples repository](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders) + +As shown below: + +### [https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders) + ## Adding Deferred Rendering Writing a simple deferred renderer can be worked out in a few steps: diff --git a/articles/tutorials/advanced/2d_shaders/09_shadows_effect/index.md b/articles/tutorials/advanced/2d_shaders/09_shadows_effect/index.md index 44d1b382..33ebaa92 100644 --- a/articles/tutorials/advanced/2d_shaders/09_shadows_effect/index.md +++ b/articles/tutorials/advanced/2d_shaders/09_shadows_effect/index.md @@ -19,6 +19,14 @@ By the end of this chapter, your game will look something like this: If you are following along with code, here is the code from the end of the [previous chapter](https://github.com/MonoGame/MonoGame.Samples/blob/3.8.5/Tutorials/2dShaders/src/08-Light-Effect). +## Sample Source + +The full source for this tuturial can be located on the `3.8.5` branch of the main [MonoGame.Samples repository](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders) + +As shown below: + +### [https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders) + ## 2D Shadows Take a look at the current lighting in _Dungeon Slime_. In this screenshot, there is a single light source. The bat and the slime do not cast shadows, and without these shadows, it is hard to visually identify where the light's position is. diff --git a/articles/tutorials/advanced/2d_shaders/10_next_steps/index.md b/articles/tutorials/advanced/2d_shaders/10_next_steps/index.md index 8ffd0381..0f404680 100644 --- a/articles/tutorials/advanced/2d_shaders/10_next_steps/index.md +++ b/articles/tutorials/advanced/2d_shaders/10_next_steps/index.md @@ -44,6 +44,14 @@ This tutorial series was an exploration of various shader topics, with a focus o - [Acerola](https://www.youtube.com/playlist?list=PLUKV95Q13e_U5g00d5M5MOacpVMiEbW9u) has great case study videos recreating effects from existing games. - [Freya Holmér](https://www.youtube.com/watch?v=MOYiVLEnhrw) has many great videos that delve into mathematics for game developers. +## Sample Source + +The full source for this tuturial can be located on the `3.8.5` branch of the main [MonoGame.Samples repository](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders) + +As shown below: + +### [https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders) + ## A Final Note From The Author Hey friend, diff --git a/articles/tutorials/advanced/2d_shaders/index.md b/articles/tutorials/advanced/2d_shaders/index.md index 3ac587c9..4b9b63b1 100644 --- a/articles/tutorials/advanced/2d_shaders/index.md +++ b/articles/tutorials/advanced/2d_shaders/index.md @@ -24,6 +24,14 @@ This documentation is for intermediate MonoGame users. It assumes that you have > [!IMPORTANT] > The concepts and code from the original tutorial, especially the [Shaders](https://docs.monogame.net/articles/tutorials/building_2d_games/24_shaders/index.html) chapter, are a mandatory prerequisite. We will be building directly on top of the final project from that series. +## Sample Source + +The full source for this tuturial can be located on the `3.8.5` branch of the main [MonoGame.Samples repository](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders) + +As shown below: + +### [https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.5/Tutorials/2dShaders) + ## Table of Contents This documentation is organized to be read sequentially, as each chapter builds upon the techniques and code from the previous one.