Game Menu Design Ideas & Concepts (Unity3D)

Game Menu Design - Image

Following this guide you will be able to easily build your own menu systems in unity without any issues ,

So what are you waiting for lets start ,

First Create Concept using Photoshop , you can do a web search to find the perfect composition

we are going to use the following scene as a background to our menu , make sure to tell the story for the players create some kinda atmosphere

Game Menu Design Samples

it good to take look at some of other ppl designs when working on menus to get a general understanding of the layout you should follow , ofc this is not necessary

Take a moment to review the link below

Game Menu Design Samples

Game Menu List

To Simplify the Menu management process we have released our menu system for free , you may download it from the link below

Github Link

Using the Dynamic Menu Package

Import the package to your game and then follow the steps below ,

Copy the Menu_Controller and the Menu Module to your game

Create new canvas

Create new game object inside the canvas Call it menu manager and add Menu module script to it

Make sure to check load default menu so it starts with the first menu

Change the menu list to 1 so we can start creating our 1st menu

Menu Module inspector

Create a new game object inside the menu manager and start working with your menu the way you want to

Add the base image click on components then go to ui and add new image call it Img_Menu_Base

Make sure to choose the graphic for the source image from your design earlier

if your texture is not showing make sure to change the texture type to sprite (2d and UI)

Texture type to sprite

To reserve the size its time to setup the canvas values

Canvas Responsive Scale

Set the correct anchor and size values

Canvas inspector Acnhor Settings

This way you will reserve the original sizes on different mobile screens

Game View Responsive Sample

Game View Responsive Sample 02

Now its time to add the buttons

We always prefer to group the buttons make new game object call it Group_Menu_Buttons

and start adding more buttons using the component / ui / button

make sure to have your buttons in one set to be used easily in the engine

Menu Buttons Sprite Sheet

Now change the image style as mentioned earlier and set the sprite mode to multiple

Inspector Sprite Mode
Inspector Sprite Mode

Then click on the sprite editor to set names and tags

On the slice editor set it to automatic and slice then move over the images and name them one by one

Inspector Slice Images
Inspector Slice Images

GUI_MainMenu_Play_Normal

GUI_MainMenu_Play_Clicked

Inspector Sprite Names

Now you should have the button images splinted into a set as shown on this menu

Its time to add the buttons one by one as mentioned above

Set the Source Image and Change the transition to sprite swap also make sure to tick preserve aspect ration now its time to set the anchor and size so make it anchor to the top left

Inspector Button Anchors

Resize the group button menu and the buttons to get the desired shape

We need to set the sprite swap for this button

Button sprite swap images as shown below

Inspector Sprite Swap

Once Completed you should have some thing like this

Video Menu Showcase

Checkout the video below to see the menu in action

Video Menu Showcase Sample

Its time to add functionality to these buttons

One the start game button we would like to load the next scene for that we have an easy to use function

Select the button and add new even by clicking the small plus button on the bottom right

Now drag and drop the menu manager object or select it from the menu

Add Menu Manager Object

And then in the variable box add the name of the scene you want to load

For this example we are going to use the following scene “Playerselction” to select the player for our game

Now you can see your new button in action

GMD-18

Checkout the video below to make sure your on the right track ,

Menu Working Sample

Now its time to make this a modular menu

Drag and drop the Main_Menu game object into your GUI asset folder to make it as a new prefab

Main Menu Prefab Creation

Delete  the current Main menu

Delete The current menu image

Make sure to create a prefab from the Menu Manager as well and then add it to the button Make sure to select the new prefab and set the functionality settings for it or else it wont work

now click on the menu manager and add the 1st modular menu to the list , play the game and the menu should appear

Now its time to add the next menu Settings and show you how to swap between menus , these are things we will cover in the next tutorial

Feel free to ask any questions regarding menu design in unity ,

Hope you had good time reading this guide.

Leave a Reply

Your email address will not be published. Required fields are marked *