Senior Capstone Dev Blog | The Start of a New Menu

Updated: Mar 3

Previously, on Leo's Senior Capstone Dev Blog...

With a bigger design team after our team absorbed new members, we came into this semester with the primary goal of fixing the design issues prevalent from last semester. It was too easy to camp at the Frog King and steal the bath item from other players without ever leaving, and the player with the bath item was at a massive disadvantage since they lost the ability to use their tongue. To remedy the Frog-King-camping, we concepted an AI system for the Frog King where he moves around the level and gets angry at players if they get too close to him. We also came up with an entirely new set of mechanics to give the player with the bath item more of a fighting chance; now players will be able to spit out the bath item to either score a point or to stun other players!

That's all great, but that's only a fragment of what my contributions have been on the project thus far. On top of being the Lead Systems Designer, I am also the UI/UX Designer on the team! During the first semester of production, I got to work on some of the gameplay UI but the menus were left fairly lackluster. Because of this, I've focused a lot of time this semester on getting the menu into a much better state!

When I first started concepting the main menu, I sat down and laid out a basic wireframe of a 2D menu... and I hated it. Frog Bath has a heavy emphasis on physicality from its movement mechanics, and a series of 2D menus seems so far removed from what the game really is. In order to properly represent the gameplay, I wanted to create a menu that had some level of physicality to it. So now I present to you: the main menu sink!

Wireframing the sink was a little strange because of it being 3D; I essentially had to greybox the menu to show where everything would be spatially. Because the sink is also a 3D object, I needed to specify which areas applied to which menus since there is limited space when working with a 3D object whereas traditional 2D menus are abstract and can go on forever.

Above is the very initial greybox, showing off each menu and the main idea of how each set of buttons works within the menu.

  1. Landing/Splash Screen - The first screen shows off the top of the sink along with a view of the Frog King and the logo in the background.

  2. Main Menu - The first menu the player sees shows off the basic options they can select in Frog Bath, which as of right now are planned to be local play, online play, a tutorial, options, and quitting the game. The buttons are lilypads sitting in the water of the sink that will rise up when they are the currently selected button.

  3. Options - Options are located within the three drawers on the left of the sink, all stacked in one column. Each drawer is planned to have their own set of options, that being Sound, Video, and Controls. In this image is a preview of an idea of how sliders would work, where they are actual 3d toothpaste tubes that move like a slider.

  4. Gamemode Select - When a game is started, players are then taken to an open cabinet door with a toilet paper roll displaying their options. Players can then unfurl the toilet paper roll to see more options!

  5. Level Select - The level select screen works the same as the Gamemode Select screen, and they share the same space. This is so that players can see which Gamemode they have selected when they pick a level since those are pretty important to each other.

  6. Player Select Screen - The last three images in this section are about the player select screen, which is inside the cabinet and is contextualized through four mini showers. When a player joins in, the shower opens to reveal a frog along with options to change their appearance.

Once the concept of the main menu was communicated to my team and approved, I then went into Unreal and began programming in the functionality of it all by myself. The first thing I started with was getting the functionality of switching between buttons implemented along with the camera properly transitioning between two menus. I wanted to make sure the camera actually moved rather than having it just appear at a new point to make sure players can see that all of the menus take up the same physical space!

This gif also shows you a better idea of how the water in the sink looks like as a transparent texture as opposed to a solid texture in the wireframes/greyboxes. By having the lilypads slightly visible while underwater, it becomes more evident what they are contextually while still providing a distinction between what is and isn't selected.

The camera movement is something that I'm very happy with, so I'll take a little bit to explain how it works. In Unreal there's a thing called splines, which allow for two points to be connected by a line and for you to adjust how the angles of the line work between those two points. Using those, I have the camera lerping along a spline based on which menu you select, which also works for moving in reverse along the spline! While it moves along the spline, the camera also rotates over time to look at a point determined in the scene, which in this case would be in the center of the drawer. All that has to be done when implementing new menus is creating new splines to move the camera along and place new "look at points" for the camera to look at!

With the layout starting to be fleshed out, Leanna Russell, the Lead Artist and Environment Artist for our team, started to make meshes for the sink! Hopefully these images give you a better idea of where things are located; the three options drawers are on the left, a drawer reserved for online lobby hosting things is in the top right, and the cabinet is in the bottom left.

Along with that, you can see some more refined art in the environment that isn't the simple geometry. The sink faucet is styled to be more of a throne for the Frog King, and there's some cushions along the outside of the sink for froggy royalty. Leanna also got to texture the sink, and it looks a whole lot better seeing this menu with some color!

With all of this art being done, I got around to implementing it into Unreal to work alongside the functionality that I had laid out. The menu really started to take shape once the art got in, and I also improved some minor details such as replacing the Frog King's model with the updated one

In this gif, the options menus are being used as a tutorial temporarily. This is because Champlain College decided to bring Frog Bath with them to PAX, and we wanted to make sure players can know how to play the game. To quickly add in some sort of information in the actual build, I created a couple of screens that explain the gameplay as simply as possible.

While the sink has certainly made a lot of progress up to this point, there was still a lot missing from it to be able to call it "complete" for the time being. The two main things that I had yet to implement were making the drawers move (for now there was only one drawer being accessed and it was just always open) and making it so players can actually switch between the three options/tutorial drawers, since for now they were only able to ever access one.

Additionally, the main menu scene as a whole was very drab. There was nothing in the background other than the default Unreal Engine skybox and the lighting was casting some horrid dark shadows on everything. Even though this wasn't something on the technical side of implementation, I took it upon myself to create a fake level in the background using the assets Leanna had made for the actual level.

And there we have it! The main menu in all of its current glory. Hopefully now players will be able to read the tutorial screens to understand the mechanics of the game without the aid of one of us telling them. Not only that, but a lot of the functionality for the backbone of the main menu is all in: the camera transitions, the drawer switching, and the button states. Moving forwards it's all just about iterating on it and implementing the new menus!

The only thing to be concerned about is that most buttons in each menu has its own way of working. The lilypad buttons work differently than the toothpaste sliders which work differently than the toilet paper roll selection things. That just means that the menu will still take some time to work on, but that's ok! I'm having a great time making it.

In two weeks I'll be making another post with more updates, but more than likely I'll be focusing on how PAX went and major updates to the systems I outlined in my previous blog post. So in four weeks I'll be showing off more updates to UI, and hopefully that will include changes to the gameplay UI!

Website designed by Leonardo Robles Gonzalez

Website powered by Wix

  • Twitter Social Icon
  • LinkedIn Social Icon
  • SoundCloud Social Icon
  • YouTube Social Icon
  • Social Icon