Wednesday, April 8, 2009

Beginning UI: Minimap

Let me admit right now: I'm terrible at UIs. I like to think I can do a lot of things, but I can't organize a menu screen, design a bearable HUD, or draw a menu screen. I'm just godawful at figuring out how these things work out, and I've never succeeded in the past.
That said, delving into the UI for The Little Things is a real challenge for me, but I'm working at it as best I can and with proper planning, bit by bit, it's starting to come together.

This is the UI as I'd planned it for an all-purpose, single-screen menu. At the center, a pile of your equipment, including key items, of which there would be a small handful during the game, for example your Map, and later on, items to indicate you have achieved certain abilities, such as swimming. Arranged around these items would be a minimap showing all the rooms you've visited and how they're connected, an inventory showing the items you possess, a wealth readout of the number of coins you have in various denominations, and a row of Thing containers which would give a brief summary of themselves, plus an icon of the contained Thing, if there was one. There's also the encyclopedia, which will open its own menu, since it's the only element that needs a full screen to display the necessary info contained inside.
One of the biggest problems I ran into while designing this is the amount of empty space I'll have on-screen. I'm still deciding how to balance all the room.

And here's how it's coming along so far. The map is fully automated, meaning that to add new rooms all I have to do (besides build them to begin with) is plug in a few values like what exits they have, what key obstacles (e.g. water you need to swim through) they have, what color group they belong to, and so on. It's a snap, it locks the rooms together on the minimap, and the best part is that this system also makes room transitions easier, aligning all the rooms on a 1:1 scale and linking them to the grid. The end result of all this is that there's no "space-warping", meaning all the rooms will be exactly where they appear to be in relation to each other. This should give the world a good feel for distance, since all measurements will be accurate.
Additional features are already included, everything you'd expect: an arrow indicating which area you're currently in, rooms only appearing on the minimap if you've visited them, and possible exits showing up in rooms you've visited (even if you haven't visited their target) so you can tell at a glance where there are still loose ends and areas that remain unexplored.

In total, there's still a lot of UI left, but this whole minimap thing took maybe 80-90 minutes, and I think it came out very well. I'll keep you all posted as the UI develops from here on out.
Next up: Inventory items.

This fresh demo includes the minimap as explained above. Also new in this demo is the F1 help menu which lists the game controls and functions, including F4 which will toggle between screen modes (fullscreen/pixel-perfect).
I also fixed a MASSIVE bug in which the character would basically stop moving between room transitions, forcing the player to release a held movement key, then press it again. It was utterly terrible and I've been trying to fix it since version 1. Now that it's fixed I feel I've cleared a great hurdle.
The demo, which will be periodically updated, can be found at the same address as before, namely HERE.

No comments:

Post a Comment