Myra - UI Library for the MonoGame

rds1983 · October 19, 2017, 6:25pm

The new Myra version is on its way.
I’ve improved the Menu widget. Now menu items could be navigated using keyboard. Also now if a menu item name contain ‘&’ char, it’ll be accessible through Alt key(as in WinForms).

The goal of the Myra project is to provide UI framework that could be used not only in games, but in the level editors as well. Hopefully I’ll reach it one day.

rds1983 · November 30, 2017, 4:23pm

The new Myra 0.5.5.112 has arrived!
It has following features:

IsMultiline property for the TextField is widget. Default value is false.
New Panel widget - very simple container(could be considered as Grid with single cell).
Menu Widget can be controlled via keyboard.
Various bug fixes.

Also I’ve made new sample AllWidgetsSample, which as its name states, demonstrates all widgets at once in action:

All samples, include the new one, are available in the binary release: https://github.com/rds1983/Myra/releases/download/0.5.5.112/Myra.0.5.5.112.zip

NuGet had been updated as well.

Max_Green · December 4, 2017, 2:06pm

I am having trouble figuring out how to access information about the widget in the code. For example, how do I check if a button has been pressed, or the string in a text field? A tutorial or help on this would be appreciated.

rds1983 · December 4, 2017, 3:47pm

The button has property IsPressed and the textfield has property Text.
I hope to make small wiki entry for every widget in the future.

rds1983 · December 4, 2017, 6:43pm

Made another animated gif demonstrating UI Editor(which included in the binary release):

rds1983 · January 2, 2018, 2:54pm

Happy New Year!
Myra 0.5.6 has been released.
List of improvements:

Style Variants.
Now you can declare multiple variants of style for every widget. I.e.:

"textButton": {
        "background": "button",
        "pressedBackground": "button-down",
        "overBackground": "button-over",
        "label": {
            "font": "default-font",
            "textColor": "white",
            "disabledTextColor": "grey"
        },
        "variants": {
            "blue": { 
                "background": "button-blue",
                "pressedBackground": "button-blue-down",
                "overBackground": "button-blue-down"
            }
        }
    }

‘blue’ is style variant for TextButton widget. The corresponding TextButton could be created with following code:

var textButton = new TextButton("blue");

New feature is supported in the UI Editor:

Added TextButton widget. Now Myra has 3 button widgets: TextButton(has only text), ImageButton(only image) and ordinary Button(can have both image and text). All of it are demonstrates on the AllWidgetsSample:

Simplification of Serialization System
Now serialization of properties having default values is omitted in both .ui saving/loading and ‘Export To C#’. Therefore .ui and generated .cs files became much smaller.
Fixes for following issues: #21, #23

