Back to work on Bleed 2 this week! I picked the menu system off my list of things to do.

Menu systems might not be thrilling to code (or to read about!) but it’s just one of those things you gotta do if you want a finished game. There’s a surprising amount to consider, depending on the game. What’s in each menu, and how can everything be structured to lead logically to each other? How do you handle a keyboard, mouse and gamepad all being used to navigate it? If there’s more than one player, what do you do about multiple inputs? Etc etc etc. They’re fun little puzzles to solve for me, to be honest.

Design-wise, I’d already taken a first stab at a menu system a long time ago. It was functional, but it was bulky and I couldn’t fit very many items on the screen at once. It was also bloated in terms of storage, with every menu item held in a sprite sheet with two variants for ‘selected’ and ‘unselected’.

First I thinned everything down, and got navigation and highlighting and some simple animations working, too! I also straightened out the menu — it used to be angled, which I originally imaged was stylish, but it made it harder to tell which item was selected and appears messy to me now.

I redesigned how the menu items are stored and built, too: now it’s done with a lot less graphics memory. Here’s the new sprite sheet.

That’s it, and it can be reduced a lot further if I want to! Basically, it takes the filled white lines near the top, colours them, combines them, and adds some text for the labels.

The labels on the menu items are read from a text file now, so it’s very easy to edit them. I also coded a general menu system, so when I want to make a new one I just say “make me a menu, here are the labels for its items” and BAM! Much of the work is done for me.

Obviously the grey background wasn’t going to stick around either, so I made a simple animation to play behind the menus. It uses the menu sprite sheet, too — it’s the pointy white sprite in the top-right. It gets randomly re-sized and re-coloured and shoots out at random speeds and positions over and over, and its end is stretched to leave the trail behind it.

It’s simple, but in my opinion it works and doesn’t need to be much more! I also added slider bars, on/off switches, and tool tips to explain menu items that might not be clear.

At this point I’d say I have 75% or more of the menus done and all hooked up! There’s a few left that are more complicated than most (like the leaderboards or the level select) so I’ll save them for later, when I have all those functions together and working.

See you next week!