ADR-20: Explorer Settings Panel Architecture

More details about this document
Latest published version:
https://adr.decentraland.org/adr/ADR-20
Feedback:
GitHub decentraland/adr (pull requests, new issue, open issues)
Edit this documentation:
GitHub View commits View commits on githistory.xyz

Motivation

The idea is to replace the implementation of the old SettingsHUD with a new architecture based on 4 independent concepts: Panel, Sections, Widgets and Controls.

This new philosophy would lead to the following advantages:

Approach

The new Settings ecosystem is divided into the modules defined in the next example image:

image

Modules

DCL.SettingsPanelHUD.Panel

There will be only one PANEL module (it will be the own SettingsPanelHUD) and will represent the container for all the SECTIONS that will exist as children.

Responsibilities

Main classes

DCL.SettingsPanelHUD.Sections

There could be several SECTION modules and will represent the container for all the WIDGETS that will exist as children.

Responsibilities

Main classes

DCL.SettingsPanelHUD.Widgets

There could be several WIDGET modules and will represent the container for all the CONTROLS modules that will exist as children.

Responsibilities

Main classes

DCL.SettingsPanelHUD.Controls

There could be several CONTROL modules and will represent the implementations of each specific setting (for example: a slider for a volume, a checkbox for activate/deactivate some option, etc.).

Responsibilities

Main classes

Configuration for the end-user

Finally the whole configuration of the SettingsPanelHUD involves the next Scriptable Objects:

Settings Panel configuration SO (only one asset)

It includes a list of SECTIONS (represented by the “SettingsSectionModel” model) that will be part of the settings main panel. These SECTIONS will be automatically instantiated into the HUD at the beginning of its life-cycle.

Sections configuration SO’s (there may be several asset)

It includes all the needed information for a SECTION and a list of WIDGETS (represented by the “SettingsWidgetModel” model) that will be part of this SECTION. These widgets will be automatically instantiated into the HUD at the beginning of its life-cycle.

Widget configuration SO’s (there may be several asset)

It includes all the needed information for a WIDGET and a list of CONTROLS (represented by the “SettingsControlModel” model) that will be part of this WIDGET. These CONTROLS will be automatically instantiated into the HUD at the beginning of its life-cycle.

Control configuration SO’s (there may be several asset)

It includes all the needed information for a CONTROL.

UML Diagram

resources/ADR-20/NewSettingsHUD_UML.svg

Benefit

The main benefits of this architecture are:

How To: Add a new settings control in the HUD

1. Create the specific controller

Example

using DCL.SettingsController;
using UnityEngine;
using UnityEngine.Rendering.Universal;

namespace DCL.SettingsControls
{
    [CreateAssetMenu(menuName = "Settings/Controllers/Controls/Bloom", fileName = "BloomControlController")]
    public class BloomControlController : ToggleSettingsControlController
    {
        public override object GetStoredValue()
        {
            return currentQualitySetting.bloom;
        }

        public override void UpdateSetting(object newValue)
        {
            // Code related to store the setting value in our Settings class
            currentQualitySetting.bloom = (bool)newValue;

            // Code related to apply the setting
            if (QualitySettingsReferences.i.postProcessVolume)
            {
                if (QualitySettingsReferences.i.postProcessVolume.profile.TryGet<Bloom>(out Bloom bloom))
                {
                    bloom.active = currentQualitySetting.bloom;
                }
            }
        }
    }
}

2. Serialize the new controller

image

3. Create the configuration asset of the control

image image

4. Add the new control to the Settings Panel

image image

And it is all! When you run the application, you will notice that the SettingsPanelHUD will have created your new control in the correct place.

NOTE: For more examples of controls, you can take a look to all the controllers that we currently have in the folder Assets\Scripts\MainScripts\DCL\Controllers\Settings\SettingsControllers\SpecificControllers.

Participants

License

Copyright and related rights waived via CC0-1.0. Living