I’ve been busy working on the new CraftworkGUI system for MonoGame. I’m really pleased with how it’s coming along and now seems like a good time to show a little of what it can do and how it works.

So far it has basic buttons used for the likes of social icons, styled buttons with normal, hover and click styles. Labels for displaying text and a basic list box with item selection. Oh and layers.

A control represents it’s behaviour independent from it’s visual appearance. For example a button can be clicked or tapped exposes the ability to customise the visual style for each of it’s states normal, hover and pressed. The style describes how to draw the sprite (colour, scale, rotation and so on).

This is not a tutorial but I’d like to show how the API is coming along. Any suggestions are appreciated here.

The first step is to create a texture atlas with some sprites for the controls and a font texture exported from the BMFont tool like so. The images can be anything you like.

Then setup the texture atlas, initialise the GUI manager and create a layer:

            var textureAtlas = new TextureAtlas("ExampleAtlas.png");
            textureAtlas.AddRegion("twitter", 0, 0, 64, 64);
            textureAtlas.AddRegion("facebook", 64, 0, 64, 64);
            textureAtlas.AddRegion("button", 128, 0, 256, 64);
            textureAtlas.AddRegion("listBoxItem", 0, 64, 256, 64);

            _gui = new MonoGameGuiManager(GraphicsDevice, Content);
            _gui.LoadContent(new GuiContent(textureAtlas, "ExampleFont.fnt", "ExampleFont_0.png"));
            _gui.LoadTexture("Background.png");

            var layer = new GuiLayer(800, 480);
            layer.BackgroundName = "Background.png";

After that you can start creating controls and placing them on the layers like so:

            _moneyLabel = new Label()
            {
                X = 600,
                Y = 0,
                Width = 200,
                Height = 32
            };
            layer.Controls.Add(_moneyLabel);

            var twitterButton = new Button() 
            { 
                NormalStyle = new TextureRegionStyle("twitter"),
                X = 10,
                Y = 430,
                Width = 32,
                Height = 32
            };
            layer.Controls.Add(twitterButton);

            var listBox = new ListBox()
            {
                ItemStyle = new TextureRegionStyle("listBoxItem"),
                SelectedItemStyle = new TextureRegionStyle("listBoxItem") { Colour = Color.SkyBlue },
                HoveredItemStyle = new TextureRegionStyle("listBoxItem") { Colour = Color.AliceBlue },
                ItemHeight = 64,
                X = 20,
                Y = 50,
                Width = 256,
                Height = 400,
            };
            listBox.Items.Add(new ListBoxItem("Item 0"));
            listBox.Items.Add(new ListBoxItem("Item 1"));
            listBox.Items.Add(new ListBoxItem("Item 2"));
            listBox.Items.Add(new ListBoxItem("Item 3"));
            layer.Controls.Add(listBox);

            _gui.Layers.Add(layer);

The visual styles can be customised easily, and events can be handled in a familiar way:

            var button = new Button() 
            { 
                NormalStyle = new TextureRegionStyle("button"),
                HoverStyle = new TextureRegionStyle("button") 
                { 
                    Colour = Color.LightGray, 
                },
                PressedStyle = new TextureRegionStyle("button")
                {
                    Colour = Color.Gray, 
                    Effect = SpriteEffects.FlipVertically,
                    Scale = new Vector2(0.95f, 0.95f),
                },
                Text = "Click Me",
                X = 50,
                Y = 50,
                Width = 256,
                Height = 64
            };
            button.Clicked += Button_Clicked;