EasyMenu plugin - devlog (experimental dynamically generated ui system)

I wasn't happy with any of the ui options available in c3, so i started making my own dynamic system with events.

It worked ok but was cumbersome and had its limits, so i thought why not just try and turn it into an actual plugin.

The menu system will be created entirely of polygons drawn directly to the layer, with the ability to change the colour and an option to skin them with textures.

Each plugin represents a self contained window that you configure with events ACES, to craft its appearance and control its functionality.

UI elements can then be added, and windows can interact and call each other. Thats the plan.

Window with drop shadow applied. It can set colour, and alpha opacity. The size matches the widow and the shadow can be offset as you like.

+ System: On start of layout
-> EasyMenu: Set width to 300
-> EasyMenu: Set height to 200
-> EasyMenu: Set background color to "165,20,25"
-> EasyMenu: Enable border True
-> EasyMenu: Set border color to "20,255,135,1"
-> EasyMenu: Set border width to 20
-> EasyMenu: Enable drop shadow True
-> EasyMenu: Set drop shadow color to "25,123,80,0.5"
-> EasyMenu: Set drop shadow offset X to 15
-> EasyMenu: Set drop shadow offset Y to 25

UIs are interesting with all the different ways to go about it.

So instead of using say a 9patch you draw things directly so you can change the border width on the fly?

Do you have a mockup of the kinds of ui that you are after that this will ultimately help you make? I ask because currently there are other ways to do what you have without a plugin, but I also know there’s often a lot of simpler things that have to be implemented first before getting to the useful parts. Like you mentioned that doing it with events had limits and was cumbersome. In what way do you hope to reduce the friction and limits? I guess the general goal would be enough to see what you’re working towards.

Anyways, keep it up. More options are always nice and especially as things get more complex I can see a plug-in being more useful and faster than rolling it another way.

I'm aiming for more window heavy games, simulation, management types rather than say mobile platformer / flappy bird games.

I'm looking to make it so you can create the menu entirely with events.

I'll focus on getting the core stuff working and then add more interesting features.

I'm just seeing where it goes, so its very experimental, and it helps me learn plugin development.

Right now i've chosen to work towards a windows 95 ui as reference, but it should be quite customisable when its done.

Windows now support unlimited pages. Pages now have names to identify them, they can have different properties like size, and elements like sprites can be added to different pages.

Set current page action is used to select the visible page, while other pages are hidden.

Also sprites added to a page now reflect some of the referenced sprites properties like opacity and size. Changing the sprite updates it on the page.

+ System: On start of layout
-> EasyMenu: Set width to 300
-> EasyMenu: Set height to 200
-> EasyMenu: Set background color to "165,20,25"
-> EasyMenu: Enable border True
-> EasyMenu: Set border color to "20,255,135,1"
-> EasyMenu: Set border width to 20
-> EasyMenu: Enable drop shadow True
-> EasyMenu: Set drop shadow color to "0,0,0,0.5"
-> EasyMenu: Set drop shadow offset X to 15
-> EasyMenu: Set drop shadow offset Y to 25
-> EasyMenu: Add page "default"
-> EasyMenu: Set current page to "default"
-> EasyMenu: Set page "default" height to 500
-> EasyMenu: Set page "default" width to 400
-> EasyMenu: Set UID Sprite.UID to page "default" position (50, 55)
-> EasyMenu: Set UID Sprite2.UID to page "default" position (130, 250)
-> Sprite2: Tween "" property Height to 20 in 1 seconds (In Out Sinusoidal, destroy: No, loop: Yes, ping pong: Yes, repeat count: 1)
-> Sprite2: Tween "" property Width to 20 in 1 seconds (In Out Sinusoidal, destroy: No, loop: Yes, ping pong: Yes, repeat count: 1)
-> Sprite2: Tween "" property Opacity to 10 in 0.5 seconds (In Out Quadratic, destroy: No, loop: Yes, ping pong: Yes, repeat count: 1)
-> EasyMenu: Add page "page1"
-> EasyMenu: Set page "page1" height to 650
-> EasyMenu: Set page "page1" width to 250
-> EasyMenu: Set UID Sprite3.UID to page "page1" position (60, 120)

+ Keyboard: On 1 pressed
-> EasyMenu: Set current page to "page1"
-> EasyMenu: Set background color to "85,155,255"

+ Keyboard: On 2 pressed
-> EasyMenu: Set current page to "default"
-> EasyMenu: Set background color to "165,20,25"

Experimenting with rounding window corners, but this messes up clipping.

Not sure if it will be possible.

Will have to think some more.

Looking cool!

If you approximate the rounded window with a polygon you can do polygon clipping with an algorithm like:

en.wikipedia.org/wiki/Sutherland%E2%80%93Hodgman_algorithm

But I’m certain you could do something simpler than that by utilizing the sdf equation of a rounded rectangle so you don’t have to loop over so many edges.

Or maybe you could try clipping by a rectangle like you already do and then use a blend mode to draw that within the rounded window. Or maybe drawing to a texture and then drawing that within the rounded window shape. But those kinda depend on what you have access to with construct’s renderer.

Thanks!

I switched to a Sutherland–Hodgman algorithm for clipping, so now windows and elements can all be rounded.

Still need to update the scroll bar code.

Mostly doing stuff on the back end ready for more advanced features.

Managed to add styles to scroll bars.

They now clip rounded windows, and you can set colours thickness and roundness.

Looking cool!

If you end up delving into layouting, aka automatically positioning and resizing elements, I recently found this video that makes it sound fairly straightforward:

youtube.com/watch

Also currently your plugin builds and modifies you gui, which is basically a retained mode gui. Another approach is an immediate mode gui that builds the gui on the fly per frame, which has some interesting pros and cons.

As for the programmer art colors, I do that too, but I've recently been toying with the idea of using a palette generator to get some pleasing colors to go together. I've also seen sites that provide nice palettes specifically for uis. Anyways, just some ideas that could give some inspiration.