Merge pull request MonoGame#40 from AristurtleDev/24-shaders

Chapter 24: Shaders

Author: AristurtleDev

articles/toc.yml

@@ -158,6 +158,8 @@
           href: tutorials/building_2d_games/22_snake_game_mechanics/
         - name: "23: Completing the Game"
           href: tutorials/building_2d_games/23_completing_the_game/
+        - name: "24: Shaders"
+          href: tutorials/building_2d_games/24_shaders/
 - name: Console Access
   href: console_access.md
 - name: Help and Support

articles/tutorials/building_2d_games/24_shaders/images/shader-pipeline.png

@@ -0,0 +1,35 @@
+#if OPENGL
+    #define SV_POSITION POSITION
+    #define VS_SHADERMODEL vs_3_0
+    #define PS_SHADERMODEL ps_3_0
+#else
+    #define VS_SHADERMODEL vs_4_0_level_9_1
+    #define PS_SHADERMODEL ps_4_0_level_9_1
+#endif
+
+Texture2D SpriteTexture;
+
+sampler2D SpriteTextureSampler = sampler_state
+{
+    Texture = <SpriteTexture>;
+};
+
+struct VertexShaderOutput
+{
+    float4 Position : SV_POSITION;
+    float4 Color : COLOR0;
+    float2 TextureCoordinates : TEXCOORD0;
+};
+
+float4 MainPS(VertexShaderOutput input) : COLOR
+{
+    return tex2D(SpriteTextureSampler,input.TextureCoordinates) * input.Color;
+}
+
+technique SpriteDrawing
+{
+    pass P0
+    {
+        PixelShader = compile PS_SHADERMODEL MainPS();
+    }
+};

articles/tutorials/building_2d_games/24_shaders/index.md

@@ -0,0 +1,34 @@
+public override void Draw(GameTime gameTime)
+{
+    // Clear the back buffer.
+    Core.GraphicsDevice.Clear(Color.CornflowerBlue);
+
+    if (_state != GameState.Playing)
+    {
+        // We are in a game over state, so apply the saturation parameter.
+        _grayscaleEffect.Parameters["Saturation"].SetValue(_saturation);
+
+        // And begin the sprite batch using the grayscale effect.
+        Core.SpriteBatch.Begin(samplerState: SamplerState.PointClamp, effect: _grayscaleEffect);
+    }
+    else
+    {
+        // Otherwise, just begin the sprite batch as normal.
+        Core.SpriteBatch.Begin(samplerState: SamplerState.PointClamp);
+    }
+
+    // Draw the tilemap
+    _tilemap.Draw(Core.SpriteBatch);
+
+    // Draw the slime.
+    _slime.Draw();
+
+    // Draw the bat.
+    _bat.Draw();
+
+    // Always end the sprite batch when finished.
+    Core.SpriteBatch.End();
+
+    // Draw the UI
+    _ui.Draw();
+}

articles/tutorials/building_2d_games/24_shaders/snippets/defaultshader.fx

@@ -0,0 +1,8 @@
+// The grayscale shader effect.
+private Effect _grayscaleEffect;
+
+// The amount of saturation to provide the grayscale shader effect
+private float _saturation = 1.0f;
+
+// The speed of the fade to grayscale effect.
+private const float FADE_SPEED = 0.02f;

articles/tutorials/building_2d_games/24_shaders/snippets/gamescene/draw.cs

@@ -0,0 +1,11 @@
+private void GameOver()
+{
+    // Show the game over panel
+    _ui.ShowGameOverPanel();
+
+    // Set the game state to game over
+    _state = GameState.GameOver;
+
+    // Set the grayscale effect saturation to 1.0f;
+    _saturation = 1.0f;
+}

articles/tutorials/building_2d_games/24_shaders/snippets/gamescene/fields.cs

@@ -0,0 +1,32 @@
+public override void LoadContent()
+{
+    // Create the texture atlas from the XML configuration file
+    TextureAtlas atlas = TextureAtlas.FromFile(Core.Content, "images/atlas-definition.xml");
+
+    // Create the tilemap from the XML configuration file.
+    _tilemap = Tilemap.FromFile(Content, "images/tilemap-definition.xml");
+    _tilemap.Scale = new Vector2(4.0f, 4.0f);
+
+    // Create the animated sprite for the slime from the atlas.
+    AnimatedSprite slimeAnimation = atlas.CreateAnimatedSprite("slime-animation");
+    slimeAnimation.Scale = new Vector2(4.0f, 4.0f);
+
+    // Create the slime
+    _slime = new Slime(slimeAnimation);
+
+    // Create the animated sprite for the bat from the atlas.
+    AnimatedSprite batAnimation = atlas.CreateAnimatedSprite("bat-animation");
+    batAnimation.Scale = new Vector2(4.0f, 4.0f);
+
+    // Load the bounce sound effect for the bat
+    SoundEffect bounceSoundEffect = Content.Load<SoundEffect>("audio/bounce");
+
+    // Create the bat
+    _bat = new Bat(batAnimation, bounceSoundEffect);
+
+    // Load the collect sound effect
+    _collectSoundEffect = Content.Load<SoundEffect>("audio/collect");
+
+    // Load the grayscale effect
+    _grayscaleEffect = Content.Load<Effect>("effects/grayscaleEffect");
+}

