Merge pull request #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();
+}