Figures and indexes pass - done

Author: SimonDarksideJ

articles/tutorials/building_2d_games/03_the_game1_file/index.md

@@ -23,7 +23,7 @@ This class provides the following structure:
 3. **Content Loading**: The [**LoadContent**](xref:Microsoft.Xna.Framework.Game.LoadContent) method manages game asset loading during startup.
 4. **Game Loop**: The *game loop* consists of the [**Update**](xref:Microsoft.Xna.Framework.Game.Update(Microsoft.Xna.Framework.GameTime)) method for game logic and the [**Draw**](xref:Microsoft.Xna.Framework.Game.Draw(Microsoft.Xna.Framework.GameTime)) method for rendering, running continuously until the game is told to exit.
 
-Figure 3-1 below shows the lifecycle of a MonoGame game including the [**Update**](xref:Microsoft.Xna.Framework.Game.Update(Microsoft.Xna.Framework.GameTime)) and [**Draw**](xref:Microsoft.Xna.Framework.Game.Draw(Microsoft.Xna.Framework.GameTime)) methods that make up the *game loop*.
+*Figure 3-1* below shows the lifecycle of a MonoGame game including the [**Update**](xref:Microsoft.Xna.Framework.Game.Update(Microsoft.Xna.Framework.GameTime)) and [**Draw**](xref:Microsoft.Xna.Framework.Game.Draw(Microsoft.Xna.Framework.GameTime)) methods that make up the *game loop*.
 
 | ![Figure 3-1: Lifecycle of a MonoGame game](./images/monogame-lifecycle.png) |
 | :--------------------------------------------------------------------------: |

articles/tutorials/building_2d_games/05_content_pipeline/index.md

@@ -79,7 +79,7 @@ To open the *Content.mgcb* content project file in the MGCB Editor using the dot
 | :-------------------------------------------------------------------------------------------: |
 |             **Figure 5-2: MonoGame Content Builder Editor (MGCB Editor) Window**              |
 
-In Figure 5-2 above, you can see the user interface for the MGCB Editor:
+In *Figure 5-2* above, you can see the user interface for the MGCB Editor:
 
 - **Toolbar**: Contains icon buttons for common actions such as creating new items, opening files, saving changes, and building content.
 - **Project Panel**: Located on the left of the MGCB Editor, displays a hierarchical tree view of all content items added to the content project.  The root node *Content* represents the root of the content project.

articles/tutorials/building_2d_games/06_working_with_textures/index.md

@@ -112,7 +112,7 @@ The reason the sprite did not rotate as expected is because of the `origin` para
 
 ### Origin
 
-The `origin` parameter specifies the point of origin in which the sprite is rendered from, rotated from, and scaled from.  By default, if no origin is set, it will be [**Vector2.Zero**](xref:Microsoft.Xna.Framework.Vector2.Zero), the upper-left corner of the sprite.  To visualize this, see Figure 6-5 below.  The red square represents where the origin is for the sprite, and we can see how it is rotated around this origin point.
+The `origin` parameter specifies the point of origin in which the sprite is rendered from, rotated from, and scaled from.  By default, if no origin is set, it will be [**Vector2.Zero**](xref:Microsoft.Xna.Framework.Vector2.Zero), the upper-left corner of the sprite.  To visualize this, see *Figure 6-5* below.  The red square represents where the origin is for the sprite, and we can see how it is rotated around this origin point.
 
 | ![Figure 6-5: Demonstration of how a sprite is rotated around its origin](./videos/top-left-origin-rotation-example.webm) |
 | :-----------------------------------------------------------------------------------------------------------------------: |
@@ -247,7 +247,7 @@ For instance, take the logo image we have been using.  We can break it down into
 | :-----------------------------------------------------------------------------------------------------------------: |
 |                  **Figure 6-14: The MonoGame logo broken down into the icon and wordmark regions**                  |
 
-We can see from Figure 6-14 above that the actual icon starts at position (0, 0) and is 128px wide and 128px tall. Likewise, the wordmark starts at position (150, 34) and is 458px wide and 58px tall. Knowing the starting position and the width and height of the region gives us a defined rectangle that we can use as the `sourceRectangle`.
+We can see from *Figure 6-14* above that the actual icon starts at position (0, 0) and is 128px wide and 128px tall. Likewise, the wordmark starts at position (150, 34) and is 458px wide and 58px tall. Knowing the starting position and the width and height of the region gives us a defined rectangle that we can use as the `sourceRectangle`.
 
 We can see this in action by drawing the icon and the wordmark separately from the same texture. Update the code to the following:
 
