Jump to content
Aveyond Studios Community
Sign in to follow this  

Tutorial: Make A 2D Start Menu in HeroKit

Recommended Posts

First create a new scene.

Save scene as 'Menu'.

Background Image

In toolbar, go to GameObject > UI > Image.

Create UI image

Select your newly created image object in your hierarchy.

In the Rect Transform component, select horizontally and vertically stretched. 
Set anchors

Set "Top”, “Bottom”, “Left” and “Right" to zero.

Now you have a fullscreen background.

If you want to keep your image's resolution instead of stretching, you can mess around with the Rect Transform component values.

Other Images

You can import other images and then adjust the Rect Transform to place them where ever you want.

Suggested: Make new images anchored to middle & center, and enable 'Preserve ratio'

The further down an image or UI object is in the hierarchy, the more priority it has over the others (it will cover them).

When testing in your game view tab, have your game resolution set to 1024x768 to account for the most-UI-breaking resolution and adjust there until it fits how you want. You can find it here as 'Standalone':

Image result for game tab unity resolutions


Now you will add all your buttons.

Buttons work the same as images, anchoring and being transformed by Rect Transform.

Change text of the buttons, or the sprites (if you have your own button image).

For this tutorial, we have two buttons: Start (New Game) and Exit (Quit Game)

One Other Step

One other step before getting into HeroKit, go to the EventSystem object in your Hierarchy view and then drag the Start button (under your Canvas) to the field "First Selected" in EventSystem's "Event System" component.

The Setup

Now that all the visual elements are set up, it's time for actually making them do something.

First search in your project tab/view for "HeroKit Start Menu Controller." Duplicate it and rename to what you want.

Now attach the renamed version of the Hero Object to your Canvas.

Now press Edit Hero Object from the Canvas's Hero Kit Object component.

In the Hero Object editor, delete all events but New Game and Quit Game. 


New Game: Called by an action
- Load Scene: [Set to scene you wish it to load]

Quit Game: Called by an action
- Exit Game: Exit Game (HeroKitAction)


Now we need to setup HeroKitListenerUI (this may eventually be deprecated).

Go here for the tutorial, complete all the steps but the last one (see below): https://aveyond.com/forums/index.php?/topic/19332-herokit-listener-ui-onsubmit/&tab=comments#comment-468130

Now that you have duplicated and modified the HeroKitListener code files and have the ability to use HeroKitListenerUI2D, the buttons can now be set up.

Go to your Start Button on your Canvas in Hierarchy view and select it to add a new component.

Add HeroKitListenerUI2D to your Start Button


Now do Input Type: On Submit

Then drag your Canvas object from Hierarchy view to the 'Send Notifications Here' field.

Select 'Send Values and Play Event' under Action Type.

Under State select 'Start Game'. Under Event To Execute select 'New Game'.

Now go to your Quit Button in your Hierarchy view and select it and do the same thing, except this time under Event To Execute, select 'Quit Game'.

That's It

Now click Play and you have a scene with a menu you can navigate with WASD/Arrow Keys and press Enter on to start or quit your game.

(Made with help of article: https://pixelnest.io/tutorials/2d-game-unity/menus/ )

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Create New...