Added sample screenshots for each sample and gifs for moving images

Author: SimonDarksideJ

articles/getting_to_know/howto/graphics/HowTo_Animate_Sprite.md

@@ -8,11 +8,18 @@ requireMSLicense: true
 
 In this example, you will draw a sprite to the screen and then animate the sprite using a custom sprite animation class.
 
+### End result
+
+![The output of this tutorial](images/HowTo_AnimateSprite_Final.gif)
+
+> [!NOTE]
+> Better animations can be done with better images and more frames, have a look at the [Platformer Sample](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.1/Platformer2D) Provided by MonoGame for example.
+
 ## Requirements
 
 The example assumes the texture you are loading contains multiple frames of the same size in a texture whose size is uniform (also known as a spritesheet), for example, the following spritesheet contains 8 Images of a character in different phases of motion, when player together it looks like it is animated.
 
-![Character Spritesheet](../images/HowTo_SpriteAnimate_Spritesheet.PNG)
+![Character Spritesheet](images/HowTo_SpriteAnimate_Spritesheet.PNG)
 
 Save the spritesheet to your content project and name it "**AnimatedCharacter**" (this name will used to reference it in the project).
 
@@ -33,6 +40,9 @@ Save the spritesheet to your content project and name it "**AnimatedCharacter**"
     using Microsoft.Xna.Framework.Content;
     using Microsoft.Xna.Framework.Graphics;
 