Binary distribution link: [https://github.com/rds1983/Myra/releases/download/0.5.6.113/Myra.0.5.6.113.zip]
(https://github.com/rds1983/Myra/releases/download/0.5.6.113/Myra.0.5.6.113.zip)
NuGet had been updated too as always.

I’ve a question for everyone who uses Myra.
I am thinking about moving off MonoGame.Extended. Particulary that means Myra will stop using MGE’s BitmapFont and start to use MG’s SpriteFont. What do you think about this idea?
If that idea will be met with negativity or even with neutrality, I wont do it.

SNaidamast · April 18, 2018, 7:43pm

Hi rds1983…

I have returned to my game project development after working for an extended time on another project.

I have successfully implemented the basic Myra-UI code for a master menu. However, how do I get my menu-bar to extend across the width of my game-screen?

Currently, I have only one master-menu master item with one sub-item in it, which I am planning on using on testing out some code for my hexagonal war-game map. Yet, the master-menu-bar only extends to the size of my single master-menu master-item.

I would like to have the menu-bar background extend across my game screen as it does in your sample code and the Myra-UI Editor.

Thank you…

SNaidamast · April 19, 2018, 4:49pm

I believe I may have answered my own question by using the “horizontal menu” widthhint property.

rds1983 · April 19, 2018, 5:06pm

Hi @SNaidamast,
I think it also could be archieved by setting HorizontalAlignment property to HorizontalAlignment.Stretch.

SNaidamast · April 19, 2018, 7:45pm

Thank you for the reply, rds1983…

SNaidamast · April 27, 2018, 7:44pm

I believe I may have found a tougher question for you regarding your Myra-UI…

I have successfully set up the basis for a menu-bar at the top of my game-screen with one master-item and one child item to this master item; the latter for the purpose of clearing selected hexagonal tiles of their highlighted borders. All of this is working quite nicely over my expanded, hexagonal map (for a war-game).

The issue I am running into is that when I make selections from the menu, I am finding that my application is also recording such selections as hexagonal selections that are being tracked in the “Update” method while being redrawn in the “Draw” method.

In other words, up to this point there is no distinction between selecting a menu-item and an underlying hexagonal tile behind the menu-bar and its drop-down menu-items.

I have tried setting a global variable based upon a menu-item selection and then testing it when the hexagonal tile selection tracking is being processed. This has worked up to a point to minimize the tiles that are being tracked for redrawing (which should not be tracked since I have selected from the menu-bar) but I would like to eliminate all of these unnecessary tiles that are being tracked as a result of menu-item selections.

Is there anything you can suggest that can indicate when the menu-bar is being selected as to when an actual tile is being selected?

Thank you…

rds1983 · June 27, 2018, 1:21am

Hi Steve,
I am really sorry for the last response.
Probably Menu.IsOpen is the property you’re looking for.

p.s. Myra is not abandoned project. Right now, I am preparing new release(0.6) which will have many serious changes. I hope to deliver it this week.

rds1983 · June 30, 2018, 7:56pm

Myra 0.6 is out!
List of changes:

Moved off Monogame.Extended. Now Myra has only one dependency: Newtonsoft.Json
Moved from MGE’s BitmapFont to standard MonoGame SpriteFont.
Added sample TabControl, which as name states demonstrates how a simple tab control widget could be done in Myra:

Right now, I am in process of revamping the documentation.

Latest Myra release could be downloaded here: https://github.com/rds1983/Myra/releases/download/0.6.0.116/Myra.0.6.0.116.zip

rds1983 · July 8, 2018, 3:58pm

Released Myra 0.6.1.
Since Myra got off Monogame.Extended I’ve returned support of FNA.
The documentation has been updated accordingly and now it describes ways of adding Myra to the FNA game: https://github.com/rds1983/Myra/wiki/Adding-Reference-to-Myra

SpiceyWolf · July 11, 2018, 9:26pm

im gunna be gone from home the next couple of days and cant really check it out, figured id post an ask here and see if i get a response:

Does the Myra UI lib have touch support(So the UI can be used in mobile games) and/or controller support?

Also when I am available next would you like me to create a VB code generator for you so your beautiful tool can reach a larger audience, id love to see this work become a mainstream tool its the best I’ve seen so far (Especially the UI editor gahd I hate UI by hand). – I ask as I have never been shy about translating stuff from C# to VB.net for the users who want it and VB users would drool over this tool

rds1983 · July 12, 2018, 5:18am

No, unfortunately Myra doesnt have neither touch or controller support. However I hope it is something that’ll be added eventually.

And, yes, I would gladly accept any contributions. Including other languages code generators.

SpiceyWolf · July 19, 2018, 5:14pm

K im free to do stuff, finished my side projects (And am home) so Ima get started on converting the Exporter located in the UIEditor, to the best of your knowlege is there anywhere else for compatibility sake I should worry about converting?

joyesh · July 20, 2018, 3:06am

Hey, I’ve looked in the example code for custom stylesheets and can’t figure out how to import them or use them. Have they been removed in 0.6 completely or did you just change how they work?

Also, is it possible to use Myra alongside MGE without any conflicts? (I use MonoGame.Extended for a lot of my project so I hope it has no conflicts)

rds1983 · July 20, 2018, 4:35am

Probably, there isn’t anything to worry about. If I was adding a new language converter, I’d do following:

Add combobox with language selection(C# or VB) to the ExportOptionsDialog.
Create ExporterVB based on ExporterCS. Actually If I had enough time, I’d try to create language-agnostic BaseExporter and made ExporterCS/ExporterVB it’s inheritors.

rds1983 · July 20, 2018, 4:45am

I changed how they work. Prior to 0.6 the Content Pipeline had been used, but it was removed afterwards.
CustomUIStylesheetSample works, however it’s code may be slightly confusing as it uses multiple Myra utility classes which arent documented.

Basically it has following organization:

All custom stylesheet assets are stored as resources.
The custom stylesheet setting/loading code is this:


			MyraEnvironment.Game = this;

			// Create resource asset resolver
			var assetResolver = new ResourceAssetResolver(GetType().Assembly, "Myra.Samples.CustomUIStylesheetSample.Resources.");

			// Load image containing font & ui spritesheet
			var colorBuffer = ColorBuffer.FromStream(assetResolver.Open("ui_stylesheet_image.png"));
			colorBuffer.Process(true);

			var texture = colorBuffer.CreateTexture2D();

			// Load ui text atlas
			var textureAtlas = TextureRegionAtlas.Load(assetResolver.ReadAsString("ui_stylesheet_atlas.atlas"), 
				s => texture);

			// Load ui font(s)
			var font = SpriteFontHelper.LoadFromFnt(assetResolver.ReadAsString("ui_font.fnt"),
				textureAtlas["default"]);

			// Load stylesheet
			var stylesheet = Stylesheet.CreateFromSource(assetResolver.ReadAsString("ui_stylesheet.json"),
				s => textureAtlas[s],
				s => font);

			Stylesheet.Current = stylesheet;

I’ve already documented what is ColorBuffer and SpriteFontHelper.
However rest of used utilities(TextureRegionAtlas and AssetResolver) arent documented yet.
But documentation for how-to load custom stylesheet has almost top priority in my list.