@@ -271,7 +271,7 @@ If you run the game now, you should see the following:
 
 ### Layer Depth
 
-The final parameter to discuss is the `layerDepth` parameter. Notice that in Figure 6-15 above, the word mark is rendered on top of the icon.  This is because of the order the draw calls were made; first the icon was rendered, then the word mark was rendered.
+The final parameter to discuss is the `layerDepth` parameter. Notice that in *Figure 6-15* above, the word mark is rendered on top of the icon.  This is because of the order the draw calls were made; first the icon was rendered, then the word mark was rendered.
 
 The [**SpriteBatch.Begin**](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch.Begin(Microsoft.Xna.Framework.Graphics.SpriteSortMode,Microsoft.Xna.Framework.Graphics.BlendState,Microsoft.Xna.Framework.Graphics.SamplerState,Microsoft.Xna.Framework.Graphics.DepthStencilState,Microsoft.Xna.Framework.Graphics.RasterizerState,Microsoft.Xna.Framework.Graphics.Effect,System.Nullable{Microsoft.Xna.Framework.Matrix})) method contains several optional parameters, one of which is the `sortMode` parameter.  By default, this value is [**SpriteSortMode.Deferred**](xref:Microsoft.Xna.Framework.Graphics.SpriteSortMode.Deferred), which means what is drawn is done so in the order of the [**SpriteBatch.Draw**](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch.DrawString(Microsoft.Xna.Framework.Graphics.SpriteFont,System.Text.StringBuilder,Microsoft.Xna.Framework.Vector2,Microsoft.Xna.Framework.Color,System.Single,Microsoft.Xna.Framework.Vector2,System.Single,Microsoft.Xna.Framework.Graphics.SpriteEffects,System.Single)) calls.  Each subsequent call will be drawn visually on top of the previous call.
 
@@ -294,9 +294,9 @@ Now we can see this in action. We have already set the `layerDepth` parameter of
 
 Now we are telling it to use the [**SpriteSortMode.FrontToBack**](xref:Microsoft.Xna.Framework.Graphics.SpriteSortMode.FrontToBack) sort mode, which will sort the draw calls so that those with a higher `layerDepth` will be drawn on top of those with a lower one.  Even though we did not change the order of the `_spriteBatch.Draw` calls, if you run the game now, you will see the following:
 
-| ![Figure 5-17: The MonoGame icon drawn on top of the wordmark](./images/icon-on-top-of-wordmark.png) |
+| ![Figure 6-16: The MonoGame icon drawn on top of the wordmark](./images/icon-on-top-of-wordmark.png) |
 | :--------------------------------------------------------------------------------------------------: |
-|                   **Figure 5-17: The MonoGame icon drawn on top of the wordmark**                    |
+|                   **Figure 6-16: The MonoGame icon drawn on top of the wordmark**                    |
 
 There are also two additional [**SpriteSortMode**](xref:Microsoft.Xna.Framework.Graphics.SpriteSortMode) values that can be used.  These, however, are situational and can have draw backs when using them, so understanding what they are for is important.
 

articles/tutorials/building_2d_games/07_optimizing_texture_rendering/index.md

@@ -47,7 +47,7 @@ A texture atlas (also known as a sprite sheet) is a large image file that contai
 > [!NOTE]
 > Using a texture atlas not only eliminates texture swaps but also reduces memory usage and simplifies asset management since you are loading and tracking a single texture instead of many individual ones.
 
-In the Pong example, imagine taking the paddle and ball image and combining them into a single image file like in Figure 7-1 below:
+In the Pong example, imagine taking the paddle and ball image and combining them into a single image file like in *Figure 7-1* below:
 
 | ![Figure 7-1: Pong Texture Atlas Example](./images/pong-atlas.png) |
 |:------------------------------------------------------------------:|
