Proof to ch 20 plus pull in latest

Author: SimonDarksideJ

articles/toc.yml

@@ -162,6 +162,10 @@
           href: tutorials/building_2d_games/24_shaders/
         - name: "25: Packaging Your Game for Distribution"
           href: tutorials/building_2d_games/25_packaging_game/
+        - name: "26: Publishing Your Game to itch.io"
+          href: tutorials/building_2d_games/26_publish_to_itch/          
+        - name: "Chapter 27: Conclusion and Next Steps"
+          href: tutorials/building_2d_games/27_conclusion/
 - name: Console Access
   href: console_access.md
 - name: Help and Support

articles/tutorials/building_2d_games/14_soundeffects_and_music/index.md

@@ -152,9 +152,9 @@ Unlike sound effects, music is played through the [**MediaPlayer**](xref:Microso
 
 Before we can add audio to our game, we need some sound files to work with. Download the following audio files:
 
-- [bounce.wav](./files/bounce.wav) - For when the bat bounces off screen edges
-- [collect.wav](./files/collect.wav) - For when the slime eats the bat
-- [theme.ogg](./files/theme.ogg) - Background music
+- [bounce.wav](./files/bounce.wav){download} - For when the bat bounces off screen edges
+- [collect.wav](./files/collect.wav){download} - For when the slime eats the bat
+- [theme.ogg](./files/theme.ogg){download} - Background music
 
 > [!NOTE]
 >
@@ -171,6 +171,7 @@ Add these files to your content project using the MGCB Editor:
 5. For each file that is added, check its properties in the Properties panel:
    - For `.wav` files, ensure the *Processor* is set to `Sound Effect`.
    - For `.mp3` files, ensure the *Processor* is set to `Song`.
+6. Save the changes and close the MGCB Editor.
 
 Next, open the `Game1.cs` file and update it to the following:
 

articles/tutorials/building_2d_games/16_working_with_spritefonts/index.md

@@ -200,7 +200,7 @@ First, we will need to create a SpriteFont Definition.  Open the *Content.mgcb*
 
 Next, right-click the following TTF font and choose "Save Link as..." and save it in the same folder as the *04B_30.spriteFont* file we just created.
 
-- [04B_30.ttf](./files/04B_30.ttf)
+- [04B_30.ttf](./files/04B_30.ttf){download}
 
 ### Update the SpriteFont Description
 

articles/tutorials/building_2d_games/17_scenes/index.md

@@ -118,7 +118,7 @@ The key changes here are:
 With the scene architecture in place, the game can now be updated so that it is broken down into scenes. We will create two scenes; a title scene and a gameplay scene.  First, however, we need to add an additional SpriteFont Description that will be used during the title scene to display the title of the game. Open the *Content.mgcb* content project file in the MGCB Editor and perform the following:
 
 1. Right-click the `fonts` folder and choose `Add > New Item...`.
-2. Select `SpriteFont Description (.spritefont)` from the options
+2. Select `SpriteFont Description (.spritefont)` from the options.
 3. Name the file `04B_30_5x` and click `Create`.
 
 | ![Figure 17-1: The *04B_30_5x.spritefont* file created in the MGCB Editor](./images/font_added.png) |
@@ -134,7 +134,7 @@ Next, open the *04B_30_5x.spritefont* file in your code editor and make the foll
 The title scene serves as the game's initial starting point; the first impression the player gets when they launch the game.  For our game, the title scene will display the text for the title of the game and a prompt to inform the player what action to take to start the game.  We will use a simple trick for the title text in order to draw it with a drop shadow to add a bit of visual flair.
 
 > [!NOTE]
-> As the following screens are specific to our game and are not reuable bits, these will be added to your game project.
+> As the following screens are specific to our game and are not reusable bits, these will be added to your game project.
 >
 > Although, if you do end up making screens that are completely reusable, there is nothing wrong with putting them in your Game Library, it is completely up to you.
 
@@ -320,9 +320,11 @@ With our scene system and scene classes in place, we can now simplify our main `
 [!code-csharp[](./snippets/game1.cs)]
 
 > [!NOTE]
-> Feel free to check your homework and compare the original `Game1` class with the updated version, as well as checking the `GameScene` class did not lose any functionality (it has not but you have to be sure!).  Refactoring code to be cleaner and more organised is a careful task.
+> Feel free to check your homework and compare the original `Game1` class with the updated version, as well as checking the `GameScene` class did not lose any functionality (it has not, but you have to be sure!).  Refactoring code to be cleaner and more organised is a careful task.
 
-The `Game1` class is now much simpler as most of the game logic has been moved to the appropriate scene classes. It:
+The `Game1` class is now much simpler as most of the game logic has been moved to the appropriate scene classes. 
+
+The updates include:
 
 1. Sets up the game window with the constructor parameters.
 2. Overrides the `Initialize` method to set the title scene as the starting scene.

articles/tutorials/building_2d_games/17_scenes/snippets/gamescene.cs

@@ -2,7 +2,6 @@
 using System;
 using Microsoft.Xna.Framework;
 using Microsoft.Xna.Framework.Audio;
-using Microsoft.Xna.Framework.Content;
 using Microsoft.Xna.Framework.Graphics;
 using Microsoft.Xna.Framework.Input;
 using MonoGameLibrary;

articles/tutorials/building_2d_games/20_implementing_ui_with_gum/index.md

@@ -14,15 +14,15 @@ In this chapter you will:
 * Handle input from keyboard, mouse, and gamepads
 * Integrate the UI system with our existing game architecture.
 
+> [!IMPORTANT]
+> While GUM is used in this tutorial it is only one of many UI libraries available to the MonoGame community, some notable others are [EmptyKeys](https://github.com/EmptyKeys/UI_Engines), [GeonBit.UI](https://github.com/RonenNess/GeonBit.UI), as well as entire Game Frameworks/Engines like [Nez}(https://github.com/prime31/Nez) that have their own built in UI systems.
+>
+> Check out the [MonoGame Resources](https://monogame.net/resources/) page, as well as [awesome-monogame](https://github.com/aloisdeniel/awesome-monogame) from [Alo�s Deniel](https://github.com/aloisdeniel) for even more community offerings.
+
 ## What is Gum?
 
 Gum is a powerful UI layout engine and framework. It provides a flexible, efficient system capable of producing virtually any UI layout you might need in your games. While originally developed alongside the FlatRedBall game engine, Gum has evolved to work seamlessly with multiple platforms, including MonoGame, which we will be using in this tutorial.
 
-> [!IMPORTANT]
-> While GUM is used in this tutorial it is only one of many UI libraries available to the MonoGame community, some notable others are [EmptyKeys ](https://github.com/EmptyKeys/UI_Engines), [GeonBit.UI](https://github.com/RonenNess/GeonBit.UI), as well as entire Game Frameworks/Engines like [Nez}() that have their own built in UI systems.
->
-> Check out [awesome-monogame](https://github.com/aloisdeniel/awesome-monogame) from [Aloïs Deniel](https://github.com/aloisdeniel) as well as the [MonoGame Resources](https://monogame.net/resources/) page for even more community offerings.
-
 ### Why Use Gum?
 
 Creating a UI system from scratch requires solving many complex problems:
@@ -360,7 +360,7 @@ To make our UI more responsive and engaging, we will add audio feedback that pla
 
 First, download the UI sound effect by right-clicking the following link and saving it as `ui.wav` in the game project's `Content/audio` folder:
 
-* [ui.wav](./files/ui.wav)
+* [ui.wav](./files/ui.wav){download}
 
 Next, add this sound effect to your content project using the MGCB Editor:
 
@@ -422,11 +422,14 @@ Gum is now fully initialized and we can use it in our scenes to add UI to our ga
 
 With Gum added and initialized in our game, we can now implement UI elements for our title scene.  We will create panels for both the main menu and options menu, implement the necessary event handlers, and integrate everything with our existing title scene.
 
-First, open the `TitleScene.cs` file in the game project and add the following using declarations to the top of the `TitleScene` class:
+> [!NOTE]
+> When adding these sections one by one, you may see compiler errors until all sections are in place. This is normal, as some parts of the code will reference fields or methods that haven't been added yet. Once all sections are complete, these errors will resolve.
+
+First, open the *TitleScene.cs* file in the game project and add the following using declarations to the top of the `TitleScene` class:
 
 [!code-csharp[](./snippets/titlescene/usings.cs?highlight=1,3,6-8)]
 
-Next, add the following fields:
+Next, add the following fields to the `TitleScene` class:
 
 [!code-csharp[](./snippets/titlescene/fields.cs)]
 
@@ -463,7 +466,7 @@ Add the following method to the `TitleScene` class:
 
 This panel includes a text label, two sliders for adjusting audio volumes, and a back button for returning to the main menu. The panel is initially invisible since we start on the main menu.  Both the "Music Volume" slider and the "Sound Effects Volume" slider register events to be called when the value of the sliders change and when the value change has been completed.  The "Back" button registers a click event similar to the ones from the main menu.
 
-Now we should implement the event handlers for these controls:
+Now we should implement the event handlers for these controls.  Add the following methods to the `TitleScene` class after the `CreateOptionsPanel` method:
 
 [!code-csharp[](./snippets/titlescene/handlesfxsliderchanged.cs)]
 
@@ -482,23 +485,23 @@ These handlers update our audio settings in real-time as the player adjusts the
 
 #### Initializing the UI
 
-Now that we have implemented the methods that will create both the main menu panel and the options menu panel, we need to implement the main UI initializations method that will call them.  Add the following method to the `TitleScene` class:
+Now that we have implemented the methods that will create both the main menu panel and the options menu panel, we need to implement the main UI initializations method that will call them.  Add the following method to the `TitleScene` class after the `HandleOptionsButtonBack` method:
 
 [!code-csharp[](./snippets/titlescene/initializeui.cs)]
 
 This method first clears any existing UI elements from Gum's root container to prevent duplication, then calls our panel creation methods to build the complete interface.
 
 #### Integrating with the Game Loop
 
-Finally, we need to integrate our UI initialization, update, and draw with the scene's lifecycle.  First, add the call to `InitializeUI()` in the `Initialize` method:
+Finally, we need to integrate our UI initialization, update, and draw with the scene's lifecycle.  First, add the call to `InitializeUI()` in the `Initialize` method by updating it to the following:
 
 [!code[](./snippets/titlescene/initialize.cs?highlight=27)]
 
 Next, update the `LoadContent` method to load the sound effect that will be used as auditory feedback for the UI:
 
 [!code[](./snippets/titlescene/loadcontent.cs?highlight=12-13)]
 
-Then update the `Update` method to include Gum's update logic:
+Next modify the `Update` method to include Gum's update logic:
 
 [!code[](./snippets/titlescene/update.cs?highlight=14)]
 
@@ -524,25 +527,28 @@ With these changes, our UI system is now fully integrated into the scene's game
 
 Now that we have setup the UI for the title scene, we will add a pause menu to our game scene.  This UI will start invisible but will be shown when the player presses the escape key.  For consistency, we will implement the UI for the game scene in the same order that we implemented the UI for the title scene.
 
+> [!NOTE]
+> When adding these sections one by one, you may see compiler errors until all sections are in place. This is normal, as some parts of the code will reference fields or methods that haven't been added yet. Once all sections are complete, these errors will resolve.
+
 First, open the *GameScene.cs* file in the game project and add the following using declarations to the top of the `GameScene` class.
 
-[!code-csharp[](./snippets/gamescene/usings.cs?highlight=2,7-9)]
+[!code-csharp[](./snippets/gamescene/usings.cs?highlight=2-3,8-10)]
 
-Next, add the following fields:
+Next, add the following fields to the `GameScene` class:
 
 [!code-csharp[](./snippets/gamescene/fields.cs)]
 
 #### Pausing the Game
 
-To pause the game, first we will create a method that makes the pause panel visible. Add the following method to the `GameScene` class:
+To pause the game, first we will create a method that makes the pause panel visible.  Add the following method to the `GameScene` class after the fields:
 
 [!code-csharp[](./snippets/gamescene/pausegame.cs)]
 
-Next, update the `CheckKeyboardInput` method so that when the escape key is pressed, we pause the game instead of returning to the title scene:
+Next, update the `CheckKeyboardInput` method so that when the escape key is pressed, instead of returning to the title scene, we now pause the game:
 
 [!code-csharp[](./snippets/gamescene/checkkeyboardinput.cs?highlight=6-10)]
 
-Finally, update the `CheckGamePadInput` method so the game is paused when the start button is pressed:
+Finally, update the `CheckGamePadInput` method so that when the start button is pressed, it pauses the game:
 
 [!code-csharp[](./snippets/gamescene/checkgamepadinput.cs?highlight=6-10)]
 
@@ -552,33 +558,45 @@ Next, we will create a method that builds our pause panel with resume and quit b
 
 [!code-csharp[](./snippets/gamescene/createpausepanel.cs)]
 
+Now we should implement the event handlers for these controls. First, we will implement the handler for the "Resume" button. Add the following method to the `GameScene` class after the `CreatePausePanel` method:
+
+[!code-csharp[](./snippets/gamescene/handleresumebuttonclicked.cs)]
+
+This method plays the UI sound effect for auditory feedback and then hides the pause panel so that the game can resume.
+
+Next is the handler for the "Quit" button.  Add the following method to the `GameScene` class after the `HandleResumeButtonClicked` method:
+
+[!code-csharp[](./snippets/gamescene/handlequitbuttonclicked.cs)]
+
+This method as well plays the UI sound effect for auditory feedback, then quits the game by changing scenes back to the title scene.
+
 #### Initializing the Game UI
 
-Now that we have implemented the method to create the pause panel, we can implement the main UI initializations method that will call them.  Add the following method to the `GameScene` class:
+Now that we have implemented the method to create the pause panel, we can implement the main UI initializations method that will call them.   Add the following method to the `GameScene` class after the `CreatePausePanel` method:
 
 [!code-csharp[](./snippets/gamescene/initializeui.cs)]
 
 Just like with the `TitleScene`, we first clear any existing UI elements from Gum's root before creating the UI elements for this scene.
 
 #### Integrating with the Game Loop for the GameScreen
 
-Finally, we need to integrate our UI initialization, update, and draw with the scene's lifecycle.  First add the call to `InitializeUI()` in the `Initialize` method:
+Finally, we need to integrate our UI initialization, update, and draw with the scene's lifecycle.  First add the call to `InitializeUI()` in the `Initialize` method by updating it to the following:
 
 [!code-csharp[](./snippets/gamescene/initialize.cs?highlight=38)]
 
 Next, update the `LoadContent` method to load the sound effect that will be used as auditory feedback for the UI:
 
 [!code-csharp[](./snippets/gamescene/loadcontent.cs?highlight=27-28)]
 
-Next, add the following to the beginning of the `Update` method to include Gum's update logic and to only update the game if it is not paused, pausing will prevent any other Game update logic running.  We will use the visibility of the pause menu to determine if the game is paused or not:
+Next, modify the `Update` method to include Gum's update logic and to only update the game if it is not paused.  We will use the visibility of the pause menu to determine if the game is paused or not:
 
 [!code-csharp[](./snippets/gamescene/update.cs?highlight=3-10)]
 
 Finally, add Gum's drawing call to the end fo the `Draw` method:
 
 [!code-csharp[](./snippets/gamescene/draw.cs?highlight=9-10)]
 
-WIth these changes, the pause menu is now fully integrated into the game scene's game loop.  Gum updates its controls during the `Update` method and draws them during the `Draw` method.  If the game is paused, as determined by the `IsVisible` property of the pause menu, then updating the actual game logic is skipped.
+With these changes, the pause menu is now fully integrated into the game scene's game loop.  Gum updates its controls during the `Update` method and draws them during the `Draw` method.  If the game is paused, as determined by the `IsVisible` property of the pause menu, then updating the actual game logic is skipped.
 
 | ![Figure 20-12: The pause menu during the game scene with default Gum buttons](./images/pause-unstyled.png) |
 | :---------------------------------------------------------------------------------------------------------: |

articles/tutorials/building_2d_games/20_implementing_ui_with_gum/snippets/gamescene/createpausepanel.cs

@@ -26,7 +26,7 @@ private void CreatePausePanel()
     _resumeButton.Visual.X = 9f;
     _resumeButton.Visual.Y = -9f;
     _resumeButton.Visual.Width = 80;
-    _resumeButton.Click += HandleResumeClicked;
+    _resumeButton.Click += HandleResumeButtonClicked;
     _pausePanel.AddChild(_resumeButton);
 
     var quitButton = new Button();
@@ -35,7 +35,7 @@ private void CreatePausePanel()
     quitButton.Visual.X = -9f;
     quitButton.Visual.Y = -9f;
     quitButton.Width = 80;
-    quitButton.Click += HandleQuitClicked;
+    quitButton.Click += HandleQuitButtonClicked;
 
     _pausePanel.AddChild(quitButton);
 }

articles/tutorials/building_2d_games/20_implementing_ui_with_gum/snippets/gamescene/usings.cs

@@ -1,4 +1,5 @@
 using System;
+using Gum.DataTypes;
 using Gum.Wireframe;
 using Microsoft.Xna.Framework;
 using Microsoft.Xna.Framework.Audio;

articles/tutorials/building_2d_games/21_customizing_gum_ui/index.md

@@ -135,7 +135,7 @@ While MonoGame natively uses [**SpriteFont**](xref:Microsoft.Xna.Framework.Graph
 
 First, download the *.fnt* file by right-clicking the following link and saving it as *04b_30.fnt* in the game project's *Content/fonts* folder:
 
-- [04b_30.fnt](./files/04b_30.fnt)
+- [04b_30.fnt](./files/04b_30.fnt){download}
 
 Next, add this font file to your content project using the MGCB Editor: