tracking 5.4; some highlighting

Author: cdhanna

articles/tutorials/advanced/2d_shaders/05_transition_effect/index.md

@@ -39,15 +39,15 @@ Add an override to the `LoadContent` method, and load the `sceneTransitionEffect
 
 Make sure to call the `Core`'s version of `LoadContent()` from the `Game1` class. In the previous tutorial, the method was left without calling the base method:
 
-[!code-csharp[](./snippets/snippet-5-03.cs)]
+[!code-csharp[](./snippets/snippet-5-03.cs?highlight=4)]
 
-To benefit from hot-reload, we need to update the effect in the `Core`'s `Update()` loop:
+And as we develop the effect, enable the debug UI:
 
-[!code-csharp[](./snippets/snippet-5-04.cs)]
+[!code-csharp[](./snippets/snippet-5-05.cs?highlight=5)]
 
-And as we develop the effect, enable the debug UI:
+To benefit from hot-reload, we need to update the effect in the `Core`'s `Update()` loop:
 
-[!code-csharp[](./snippets/snippet-5-05.cs)]
+[!code-csharp[](./snippets/snippet-5-04.cs?highlight=6)]
 
 If you run the game now, you should have a blank debug UI.
 
@@ -63,19 +63,19 @@ Currently, the shader is compiling and loading into the game, but it isn't being
 
 And initialize it in the `Initialize()` method:
 
-[!code-csharp[](./snippets/snippet-5-07.cs)]
+[!code-csharp[](./snippets/snippet-5-07.cs?highlight=7-8)]
 
 > [!tip] 
 > The `Pixel` property is a texture we can re-use for many effects, and it is helpful to have for debugging purposes. 
 
 In the `Core'`s `Draw()` method, use the `SpriteBatch` to draw a full screen sprite using the `Pixel` property. Make sure to put this code after the `s_activeScene` is drawn, because the scene transition effect should _cover_ whatever was rendered from the current scene:
 
-[!code-csharp[](./snippets/snippet-5-08.cs)]
+[!code-csharp[](./snippets/snippet-5-08.cs?highlight=10-12)]
 
 If you run the game now, you will see a white background, because the `Pixel` sprite is rendering on top of the entire game scene and GUM UI.
 
 > [!note]
-> We can still see the `ImGui.NET` debug UI because the debug UI is rendered in the `Core` class _after_ the current `Scene`'s `.Draw()` method finishes. 
+> We can still see the `ImGui.NET` debug UI because the debug UI is rendered _after_ the current drawing the `Pixel`.
 
 | ![Figure 5-4: The shader is being used to render a white full screen quad](./images/white.png) |
 | :--------------------------------------------------------------------------------------------: |
@@ -85,11 +85,11 @@ If you run the game now, you will see a white background, because the `Pixel` sp
 
 We need to be able to control the progress of the screen transition effect. Add the following parameter to the shader:
 
-[!code-hlsl[](./snippets/snippet-5-09.hlsl)]
+[!code-hlsl[](./snippets/snippet-5-09.hlsl?highlight=12)]
 
-And recall that unless the `Progress` parameter is actually _used_ somehow in the calculation of the output of the shader, it will be optimized out of the final compilation. So, for now, lets make the shader return the `Progress` value in the red value of the color:
+And recall that unless the `Progress` parameter is actually _used_ somehow in the calculation of the output of the shader, it will be optimized out of the final compilation. So, for now, we will make the shader return the `Progress` value in the red value of the color:
 
-[!code-hlsl[](./snippets/snippet-5-10.hlsl)]
+[!code-hlsl[](./snippets/snippet-5-10.hlsl?highlight=9)]
 
 Now you can use the slider in the debug UI to visualize the `Progress` parameter as the red channel. 
 

articles/tutorials/advanced/2d_shaders/05_transition_effect/snippets/snippet-5-04.cs

