I'm working on a new type of ui system.
In the past i've experimented with polygon based plugins, and css based plugins, each have their pros and cons.
Polygons are great for flat graphics, but text must be rendered as a texture causing large memory size. Css needs its own layer type and is finicky. Both are a pain when it comes to rending image graphics. Both allow for custom clipping.
When i made the EasyMask plugin a few months ago i thought i could expand on it and make a ui system that uses Construct's own objects like sprites, 9 patch and text objects.
There are already plugins most noticeably proUI that do this, however it requires lots of individual behaviours and a controller plugin, and you still have to link all the objects and set them up in the editor.
My new plugin uses just one plugin, and the ui is created with events. It's super simple to use.
Create the menu window.
-> eui: Create menu at (200, 10) width 500 using menu_back
-> eui: Add title "THIS IS A TEST TITLE" (Gap: 20, Underline: True) using menu_title_text
Here it is using a 9 patch instance for the menu image. All clipping is set up automatically.
The other action simply sets some title text.
The menu is constructed row by row as you add new actions.
Add some text.
-> eui: Add text "This is a test of some text to go in our menu." (Gap: 50, Left: 30, Right: 50) using menu_text
Again selecting a text object.
Since the menu is constructed action by action, what happens if you want to add objects side by side?
Simply make a dedicated row.
-> eui: Begin horizontal row with columns: "1,1"
-> eui: Add text "Text for first in row." & newline & "Some more text goes here." (Gap: 50, Left: 60, Right: 40) using menu_text
-> eui: Add text "text for second in row" (Gap: 50, Left: 20, Right: 30) using menu_text
-> eui: End horizontal row
The begin row action breaks the width of the menu up into areas based on percent, or in this case ratios. "1,1" making 2 areas, each 50% of the menu width. Here we add text which are now arranged side by side. The end row action means the next object will be arranged below the row again.
Objects or entire rows can be given a background of their own with the Set next element background action.
-> eui: Set next element background to menu_back (Padding - T:40, B:40, L:40, R:50)
The plugin supports labels that make it easy to display values including currency formatting.
-> eui: Add label "Cost ""=" (Spaces: 20) "£"50000.23"." (Currency: True) (Gap: 50, L: 30, R: 20) using menu_text
You can make a variety of buttons too. Here the checkbox style button uses a sprite instance. Each button state is an animation.
-> eui: Add side-button "menuB" '"A test of a checkbox style button."' using menu_checkbox/menu_text (Anims: "default"/"hover"/"pressed") (Gap: 50, L: 30, R: 50)
And i have also added sliders with a number of options. Again made up of 9 patch and sprite for the slider thumb.
-> eui: Add slider "slider1" '"slider"' (Val: 0, Min/Max: 0/100, Step: 0, Decimals: 0, Show: True '"%"' Width: 100) using track/thumb/menu_text (Anims: "default"/"hover"/"pressed") (Gap: 50, L: 50, R: 100)
Regular buttons are also supported. Here row is used again to easily align them side by side.
-> eui: Begin horizontal row with columns: "1,1"
-> eui: Add regular button "btn1" labeled "Open" (Anims: "default"/"hover"/"pressed") (Gap: 30, L: 50, R: 30) using regButton and menu_title_text
-> eui: Add regular button "btn2" labeled "Close" (Anims: "default"/"hover"/"pressed") (Gap: 30, L: 50, R: 30) using regButton and menu_title_text
-> eui: End horizontal row
Finally you can get menu clicks with a simple condition.
+ eui: On menu transition to "menuB"