+     /// <summary>
+    /// A helper class for handling animated textures.
+    /// </summary>   
     public class AnimatedTexture
     {
         private int frameCount;
@@ -127,15 +137,17 @@ Save the spritesheet to your content project and name it "**AnimatedCharacter**"
     // The reference to the AnimatedTexture for the character
     private AnimatedTexture spriteTexture;
     // The rotation of the character on screen
-    private const float Rotation = 0;
+    private const float rotation = 0;
     // The scale of the character, how big it is drawn
-    private const float Scale = 2.0f;
+    private const float scale = 0.5f;
     // The draw order of the sprite
-    private const float Depth = 0.5f;
+    private const float depth = 0.5f;
 
     public Game1()
     {
-        spriteTexture = new AnimatedTexture(Vector2.Zero, Rotation, Scale, Depth);
+        _graphics = new GraphicsDeviceManager(this);
+        Content.RootDirectory = "Content";
+        spriteTexture = new AnimatedTexture(Vector2.Zero, rotation, scale, depth);
     }
     ```
 
@@ -149,8 +161,8 @@ Save the spritesheet to your content project and name it "**AnimatedCharacter**"
     private Vector2 characterPos;
     // How many frames/images are included in the animation
     private const int frames = 8;
-    // How many frames should be drawn each section, how fast does the animation run
-    private const int framesPerSec = 3;
+    // How many frames should be drawn each second, how fast does the animation run?
+    private const int framesPerSec = 10;
 
     protected override void LoadContent()
     {
@@ -180,7 +192,7 @@ Save the spritesheet to your content project and name it "**AnimatedCharacter**"
     }
     ```
 
-    This is handled by AnimatedTexture's **UpdateFrame** method, which takes the elapsed seconds between updates as a parameter.
+    This is handled by AnimatedTexture's **UpdateFrame** method, which takes the elapsed seconds between updates as a parameter, as shown below in the except from the "AnimatedTexture" class.
 
     ```csharp
     // class AnimatedTexture
@@ -208,6 +220,7 @@ Save the spritesheet to your content project and name it "**AnimatedCharacter**"
 
         // TODO: Add your drawing code here
         _spriteBatch.Begin();
+        // Replacing the normal SpriteBatch.Draw call to use the version from the "AnimatedTexture" class instead
         spriteTexture.DrawFrame(_spriteBatch, characterPos);
         _spriteBatch.End();
 

articles/getting_to_know/howto/graphics/HowTo_Draw_A_Sprite.md

@@ -8,11 +8,15 @@ requireMSLicense: true
 
 In any game, drawing basic textures to the screen is essential knowledge, whether it is for menus and background images, to 2D game textures and characters.  In this sample we will walk though the steps needed to load a texture and then render it on the screen.
 
+### End result
+
+![The output of this tutorial](./images/HowTo_DrawSprite_Final.png)
+
 ## Requirements
 
 The following texture will be used to render to the screen.
 
-![Character Texture](../images/HowTo_DrawSprite_Character.png)
+![Character Texture](images/HowTo_DrawSprite_Character.png)
 
 Save it to your content project and name it "**Character**" (this name will used to reference it in the project).
 
@@ -26,7 +30,7 @@ Save it to your content project and name it "**Character**" (this name will used
     In this case, the example uses the **Content** member to load a texture from the MonoGame Framework Content Pipeline.
 
     > [!IMPORTANT]
-    > The texture must be in the project, with the same name passed to [ContentManager.Load](xref:Microsoft.Xna.Framework.Content.ContentManager#Microsoft_Xna_Framework_Content_ContentManager_Load__1_System_String_).
+    > The texture must be in the project, with the same **Name** passed to [ContentManager.Load](xref:Microsoft.Xna.Framework.Content.ContentManager#Microsoft_Xna_Framework_Content_ContentManager_Load__1_System_String_).  In this case the texture should be called "Character"!!
 
     ```csharp
     // The reference to the loaded sprite

articles/getting_to_know/howto/graphics/HowTo_Rotate_Sprite.md

@@ -10,6 +10,10 @@ Rotating images and sprites is easy enough, but the main thing to keep in mind i
 
 This guide walks you through calculating a new origin for images (the center in this case) and using that to determine to draw and rotate your sprite from.
 
+### End result
+
+![The output of this tutorial](./images/HowTo_RotateSprite_Final.gif)
+
 ## Drawing a Rotated Sprite
 
 1. Follow the procedures of [Drawing a Sprite](HowTo_Draw_A_Sprite.md).
@@ -47,7 +51,9 @@ This guide walks you through calculating a new origin for images (the center in
    The angle is specified in radians, and it can be greater than two times `π`, but does not need to be.
 
     ```csharp
+    // The angle at which to rotate and draw the sprite at
     private float rotationAngle;
+
     protected override void Update(GameTime gameTime)
     {
         if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed || Keyboard.GetState().IsKeyDown(Keys.Escape))
@@ -57,6 +63,7 @@ This guide walks you through calculating a new origin for images (the center in
         float elapsed = (float)gameTime.ElapsedGameTime.TotalSeconds;
 
         // TODO: Add your game logic here.
+        // Simple roation logic to rotate the sprite in a clockwise direction over time
         rotationAngle += elapsed;
         float circle = MathHelper.Pi * 2;
         rotationAngle %= circle;
@@ -76,6 +83,7 @@ This guide walks you through calculating a new origin for images (the center in
 
         // TODO: Add your drawing code here
         _spriteBatch.Begin();
+        // Draw call updated to use a different overload with additional parameters, specifically the "Rotation angle" and "Origin".
         _spriteBatch.Draw(spriteTexture, spritePosition, null, Color.White, rotationAngle,
             spriteOrigin, 1.0f, SpriteEffects.None, 0f);
         _spriteBatch.End();

articles/getting_to_know/howto/graphics/HowTo_Scale_Sprite.md

@@ -14,6 +14,10 @@ There are several implementations to apply scaling to 2D sprites / textures, nam
 
 The examples below detail each of the three methods.
 
+### End result
+
+![The output of this tutorial](./images/HowTo_ScaleSprite_Final.gif)
+
 ## Drawing a Scaled Sprite with a uniform scale
 
 1. Follow the procedures of [Drawing a Sprite](HowTo_Draw_A_Sprite.md).
@@ -25,6 +29,7 @@ The examples below detail each of the three methods.
     ```csharp
     private Vector2 spritePosition = Vector2.Zero;
     protected float spriteScale = 0f;
+
     protected override void Update(GameTime gameTime)
     {
         if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed || Keyboard.GetState().IsKeyDown(Keys.Escape))
@@ -50,6 +55,7 @@ The examples below detail each of the three methods.
 
         // TODO: Add your drawing code here
         _spriteBatch.Begin();
+        // Updated draw call using the overload that allows passing the "scale" of a sprite
         _spriteBatch.Draw(spriteTexture, spritePosition, null,
             Color.White, 0f, Vector2.Zero, spriteScale, SpriteEffects.None, 0f);
         _spriteBatch.End();

articles/getting_to_know/howto/graphics/HowTo_Tint_Sprite.md

@@ -8,6 +8,10 @@ requireMSLicense: true
 
 Tinting sprites is an easy way to either animate a sprite (when it takes damage) or even to create different characters of different colors.  It is quick and efficient to do and all you need is the color to tine with and a single change to your `SpriteBatch` draw call.
 
+### End result
+
+![The output of this tutorial](./images/HowTo_TintSprite_Final.png)
+
 ## Drawing a Tinted Sprite
 
 1. Follow the procedures of [Drawing a Sprite](HowTo_Draw_A_Sprite.md).
@@ -16,7 +20,9 @@ Tinting sprites is an easy way to either animate a sprite (when it takes damage)
    In this example, the position of the mouse determines the Red, Green, values to apply to the sprite, the blue is fixed for simplicity.
 
     ```csharp
+    // The color tint to apply to the sprite
     protected Color tint;
+
     protected override void Update(GameTime gameTime)
     {
         if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed || Keyboard.GetState().IsKeyDown(Keys.Escape))
@@ -39,6 +45,7 @@ Tinting sprites is an easy way to either animate a sprite (when it takes damage)
 
         // TODO: Add your drawing code here
         _spriteBatch.Begin();
+        // Note the final argument in the Draw call is changed from Color.White to the new "tint" property
         _spriteBatch.Draw(spriteTexture, spritePosition, tint);
         _spriteBatch.End();