Subtitle UI depending on Number of Answer Options

Announcements, support questions, and discussion for the Dialogue System.
Post Reply
AJWantsToSleep
Posts: 18
Joined: Wed Jun 19, 2024 2:44 pm

Subtitle UI depending on Number of Answer Options

Post by AJWantsToSleep »

Hello,

I'm new to the Dialogue System and need some help:
1. The Size of the Dialogue Panel needs to change with it's content (Size/Length of the NPC Dialogue, Buttons, Menu Panel)
2. The content of the menu panel should change depending on how many options are available to the player (see attached images). What would be the best approach here?

I'm still trying to get the hang of everything, so I would really appreciate your help :)
Attachments
for 3 to 4 options
for 3 to 4 options
Screenshot 2024-06-19 204717.png (25.31 KiB) Viewed 147 times
for 1 to 2 options
for 1 to 2 options
Screenshot 2024-06-19 204738.png (20.48 KiB) Viewed 147 times
User avatar
Tony Li
Posts: 22107
Joined: Thu Jul 18, 2013 1:27 pm

Re: Subtitle UI depending on Number of Answer Options

Post by Tony Li »

Hi,

Here are two ways you could approach this:

1. Set up two response menu panels: one with two response buttons, one with four response buttons. Make a subclass of StandardDialogueUI and override ShowResponsesImmediate():

Code: Select all

public class MyDialogueUI : StandardDialogueUI
{
    protected override void ShowResponsesImmediate(Subtitle subtitle, Response[] responses, float timeout)
    {
        // Use menu panel 0 for 1-2 responses, menu panel 1 for 3+ responses:
        var menuPanelToUse = conversationUIElements.menuPanels[(responses.Length <= 2) ? 0 : 1];
        conversationUIElements.standardMenuControls.ForceOverrideMenuPanel(menuPanelToUse);
        base.ShowResponsesImmediate(subtitle, responses, timeout);
    }
}
Then replace your dialogue UI's StandardDialogueUI component with the subclass in place, and assign the menus panels to the Menu Panels list.


2. Or use a single menu panel. Don't make a subclass of StandardDialogueUI. Instead, make a subclass of StandardUIMenuPanel and replace the StandardUIMenuPanel component on the menu panel. Instead of a Vertical Layout Group as most of the built-in prefabs have, use a Grid Layout Group. Override the ShowResponses() method to configure the Grid Layout Group to use 2 columns or 4 columns depending on the number of responses:

Code: Select all

public class MyMenuPanel : StandardUIMenuPanel
{
    public override void ShowResponses(Subtitle subtitle, Response[] responses, Transform target)
    {
       var rectTransform = GetComponent<RectTransform>();
        var gridLayout = GetComponent<GridLayoutGroup>();
        int numColumns = (responses.Length <= 2) ? 1 : 2;
        gridLayout.constraintCount = numColumns;
        gridLayout.cellSize = new Vector2(rectTransform.sizeDelta.x / numColumns, gridLayout.cellSize.y);
        base.ShowResponses(subtitle, responses, target);
    }
}
AJWantsToSleep
Posts: 18
Joined: Wed Jun 19, 2024 2:44 pm

Re: Subtitle UI depending on Number of Answer Options

Post by AJWantsToSleep »

Thank you! It worked :)
User avatar
Tony Li
Posts: 22107
Joined: Thu Jul 18, 2013 1:27 pm

Re: Subtitle UI depending on Number of Answer Options

Post by Tony Li »

Glad to help!
Post Reply