06 GUI: add button text + basic alignment

06-monogame/GUI/Content/Content.mgcb

@@ -25,3 +25,10 @@
 /processorParam:TextureFormat=Color
 /build:button-default-texture.png
 
+#begin Fonts/default.spritefont
+/importer:FontDescriptionImporter
+/processor:LocalizedFontProcessor
+/processorParam:PremultiplyAlpha=True
+/processorParam:TextureFormat=Compressed
+/build:Fonts/default.spritefont
+

06-monogame/GUI/Content/Fonts/default.spritefont

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+This file contains an xml description of a font, and will be read by the XNA
+Framework Content Pipeline. Follow the comments to customize the appearance
+of the font in your game, and to change the characters which are available to draw
+with.
+-->
+<XnaContent xmlns:Graphics="Microsoft.Xna.Framework.Content.Pipeline.Graphics">
+  <Asset Type="Graphics:LocalizedFontDescription">
+
+    <!--
+    Modify this string to change the font that will be imported.
+    -->
+    <FontName>HackNerdFont.ttf</FontName>
+
+    <!--
+    Size is a float value, measured in points. Modify this value to change
+    the size of the font.
+    -->
+    <Size>12</Size>
+
+    <!--
+    Spacing is a float value, measured in pixels. Modify this value to change
+    the amount of spacing in between characters.
+    -->
+    <Spacing>0</Spacing>
+
+    <!--
+    UseKerning controls the layout of the font. If this value is true, kerning information
+    will be used when placing characters.
+    -->
+    <UseKerning>true</UseKerning>
+
+    <!--
+    Style controls the style of the font. Valid entries are "Regular", "Bold", "Italic",
+    and "Bold, Italic", and are case sensitive.
+    -->
+    <Style>Regular</Style>
+
+    <!--
+    If you uncomment this line, the default character will be substituted if you draw
+    or measure text that contains characters which were not included in the font.
+    -->
+    <DefaultCharacter>A</DefaultCharacter>
+
+    <!--
+    CharacterRegions control what letters are available in the font. Every
+    character from Start to End will be built and made available for drawing. The
+    default range is from 32, (ASCII space), to 126, ('~'), covering the basic Latin
+    character set. The characters are ordered according to the Unicode standard.
+    See the documentation for more information.
+    For localized fonts you can leave this empty as the character range will be picked up
+    from the Resource Files.
+    -->
+    <CharacterRegions>
+      <CharacterRegion>
+        <Start>&#32;</Start>
+        <End>&#8364;</End>
+      </CharacterRegion>
+    </CharacterRegions>
+    <!--
+    ResourceFiles control the characters which will be in the font. It does this
+    by scanning the text in each of the resource files and adding those specific
+    characters to the font. 
+    -->
+    <ResourceFiles>
+        <!-- <Resx>Strings.resx</Resx> -->
+    </ResourceFiles>
+  </Asset>
+</XnaContent>

06-monogame/GUI/Game1.cs

@@ -30,7 +30,8 @@ public class Game1 : Game
         
         mainScene = new Scene();
         DrawableData drawableData = new DrawableData(null);
-        drawableData.scale = new Vector2(80.0f, 40.0f);
+        drawableData.scale = new Vector2(120.0f, 40.0f);
+        drawableData.position = new Vector2(100.0f, 100.0f);
 
         void buttonOnClick(Button obj)
         {
@@ -40,11 +41,13 @@ public class Game1 : Game
         ButtonData buttonData = new ButtonData(buttonOnClick);
         buttonData.bgColor = Color.Red;
         buttonData.fgColor = Color.White;
+        buttonData.text = "Click me!";
 
         Button  mainButton = new Button(drawableData, buttonData);
         
         mainScene.drawables.Add(mainButton);
-        
+
+        mainScene.Initialize();
         base.Initialize();
     }
 

06-monogame/GUI/UI/Button.cs

@@ -1,5 +1,6 @@
 using System;
 using Microsoft.Xna.Framework;
+using Microsoft.Xna.Framework.Content;
 using Microsoft.Xna.Framework.Graphics;
 using Microsoft.Xna.Framework.Input;
 using Vector2 = Microsoft.Xna.Framework.Vector2;
@@ -16,14 +17,21 @@ public class ButtonData
 
     public Color pressedBgColor;
     public Color pressedFgColor;
+
+    public Color idleBgColor;
+    public Color idleFgColor;
     
     public bool isPressed = false;
     public bool isReleased = false;
     public bool isHovered = false;
-    public bool isNone = false;
+    public bool isIdle = false;
 
     public Action<Button>? onClick;
 
