Skip to content

Commit 0d87925

Browse files
committed
Merge branch '2d-tutorial-bounty' of https://github.com/aristurtledev/docs.monogame.github.io into 2d-tutorial-bounty
2 parents ec48260 + cc9822c commit 0d87925

File tree

23 files changed

+359
-692
lines changed

23 files changed

+359
-692
lines changed

articles/toc.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ items:
165165
href: tutorials/building_2d_games/25_packaging_game/
166166
- name: "26: Publishing Your Game to itch.io"
167167
href: tutorials/building_2d_games/26_publish_to_itch/
168-
- name: "Chapter 27: Conclusion and Next Steps"
168+
- name: "27: Conclusion and Next Steps"
169169
href: tutorials/building_2d_games/27_conclusion/
170170
- name: Console Access
171171
href: console_access.md

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ This class provides the following structure:
2323
3. **Content Loading**: The [**LoadContent**](xref:Microsoft.Xna.Framework.Game.LoadContent) method manages game asset loading during startup.
2424
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.
2525

26-
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*.
26+
*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*.
2727

2828
| ![Figure 3-1: Lifecycle of a MonoGame game](./images/monogame-lifecycle.png) |
2929
| :--------------------------------------------------------------------------: |

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

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ To open the *Content.mgcb* content project file in the MGCB Editor using the dot
6464

6565
---
6666

67-
[!TIP]
67+
> [!TIP]
6868
> 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.
6969
>
7070
> 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
7979
| :-------------------------------------------------------------------------------------------: |
8080
| **Figure 5-2: MonoGame Content Builder Editor (MGCB Editor) Window** |
8181

82-
In Figure 5-2 above, you can see the user interface for the MGCB Editor:
82+
In *Figure 5-2* above, you can see the user interface for the MGCB Editor:
8383

8484
- **Toolbar**: Contains icon buttons for common actions such as creating new items, opening files, saving changes, and building content.
8585
- **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:
9090

9191
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:
9292

93-
1. In the Project Panel, select the root *Content* node.
94-
2. Right-click it and choose *Add* > *New Folder...* from the context menu.
95-
3. Type "images" for the folder name and click the "Ok" button.
93+
1. In the Project Panel, select the root `Content` node.
94+
2. Right-click it and choose `Add > New Folder...` from the context menu.
95+
3. Type `images` for the folder name and click the `Ok` button.
9696

9797
| ![Figure 5-3: New folder pop-up](./images/new-folder-popup.png) |
9898
| :-------------------------------------------------------------: |
@@ -101,7 +101,7 @@ Organizing your game assets into folders helps keep your content project managea
101101
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.
102102
103103
> [!NOTE]
104-
> 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.
104+
> 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.
105105
106106
### Adding Your First Asset
107107
@@ -113,17 +113,17 @@ Now that we have a folder structure, we can add our first image asset to the pro
113113
| :--------------------------------------------------------: |
114114
| **Figure 5-4: MonoGame Horizontal Logo** |
115115
116-
2. In the MGCB Editor, select the *images* folder you created earlier.
117-
3. Right-click it and choose *Add* > *Existing Item...* from the context menu.
116+
2. In the MGCB Editor, select the `images` folder you created earlier.
117+
3. Right-click it and choose `Add > Existing Item...` from the context menu.
118118
4. Navigate to the location of the `logo.png` file you just downloaded and select it.
119-
5. Click the "Open" button
120-
6. When prompted in the add existing file popup, choose *Copy the file to the directory.*
119+
5. Click the `Open` button
120+
6. When prompted in the add existing file popup, choose `Copy the file to the directory.`
121121
122122
| ![Figure 5-5: Add existing file pop-up](./images/add-file-popup.png) |
123123
| :------------------------------------------------------------------: |
124124
| **Figure 5-5: Add existing file pop-up** |
125125
126-
7. Save the changes to the content project by selecting *File* > *Save* from the top menu or pressing `CTRL+S`.
126+
7. Save the changes to the content project by selecting `File > Save` from the top menu or pressing `CTRL+S`.
127127
128128
| ![Figure 5-6: The logo image added to the content project in the MGCB Editor](./images/mgcb-logo-added.png) |
129129
| :---------------------------------------------------------------------------------------------------------: |
@@ -173,7 +173,7 @@ They key methods for asset loading are:
173173

