Myra - UI Library for the MonoGame

In your Game initialization code do:
IsMouseVisible = true;

If I want to create a panel that floats on top of my game screen how do I that? At the moment my GUI is filling the whole screen.

Ok one way…I had to make sure to set:
_host.Bounds = new Rectangle(0, 0, 500, 500);

and then use:

        Myra.Graphics2D.UI.Window window = new Myra.Graphics2D.UI.Window();
        window.WidthHint = 200;
        window.HeightHint = 200;
        window.XHint = 20;
        window.YHint = 20;
        window.Visible = true;
        window.Title = "Window";

But its not clear how I should put components inside the window.
I would like a scrollpane inside.

Use Window’s property called ContentGrid.
I.e. window.ContentGrid.Children.Add(scrollPane);
Also make sure to use ShowModal method to show the window on the desktop: window.ShowModal(_host);

Seems to be a bug with the scrollbar with scrollpane in the window.
See the screenshot:

Thanks for reporting. I’ll look into it.

I am glad to announce the release of Myra
The changes include:

  • New widget - ListBox

  • Added the UI Editor to the installation package. It’s still far from being complete. Though some simple GUIs can be made with it already (see video in the end of this post).

  • Some API changes. I.e. Grid.Children property had been renamed to Grid.Widgets.

  • Various bug fixes. Including two mentioned in this thread (issue with placing cursor behind the last character in TextField & issue with ScrollPane inside the Window).

The new installation package could be downloaded here:

The Nuget had been updated as well.

And there is UI Editor video:

Thanks everyone for feedbacks!

Very nice, been playing with the UI editor.
Are you planning on adding a spin button?
Also I think if programmatically if images for back of buttons etc could be set this would be useful.

Yeah, I’ll add a spin button and a slider. And write detailed docs on how to make your own controls.

You can set images for images for back of buttons programmatically already with the code similar to the one you’ve posted earlier. I.e. if you have Button button and Texture2D texture. Then the code will be:

        TextureRegion reg = new TextureRegion(texture, new Rectangle(0, 0, texture.Width, texture.Height));
        Sprite sprite = new Sprite(reg);
        button.Background = sprite;

Also Button has PressedBackground property(obviously it is rendered when button is pressed), OverBackground(when mouse is over it), DisabledBackground, etc.

Version is there. It has following updates:

  • Horizontal & vertical sliders (it had been added to the GridSample)
  • Grouping by category in the UI Editor property pane
  • Removed changing of ScissorRectangle for every widget rendering but ScrollPane, which gave performance boost

Also, I’ve added “Using UI Editor” wiki entry:

It containts 3 sample videos. The last one demonstrates adding of the menu bar.
Also above link contains sample code demonstrating loading of the user interface made with UI Editor and locating widgets by id.

New version binary distribution link:

NuGet had been updated as well.

Looks good.

I really would like to create my own stylesheet. I’m ok with the 3 files json, altas and altas image that have to be edited but then setting this to be used in code seems waaaay too hard. It should be ideally like one line of code myra.UseStyleSheet(json, atlas, atlasImage).

If the style sheet editing could eventually find its way into the editor :slight_smile: this would even be more great.

Yeah, you’re right. Probably providing their own UI stylesheet is number one thing every developer would want to do with Myra.
So I’ll prioritize making a sample demonstrating on how to archieve that.
And the next step would be adding custom stylesheet support to the editor.

Version had been released. It has two major improvements:

Binary distribution link:
NuGet had been also updated.

Thanks again for the feedbacks.

I think i will give this a try in my game’s prototype :slight_smile: can’t wait to try this.

New version is ready.
Added SpinButton, HorizontalProgressBar and VerticalProgressBar widgets. Their usage is demonstrated at GridSample and CustomUIStylesheetSample.
Also added ImageButton widget. Which is just a simplified version of the Button widget(which can have both image and text).

As the UI part seems pretty complete functionality-wise I’ve started to add completely new feature to Myra: 3d engine. The end goal of that project is to make it simplistic, easy to use and sufficient for indie low-poly games.

To make the work simplier, I’ve added MultiCompileEffect feature. It allows to specify values for #defines of Effect at the run-time. It is done by compiling possible variants(which are specified by special JSON file) and packaging it into the one content resource. More detailed documentation for that feature is here:

With MultiCompileEffect I’ve done first two shaders: DefaultEffect and TerrainEffect. Which are demonstrated on the new samples: Primitives3DSample(screenshot is attached) and TerrainSample. You can move there using WASD keys. Pressing right button and moving the mouse will make the camera rotate.

Link to binary distribution:

NuGet had been updated as well.

Would not it be better to place the 3D engine in its own library/dll ?
If I use Myra for my UI, I don’t need Myra’s 3D engine alongside mine, even if I don’t use it.

ps: did you make your own OOBB ? From my memories, MG uses AABB.

Probably you’re right, I’ll make separate Myra.Graphics3D library in future releases.
I use MG’s BoundingBox class for AABB calculations.

Myra is here.
List of changes:

  • Following discussion, I’ve removed 3d stuff from it for now. Probably it’ll find it’s place in the completely new project.
  • Added FNA version of Myra. Myra.FNA.dll had been added to both NuGet and to MSI package. Also MSI package got FNA Samples Launcher.
  • Added ZIP distribution:
    It could be used under Linux(had been tested with Ubuntu). Unzip it and then executables could be run with mono(i.e. ‘mono ./Myra.UIEditor.exe’)
  • Some minor changes to the UI: Tree widget could be navigated with Up/Down keys. And Return key could be used to expand/collapse nodes. ScrollPane widget could be vertically scrolled using the mouse wheel. Both changes had been implemented to make the UI Editor more convinient to use. It can be turned off by setting CanFocus of either Tree or ScrollPane to false.
  • Switched to MonoGame 3.6. Though it should work with 3.5 as well.

Binary distribution link:

Myra had been released.
The major change is Myra got it’s own system of the asset management. It is fundamentally different from MonoGame Content Pipeline. The difference is Myra’s asset management doesnt have any sort of pipeline, but loads raw assets. I’ve wrapped up some docs on it:
Though it is far from being complete.
The new system could be used to load custom UI stylesheet using just one line of code:

var stylesheet = _assetManager.Load<Stylesheet>("uiskin.json");

The Loading Custom UI Stylesheet Guide had been updated appropriately.

Binary releases link:
NuGet had been updated as well.

Btw, I would be glad to answer any questions and offer any assistance regarding Myra in the real time. Feel free to contact me at gitter.

Only two days passed since the last announcement. And now there’s new version. The major change is that Myra moved on top of MonoGame.Extended.
FNA version of Myra had been dropped.

Binary distribution:
NuGet had been updated.