Prepare options menu - Cloud saves - (Unity module)

Last updated on October 24, 2024

What's on the menu​

In this tutorial, you will learn how to prepare the user interface for changing the settings for music and sound effects (SFX) volumes. Later, this menu will display the player's settings stored in the AccelByte Gaming Services (AGS) Cloud Save service.

The Options Menu UI has already been created for you, but it still needs some additional code before you can connect it with the AGS Game SDK. These files are available in the Resources section and consists of the following:

  • OptionsMenu.cs: A C# script that contains all of the game options implementation.
    • CS file: /Assets/Scripts/UI/MainMenu/HelpAndOptions/Options/OptionsMenu.cs
  • OptionsMenuCanvas.prefab: A prefab that is created from the Canvas Panel UI GameObject.
    • Prefab file: /Assets/Resources/Modules/MainMenu/HelpAndOptions/Options/OptionsMenuCanvas.prefab
note

Since the Options Menu UI is part of the core game, there are no starter files for this menu. In the Byte Wars project, all menu UI handler scripts are located in the /Assets/Scripts folder, but the menu prefabs are in the /Assets/Resources folder. This way, prefabs can be auto-instantiated by the MenuManager.

Options Menu​

The Options Menu is only accessible from the Help and Options Menu, and it's corresponding button is already on the Main Menu UI.

The Options Menu will display the current music and SFX volume settings based on the cloud save query result from AGS. It contains two Sliders with Text to control and show the value of the music and SFX volume settings. There is also a Back Button for returning to the Main Menu. All of them use TextMeshPro for the Text UI.

Byte Wars stores all player settings using Unity's PlayerPrefs. The AudioManager has been prepared with getter and setter functions for changing audio volume anywhere in the game.

The following are included in the OptionsMenu:

  • The declarations for UI references that are ready to use:

    [SerializeField] private Slider musicVolumeSlider;
    [SerializeField] private Slider sfxVolumeSlider;
    [SerializeField] private TMP_Text musicVolumeText;
    [SerializeField] private TMP_Text sfxVolumeText;
    [SerializeField] private Button backButton;

  • Delegate and static event functions for broadcasting OptionsMenu activation and deactivation:

    public delegate void OptionsMenuDelegate(float musicVolume, float sfxVolume);

    public static event OptionsMenuDelegate onOptionsMenuActivated = delegate {};
    public static event OptionsMenuDelegate onOptionsMenuDeactivated = delegate {};

  • The UI events binding and initialization in the Start function. The AudioManager will provide the stored value in the PlayerPrefs and handle the update operation of those values:

    void Start()
    {
        musicVolumeSlider.value = AudioManager.Instance.GetCurrentVolume(AudioManager.AudioType.MusicAudio);
        sfxVolumeSlider.value = AudioManager.Instance.GetCurrentVolume(AudioManager.AudioType.SfxAudio);
        ChangeMusicVolume(musicVolumeSlider.value);
        ChangeSfxVolume(sfxVolumeSlider.value);

        musicVolumeSlider.onValueChanged.AddListener(volume => ChangeMusicVolume(volume));
        sfxVolumeSlider.onValueChanged.AddListener(volume => ChangeSfxVolume(volume));
        backButton.onClick.AddListener(() => MenuManager.Instance.OnBackPressed());
    }

  • The OnEnable() function to get the audio volume values from the AudioManager when the Options Menu becomes active. Also to invoke the onOptionsMenuActivated event that broadcasts the audio volume value to other parts of the game:

    void OnEnable()
    {
        if (gameObject.activeSelf)
        {
            musicVolumeSlider.value = AudioManager.Instance.GetCurrentVolume(AudioManager.AudioType.MusicAudio);
            sfxVolumeSlider.value = AudioManager.Instance.GetCurrentVolume(AudioManager.AudioType.SfxAudio);

            onOptionsMenuActivated.Invoke(musicVolumeSlider.value, sfxVolumeSlider.value);
        }
    }

  • The OnDisable() function to invoke the onOptionsMenuDeactivated event that broadcasts the latest audio volume value to other parts of the game:

    private void OnDisable()
    {
        onOptionsMenuDeactivated.Invoke(musicVolumeSlider.value, sfxVolumeSlider.value);
    }

  • Functions to change the music and SFX audio volume with the AudioManager and update the Volume Text UI:

    private void ChangeMusicVolume(float musicVolume)
    {
        AudioManager.Instance.SetMusicVolume(musicVolume);
        
        int musicVolumeInt = (int)(musicVolume * 100);
        musicVolumeText.text = musicVolumeInt.ToString() + "%";
    }

    private void ChangeSfxVolume(float sfxVolume)
    {
        AudioManager.Instance.SetSfxVolume(sfxVolume);

        int sfxVolumeInt = (int)(sfxVolume * 100);
        sfxVolumeText.text = sfxVolumeInt.ToString() + "%";
    }

Here's the preview of the Options Menu:

Options Menu preview Unity Byte Wars cloud saves

Ready the UI​

To follow the rest of the module, you need to enable Start Mode. To do this, open your project in Unity. From the Project window, open Assets\Resources\Modules\CloudSaveEssentials\CloudSaveEssentialsAssetConfig.asset and enable the Is Starter Active setting in the Inspector. This setting will enable the starter files you will use to follow the tutorials.

Resources​

Last updated on

On this page