Merge pull request MonoGame#55 from AristurtleDev/feedback/chapter-21

 Address Chapter 21 Feedback

Author: AristurtleDev

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

@@ -132,11 +132,18 @@ The slime and bat sprites are no longer in the same position, and we have some n
 
 [!code-csharp[](./snippets/atlas-definition.xml?highlight=5-16,29-32)]
 
+The same is now true for the tiles in the texture atlas.  Since they have been repositioned in the new texture atlas, we need to update the `region` attribute for the tilemap XML configuration file.  Open the `tilemap-definition.xml` configuration file and update it to the following:
+
+[!code-csharp[](./snippets/tilemap-definition.xml?highlight=3)]
+
 ### Adding Bitmap Fonts
 
-While MonoGame natively uses [**SpriteFont**](xref:Microsoft.Xna.Framework.Graphics.SpriteFont) to draw text, Gum uses the [AngelCode Bitmap Font (.fnt)](https://www.angelcode.com/products/bmfont/) font file format. This means we will need to supply Gum with the *.fnt* file that defines our font.
+While MonoGame natively uses [**SpriteFont**](xref:Microsoft.Xna.Framework.Graphics.SpriteFont) to draw text, Gum uses the [AngelCode Bitmap Font (.fnt)](https://www.angelcode.com/products/bmfont/) font file format. This means we will need to supply Gum with the *.fnt* file that defines our font.  
+
+> [!NOTE]
+> For this tutorial, a pregenerated *.fnt* file is supplied below.  For more information on creating *.fnt* files for Gum, see the [Create Fonts with BitmapFontGenerator](https://docs.flatredball.com/gum/gum-tool/gum-elements/text/use-custom-font#creating-fonts-with-bitmapfontgenerator) section of the Gum documentation. 
 
-First, download the *.fnt* file by right-clicking the following link and saving it as *04b_30.fnt* in the game project's *Content/fonts* folder:
+Download the *.fnt* file below by right-clicking the following link and saving it as *04b_30.fnt* in the game project's *Content/fonts* folder:
 
 - [04b_30.fnt](./files/04b_30.fnt){download}
 

articles/tutorials/building_2d_games/21_customizing_gum_ui/snippets/animatedbutton.cs

@@ -3,7 +3,6 @@
 using Gum.DataTypes.Variables;
 using Gum.Graphics.Animation;
 using Gum.Managers;
-using Gum.Wireframe;
 using Microsoft.Xna.Framework.Input;
 using MonoGameGum.Forms.Controls;
 using MonoGameGum.GueDeriving;
@@ -37,21 +36,21 @@ public AnimatedButton(TextureAtlas atlas)
         nineSliceInstance.Height = 0f;
         nineSliceInstance.Texture = atlas.Texture;
         nineSliceInstance.TextureAddress = TextureAddress.Custom;
-        nineSliceInstance.Dock(Dock.Fill);
+        nineSliceInstance.Dock(Gum.Wireframe.Dock.Fill);
         topLevelContainer.Children.Add(nineSliceInstance);
 
         // Create the text element that will display the button's label
         TextRuntime textInstance = new TextRuntime();
         // Name is required so it hooks in to the base Button.Text property
-        textInstance.Name = nameof(textInstance);
+        textInstance.Name = "TextInstance";
         textInstance.Text = "START";
         textInstance.Blue = 130;
         textInstance.Green = 86;
         textInstance.Red = 70;
         textInstance.UseCustomFont = true;
         textInstance.CustomFontFile = "fonts/04b_30.fnt";
         textInstance.FontScale = 0.25f;
-        textInstance.Anchor(Anchor.Center);
+        textInstance.Anchor(Gum.Wireframe.Anchor.Center);
         textInstance.Width = 0;
         textInstance.WidthUnits = DimensionUnitType.RelativeToChildren;
         topLevelContainer.Children.Add(textInstance);

articles/tutorials/building_2d_games/21_customizing_gum_ui/snippets/optionsslider.cs

@@ -2,7 +2,6 @@
 using Gum.DataTypes;
 using Gum.DataTypes.Variables;
 using Gum.Managers;
-using Gum.Wireframe;
 using Microsoft.Xna.Framework;
 using MonoGameGum.Forms.Controls;
 using MonoGameGum.GueDeriving;
@@ -41,7 +40,7 @@ public OptionsSlider(TextureAtlas atlas)
         topLevelContainer.Height = 55f;
         topLevelContainer.Width = 264f;
 
-        TextureRegion backgroundRegion = atlas.GetRegion("slider-background");
+        TextureRegion backgroundRegion = atlas.GetRegion("panel-background");
 
         // Create the background panel that contains everything
         NineSliceRuntime background = new NineSliceRuntime();
@@ -51,7 +50,7 @@ public OptionsSlider(TextureAtlas atlas)
         background.TextureLeft = backgroundRegion.SourceRectangle.Left;
         background.TextureTop = backgroundRegion.SourceRectangle.Top;
         background.TextureWidth = backgroundRegion.Width;
-        background.Dock(Dock.Fill);
+        background.Dock(Gum.Wireframe.Dock.Fill);
         topLevelContainer.AddChild(background);
 
         // Create the title text element
@@ -77,7 +76,7 @@ public OptionsSlider(TextureAtlas atlas)
 
         // Create the "OFF" side of the slider (left end)
         NineSliceRuntime offBackground = new NineSliceRuntime();
-        offBackground.Dock(Dock.Left);
+        offBackground.Dock(Gum.Wireframe.Dock.Left);
         offBackground.Texture = atlas.Texture;
         offBackground.TextureAddress = TextureAddress.Custom;
         offBackground.TextureHeight = offBackgroundRegion.Height;
@@ -86,14 +85,14 @@ public OptionsSlider(TextureAtlas atlas)
         offBackground.TextureWidth = offBackgroundRegion.Width;
         offBackground.Width = 28f;
         offBackground.WidthUnits = DimensionUnitType.Absolute;
-        offBackground.Dock(Dock.Left);
+        offBackground.Dock(Gum.Wireframe.Dock.Left);
         innerContainer.AddChild(offBackground);
 
         TextureRegion middleBackgroundRegion = atlas.GetRegion("slider-middle-background");
 
         // Create the middle track portion of the slider
         NineSliceRuntime middleBackground = new NineSliceRuntime();
-        middleBackground.Dock(Dock.FillVertically);
+        middleBackground.Dock(Gum.Wireframe.Dock.FillVertically);
         middleBackground.Texture = middleBackgroundRegion.Texture;
         middleBackground.TextureAddress = TextureAddress.Custom;
         middleBackground.TextureHeight = middleBackgroundRegion.Height;
@@ -102,7 +101,7 @@ public OptionsSlider(TextureAtlas atlas)
         middleBackground.TextureWidth = middleBackgroundRegion.Width;
         middleBackground.Width = 179f;
         middleBackground.WidthUnits = DimensionUnitType.Absolute;
-        middleBackground.Dock(Dock.Left);
+        middleBackground.Dock(Gum.Wireframe.Dock.Left);
         middleBackground.X = 27f;
         innerContainer.AddChild(middleBackground);
 
@@ -118,21 +117,21 @@ public OptionsSlider(TextureAtlas atlas)
         maxBackground.TextureWidth = maxBackgroundRegion.Width;
         maxBackground.Width = 36f;
         maxBackground.WidthUnits = DimensionUnitType.Absolute;
-        maxBackground.Dock(Dock.Right);
+        maxBackground.Dock(Gum.Wireframe.Dock.Right);
         innerContainer.AddChild(maxBackground);
 
         // Create the interactive track that responds to clicks
         // The special name "TrackInstance" is required for Slider functionality
         ContainerRuntime trackInstance = new ContainerRuntime();
         trackInstance.Name = "TrackInstance";
-        trackInstance.Dock(Dock.Fill);
+        trackInstance.Dock(Gum.Wireframe.Dock.Fill);
         trackInstance.Height = -2f;
         trackInstance.Width = -2f;
         middleBackground.AddChild(trackInstance);
 
         // Create the fill rectangle that visually displays the current value
         _fillRectangle = new ColoredRectangleRuntime();
-        _fillRectangle.Dock(Dock.Left);
+        _fillRectangle.Dock(Gum.Wireframe.Dock.Left);
         _fillRectangle.Width = 90f; // Default to 90% - will be updated by value changes
         _fillRectangle.WidthUnits = DimensionUnitType.PercentageOfParent;
         trackInstance.AddChild(_fillRectangle);
@@ -146,7 +145,7 @@ public OptionsSlider(TextureAtlas atlas)
         offText.FontScale = 0.25f;
         offText.UseCustomFont = true;
         offText.Text = "OFF";
-        offText.Anchor(Anchor.Center);
+        offText.Anchor(Gum.Wireframe.Anchor.Center);
         offBackground.AddChild(offText);
 
         // Add "MAX" text to the right end
@@ -158,7 +157,7 @@ public OptionsSlider(TextureAtlas atlas)
         maxText.FontScale = 0.25f;
         maxText.UseCustomFont = true;
         maxText.Text = "MAX";
-        maxText.Anchor(Anchor.Center);
+        maxText.Anchor(Gum.Wireframe.Anchor.Center);
         maxBackground.AddChild(maxText);
 
         // Define colors for focused and unfocused states
@@ -251,4 +250,4 @@ private void HandleValueChanged(object sender, EventArgs e)
         // _fillRectangle uses percentage width units, so we multiply by 100
         _fillRectangle.Width = 100 * (float)ratio;
     }
-}
+}