Myra - UI Library for the MonoGame

Showcase
1

Hi everyone,

I would like to introduce UI library for the MonoGame called ‘Myra’: https://github.com/rds1983/Myra

11 Likes
2

HUm that seems to be what I’ve been looking for for a while now :slight_smile:
I’ll give a try.
That’s always nice to see new usefull libraries.

3

I took the liberty to add it to the link-list here.
Feel free to change the text, add your links or remove it.

4

Looks nice! I’ll play with it soon to check it out, but meanwhile may I suggest you also post it here:

It’s an old question but seems to be updated whenever a new UI framework pops up (including my own which is currently the last one there :slight_smile: ).

5

What license is this under?

6

If you want to try it out, I’d recommend to start with this tutorial: https://github.com/rds1983/Myra/wiki/Tutorial%3A-%22Hello%2C-World%22

7

Thanks for the advice. I’ll post it to that thread as well.

8

MIT. Thanks for the question. I’ll update the README.md of the project.

9

in the notepad sample it is impossible to get the textcursor behind the last character with a mouse click. Arrow keys work fine

10

Looks great - just what I need. Installer + nuget = yes!

Could extend the documentation however - how do I use the editor?

11

Yeah. TextField is the least stable widget. I’ll fix it in the future releases. And add text selection/copy/paste functionality as well.

12

The documentation is being worked on. The UI Editor is not ready yet and therefore not included in the installation package. However I hope to finish the draft version this week.
So, right now, the only possibility to run it is by building Myra from the source code:

  1. git clone https://github.com/rds1983/Myra
  2. cd Myra
  3. git submodule update --init --recursive
  4. Open Myra.sln in VS2013
  5. Run Myra.UIEditor
13

Glad you’re still working on it. I do have a lot of questions.

What would be the best way to customise the textures of components?

For example I want to make an RPG UI, how do I texture the buttons with my custom textures?

14

Well, the best way would be to provide Myra your own JSON UI stylesheet. This is the default stylesheet: https://github.com/rds1983/Myra/blob/master/Myra/Resources/default_stylesheet.json
Specifically the button style is set here:
"button": { "background": "button", "pressedBackground": "button-down", "overBackground": "button-down", "label": { "font": "default-font", "textColor": "white" } }

So the "background" property is set to sprite with id "button".
Take a look at the spritesheet to see its defition:
https://github.com/rds1983/Myra/blob/master/Myra/Resources/default_uiskin.atlas

And the definition is following:
button rotate: false xy: 309, 162 size: 12, 20 split: 5, 5, 5, 4 pad: 4, 4, 1, 1 orig: 12, 20 offset: 0, 0 index: -1

Finally take a look at the spritesheet actual image:
https://github.com/rds1983/Myra/blob/master/Myra/Resources/default_uiskin.png

If you open it in the image editor and look in the area specified in the above code (309, 162, 12, 20), you’ll see default button background.

So briefly that is how everything works.
You would need to provide your own spritesheet and UI stylesheet to perform the customization.
The loading code could be found here:
https://github.com/rds1983/Myra/blob/master/Myra/DefaultAssets.cs

I realize that it’s all sounds complicated and unintuitive. However I plan to write
thorough tutorial covering that topic. I even have ticket for that: https://github.com/rds1983/Myra/issues/1

1 Like
15

Thanks very useful, but I still wondering about more basic stuff like how to put a texture into the Image?

16

Ok I got it - took me a while:

        Texture2D tex = Content.Load<Texture2D>("brick5");
        TextureRegion reg = new TextureRegion(tex, new Rectangle(0, 0, 64, 64));
        Sprite sprite = new Sprite(reg);     
        Image img = new Image();
        img.Background = sprite;
        img.HeightHint = 64;
        img.WidthHint = 64;
17

Also if you do in the above code img.Drawable = sprite; instead of img.Background = sprite;. Then the last two lines might become unnecessary as the widget will use the sprite size. Thing about Background property that it doesnt affect the widget size, but covers the whole widget.

Moreover if we return to the topic of restyling UI. There is an easier way than writing JSON - the restyling could be done in the code.
I.e. following code will change default button image:
DefaultAssets.UIStylesheet.ButtonStyle.ImageStyle.Image = sprite;
After that code, all created button will have that sprite as Image.

18

How do I embed a grid within a scroll pane?

        ScrollPane<Grid> scrollPane = new ScrollPane<Grid>();
        scrollPane.Widget = grid;
        scrollPane.XHint = 100;
        scrollPane.YHint = 100;

I have created a grid of images and I want to embed within the scrollpane which I have done but I cannot get it to show scrollbars.

19

Try

scrollPane.WidthHint = 100;
scrollPane.HeightHint = 100;
20

How do I draw the mouse cursor? Its invisible.