Hackable Main Menu

Our Main Menu template for Unity is designed to work straight out of the box and allow for unlimited customization. You can easily add new screens, change behaviours, integrate actions and respond to events directly into your own code.

NOTE: The HackableManu system uses shadergaph based materials for VFX and transitions and requires a scriptable render pipeline is installed. It comes configured to use the Universal Pipeline Render (URP), and the demo scene has rendering assets included.

Included Screens

Hackable Main Menu is infinitely extendable, but it also comes preloaded with a pretty sweet set of screens.

• Background VFX – Displays background image on a custom shadergraph material – both of which can be customized.
• Main – This is the default menu screen with logo text, copyright, and links to other screens
• Play – Allows the user to select level or game mode and launch the selected scene.
• Settings – This screen allows the user to adjust audio and graphics settings.
• Credits – Provide details about your game and your team.
• Quit – Allows the user to exit the game.
• Loading – Displays percent loaded during load operations (like loading a new game),
• Transition VFX – Displays foreground image on a custom shadergraph material during transitions between screens.

How do I use it in my game?

Step 0: Make sure that a scriptable rendering pipeline (like URP) and TextMeshPro packages are installed and configured.
Step 1: Install the Hackable Menu system from the asset store
Step 2: Include HackableMenuScene in your build settings as the default scene
Step 3: Open HackableMenuScene and customize.

That’s it! Keep reading to learn how to customize the menu.

Hacking the Main Menu

The first concept you will need to understand is that the HackableMenu system is intended to run as a scene within your game. It is generally loaded as the default scene in the build settings and then used to launch other scenes. To load the menu from your code, just load it like any other scene.

Many customization can be made in the editor on the HackableMenu object in the HackableMenuScene. The following parameters and events are exposed:

Play Audio On Navigation: Should we play audio when the user navigates screens? If true, the AudioSource under ScreenOpenAudio and ScreenBackAudio is played when navigating screens. If false, no audio is played.

Play VFX On Navigation: Should we play transition FX when the user navigates menu screens? If false, the transition between screens is instantaneous.

Exit App on Quit: Should we exit the application when the user selects to quit? If yes, the menu system will call Application.Quit() to exit. In either case, the QuitGameSelectedEvent is raised.

Load Scene On Selected: Should we load a scene when the user selects from the play menu? If true, the Hackable menu system will load the specified scene. In either case, the PlaySceneSelectedEvent is raised.

Menu Screens: An array of menu screens that are available to the menu.

Main Screen: A reference to the main screen of the menu system.

Transition Screen: A reference to the transitions screen to use during navigation.

Scene Loader Screen: A reference to the loading screen to use when loading a scene from the play menu.

Events

The main menu system exposes events that can be used to callback functions in your own scripts.

MenuNavigatedEvent: Event raised when the user has selected a new menu scene (like play, settings, credits, etc). The event passes a single string argument with the name of the event as specified in the MenuScreens array.

QuitGameSelectedEvent: Event raised when the user has selected to quit and confirmed their selection. The event does not pass any arguments.

PlaySceneSelectedEvent: Event raised when the user has selected to load a new scene from the Play menu. The event passes a single string argument with the name of the event as specified in the PlayScenes array.

The following class shows a very simple example of how to integrate Hackable Menu events into your own code.

public class MenuListenerExample : MonoBehaviour
{

    public HackableMenuController hackableMenu;
    
    // Start is called before the first frame update
    void Start()
    {
        hackableMenu = GetComponent<HackableMenuController>();
        hackableMenu.QuitGameSelectedEvent.AddListener(onQuitGame);
        hackableMenu.MenuNavigatedEvent.AddListener(onMenuNavigated);
        hackableMenu.PlaySceneSelectedEvent.AddListener(onGameLevelSelected);
    }

    void onQuitGame()
    {
        print("Game quit selected");
    }

    void onMenuNavigated(string name)
    {
        print("Menu navigated: " + name );
    }

    void onGameLevelSelected(string namme)
    {
        print( "Level selected: " + name );
    }
    
}