+    public string text = "";
+    public Vector2 textPosition;
+    public Vector2 textResolution;
+
     public ButtonData(Action<Button>? onClick)
     {
         this.onClick = onClick;
@@ -33,7 +41,9 @@ public class ButtonData
 public class Button : Drawable
 {
     private DrawableData _drawableData;
-    public ButtonData _buttonData; 
+    public ButtonData _buttonData;
+
+    private SpriteFont buttonFont; 
     
     public Button(DrawableData data, ButtonData buttonData)
     {
@@ -41,9 +51,9 @@ public class Button : Drawable
         _buttonData = buttonData;
     }
 
-    public override void Initialize(GameTime gameTime)
+    public override void Initialize()
     {
-        
+        buttonFont = Scene.content.Load<SpriteFont>("Fonts/default");
     }
 
     void onPressed()
@@ -53,8 +63,10 @@ public class Button : Drawable
 
         Console.WriteLine("I'm being pressed!");
         _buttonData.bgColor = Color.Red;
+        _buttonData.fgColor = Color.Black;
 
-        _buttonData.onClick(this);
+        if (_buttonData.onClick is not null)
+            _buttonData.onClick(this);
         
         _buttonData.isReleased = false;
         _buttonData.isPressed = true;
@@ -65,7 +77,8 @@ public class Button : Drawable
         if (!_buttonData.isPressed)
             return;
 
-        _buttonData.bgColor = Color.Yellow; 
+        _buttonData.bgColor = Color.Yellow;
+        _buttonData.fgColor = Color.Red;
         
         _buttonData.isPressed = false;
         _buttonData.isReleased = true;
@@ -78,20 +91,22 @@ public class Button : Drawable
         
         Console.WriteLine("I'm being hovered!");
         _buttonData.bgColor = Color.Yellow;
+        _buttonData.fgColor = Color.Red;
 
         _buttonData.isHovered = true;
     }
 
-    void onNone()
+    void onIdle()
     {
         _buttonData.bgColor = Color.Red;
+        _buttonData.fgColor = Color.Yellow;
         
         _buttonData.isPressed = false;
         _buttonData.isReleased = false;
         _buttonData.isHovered = false;
     }
 
-    public override void Update(GameTime gameTime)
+    public void buttonLogic()
     {
         var mstate = Mouse.GetState();
         Vector2 mousePosition = mstate.Position.ToVector2();
@@ -101,7 +116,7 @@ public class Button : Drawable
 
         if (outsideHorizontalBoundary || outsideVerticalBoundary)
         {
-            onNone();
+            onIdle();
             return;
         }
 
@@ -115,8 +130,21 @@ public class Button : Drawable
         {
             onReleased();
         }
-
+        
         onHovered();
+    }
+
+    public override void Update(GameTime gameTime)
+    {
+        buttonLogic();
+
+        _buttonData.textResolution = buttonFont.MeasureString(_buttonData.text);
+        
+        // we want to center the text so 
+        Vector2 buttonCenter = (_drawableData.position + (_drawableData.scale / 2.0f));
+        Vector2 textHalfResolution = _buttonData.textResolution / 2.0f;
+
+        _buttonData.textPosition = buttonCenter - textHalfResolution;
     } 
     
     public override void Draw(GameTime gameTime)
@@ -126,11 +154,24 @@ public class Button : Drawable
             _drawableData.position, 
             null, 
             _buttonData.bgColor, 
-            0.0f, 
+            _drawableData.rotation,
             Vector2.Zero,
             _drawableData.scale, 
             SpriteEffects.None, 
             0f
         );
+        
+        Scene.spriteBatch.DrawString(
+            buttonFont,
+            _buttonData.text, 
+            _buttonData.textPosition,
+            _buttonData.fgColor, 
+            _drawableData.rotation,
+            Vector2.Zero,
+            Vector2.One, 
+            SpriteEffects.None, 
+            0f, 
+            false
+        );
     }
 }

06-monogame/GUI/UI/Drawable.cs

@@ -34,7 +34,7 @@ public enum DrawableType
 public abstract class Drawable
 {
     public DrawableType drawableType;
-    public abstract void Initialize(GameTime gameTime);
+    public abstract void Initialize();
     public abstract void Update(GameTime gameTime);
     public abstract void Draw(GameTime gameTime);
 }

06-monogame/GUI/UI/Scene.cs

@@ -55,26 +55,25 @@ public class Scene
         drawables = new List<Drawable>();
     }
     
-    public void Initialize(GameTime gameTime)
+    public void Initialize()
     {
-        
+        foreach (Drawable drawable in drawables)
+            drawable.Initialize();
     }
 
     public void Update(GameTime gameTime)
     {
         foreach (Drawable drawable in drawables)
-        {
             drawable.Update(gameTime);
-        }
     }
 
     public void Draw(GameTime gameTime)
     {
         spriteBatch.Begin(SpriteSortMode.Immediate, BlendState.AlphaBlend);
+        
         foreach (Drawable drawable in drawables)
-        {
             drawable.Draw(gameTime);
-        }
+        
         spriteBatch.End();
     }
 }