Building a Reusable Menu System

Posted on September 8, 2017 in Game Development

Welcome to the first of many future behind-the-games dev blogs. These blogs will focus on specific items I’ve been working on and may include some technical specifics in case you’ve ever wanted to learn about game development yourself including programming specifics or how to create game content (art, audio, etc).

In this blog post I’ll be focusing on the Llama Llama menu system I worked on this month. You’ll hear about this a little in this month’s vlog, but I’m going to go into some of the nitty gritty around why this menu is unique and new to me. Note: All screenshots of my games are very early work in progress.

In my other games I’ve used a pretty static 2D menu system. In fact, Night Light and Super Wall Crash only have you hit ‘Enter’ or tap the screen to start the game, not much for a menu. However, with Llama Llama I started creating something a little more dynamic with menu items being hooked into a menu class and generically called. I could go into a ton of programming detail here but I’ll try to keep it very high level.

Essentially what I’ve done is created a hierarchy of types that allows generic use of specific menu items. For example, the following menu has several selections the user could make…

So what I can do in code is make each selection inherit from a generic type of ‘MenuItem’. ‘Inherit’ is a term with object oriented programming that simply means a certain object is a sub-type of another object. For instance, a truck and sports car are both sub-types of vehicles, so both Truck and SportsCar could inherit from a parent Vehicle as they share some similar aspects (color, wheel count, seat count, etc). In this menu StartGame, Options, Exit, can all inherit from MenuItem as all of them are selections that the user can interact with.

One great aspect of this inheritance structure is that I can reuse these menu item types generically in all kinds of projects. Meaning future games and future jams can have quickly created menus with this setup. This is all about creating a reusable ‘toolbox’ of code I can quickly pull from in the future (you’ll hear more about this in a future blog about game state management).

Ok enough detail there, let’s talk about one other aspect to this menu: 3D menus. Unity allows a mixture of 2D and 3D and since the re-write of the 2D system a year or two ago they now allow for menus in both 2D and 3D space. A 2D menu overlays over the entire screen and is defined by the screen coordinates of X-Y (horizontal/vertical). A 3D menu however is specific in ‘world space’ and can sit in the world like a normal object (bench, house, character) with a X-Y-Z position. A popular example of a 3D menu is the in-game menu in Dead Space:

In case you’ve never played Dead Space (and you should play it) the menu moves with the player. This menu pops up like a hologram right next to the main character and rotates with him, also creating quite a tense atmosphere knowing a menu like that doesn’t pause the game.

So with a 3D menu in Llama Llama I can do transitions between ‘sub-menus’ such as Credits and Options by moving the camera instead of moving the items themselves. This reduces a large amount of animation code I would need to do for every menu item and is only needed on the camera. I tied each menu item to a specific new camera position and simply slide the camera appropriately. Below you can see how the camera moves on the left (the white rectangular outline) and how the resulting game looks on the right.

Currently the largest restriction of this system is that most traditional menu systems will use a game state system along with the current menu. I plan on doing a blog on game state management so I’ll leave that discussion until later. The ‘hack’ way I’m getting around state management is currently having one large class control what the user can do. So if you select ‘Options’, I flip a switch that tells the class to perform like the Options menu. If you select Credits, I flip a switch to perform like Credits. Seems simple but can lead to a lot of gross code when saying ‘If current menu is Credits, otherwise if current menu is Options, otherwise if current menu is Exit, and on and on’.

Somewhat clean but redundant and a bit ‘messy’ in it’s design. This would be a good candidate for potential refactoring.

Hopefully this gave you a little better insight of what I built this month with the Llama Llama menu system and how some basic programming elements play into the design of this system. If you have questions or comments feel free to jump into the Discord and we can chat more!