articles/tutorials/building_2d_games/24_shaders/snippets/gamescene/gameover.cs

@@ -0,0 +1,22 @@
+private void TogglePause()
+{
+    if (_state == GameState.Paused)
+    {
+        // We're now unpausing the game, so hide the pause panel
+        _ui.HidePausePanel();
+
+        // And set the state back to playing
+        _state = GameState.Playing;
+    }
+    else
+    {
+        // We're now pausing the game, so show the pause panel
+        _ui.ShowPausePanel();
+
+        // And set the state to paused
+        _state = GameState.Paused;
+
+        // Set the grayscale effect saturation to 1.0f;
+        _saturation = 1.0f;
+    }
+}

articles/tutorials/building_2d_games/24_shaders/snippets/gamescene/loadcontent.cs

@@ -0,0 +1,39 @@
+public override void Update(GameTime gameTime)
+{
+    // Ensure the UI is always updated
+    _ui.Update(gameTime);
+
+    if (_state != GameState.Playing)
+    {
+        // The game is in either a paused or game over state, so
+        // gradually decrease the saturation to create the fading grayscale.
+        _saturation = Math.Max(0.0f, _saturation - FADE_SPEED);
+
+        // If its just a game over state, return back
+        if (_state == GameState.GameOver)
+        {
+            return;
+        }
+    }
+
+    // If the pause button is pressed, toggle the pause state
+    if (GameController.Pause())
+    {
+        TogglePause();
+    }
+
+    // At this point, if the game is paused, just return back early
+    if (_state == GameState.Paused)
+    {
+        return;
+    }
+
+    // Update the slime;
+    _slime.Update(gameTime);
+
+    // Update the bat;
+    _bat.Update(gameTime);
+
+    // Perform collision checks
+    CollisionChecks();
+}

articles/tutorials/building_2d_games/24_shaders/snippets/gamescene/togglepause.cs

@@ -0,0 +1,53 @@
+#if OPENGL
+	#define SV_POSITION POSITION
+	#define VS_SHADERMODEL vs_3_0
+	#define PS_SHADERMODEL ps_3_0
+#else
+	#define VS_SHADERMODEL vs_4_0_level_9_1
+	#define PS_SHADERMODEL ps_4_0_level_9_1
+#endif
+
+Texture2D SpriteTexture;
+
+// A value between 0 and 1 that controls the intensity of the grayscale effect.
+// 0 = full color, 1 = full grayscale.
+float Saturation = 1.0;
+
+sampler2D SpriteTextureSampler = sampler_state
+{
+	Texture = <SpriteTexture>;
+};
+
+struct VertexShaderOutput
+{
+	float4 Position : SV_POSITION;
+	float4 Color : COLOR0;
+	float2 TextureCoordinates : TEXCOORD0;
+};
+
+float4 MainPS(VertexShaderOutput input) : COLOR
+{
+    // Sample the texture
+    float4 color = tex2D(SpriteTextureSampler, input.TextureCoordinates) * input.Color;
+
+    // Calculate the grayscale value based on human perception of colors
+    float grayscale = dot(color.rgb, float3(0.3, 0.59, 0.11));
+
+    // create a grayscale color vector (same value for R, G, and B)
+    float3 grayscaleColor = float3(grayscale, grayscale, grayscale);
+
+    // Linear interpolation between he grayscale color and the original color's
+    // rgb values based on the saturation parameter.
+    float3 finalColor = lerp(grayscale, color.rgb, Saturation);
+
+    // Return the final color with the original alpha value
+    return float4(finalColor, color.a);
+}
+
+technique SpriteDrawing
+{
+	pass P0
+	{
+		PixelShader = compile PS_SHADERMODEL MainPS();
+	}
+};

articles/tutorials/building_2d_games/24_shaders/snippets/gamescene/update.cs

@@ -44,6 +44,7 @@ This documentation will introduce game development concepts using the MonoGame f
 | [Chapter 21: Customizing Gum UI](21_customizing_gum_ui/index.md)                     | Learn how to create custom UI components with animations and visual styling in Gum.                                                                                                               | [21-Customizing-Gum-UI](https://github.com/shyfox-studio/learn-monogame-2d/tree/main/src/21-Customizing-Gum-UI/)                   |
 | [Chapter 22: Snake Game Mechanics](22_snake_game_mechanics/index.md)                 | Learn how to implement classic snake-like game mechanics and organize game objects into reusable components.                                                                                      | [22-Snake-Game-Mechanics](https://github.com/shyfox-studio/learn-monogame-2d/tree/main/src/22-Snake-Game-Mechanics/)               |
 | [Chapter 23: Completing the Game](23_completing_the_game/index.md)                   | Finalize game mechanics by updating our current demo into a snake-like inspired game.                                                                                                             | [23-Completing-The-Game](https://github.com/shyfox-studio/learn-monogame-2d/tree/main/src/23-Completing-The-Game/)                 |
+| [Chapter 24: Shaders](24_shaders/index.md)                                           | Learn how to create custom visual effects using shaders in MonoGame.                                                                                                                              | [24-Completing-The-Game](https://github.com/shyfox-studio/learn-monogame-2d/tree/main/src/24-Shaders/)                             |
 
 ## Conventions Used in This Documentation