UI Customization

UI customization feature allows to add a custom UI and modify or completely replace any of the built-in UI elements, like title menu, settings menu, printer backlog, etc.

Be aware though, that text printers and choice handlers are implemented via actors interface and are customized in a different way; see the corresponding documentation (text printers, choice handlers) for more info.

If you wish to modify an existing built-in UI prefab, you can find them at Naninovel/Resources/Naninovel/DefaultUI folder. While it's possible, please refrain from editing the built-in prefabs directly to prevent issues when updating the package. Rather duplicate the prefab you want to modify (Ctrl/Cmd+D), move it out of the package folder and modify the duplicate instead.

When creating a new prefab from scratch, don't forget to attach a component that implements interface of the UI you're going to override. This component should be attached to the root object of the prefab.

All the UI interfaces are stored under Naninovel.UI namespace:

Interface Corresponding UI
IBacklogUI Printer backlog.
ILoadingUI Panel shown when the game is loading.
IMovieUI UI used to host movies.
ISaveLoadUI Panel used for saving and loading game.
ISettingsUI Panel used for changing game settings.
ITitleUI Title (main) menu of the game.
IExternalScriptsUI External scripts browser UI (community modding feature).
IVariableInputUI Input form for assigning an arbitrary text to a custom state variable (used by @input action).
IConfirmationUI UI panel used to confirm important actions (eg, when exiting to the title menu or deleting saved game slot).
ICGGalleryUI Unlockable CG gallery items browser.
ITipsUI Unlockable tips browser.

To add a new custom UI (without overriding any of the built-in UIs), simply attach a ManagedUI component to the root object of your custom UI prefab.

If you're OK with C# scripting and want to override default logic of the UI, you can create a new component, implement Naninovel.UI.IManagedUI interface (feel free to inherit the component from UnityCommon.ScriptableUIBehaviour to handle all the interface requirements) and attach this component instead. Check Naninovel/Runtime/UI folder for reference implementations of the built-in UIs; and here is an example of minimal implementation of a custom managed UI component:

using System.Threading.Tasks;

public class MyCustomUI : UnityCommon.ScriptableUIBehaviour, Naninovel.UI.IManagedUI
{
    public Task InitializeAsync () => Task.CompletedTask;
}

When the prefab is ready, add it to Custom UI list in the UI configuration manager accessible with Naninovel -> Configuration -> UI context menu.

UI Customization

When the engine is initializing it'll spawn all the prefabs added to the Custom UI list. In case spawned prefab has a component attached to the root object that implements one of the built-in UI interfaces, built-in prefab with default implementation won't be spawned.

Play Novel Script On Button Click

When creating custom buttons, you may prefer to use novel scripts to handle the onClick events instead of C#. Add Play Script On Button Click component to the button gameobject and either select an existing novel script or write the novel script right inside the text area field.

The script will be executed when user clicks the button in play mode. Notice, that when an existing novel script is selected via dropdown list, the script text area will be ignored and selected novel script will be played instead of the currently played one; in case you wish to additively execute some script logic without interrupting the currently played script, use the script text area.

Video Guide

Check out the following video tutorial, where we create a custom calendar UI and bind it to the date and month custom state variables.

Example Project

Within the following GitHub repository you can find the project showed in the above video tutorial.