@@ -1,2 +1,9 @@
-// Check if the scene transition material needs to be reloaded.  
-SceneTransitionMaterial.Update();
+protected override void Update(GameTime gameTime)
+{
+    // ...
+    
+    // Check if the scene transition material needs to be reloaded.
+    SceneTransitionMaterial.Update();
+
+    base.Update(gameTime);
+}

articles/tutorials/advanced/2d_shaders/05_transition_effect/snippets/snippet-5-05.cs

@@ -1 +1,7 @@
-SceneTransitionMaterial.IsDebugVisible = true;
+protected override void LoadContent()
+{
+    base.LoadContent();
+    SceneTransitionMaterial = Content.WatchMaterial("effects/sceneTransitionEffect.fx");  
+    SceneTransitionMaterial.IsDebugVisible = true;
+}
+

articles/tutorials/advanced/2d_shaders/05_transition_effect/snippets/snippet-5-07.cs

@@ -1,3 +1,9 @@
-// Create a 1x1 white pixel texture for drawing quads.  
-Pixel = new Texture2D(GraphicsDevice, 1, 1);  
-Pixel.SetData(new Color[]{ Color.White });
+protected override void Initialize()
+{
+    base.Initialize();
+    // ...
+
+    // Create a 1x1 white pixel texture for drawing quads.
+    Pixel = new Texture2D(GraphicsDevice, 1, 1);
+    Pixel.SetData(new Color[]{ Color.White });
+}

articles/tutorials/advanced/2d_shaders/05_transition_effect/snippets/snippet-5-08.cs

@@ -1,4 +1,17 @@
-// Draw the scene transition quad  
-SpriteBatch.Begin(effect: SceneTransitionMaterial.Effect);  
-SpriteBatch.Draw(Pixel, GraphicsDevice.Viewport.Bounds, Color.White);  
-SpriteBatch.End();
+protected override void Draw(GameTime gameTime)
+{
+    // If there is an active scene, draw it.
+    if (s_activeScene != null)
+    {
+        s_activeScene.Draw(gameTime);
+    }
+    
+    // Draw the scene transition quad
+    SpriteBatch.Begin(effect: SceneTransitionMaterial.Effect);  
+    SpriteBatch.Draw(Pixel, GraphicsDevice.Viewport.Bounds, Color.White);  
+    SpriteBatch.End();
+    
+    Material.DrawVisibleDebugUi(gameTime);
+
+    base.Draw(gameTime);
+}

articles/tutorials/advanced/2d_shaders/05_transition_effect/snippets/snippet-5-09.hlsl

@@ -1 +1,19 @@
+#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
+
+// ...
+
 float Progress;
+
+// ...
+
+float4 MainPS(VertexShaderOutput input) : COLOR
+{
+    // ...
+}

articles/tutorials/advanced/2d_shaders/05_transition_effect/snippets/snippet-5-10.hlsl

@@ -1,38 +1,12 @@
-#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;  
-  
+// ...
+
 float Progress;  
-  
-sampler2D SpriteTextureSampler = sampler_state  
-{  
-    Texture = <SpriteTexture>;  
-};  
-  
-struct VertexShaderOutput  
-{  
-    float4 Position : SV_POSITION;  
-    float4 Color : COLOR0;  
-    float2 TextureCoordinates : TEXCOORD0;  
-};  
-  
+
+// ...
+
 float4 MainPS(VertexShaderOutput input) : COLOR  
 {  
     return float4(Progress, 0, 0, 1);  
 }  
 
-  
-technique SpriteDrawing  
-{  
-    pass P0  
-    {  
-        PixelShader = compile PS_SHADERMODEL MainPS();  
-    }  
-};
+// ...

articles/tutorials/advanced/2d_shaders/05_transition_effect/snippets/snippet-5-11.hlsl

@@ -1,2 +1,9 @@
-float2 uv = input.TextureCoordinates;  
-return float4(uv.x, 0, 0, 1);
+// ...
+
+float4 MainPS(VertexShaderOutput input) : COLOR  
+{  
+    float2 uv = input.TextureCoordinates;  
+    return float4(uv.x, 0, 0, 1);
+}  
+  
+// ...