Myra - UI Library for the MonoGame

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.

5 Likes

Hi rds1983…

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

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… :relaxed:

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

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

Thank you for the reply, rds1983… :relaxed:

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

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…

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.

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

1 Like

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

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 :smiley:

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.

1 Like

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?

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)

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

  1. Add combobox with language selection(C# or VB) to the ExportOptionsDialog.
  2. 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.

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:

  1. All custom stylesheet assets are stored as resources.
  2. 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.

Also it’s important to note, that you dont need to copy the whole above code to make custom stylesheet loading.
The only function call there that matter is Stylesheet.CreateFromSource. It has following signature:

Stylesheet CreateFromSource(string s,
			Func<string, TextureRegion> textureGetter,
			Func<string, SpriteFont> fontGetter)

You’re free to feed it images/sprite fonts, that were loaded using any possible way(i.e. through Content Pipeline, or Texture2D.FromStream).
Again TextureRegion is not yet documented. However one could figure how it works looking at the code: https://github.com/rds1983/Myra/tree/master/Source/Myra/Graphics2D/TextureAtlases

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)

No, there shouldn’t be conflicts. There is some crossing functionality. I.e. both MGE and Myra have TextureAtlases. However classes naming are different. MGE’s classes are named TextureAtlas/TextureRegion2D/NinePatchRegion2D. While Myra’s classes are TextureRegionAtlas/TextureRegion/NinePatchRegion.

Also I’ve borrowed ShapeExtensions from MGE.


I’m having a small problem creating the stylesheet. It says I need Newtonsoft.Json 9.0.0.0 but you can’t get that on NuGet. Is this an error in the library or is it just a mistake on my part?

Myra 0.6.5 is out!
It has two major changes:

  1. Added ability to the UI Editor to edit windows and dialogs. Following animation demonstrates creation of ColorChooserDialog:
  2. Added new widget - FileDialog. It can work in 3 modes: OpenFile, SaveFile and ChooseFolder. Following animation demonstrates SaveFile:

    FileDialog is part of Myra.Editor.dll (similar to Myra.dll, it could be installer either through NuGet or directly referenced from the distribution package).

New widget usage is demonstrated in the UI Editor, AllWidgetsSample and NotepadSample.

2 Likes

Released Myra 0.6.6!
List of changes:

  1. Added transparency. Now Widget class has Opacity property which can take values from 0.0 to 1.0(default value is 1.0). If both container widget and its child have that property set then they are multiplied. I.e. if container opacity is 0.5 and its child opacity is 0.6. Then the child will be rendered with opacity 0.3.
  2. Added yet another sample FantasyMapGenerator, which is slightly more complicated than rest of samples. It provides utility for generation of fantasy continents:
  3. Some bug fixes.

I want to remind that all samples executables are part of the binary distribution.
Which is located here: https://github.com/rds1983/Myra/releases/download/0.6.6.130/Myra.0.6.6.130.zip

NuGet had been updated as well.

2 Likes