Israel is under a brutal attack from Gaza on multiple fronts. Hundreds of innocent civilians were murdered and kidnapped from their own homes. Hundreds are still missing.

I won't share any gore or horrific photos here. But know things are very bad right now. Here's a short video that summarize the situation.

Please support Israel in these dark times.

GeonBit.UI

UI extension for MonoGame-based projects by Ronen Ness.

Get it from: GeonBit.UI git.

Full API documentation available here: Online docs.

What's GeonBit

GeonBit is an Entity-Component-System based game engine, powered by MonoGame.

What's GeonBit.UI

GeonBit.UI is the UI / HUD system of the GeonBit engine, exported as an independent MonoGame extension under the MIT license.

It provide all the basic UI elements required to make a game / editor UI, and comes with few built-in UI skins compatible with commercial projects.

To see a GeonBit.UI demo, check out this YouTube video (very old version):

Or download the git and run the GeonBit.UI.Examples project.

Key Features

GeonBit.UI provide the following functionality:

• Helper class to handle user input and interactions with UI elements.
• Automatic positioning and anchors system that provide an easy way to place elements regardless of screen size.
• Events system to capture and respond to user interactions with UI.
• Smart Paragraphs & Headers with multiline text, automatic word-wrap, outline, and other text effects.
• Panels (framed containers for widgets), with few built-in skins and dragging functionality.
• Buttons with few skins to choose from, toggle mode, and icons.
• Checkboxes and Radio buttons.
• Cursor rendering with few cursor styles (can be disabled if you draw your own cursor).
• Image & Icon widgets (comes with 40+ built-in icons).
• Select Lists with different skins, scrollbars, and dynamic content.
• Dropdown widgets with different skins.
• Slider bars & Progress bars.
• Text boxes for user text input - support multiline, word-wrap, scrollbars and skins.
• PanelTabs to easily create multitab panels.
• Tooltip text.
• Message Boxes and file dialogs.
• Stylesheets and themes, easily extendable.
• Locked, disabled, shadow, and other basic UI effects and states.
• Global scaling property to support different screen sizes.
• Apply transformation matrix.
• And much more...

Simple example

In GeonBit.UI you create your GUI layout using plain init code.

For example, the following code:

// create a panel and position in center of screen
Panel panel = new Panel(new Vector2(400, 400), PanelSkin.Default, Anchor.Center);
UserInterface.Active.AddEntity(panel);

// add title and text
panel.AddChild(new Header("Example Panel"));
panel.AddChild(new HorizontalLine());
panel.AddChild(new Paragraph("This is a simple panel with a button."));

// add a button at the bottom
panel.AddChild(new Button("Click Me!", ButtonSkin.Default, Anchor.BottomCenter));

Will create the following UI panel at the center of the screen:

Install

You can either install GeonBit.UI with NuGet or manually.

Via NuGet

First run the NuGet install command:

Install-Package GeonBit.UI

Now to get the built-in UI themes, copy the GeonBit.UI content files from GeonBit.UI NuGet package folder (content files will be under \content\Content) and put these files under your own project, so you should have a folder like this in your content: Content\GeonBit.UI\Themes\<theme>.

The GeonBit.UI NuGet package folder is usually found the following path: %userprofile%\.nuget\packages\geonbit.ui\, be sure to pick the correct version if you have multiple versions installed.

Now you just need to add all the UI content files to your Content.mgcb, just be sure to mark all XML files with 'Copy' action, and not 'Build'.

To save time keep in mind that the content manager is just a text-based file, so you can copy the date from here.

That's it! Just few things to remember:

• If you don't have the default themes fonts installed, you need to install the fonts from Content/Fonts/ on your computer.
• If your development environment is on Linux, there are few more steps to follow: Installing on Linux.

Manual Install

Manually installing GeonBit.UI might actually be easier than using the NuGet (but harder to update):

1. Copy source project: Copy the entire project from GeonBit.UI/GeonBit.UI/ into your own solution, including the content files and source.
2. Build project: Make sure project build successfully.
3. Install fonts: You might need to install some fonts that GeonBit.UI uses and don't come by default in windows / linux. To do so, go to the GeonBit.UI/Content/Fonts folder and install all the fonts there (they are all free to use including for commercial purposes).
4. Add reference to your project: Add a reference from your main project the GeonBit.UI. This should be enough to start using it (this is how the GeonBit.UI.Examples project works, so you can check it out).

Extra steps for Linux

There are few more things to do if you use Linux:

1. After installing the fonts from GeonBit.UI.Examples/Content/Fonts/, you also need to copy the font files into the folder where the spritefont files reside (e.g. Content/GeonBit.UI/themes/<team-name>/fonts/).
2. Since at this time MonoGame can't build effects on Linux, you need to use a pre-compiled effects. Take the built effects from Content/BuiltEffects/ and put them instead of the .fx files of your theme (e.g. Content/GeonBit.UI/themes/<team-name>/effects/). Also change their 'Build Action' from 'Build' to 'Copy'.

Using GeonBit.UI

Once successfully integrated and project compiles, you can start using GeonBit.UI.

Setup

GeonBit.UI is built to be called from the MonoGame Game class in to strategic places - Update() and Draw():

1. Init the UserInterface manager in your Initialize() function.
2. Update the UserInterface manager every frame by calling UserInterface.Active.Update() in your game Update() function.
3. Draw the UI every frame by calling UserInterface.Active.Draw() in your game Draw() function.

For example, take a look at the following Game class implementation:

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using System.Collections.Generic;

// using GeonBit UI elements
using GeonBit.UI;
using GeonBit.UI.Entities;

namespace GeonBit.UI.Example
{
    /// This is the main class for your game.
    public class GeonBitUI_Examples : Game
    {
        // graphics and spritebatch
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;

		/// Game constructor.
        public GeonBitUI_Examples()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }

        /// Allows the game to perform any initialization it needs to before starting to run.
        /// here we create and init the UI manager.
        protected override void Initialize()
        {
            // GeonBit.UI: Init the UI manager using the "hd" built-in theme
            UserInterface.Initialize(Content, BuiltinThemes.hd);

            // GeonBit.UI: tbd create your GUI layouts here..

            // call base initialize func
            base.Initialize();
        }

        /// LoadContent will be called once per game and is the place to load.
        /// here we init the spriteBatch (this is code you probably already have).
        protected override void LoadContent()
        {
            // Create a new SpriteBatch, which can be used to draw textures.
            spriteBatch = new SpriteBatch(GraphicsDevice);
        }

        /// Allows the game to run logic such as updating the world.
        /// here we call the UI manager update() function to update the UI.
        protected override void Update(GameTime gameTime)
        {
            // GeonBit.UIL update UI manager
            UserInterface.Active.Update(gameTime);

            // tbd add your own update() stuff here..

            // call base update
            base.Update(gameTime);
        }

        /// This is called when the game should draw itself.
        /// here we call the UI manager draw() function to render the UI.
        protected override void Draw(GameTime gameTime)
        {
            // clear buffer
            GraphicsDevice.Clear(Color.CornflowerBlue);

            // GeonBit.UI: draw UI using the spriteBatch you created above
            UserInterface.Active.Draw(spriteBatch);

            // call base draw function
            base.Draw(gameTime);
        }
    }
}

Executing the code above will result in an empty window with blueish background and the GeonBit.UI cursor rendered on it. It should look something like this:

If that worked, you are now ready to start creating your UI by adding entities to the manager.

Anchors & Positioning

Before we go over the different UI entities, its important to understand how elements are positioned on screen using the 'anchor' and 'offset' system.

An "anchor"