In this tutorial, we will be using GMUI and XML to learn about the basics of creating UI.
This tutorial will cover:
To begin creating UI, first go to the UI Editor Window. To do this go to “Window” > “UI Editor”.
This should also open a separate UI Previewer Window, which you can use to look at your UI before actually implementing it into your game. If you don’t see it, you can also open it from “Window”.
Let’s create a basic button for now. First click “+ New” button. Then, set the name to “Basic Button” and the type to Button.
After creating the item, you’ll notice that nothing is showing in the UI previewer. That is because the Button doesn’t have a height or width, so let’s add it now.
<Button layout="flex" height="100" width="200" />
Don’t worry too much about the layout right now. Basically it tells the editor which UI engine we want it to use. Right now there’s only “flex” and “legacy”, but you should get used to using “flex” as it’s generally more useful.
Moving on, you should hopefully be seeing a green button in your UI previewer. By specifying the item as a Button this automatically assigns it properties like the image, the clicking animation, etc..
Next, let’s add some Text to the button.
Right now, the button’s code is in a single-line format, but we’ll want to add the Text as a child so it automatically inherits things like the layout and the position.
To do so, remove the “/” from the Button code and create a closing tag with </Button>. Then, put the Text element in between it, and give it the text="Button Label" attribute.