HackableMenuController API

The HackableMenuController class exposes functions to allow you to directly control the menu from your code. The following public functions are available:

    /*
     * Causes the menu to switch to the specified screen. skipFX overrides the setting in PlayVFXOnNavigation. If
     * PlayAudioOnNavigation is true, audio will be played on transition. 
     */
    public void ShowScreen(String name, bool skipFX = false)


    /*
     * Causes the menu to load the specified scene by name, if LoadSceneOnSelected is true. If LoadSceneOnSelected is
     * false, no action will be taken. In any case, PlaySceneSelectedEvent is invoked.
     */
    public void LoadScene(String sceneName)

Hacking the SFX

The HackableMenuController allows you to choose whether sounds are played on navigation with a checkbox selection. To change the actual sounds that are used, navigate to the HackableMenu->SFX gameobject and change the AudioClip

Hacking the VFX

The background image and the image used in screen transitions are controlled by materials with custom shaders. To edit the background image used, select the material asset in the HackableMainMenu/Materials directory. Both materials expose the same parameters and can be updated directly in the inspector – as shown below.

Hacking the Play Screen

The included Play Screen is used to launch scenes and can be used for selection levels or game modes. It uses a scroll view to display a horizontal scrolling list of scene launchers with text and an image.

The launchers are generated dynamically based on the configuration of the HackableMenu->PlayScreen game object. Add scene launchers by editing the PlayScreen Entries array. NOTE: Launchers can only be used for scenes that have been added to the build settings.

Play Screen Entry Properties

Scene Name: The name of the scene as specified in the build settings – this name must exactly match the name of the scene in the build settings.
Scene Label: The name to display in the launcher.
Image: The texture to display in the launcher.

Hacking the Settings Screen

The settings screen provides users with an interface to change common settings options. This screen uses the standard Unity devices to populate and set the preferences and selected settings are saved into PlayerPrefs to be persistent across games.

Volume Settings

HackableMenu system ships with an pre-configured audio mixer in HackableMenu/audio/HackableMenuMixer. This mixer is configured with 3 channels: master (builtin), SFX and Music. You can use this mixer directly throughout your game and the volume sliders will work seamlessly. If you want to change the mixer and parameters names, edit the game objects named MainVolumeControl, SFXVolumeControl and MusicVolumeControl at HackableMenu->SettingsScreen->SettingsPanel. Note: you must expose the audio mixer channel parameter by name and then match that name exactly in the VolumeControl inspector.

Graphics & Resolution Settings

Graphic and resolution settings use unities built in mechanisms to dynamically load the list of graphics quality and list of supported resolutions. Once selected, the settings are stored in PlayerPrefs so that they persist across games.

Hacking the Credits Screen

The credits screen is a simple text screen used to display static content. To update the content, edit the game objects under HackableMenu->CreditsScreen. You can set a custom title and custom content by editing TMPro text widgets.

Hacking the Quit Screen

The quit screen is used to exit the game fully. It provides a simple dialog to ask the user if they want to quit the application. If the user selects no, they are returned to the main screen. If the user selects yes, the application will exit.

Note: When running in the editor, application.quit() has no effect – this only works in standalone mode.

If you don’t want HackableMainMenu to exit the game on selection, simply set Exit App on Quit to false in the HackableMenu game object inspector. In either case, HackableMenu will emit an QuitGameSelectedEvent that you can respond to in your own code.

Adding A New Screen

The process for adding a new screen is relatively straight forward:

Step 1: Make the screen and add it as a child to the HackableMenu game object. You can use HackableMenu/prefabs/MenuScreen.prefab as a starting point for your new screen.

Step 2: Add a button to launch your screen by dragging a HackableMenu/prefabs/NavigationButton.prefab onto the MainScreen. Set the screen name in the Navigation Button inspector as shown below.

Step 3: Add the screen references to the HackablMenu game object in the inspector as shown below. Make sure that the Screen Name matches exactly what you set in the navigation button inspector.

Going Deeper?

Have more questions? Want to take the menu even further? Drop questions or comments on our Discord Server.