174174
## Understanding Content Paths
175175

176-
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.
176+
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.
177177
178178
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).
179179

@@ -240,8 +240,8 @@ Running the game now will show the MonoGame logo displayed in the upper-left cor
240240

241241
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:
242242

243-
1. Select the *Content* node.
244-
2. Right-click it and choose *Add* > *New Item...* from the context menu.
243+
1. Select the `Content` node.
244+
2. Right-click it and choose `Add > New Item...` from the context menu.
245245
3. In the dialog that appears, you will see the available built-in types.
246246

247247
| ![Figure 5-9: New file pop-up](./images/new-file-popup.png) |
@@ -259,7 +259,7 @@ The available built-in types include:
259259
> [!NOTE]
260260
> Each built-in asset type comes with a template that includes the minimum required structure and settings.
261261

262-
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.
262+
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.
263263

264264
## Conclusion
265265

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ The reason the sprite did not rotate as expected is because of the `origin` para
112112

113113
### Origin
114114

115-
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.
115+
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.
116116

117117
| ![Figure 6-5: Demonstration of how a sprite is rotated around its origin](./videos/top-left-origin-rotation-example.webm) |
118118
| :-----------------------------------------------------------------------------------------------------------------------: |
@@ -247,7 +247,7 @@ For instance, take the logo image we have been using. We can break it down into
247247
| :-----------------------------------------------------------------------------------------------------------------: |
248248
| **Figure 6-14: The MonoGame logo broken down into the icon and wordmark regions** |
249249

250-
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`.
250+
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`.
251251

252252
We can see this in action by drawing the icon and the wordmark separately from the same texture. Update the code to the following:
253253

@@ -271,7 +271,7 @@ If you run the game now, you should see the following:
271271
272272
### Layer Depth
273273

274-
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.
274+
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.
275275

276276
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.
277277

@@ -294,9 +294,9 @@ Now we can see this in action. We have already set the `layerDepth` parameter of
294294

295295
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:
296296

297-
| ![Figure 5-17: The MonoGame icon drawn on top of the wordmark](./images/icon-on-top-of-wordmark.png) |
297+
| ![Figure 6-16: The MonoGame icon drawn on top of the wordmark](./images/icon-on-top-of-wordmark.png) |
298298
| :--------------------------------------------------------------------------------------------------: |
299-
| **Figure 5-17: The MonoGame icon drawn on top of the wordmark** |
299+
| **Figure 6-16: The MonoGame icon drawn on top of the wordmark** |
300300

301301
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.
302302

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ A texture atlas (also known as a sprite sheet) is a large image file that contai
4747
> [!NOTE]
4848
> 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.
4949
50-
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:
50+
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:
5151

5252
| ![Figure 7-1: Pong Texture Atlas Example](./images/pong-atlas.png) |
5353
|:------------------------------------------------------------------:|
@@ -244,7 +244,7 @@ The key improvements here is in [**LoadContent**](xref:Microsoft.Xna.Framework.G
244244

245245
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.
246246

247-
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.
247+
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.
248248

249249
## Conclusion
250250

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ While packing images into a texture atlas and managing them through our `Sprite`
88
> [!NOTE]
99
> 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.
1010
11-
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:
11+
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:
1212

1313
| ![Figure 9-1: Animation example of a bat flapping its wings](./images/bat-animation-example.gif) |
1414
| :-----------------------------------------------------------------------------------------------: |

0 commit comments

Comments
 (0)