GeonBit.UI: UI extension for MonoGame

Oh wow when you said running text you actually meant running text :joy: Never seen it happen before its so strange… And I use a lot of checkboxes.

Thank you for the info, I’ll take a look at it as soon as I’ll have the time (I’m at work atm) and hopefully will figure out the source of this checkbox shenanigans.

So I finally had time to work on this… Unfortunately, try as I might, I co
uldn’t reproduce the running away paragraphs.

I took your code and dumped it inside the GeonBit.UI example project:

`#region File Description
//-----------------------------------------------------------------------------
// This program show GeonBit.UI examples and usage.
//
// GeonBit.UI is an export of the UI system used for GeonBit (an open source 
// game engine in MonoGame) and is free to use under the MIT license.
//
// To learn more about GeonBit.UI, you can visit the git repo:
// https://github.com/RonenNess/GeonBit.UI
//
// Or exaplore the different README files scattered in the solution directory. 
//
// Author: Ronen Ness.
// Since: 2016.
//-----------------------------------------------------------------------------
#endregion

// using MonoGame and basic system stuff
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.Entities;
using GeonBit.UI.Entities.TextValidators;
using GeonBit.UI.DataTypes;

namespace GeonBit.UI.Example
{
    /// <summary>
    /// GeonBit.UI.Example is just an example code. Everything here is not a part of the GeonBit.UI framework, but merely an example of how to use it.
    /// </summary>
    [System.Runtime.CompilerServices.CompilerGenerated]
    class NamespaceDoc
    {
    }

    /// <summary>
    /// This is the main 'Game' instance for your game.
    /// </summary>
    public class GeonBitUI_Examples : Game
    {
        // graphics and spritebatch
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;

        // all the example panels (screens)
        List<Panel> panels = new List<Panel>();

        /// <summary>
        /// 
        /// </summary>
      public  Button nextExampleButton;

        /// <summary>
        /// 
        /// </summary>
        public  Button previousExampleButton;

        // current example shown
        int currExample = 0;

        /// <summary>
        /// Create the game instance.
        /// </summary>
        public GeonBitUI_Examples()
        {
            // init graphics device manager and set content root
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }

        /// <summary>
        /// Initialize the main application.
        /// </summary>
        protected override void Initialize()
        {         
            // create and init the UI manager
            UserInterface.Initialize(Content, BuiltinThemes.hd);
            UserInterface.UseRenderTarget = true;

            // Create a new SpriteBatch, which can be used to draw textures.
            spriteBatch = new SpriteBatch(GraphicsDevice);

            // make the window fullscreen (but still with border and top control bar)
       /*     int _ScreenWidth = graphics.GraphicsDevice.Adapter.CurrentDisplayMode.Width;
            int _ScreenHeight = graphics.GraphicsDevice.Adapter.CurrentDisplayMode.Height;
            graphics.PreferredBackBufferWidth = (int)_ScreenWidth;
            graphics.PreferredBackBufferHeight = (int)_ScreenHeight;
            graphics.IsFullScreen = true;
            graphics.ApplyChanges();*/
            
            // init ui and examples
            InitExamplesAndUI();
        }
        
        /// <summary>
        /// Create the top bar with next / prev buttons etc, and init all UI example panels.
        /// </summary>        
        protected void InitExamplesAndUI()
        {

            UserInterface.GlobalScale = 0.7f;
            UserInterface.ShowCursor = false;

            Panel panel = new Panel(new Vector2(500, 600), PanelSkin.Simple, Anchor.TopRight);
            panel.Draggable = false;
            UserInterface.AddEntity(panel);


            CheckBox toggleShader = new CheckBox("aaa");


            panel.AddChild(new Paragraph("Test UI"));
            panel.SetPosition(Anchor.TopRight, new Vector2(0, 0));

            Paragraph fps;
            panel.AddChild(fps = new Paragraph("fps :"));

            panel.AddChild(toggleShader = new CheckBox("Update Shader", Anchor.Auto, null, null, true));
            toggleShader.Scale = 0.5f;
            toggleShader.OnValueChange = (Entity entity) =>
            {
                CheckBox cb = (CheckBox)entity;
            };

            CheckBox seamFixToggle;
            panel.AddChild(seamFixToggle = new CheckBox("Fix Seams", Anchor.Auto, null, null, true));

            panel.AddChild(toggleShader = new CheckBox("Rotate Model", Anchor.Auto, null, null, true));
            toggleShader.Scale = 0.5f;
            toggleShader.OnValueChange = (Entity entity) =>
            {
                CheckBox cb = (CheckBox)entity;
            };

            panel.AddChild(new LineSpace(1));

            Paragraph sliderValue = new Paragraph("Texture resolution: 512");
            panel.AddChild(sliderValue);


            Slider slider = new Slider(1, 12, SliderSkin.Default);
            slider.Value = 9;
            slider.StepsCount = 11;
            slider.OnValueChange = (Entity entity) =>
            {
                Slider slid = (Slider)entity;
                //sliderValue.Text = "Texture resolution: " + GameSettings.g_texResolution;
            };
            panel.AddChild(slider);

            Paragraph environmentMap = new Paragraph("ambient intensity: 1.8");
            panel.AddChild(environmentMap);

            Slider envIntensitySlider = new Slider(0, 400, SliderSkin.Default);
            envIntensitySlider.StepsCount = 400;
            envIntensitySlider.Value = 180;
            envIntensitySlider.OnValueChange = (Entity entity) =>
            {
                Slider slid = (Slider)entity;
                //environmentMap.Text = "ambient intensity: " + GameSettings.g_EnvironmentIntensity;
            };
            panel.AddChild(envIntensitySlider);

            Paragraph seamFixSteps = new Paragraph("seam dilate pixels: 1");
            panel.AddChild(seamFixSteps);

            Slider seamFixStepsSlider = new Slider(0, 6, SliderSkin.Default);
            seamFixStepsSlider.StepsCount = 6;
            seamFixStepsSlider.Value = 1;
            seamFixStepsSlider.OnValueChange = (Entity entity) =>
            {
                Slider slid = (Slider)entity;
                //seamFixSteps.Text = "seam dilate pixels: " + GameSettings.g_SeamSearchSteps;
            };
            panel.AddChild(seamFixStepsSlider);


            seamFixToggle.OnValueChange = (Entity entity) =>
            {
                CheckBox cb = (CheckBox)entity;
                seamFixStepsSlider.Disabled = !cb.Checked;
            };
        }

        /// <summary>
        /// Show next UI example.
        /// </summary>
        public void NextExample()
        {
            currExample++;
            UpdateAfterExapmleChange();
        }

        /// <summary>
        /// Show previous UI example.
        /// </summary>
        public void PreviousExample()
        {
            currExample--;
            UpdateAfterExapmleChange();
        }

        /// <summary>
        /// Called after we change current example index, to hide all examples
        /// except for the currently active example + disable prev / next buttons if
        /// needed (if first or last example).
        /// </summary>
        protected void UpdateAfterExapmleChange()
        {
            // hide all panels and show current example panel
            foreach (Panel panel in panels)
            {
                panel.Visible = false;
            }
            panels[currExample].Visible = true;

            // disable / enable next and previous buttons
            nextExampleButton.Disabled = currExample == panels.Count-1;
            previousExampleButton.Disabled = currExample == 0;
        }

        /// <summary>
        /// Allows the game to run logic such as updating the world,
        /// checking for collisions, gathering input, and playing audio.
        /// </summary>
        /// <param name="gameTime">Provides a snapshot of timing values.</param>
        protected override void Update(GameTime gameTime)
        {
            // make sure window is focused
            if (!IsActive)
                return;

            // exit on escape
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed || Keyboard.GetState().IsKeyDown(Keys.Escape))
                Exit();

            // update UI
            UserInterface.Update(gameTime);

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

        /// <summary>
        /// This is called when the game should draw itself.
        /// </summary>
        /// <param name="gameTime">Provides a snapshot of timing values.</param>
        protected override void Draw(GameTime gameTime)
        {
            // draw ui
            UserInterface.Draw(spriteBatch);

            // clear buffer
            GraphicsDevice.Clear(Color.CornflowerBlue);

            // finalize ui rendering
            UserInterface.DrawMainRenderTarget(spriteBatch);

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

`
And it looks like it should, without running text:

