You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/tutorials/building_2d_games/04_creating_a_class_library/index.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -130,7 +130,7 @@ When using the *MonoGame Game Library* project template, the generated project c
130
130
131
131
## Creating Our First Library Module
132
132
133
-
Let's create a class for our library called `Core`. This class will extend the MonoGame [**Game**](xref:Microsoft.Xna.Framework.Game) class and provide a starting point for game development with some common functionality built in. Creating this will also let us validate that our class library reference setup was correct.
133
+
We will create a class for our library called `Core`. This class will extend the MonoGame [**Game**](xref:Microsoft.Xna.Framework.Game) class and provide a starting point for game development with some common functionality built in. Creating this will also let us validate that our class library reference setup was correct.
134
134
135
135
Create a new file called *Core.cs* in the *MonoGameLibrary* project and add the following code:
136
136
@@ -183,7 +183,7 @@ Running the game now will show the same window as before, only now it is at a 12
183
183
184
184
## Conclusion
185
185
186
-
Let's review what you accomplished in this chapter:
186
+
In this chapter, you accomplished the following:
187
187
188
188
- Learned about class libraries and their advantages for game development:
Copy file name to clipboardExpand all lines: articles/tutorials/building_2d_games/05_content_pipeline/index.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -148,7 +148,7 @@ The new folder will appear in your content tree, and you can now add items to it
148
148
- Adding existing assets directly to the folder
149
149
- Creating new assets within the folder
150
150
151
-
The folder structure you create in the MGCB Editor affects how you will access your content in code. It's good practice to establish a folder structure early in your project development to avoid having to reorganize and update content paths later.
151
+
The folder structure you create in the MGCB Editor affects how you will access your content in code. It is good practice to establish a folder structure early in your project development to avoid having to reorganize and update content paths later.
152
152
153
153
## The ContentManager Class
154
154
@@ -213,7 +213,7 @@ When the [**ContentManager**](xref:Microsoft.Xna.Framework.Content.ContentManage
213
213
214
214
## Loading Our First Asset
215
215
216
-
Let's walk through the process of editing our content project using the MGCB Editor to add a new image asset and then load it in our game. To get started, we will first need an image to load. Right-click the following image of the MonoGame logo and save it named *logo.png* somewhere on your computer:
216
+
Now, we will walk through the process of editing our content project using the MGCB Editor to add a new image asset and then load it in our game. To get started, we will first need an image to load. Right-click the following image of the MonoGame logo and save it named *logo.png* somewhere on your computer:
Copy file name to clipboardExpand all lines: articles/tutorials/building_2d_games/06_working_with_textures/index.md
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -50,14 +50,14 @@ Try adjusting the position and color parameters and see how they can affect the
50
50
51
51
MonoGame uses a coordinate system where (0, 0) is at the screen's upper-left corner. X values increase moving right, and Y values increase moving down. Understanding this, we wil try to center the logo on the game window.
52
52
53
-
To center content on the screen, we need to find the window's center point. We can access this using the [**Window.ClientBounds**](xref:Microsoft.Xna.Framework.GameWindow.ClientBounds) property from the [**Game**](xref:Microsoft.Xna.Framework.Game) class, which represents the rectangular bounds of the game window. [**Window.ClientBounds**](xref:Microsoft.Xna.Framework.GameWindow.ClientBounds) exposes both [**Width**](xref:Microsoft.Xna.Framework.Rectangle.Width) and [**Height**](xref:Microsoft.Xna.Framework.Rectangle.Height) properties for the window's dimensions in pixels. By dividing these dimensions in half, we can can calculate the window's center coordinates. Let's update our [**Draw**](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch.Draw(Microsoft.Xna.Framework.Graphics.Texture2D,Microsoft.Xna.Framework.Rectangle,Microsoft.Xna.Framework.Color)) method to use this:
53
+
To center content on the screen, we need to find the window's center point. We can access this using the [**Window.ClientBounds**](xref:Microsoft.Xna.Framework.GameWindow.ClientBounds) property from the [**Game**](xref:Microsoft.Xna.Framework.Game) class, which represents the rectangular bounds of the game window. [**Window.ClientBounds**](xref:Microsoft.Xna.Framework.GameWindow.ClientBounds) exposes both [**Width**](xref:Microsoft.Xna.Framework.Rectangle.Width) and [**Height**](xref:Microsoft.Xna.Framework.Rectangle.Height) properties for the window's dimensions in pixels. By dividing these dimensions in half, we can can calculate the window's center coordinates. We can update our [**Draw**](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch.Draw(Microsoft.Xna.Framework.Graphics.Texture2D,Microsoft.Xna.Framework.Rectangle,Microsoft.Xna.Framework.Color)) method to use this:
> In the example above, we multiply the [**Vector2**](xref:Microsoft.Xna.Framework.Vector2) created by `0.5f` to halve the value instead of dividing it by `2.0f`. If you are not used to seeing this, it might seem strange at first, but it is actually an optimization technique. CPUs are able to perform multiplication operations much faster than division operations and reading `* 0.5f` is easily understood to be the same thing as `/ 2.0f` when reading.
59
59
60
-
We have now set the position to half the window's dimensions, which should center the logo. Let's run the game to see the result.
60
+
We have now set the position to half the window's dimensions, which should center the logo. Run the game to see the result.
61
61
62
62
||
@@ -95,7 +95,7 @@ This overload produces the same centered result but exposes all parameters that
95
95
96
96
### Rotation
97
97
98
-
First we will explore the `rotation` parameter. This value is the amount of rotation to apply to the sprite when rendering it. Let's rotate the texture 90° to make it vertical. Since rotation is measured in radians, not degrees, we can use the built-in math library in MonoGame to make the conversion for us by calling [**MathHelper.ToRadians**](xref:Microsoft.Xna.Framework.MathHelper.ToRadians(System.Single)). Update the code to:
98
+
First we will explore the `rotation` parameter. This value is the amount of rotation to apply to the sprite when rendering it. We will rotate the texture 90° to make it vertical. Since rotation is measured in radians, not degrees, we can use the built-in math library in MonoGame to make the conversion for us by calling [**MathHelper.ToRadians**](xref:Microsoft.Xna.Framework.MathHelper.ToRadians(System.Single)). Update the code to:
@@ -236,24 +236,24 @@ Which will produce the following result:
236
236
237
237
### Source Rectangle
238
238
239
-
The `sourceRectangle` parameter specifies a specific boundary within the texture that should be rendered. So far, we've just set this parameter to `null`, which specifies that the full texture should be rendered. If we only wanted to render a portion of the texture as the sprite, we can set this parameter value.
239
+
The `sourceRectangle` parameter specifies a specific boundary within the texture that should be rendered. So far, we have just set this parameter to `null`, which specifies that the full texture should be rendered. If we only wanted to render a portion of the texture as the sprite, we can set this parameter value.
240
240
241
-
For instance, take the logo image we've been using. We can break it down into two distinct regions; the MonoGame icon and the MonoGame wordmark.
241
+
For instance, take the logo image we have been using. We can break it down into two distinct regions; the MonoGame icon and the MonoGame wordmark.
242
242
243
243
||
|**Figure 6-14: The MonoGame logo broken down into the icon and wordmark regions**|
246
246
247
247
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`.
248
248
249
-
Let's see this in action by drawing the icon and the wordmark separately from the same texture. Update the code to the following:
249
+
We can see this in action by drawing the icon and the wordmark separately from the same texture. Update the code to the following:
- Two new [**Rectangle**](xref:Microsoft.Xna.Framework.Rectangle) values called `iconSourceRect` and `wordmarkSourceRect` that represent the boundaries of the MonoGame icon and wordmark regions within the logo texture were added.
256
-
- The *sourceRectangle* parameter of the `_spriteBatch.Draw` was updated to use the new `iconSourceRect` value. **Notice that we are still telling it to draw the `_logo` for the *texture*, we've just supplied it with a source rectangle this time.**
256
+
- The *sourceRectangle* parameter of the `_spriteBatch.Draw` was updated to use the new `iconSourceRect` value. **Notice that we are still telling it to draw the `_logo` for the *texture*, we have just supplied it with a source rectangle this time.**
257
257
- The *origin* parameter was updated to use the width and height of the `iconSourceRect`. Since the overall dimensions of what we will be rendering has changed due to supplying a source rectangle, the origin needs to be adjusted to those dimensions as well.
258
258
- Finally, a second `_spriteBatch.Draw` call is made, this time using the `wordmarkSourceRect` as the source rectangle so that the wordmark is drawn.
259
259
@@ -285,7 +285,7 @@ To make use of the `layerDepth` parameter, you need to set the `sortMode` to eit
285
285
|[**SpriteSortMode.BackToFront**](xref:Microsoft.Xna.Framework.Graphics.SpriteSortMode.BackToFront)| Sprites are sorted by depth in back-to-front order prior to drawing. |
286
286
|[**SpriteSortMode.FrontToBack**](xref:Microsoft.Xna.Framework.Graphics.SpriteSortMode.FrontToBack)| Sprites are sorted by depth in front-to-back order prior to drawing. |
287
287
288
-
Let's see this in action. We've already set the `layerDepth` parameter of the icon to `1.0f`. Find the `_spriteBatch.Begin()` method call and update it to the following:
288
+
Now we can see this in action. We have already set the `layerDepth` parameter of the icon to `1.0f`. Find the `_spriteBatch.Begin()` method call and update it to the following:
@@ -303,7 +303,7 @@ The second is [**SpriteSortMode.Immediate**](xref:Microsoft.Xna.Framework.Graphi
303
303
304
304
## Conclusion
305
305
306
-
Let's review what you accomplished in this chapter:
306
+
In this chapter, you accomplished the following:
307
307
308
308
- You learned about the different parameters of the [**SpriteBatch.Draw**](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch.Draw(Microsoft.Xna.Framework.Graphics.Texture2D,Microsoft.Xna.Framework.Vector2,Microsoft.Xna.Framework.Color)) method and how they affect sprite rendering.
309
309
- You learned how the `rotation` parameter works and how to convert between degrees and radians using [**MathHelper.ToRadians**](xref:Microsoft.Xna.Framework.MathHelper.ToRadians(System.Single)).
@@ -314,7 +314,7 @@ Let's review what you accomplished in this chapter:
314
314
- You used the `sourceRectangle` parameter to draw specific regions from a texture.
315
315
- You explored sprite layering using the `layerDepth` parameter and different [**SpriteSortMode**](xref:Microsoft.Xna.Framework.Graphics.SpriteSortMode) options.
316
316
317
-
In the next chapter, we will take what we've learned about working with textures and learn techniques to optimize rendering to reduce texture swapping.
317
+
In the next chapter, we will take what we have learned about working with textures and learn techniques to optimize rendering to reduce texture swapping.
Copy file name to clipboardExpand all lines: articles/tutorials/building_2d_games/07_optimizing_texture_rendering/index.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -63,7 +63,7 @@ To better organize this complexity, we can apply object-oriented design principl
63
63
64
64
## The TextureRegion Class
65
65
66
-
In [Chapter 06](../06_working_with_textures/index.md#source-rectangle), we learned about using the `sourceRectangle` parameter to reuse the same texture when rendering sprites but specifying different regions within the texture to render. Let's first build on this and create a class called `TextureRegion`.
66
+
In [Chapter 06](../06_working_with_textures/index.md#source-rectangle), we learned about using the `sourceRectangle` parameter to reuse the same texture when rendering sprites but specifying different regions within the texture to render. For our next step, we will build on this and create a class called `TextureRegion`.
67
67
68
68
We are going to add this class to the class library we created in [Chapter 04](../04_creating_a_class_library/index.md). Perform the following:
69
69
@@ -147,7 +147,7 @@ These methods serve different purposes in managing the texture atlas:
147
147
148
148
## Using the TextureAtlas Class
149
149
150
-
Let's put our new `TextureAtlas` class to use by exploring two approaches; creating an atlas manually and using XML configuration. So far, we've been practicing using textures with the MonoGame logo. Now we will use a new texture atlas that contains various sprites we will need for our game.
150
+
No we can put our new `TextureAtlas` class to use by exploring two approaches; creating an atlas manually and using XML configuration. So far, we have been practicing using textures with the MonoGame logo. Now we will use a new texture atlas that contains various sprites we will need for our game.
151
151
152
152
Download the texture atlas by right-clicking the following image and saving it as atlas.png:
153
153
@@ -193,7 +193,7 @@ Running the game now shows both sprites in the upper-left corner:
|**Figure 7-3: The slime and bat texture regions being rendered in the upper-left corner of the game window**|
195
195
196
-
While manual creation works for a few sprites, managing many regions becomes cumbersome. Let's now explore the `TextureAtlas.FromFile` method to load our atlas configuration from XML instead. Perform the following:
196
+
While manual creation works for a few sprites, managing many regions becomes cumbersome. Now we will explore the `TextureAtlas.FromFile` method to load our atlas configuration from XML instead. Perform the following:
197
197
198
198
1. Create a new file named *atlas-definition.xml* in the *Content/images* folder.
199
199
2. Add the following content to that file:
@@ -229,7 +229,7 @@ Running the game now will show the same results as Figure 7-4 above, with the sl
229
229
230
230
## Conclusion
231
231
232
-
Let's review what you accomplished in this chapter:
232
+
In this chapter, you accomplished the following:
233
233
234
234
- Learned about texture swapping and its impact on performance
235
235
- Explored texture atlases as a solution for optimizing texture rendering
0 commit comments