Hello fellow co-conspiratores!
I’m going to try something new and frame each post as a practical game dev tidbit that I can share with you. Just see my progress is not going to be nearly as useful or interesting to y’all, so as I toil away and learn stuff I might as well spread around the wisdom.
This week I was working on the game UI; particularly in the unit panel, i.e. the menu that shows when players select a unit. What did I learn doing it? Block, block, block! Always block (or mockup) your work before executing. In game design this means making a paper design of the core loops and systems, but this week I really learned the value of doing it for UI.
Previously my first instinct was to put a makeshift UI element together and just make sure it works and shows the info it needs to. During the prototypes last year this is what came out:
It doesn’t look bad, I mean for a prototype. Here’s a closer look at the Unit panel in the cover
It’s functional, if a bit busy, but here’s the problem….it is so hard to change. Every time I tried to add an element or change any part of the game, everything would break down. It became a nightmare! In the next version of my game, I want to make sure this does not happen. So I decided to take a step back and plan it out.
This was a quick mockup I made on a scrap piece of paper, just to get an idea of what I wanted the new UI to look like. I divided the panel into columns and rows, and then each column/row into more column/rows until each element had its spot. I did this first on paper, and then using Unity’s horizontal and vertical layout groups. This was the result:
You’ll notice it looks like a clown car, but that’s important! The bright colors make sure every part is easily identifiable; if I change anything I can immediately see it affects everything else. I still need to change the art of course, and I’m not happy with how it lays in 3D so I might have to rearrange the elements; but because I blocked this out first, it will be really easy to do so.
Happy conspiring!
PS: If you’re curious on how this looks on the unity hierarchy it ends up looking like this:
Looks terrifying, but it is so easy to find everything, so its worth it