I tried random stuff like resizing window etc, still not happening :confused:

Is your code public perhaps, somewhere I can view it? Or maybe you got more ideas I can try?

Thanks!

can you reproduce the garbage generation?

nope… only what I showed in previous post (garbage collection every ~15 seconds and looks pretty flat.

Hello Geon,

How easy is it to change the textures and the look of the UI when using GeonBit.UI?

I really like what I see here, it looks very polished, but I’m planning on making more of a dark/gritty game, and the feeling I get from the screenshots I see here is just too happy… it’s not very fitting for what I have in mind.

It’s very easy, all the texture files are just lying there in plain png files (inside GeonBit.UI/themes//textures) , and if you do drastic change to panels borders (for example create panel texture with a much thicker border than default) you can update the textures metadata XML file (in same folder) to make GeonBit use it properly.

Here’s an example of something awesome @matt did with it (hope it’s cool I’m showing it off Matt ;)) https://t.co/t5VR8EwfDy

Ofc he did custom shader work too to get that animated effect, but its a good example of how different UI themes can look.

PS if you edit the theme it’s recommended to rename the theme folder so next time you do nuget update the GeonBit.UI package won’t try to override your files.

1 Like

No problem @GeonBit. All the textures can be easily replaced. Like Ronen said - make a copy of a theme folder and start experimenting with the contents.

1 Like

Awesome! Thanks for the replies. :slight_smile:

Hey guys, I’ve been trying to use this with FNA, I’ve fixed all the compile time errors, but at runtime I’m having problems loading the xml data into the types defined in the DataTypes project (which I compiled linked with FNA btw), to be honest I don’t understand that custom pipeline thing, is it mandatory to convert those xml files into binaries (xnb I assume)? If not, are there any general directions on how to get things working? I thought that I could load the DataTypes.dll in the MonoGame pipeline tool somehow (compiled linked to the MonoGame framework obviously) and it would be able to convert those files and I would be able to use them in FNA, but that doesn’t seem to be the case so I’m extremely confused on how that pipeline thing is supposed to work, even in MonoGame. I’ve been able to use Ruminate and Gwen (by Benpye) but didn’t like them, the former is too basic and the latter has some issues. NuclearWinter I suppose is discontinued since the developers abandoned the game engine they were developing with it, and I’m looking for something open source so EmptyKeys isn’t an option, and also I don’t want “extravagant nonsense” :stuck_out_tongue: so Neoforce for example is a no-go for me. This one seems quite good and I really liked the code, only problem is getting it to work with FNA so if you guys could gimme a hand I’d appreciate. Thanks.

I never used FNA, but in MonoGame you can add references (dlls) to the content manager (click on the root directory and on the settings tab there’s a references button) to make it recognize classes so it can later serialize from XML. Tbh I’m not completely sure why it needs the reference but this is what you’re missing - the reference to DataTypes.dll from the content manager (at least that’s the case with MG).

If there’s an option to add reference to FNA content manager (does it have one?) this is probably what you need to do, if not, another option might be to install MG, compile the XMLs with it and add the compiled files to the content manager of FNA - as a port of xna it should be able to handle compiled content but as I said - I never worked with FNA so I’m guessing here.

Btw if you make it work on FNA I’d love to hear about it and what you needed to do to make it work - might as well update the docs with it :slight_smile:

I still don’t understand how that content pipeline thing works, however, in order to learn that I think a good way would be to see how it works in MonoGame, the problem is, I can’t make it work… when I try to run the solutions in the project (which should run the examples) I get a lot of these:

Processor ‘FontDescriptionProcessor’ had unexpected failure!
Importer ‘XmlImporter’ had unexpected failure!

However, I don’t see any code not even remotely resembling an importer of kinds… am I supposed to provide an importer or something? If I can get it working in MonoGame (and understand the black magic) I think I can make it work with FNA, but so far I’m quite confused :(. I’ve tried both the solution at the root and in the MG36 folder.
I did read the docs and in “Manual Install” I don’t know how to perform the step 2… I’ve read quite a bit of docs, even the CocosSharp, but I still have no idea what is this “pipeline manager”, I don’t think it’s the graphical asset converter tool, but I don’t know if it’s a project or what, maybe it’s something very obvious I’m missing because apparently everybody knows what it is :).

Well, apparently the so called “pipeline manager” is indeed the pipeline tool. I found a way to add references but it’s a bit obscure… I could link it to the DataTypes dlls and it worked fine to convert the types there into binaries, however, there are some files in the folders like styles and fonts which it won’t convert… anyway, after fiddling around I could get it working in FNA (kinda), it doesn’t properly because of those files I couldn’t convert into binaries, but at least it runs. I still can’t find a way to get it working on MonoGame (what’s kinda ironic provided it’s the supported framework :stuck_out_tongue: ).

I think I found a clue… when I build the MonoGame project, it calls MGCB.exe (don’t know where though, it’s not in build actions), and it calls it with an absolute path to the directory of the project, and MGCB.exe looks at the wrong place, for example, this:

“C:\Program Files (x86)\MSBuild\MonoGame\v3.0\Tools\MGCB.exe” /@:“G:\TESTS\uimg\GeonBit.UI-master\GeonBit.UI.MG36\Content\Content.mgcb” /platform:DesktopGL /outputDir:“G:\TESTS\uimg\GeonBit.UI-master\GeonBit.UI.MG36\Content\bin\DesktopGL” /intermediateDir:“G:\TESTS\uimg\GeonBit.UI-master\GeonBit.UI.MG36\Content\obj\DesktopGL” /quiet

still looks at the working directory, I don’t know if it’s a bug in MGCB or what, but that returns with error code 214 and when ran in cmd it says it can’t find the resources.
This pipeline thing is driving me crazy though… it shouldn’t be so complicated. A lot of things seem to work by black magic so when they break you have no clue on how to even start to fix it.

Also, the MG36 project isn’t 100% correctly configured, the DataTypes is still linked to 3.5 libs.

I’m finding these error messages much more cryptic than C++ :stuck_out_tongue: hehe.

The Build Action for the .mgcb file is probably set to MonoGameContentReference. That build action is imported in the templates MG provides. If you’re interested, it’s defined in the .targets file here. That sets a build hook that builds and copies added or changed content referenced in the .mgcb when you build the project. The error message you get in VS when a build fails are not helpful, so I recommend you build the content using the Pipeline Tool to get more specific error messages.

I see… anyway, I do understand how the content pipeline works in theory, in fact it’s very simple, you have ‘importers’ that convert sources into some kinda binaries you can use in the engine, and that mgcb tool is just a tool to automate the batch processing of the assets, however, in practice it’s a different beast. I can’t for the love of mine get it to process the GeonBit UI assets, spritefonts fail with index outta bounds, effects fail with some directx dependency problems, some xmls also fail with “element ‘B’ is required”, whatever that means. I’m giving @prime31’s Nez another try. The official FNA repos won’t work for me so I’m setting it up by hand, but at least it officially supports FNA.

Hi @Alan,

Sorry for the late replay, wasn’t here lately. Which MonoGame are you using? And are you using the NuGet package and followed the instructions in the readme?

BTW, if you work on Linux there’s a known issue to build effects (not related to GeonBit, its in MonoGame), so you need to use the pre-compiled effects.

Also, if you download the entire git and just build it as an exe instead of a lib, does it work for you? The project from the git should compile as an exe and run a demo program.

Thanks,

Hi, no apology necessary. I’ve tried both in MG3.5.1 and the latest 3.6, none of them could build the contents; 3.6 fails building spritefonts with unexpected failure. I did download the entire git and tried to build, the solution, as well as the MG36 project to no avail. I managed to get it working in FNA though, just without the content pipeline of course. So, no worries, I’m not really planning to use MonoGame anytime soon anyway. But boy, every time I’ve tried it, the experience was never smooth, and I still don’t know how some things work, for example I managed to get the latest Nez running in the latest FNA but it was a bit of hit and miss since I really don’t know how the whole shebang works, I’ve even opened the csprojs and sln to take a look, but some things, like for example when I try to reproduce the FNATester from scratch I get very different results, even adding the exact same references it still won’t find stuff like Content for example, so these things I can only describe as black magic :).

I don’t know man I never had these kind of problems with MonoGame before… sounds like something is broken, are you using Windows with visual studio? I think MG work best on vs/Windows.

Yes, I am using VS2017, but no problem man, I’m going to give it another try next weekend. Thanks for your support so far :slight_smile:

On the git page, it mentions

It is currently not designed for keyboard-only / joystick input (e.g. it doesn’t support tab navigating etc.)

Are there any plans on supporting that form of input? Is there any easy way to disable mouse input as it is?