Merge branch '2d-tutorial-bounty' into fix/mac-build-steps

Author: AristurtleDev

articles/toc.yml

@@ -164,7 +164,7 @@
           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"
+        - name: "27: Conclusion and Next Steps"
           href: tutorials/building_2d_games/27_conclusion/
 - name: Console Access
   href: console_access.md

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

@@ -64,7 +64,7 @@ To open the *Content.mgcb* content project file in the MGCB Editor using the dot
 
 ---
 
- [!TIP]
+> [!TIP]
 > If for any reason the MGCB editor fails to load or you are hit with MGCB errors when you build your project, it is likely the MGCB references from the `dotnet-tools.json` configuration located in your projects `.config` folder have not been loaded/initialized.
 >
 > To correct this, simply run the following from a terminal/command prompt in your projects directory (there the `.config` folder is located)
@@ -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.
@@ -90,9 +90,9 @@ In Figure 5-2 above, you can see the user interface for the MGCB Editor:
 
 Organizing your game assets into folders helps keep your content project manageable as it grows. For now, we will add a new folder that will hold the image assets we will add to the game throughout this tutorial series.  In the MGCB Editor:
 
-1. In the Project Panel, select the root *Content* node.
-2. Right-click it and choose *Add* > *New Folder...* from the context menu.
-3. Type "images" for the folder name and click the "Ok" button.
+1. In the Project Panel, select the root `Content` node.
+2. Right-click it and choose `Add > New Folder...` from the context menu.
+3. Type `images` for the folder name and click the `Ok` button.
 
 | ![Figure 5-3: New folder pop-up](./images/new-folder-popup.png) |
 | :-------------------------------------------------------------: |
@@ -101,7 +101,7 @@ Organizing your game assets into folders helps keep your content project managea
 You have now created a folder that will help organize the game's image assets.  As we continue through this tutorial series, we will be adding additional folders for organization of content such as audio, fonts, and effects.
 
 > [!NOTE]
-> If you try to add a new folder that already exists in the file system but is not showing in the MGCB editor, you will get an error.  Either remove the folder or use "Add Existing Folder" instead.
+> If you try to add a new folder that already exists in the file system but is not showing in the MGCB editor, you will get an error.  Either remove the folder or use `Add Existing Folder` instead.
 
 ### Adding Your First Asset
 
@@ -113,17 +113,17 @@ Now that we have a folder structure, we can add our first image asset to the pro
     | :--------------------------------------------------------: |
     |          **Figure 5-4: MonoGame Horizontal Logo**          |
 
-2. In the MGCB Editor, select the *images* folder you created earlier.
-3. Right-click it and choose *Add* > *Existing Item...* from the context menu.
+2. In the MGCB Editor, select the `images` folder you created earlier.
+3. Right-click it and choose `Add > Existing Item...` from the context menu.
 4. Navigate to the location of the `logo.png` file you just downloaded and select it.
-5. Click the "Open" button
-6. When prompted in the add existing file popup, choose *Copy the file to the directory.*
+5. Click the `Open` button
+6. When prompted in the add existing file popup, choose `Copy the file to the directory.`
 
     | ![Figure 5-5: Add existing file pop-up](./images/add-file-popup.png) |
     | :------------------------------------------------------------------: |
     |               **Figure 5-5: Add existing file pop-up**               |
 
-7. Save the changes to the content project by selecting *File* > *Save* from the top menu or pressing `CTRL+S`.
+7. Save the changes to the content project by selecting `File > Save` from the top menu or pressing `CTRL+S`.
 
 | ![Figure 5-6: The logo image added to the content project in the MGCB Editor](./images/mgcb-logo-added.png) |
 | :---------------------------------------------------------------------------------------------------------: |
@@ -173,7 +173,7 @@ They key methods for asset loading are:
 
 ## Understanding Content Paths
 
-When loading content, you need to specify the path to the asset, minus the extension.  This path is relative to the ContentManager's [**RootDirectory**](xref:Microsoft.Xna.Framework.Content.ContentManager.RootDirectory) property, which is set to "Content" by default in the `Game1` constructor.
+When loading content, you need to specify the path to the asset, minus the extension.  This path is relative to the ContentManager's [**RootDirectory**](xref:Microsoft.Xna.Framework.Content.ContentManager.RootDirectory) property, which is set to **"Content"** by default in the `Game1` constructor.
 
 For example, with our newly added logo in the "images" folder,the path would be "images/logo" (without the file extension).  The reason for this relates to the build process.  When you build your project, the *MonoGame.Content.Builder.Tasks* NuGet reference [compiles your assets and copies them to the game's output folder](#understanding-the-content-pipeline-workflow).
 
@@ -240,8 +240,8 @@ Running the game now will show the MonoGame logo displayed in the upper-left cor
 
 The MGCB Editor can also create certain built-in asset types.  In this section we will explore these types and this functionality.  If not already open, [open the MGCB Editor](#opening-the-mgcb-editor) and perform the following:
 
-1. Select the *Content* node.
-2. Right-click it and choose *Add* > *New Item...* from the context menu.
+1. Select the `Content` node.
+2. Right-click it and choose `Add > New Item...` from the context menu.
 3. In the dialog that appears, you will see the available built-in types.
 
     | ![Figure 5-9: New file pop-up](./images/new-file-popup.png) |
@@ -259,7 +259,7 @@ The available built-in types include:
 > [!NOTE]
 > Each built-in asset type comes with a template that includes the minimum required structure and settings.
 
-For now, click the "Cancel" button on the new file dialog.  We will explore these built-in types further in later chapters when we need them.
+For now, click the `Cancel` button on the new file dialog.  We will explore these built-in types further in later chapters when we need them.
 
 ## Conclusion
 

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)  |
 | :-----------------------------------------------------------------------------------------------: |