@@ -244,7 +244,7 @@ The key improvements here is in [**LoadContent**](xref:Microsoft.Xna.Framework.G
 
 This configuration based approached is advantageous because we can now add new and modify existing regions within the atlas without having to change code and/or recompile.  This also keeps the sprite definitions separate from the game logic.
 
-Running the game now will show the same results as `Figure 7-4` above, with the slime and bat texture regions rendered in the upper-left corner of the game window.
+Running the game now will show the same results as *Figure 7-4* above, with the slime and bat texture regions rendered in the upper-left corner of the game window.
 
 ## Conclusion
 

articles/tutorials/building_2d_games/09_the_animatedsprite_class/index.md

@@ -8,7 +8,7 @@ While packing images into a texture atlas and managing them through our `Sprite`
 > [!NOTE]
 > The term "frame" in animation refers to a single image in an animation sequence. This is different from a game frame, which represents one complete render cycle of your game.
 
-In MonoGame, we can create these animations by cycling through different regions of our texture atlas, with each region representing a single frame of the animation. For example, `Figure 9-1` below shows three frames that make up a bat's wing-flapping animation:
+In MonoGame, we can create these animations by cycling through different regions of our texture atlas, with each region representing a single frame of the animation. For example, *Figure 9-1* below shows three frames that make up a bat's wing-flapping animation:
 
 | ![Figure 9-1: Animation example of a bat flapping its wings](./images/bat-animation-example.gif)  |
 | :-----------------------------------------------------------------------------------------------: |

articles/tutorials/building_2d_games/12_collision_detection/index.md

@@ -42,7 +42,7 @@ Two find the distance between two circles, imagine drawing a line from the cente
 | :---------------------------------------------------------------------------------------------------------------------------------------: |
 |                       **Figure 12-1: Showing the distance between the center of two circles forms a right triangle**                       |
 
-In the Figure 12-1 above
+In the *Figure 12-1* above
 
 - $a$ is the distance between the center of the two on the x-axis (horizontal).
 - $b$ is the distance between the center of the two circles on the y-axis (vertical).
@@ -337,7 +337,7 @@ Running the game now
 
 | ![Figure 12-5: When the slime collides ("eats") the bat, the bat respawns in a new location on the screen with a random velocity assigned](./videos/gameplay.webm) |
 | :----------------------------------------------------------------------------------------------------------------------------------------------------------------: |
-|            **Figure 12-5: When the slime collides ("eats") the bat, the bat respawns in a new location on the screen with a random velocity assigned**             |
+|            **Figure 12-5: When the slime collides ("eats") the bat, the bat re-spawns in a new location on the screen with a random velocity assigned**             |
 
 ## Conclusion
 

articles/tutorials/building_2d_games/13_working_with_tilemaps/index.md

@@ -26,7 +26,7 @@ A tileset is a collection of small images (tiles) that can be combined and arran
 - Decorative elements like plants and furniture.
 - Special tiles like doors, ladders, or water.
 
-Each tile in a tileset is assigned an ID number, which the tilemap uses to reference which tile goes where. For example, in Figure 13-1 below, the tileset we will add to our game in a moment is shown on the left and on the right is the same tileset with an overlay showing how each tile is assigned an ID number.
+Each tile in a tileset is assigned an ID number, which the tilemap uses to reference which tile goes where. For example, in *Figure 13-1* below, the tileset we will add to our game in a moment is shown on the left and on the right is the same tileset with an overlay showing how each tile is assigned an ID number.
 
 | ![Figure 13-1: Left: Original dungeon tileset. Right: The same tileset with an overlay showing how each tile is assigned a numeric ID](./images/tileset-grid-comparison.png) |
 |:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
@@ -46,7 +46,7 @@ For example, a simple tilemap may look like this conceptually:
 12 13 14 13 15
 ```
 
-If we took the above tilemap data and mapped each cell to the tile in the related tileset, it would look something similar to Figure 13-2 below:
+If we took the above tilemap data and mapped each cell to the tile in the related tileset, it would look something similar to *Figure 13-2* below:
 
 | ![Figure 13-2: From tileset to tilemap. Left: Tileset with an overlay showing the tile IDs.  Right: The tilemap created using the tiles arranged with the pattern from the code example above](./images/tileset-to-tilemap-example.png) |
 |:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|

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

@@ -121,7 +121,7 @@ The `<CharacterRegions>` element defines which Unicode character ranges to inclu
 For most games, the default range is sufficient.
 
 > [!NOTE]
-> ALthough for fun, TRY using the Wingdings font :D
+> Although for fun, TRY using the Wingdings font :D
 
 ## Loading a SpriteFont Description
 

articles/tutorials/building_2d_games/18_texture_sampling/index.md

@@ -161,9 +161,9 @@ Next, add this texture to your content project using the MGCB Editor:
 3. Navigate to and select the `background-pattern.png` file.
 4. Save the changes and close the MGCB Editor.
 
-| ![Figure 18-9: The MGCB Editor with the *background-pattern* image added](./images/mgcb-editor.png) |
+| ![Figure 18-10: The MGCB Editor with the *background-pattern* image added](./images/mgcb-editor.png) |
 | :-------------------------------------------------------------------------------------------------: |
-|             **Figure 18-9: The MGCB Editor with the *background-pattern* image added**              |
+|             **Figure 18-10: The MGCB Editor with the *background-pattern* image added**              |
 
 ### Updating the Title Scene
 
@@ -189,9 +189,9 @@ The key changes here are
 
 Running the game now with these changes, the title screen now has a scroll background that adds more visual depth and interest to it than just the plain colored background we had before.
 
-| ![Figure 18-10: The title screen now with the repeating background texture of the slime and bat scrolling diagonally down and to the right](./videos/titlescreen.webm) |
+| ![Figure 18-11: The title screen now with the repeating background texture of the slime and bat scrolling diagonally down and to the right](./videos/titlescreen.webm) |
 | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
-|              **Figure 18-10: The title screen now with the repeating background texture of the slime and bat scrolling diagonally down and to the right**              |
+|              **Figure 18-11: The title screen now with the repeating background texture of the slime and bat scrolling diagonally down and to the right**              |
 
 ## Conclusion
 

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

@@ -371,9 +371,9 @@ Next, add this sound effect to your content project using the MGCB Editor:
 4. In the Properties panel, verify that the `Processor` is set to `Sound Effect`.
 5. Save the changes and close the MGCB Editor.
 
-| ![Figure 20-2: The MGCB Editor with ui.wav added to the audio folder](./images/mgcb-editor.png) |
+| ![Figure 20-1: The MGCB Editor with ui.wav added to the audio folder](./images/mgcb-editor.png) |
 | :---------------------------------------------------------------------------------------------: |
-|             **Figure 20-2: The MGCB Editor with ui.wav added to the audio folder**              |
+|             **Figure 20-1: The MGCB Editor with ui.wav added to the audio folder**              |
 
 We will load and use this sound effect in our UI implementation to provide auditory feedback when players interact with buttons and sliders.
 
@@ -535,9 +535,9 @@ Update the `Draw` method to the following:
 
 With these changes, our UI system is now fully integrated into the scene's game loop.  Gum updates its controls in the `Update` method and draws them in the `Draw` method.  This produces a fully functional title screen with buttons that allows players to start the game or adjust audio settings.  
 
-| ![Figure 20-1: Title screen with default Gum buttons](./images/title-unstyled.png) |
+| ![Figure 20-2: Title screen with default Gum buttons](./images/title-unstyled.png) |
 | :--------------------------------------------------------------------------------: |
-|               **Figure 20-1: Title screen with default Gum buttons**               |
+|               **Figure 20-2: Title screen with default Gum buttons**               |
 
 > [!NOTE]
 > You may notice that the UI elements currently use Gum's default styling, which does not match our game's visual theme.  We will explore customizing these controls to match our game's visual style in the next chapter.
@@ -617,9 +617,9 @@ Finally, add Gum's drawing call to the end fo the `Draw` method:
 
 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) |
+| ![Figure 20-3: The pause menu during the game scene with default Gum buttons](./images/pause-unstyled.png) |
 | :---------------------------------------------------------------------------------------------------------: |
-|               **Figure 20-12: The pause menu during the game scene with default Gum buttons**               |
+|               **Figure 20-3: The pause menu during the game scene with default Gum buttons**               |
 
 ## Conclusion
 

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

@@ -358,9 +358,9 @@ When you run the game now, you will see a dramatic improvement in the visual app
 3. All text uses our custom bitmap font.
 4. Visual feedback clearly indicates which element has focus.
 
-| ![Figure 12-3: The game using Gum now with custom styled UI components](./videos/gameplay.webm) |
+| ![Figure 21-3: The game using Gum now with custom styled UI components](./videos/gameplay.webm) |
 | :---------------------------------------------------------------------------------------------: |
-|            **Figure 12-3: The game using Gum now with custom styled UI components**             |
+|            **Figure 21-3: The game using Gum now with custom styled UI components**             |
 
 The entire UI now has a cohesive style that matches the rest of the game.