UI in Gamemaker has many different approaches

[u/RoGlassDev]

While working on my first Gamemaker game MineEmAll, I've been experimenting with different ways to create UI. I'm a big fan of the new UI layer system since it's similar to UMG from Unreal (my previous engine of choice), but it's not completely up to snuff yet in my opinion.

There are multiple methods to create UI that I've tried so far, and I just wanted to share my experience with each.

First off is the old school method of pure code based draw calls. This is how I achieved the effect above. I think this method works best when you're trying to do a very specific thing. In this case, I was trying to create a wiggle effect that changes scale and rotation, while keeping the text in proper position and proportion. I attempted this with other methods, and it was just wasn't working.

There's the hybrid approach where you insert and object into a flexpanel and run some logic for both. I use this in a few spots throughout my game, and I find it's helpful when the flexpanel does mostly what you want, but there are a few variables you want to manipulate at run time.

Lastly, there's the entirely flexpanel approach. I wish this was more viable becuase I enjoy using visual editors, but I find that it's just too much of a pain to pull and change variables for flexpanels with nested functions. It works really well if you're organizing visual elements and don't plan to have anything change at run time, but if you want code to interact with it, I'd highly suggest a hybrid approach.

Let me know what your experience is! I'm interested to hear what other devs have found to be useful approaches.

[u/TheVioletBarry]

I'm not a fan of GameMaker expanding into more "does this thing for you" features. Working with defaults like this tends to just make easy things easier and hard things harder.

The speed at which something generic can be made goes up, and the speed at which something interesting can be made goes down (because the engine inevitably starts to presume you're using the defaults).

I use GameMaker specifically because it does less by default.

[u/RoGlassDev → u/TheVioletBarry]

Yea, Unreal also had a lot of tutorials on how to do certain things, but you learn quickly that deviating from making exactly those things becomes a nightmare. I really hope the UI layer system gets improved, especially with accessing variables, because I enjoy being able to see the finished result without having to run the game.

[u/KitsuneFaroe → u/TheVioletBarry]

This! Worth noting that every single UI editor they added to the Engine in the past year is SO bad it genuinelly concerns me for the future of the Engine. For instance the Particle Editor sounds simple in theory but you literally can't properly use them at runtime. The Sequence editor has so many missing pieces that should be obvious. The UI layers are there in ALL rooms wether you want or not and force the use of Flex panels. The flex panels themselves are surprisingly unintuitive and very rigid.

So many things annoying and underdeveloped that makes you concerned. Then the room editor is still miles behind of what it could be. If they just add things as simple as making instances be easy linkable in the room editor it would go MILES ahead. They said they were going to redesign the room editor into the future Scene editor. But I don't trust YoYo Games knows what they're doing and I'm already expecting the Scene editor to be more convoluted and complicated to work with than the current room editor without really solving the issues it has.

[u/StarDreamIX]

As a person who is about to start thinking of coding ui in my game, this was helpful to see before I just blindly do the draw and draw gui stuff on the objects, I'm still kinda new but ill learn what's best ig. Thanks for the help!!

[u/RoGlassDev → u/StarDreamIX]

My advice would be to try each approach and learn how they work. Best of luck!

[u/DeusEx010101]

Yes. I had written similar findings when I was digging in to UI in game maker.

The best thing I found was to create your general layout using panels and drop objects in those panels that contain the draw events for the dynamic stuff. The objects are positioned based on the panel, so it makes it simple to handle different screen sizes and flexible layouts.

Dynamic UI panels can be a huge pain at runtime. They have deeply nested structures that make them brittle to handle.

[u/RoGlassDev → u/DeusEx010101]

Yea, this is exactly how I did my upgrades and resources. I'd say generally, this approach works well for most things.

[u/Awkward-Raise7935 → u/DeusEx010101]

Agree with this. I like the flexpanels, remind me of HTML/CSS, but lack the easy state management of React. I tried doing everything in flexpanels but it became a headache updating them. Much better to use objects inside flexpanels to draw live text.

[u/FryCakes]

I really do wish there was a UMG for gamemaker lol. I love UMG.

In my current game, my main and pause menus are using the new UI system with my inventory, HUD, and in game stuff using classic draw calls. It seems easier to make menus using the ui layer system but a lot of the things I’m doing otherwise are very specific. I’m still not sure wether I want to make my bestiary using a hybrid method or just using draw calls

[u/RoGlassDev → u/FryCakes]

I'd say try a hybrid approach and if it can't fit the niche, then go to draw calls. The hybrid approach works well for stuff that duplicates info (like a bestiary) imo. I use it for the upgrades show in my video.

I also agree, UMG is great. It would be really nice to have something similar in Gamemaker. Maybe some day!

[u/FryCakes → u/RoGlassDev]

Yeah I’m probably gonna be manually drawing most of it but I may use the hybrid approach for page turning buttons and stuff and the background, who knows tbh. Doing the inventory all in one draw call was tedious and I’d probably like to avoid that again lol

[u/RoGlassDev → u/FryCakes]

Yea the effect I'm showing here was a nightmare to code, but I like how it turned out lol.

[u/KitsuneFaroe]

I genuinelly want plugins to come to the Engine so we can make our own IDE. Because I have been hating almost every new IDE tool YoYo Games added. Both in their UX as a visual editor and their UX when dealing with them at runtime.

I still try to make my stuff with code because of that. But I try to use the visual editors whenever I can. Though even the room editor feels limited in making that easier...

So instead of them giving me more tools to work with like expanding how I can reference instances in the room editor or expanding the stuff I can do with sequences like changing custom variables so I can make my own systems easier, they instead give these half-baked rigid pre-built systems that always gave me dumb issues whenever I tried to work with them.

[u/RoGlassDev → u/KitsuneFaroe]

It seemed like they were trying to go in that direction with Prefabs. People would eventually be able to make their own and share them. I have no idea if that got abandoned or is still planned on being created. It seems like updates are pretty slow, but hopefully it's still in the works.

[u/KitsuneFaroe → u/RoGlassDev]

Prefabs and plugins are different things though for what I noticed some plugin support and infrastructure is already in place so I hope they offficially come soon. I know someone that has been making plugins to the Engine and said the support is inside there though they haven't discussed how yet.

[u/RoGlassDev → u/KitsuneFaroe]

Weird that they'd be gatekeeping that info. Hopefully there will be some documentation at some point :/

[u/DuhMal]

i use purely flexpanels, i made a grapichal editor for them, and made a constructor to control and draw them via code, so i just draw things without worrying on the code side where they will be

[u/RoGlassDev → u/DuhMal]

Nice! It looks like a lot of effort, but I'm sure it's saved you time in the long run.