Inserting a Canvas UI in the middle of a dialogue

Announcements, support questions, and discussion for the Dialogue System.
HunterTom
Posts: 18
Joined: Fri Dec 24, 2021 4:58 pm

Inserting a Canvas UI in the middle of a dialogue

Post by HunterTom »

Hi,

I want to add a feature that when the player gets an item (which is in the middle of a conversation), the dialogue UI would disappear and the canvas with an image of the item and some description text will show up. Then after the user clicks mouse or press a key (same action as the continue button), that canvas would disappear and the dialogue UI would resume.

I was thinking of modifying an alert UI to do that but I am not sure about exactly how to do it.

Is there any feature in the Dialogue System for Unity that can solve my problem?

Thank you very much!
User avatar
Tony Li
Posts: 22152
Joined: Thu Jul 18, 2013 1:27 pm

Re: Inserting a Canvas UI in the middle of a dialogue

Post by Tony Li »

Using Alert Panel
If you're not using alert panels for anything else, that might be the simplest solution. In your dialogue UI's hierarchy, move the Alert Panel down below the Dialogue Panel so it's rendered on top. Expand it so it covers the whole screen to prevent the player from clicking the dialogue panel's continue button underneath it. You can make the whole-screen image invisible by settings it Color > alpha to zero, or maybe set the color to (0,0,0,128) to darken everything beneath it.

Add a continue button to the alert panel. Configure its OnClick() event to call the dialogue UI's StandardDialogueUI.HideAlert method.

Set the Dialogue Manager's Display Settings > Alert Settings > Min Alert Seconds to what amount to an infinite value, such as 99999. This way it will stay onscreen until the player clicks the continue button. Also tick Allow Alerts During Conversations.

Configure your alert text GameObject to use TextMesh Pro. (See TextMesh Pro Support.) To show the item image, include a <sprite> tag in your alert text.

To show the alert in the middle of a conversation, use ShowAlert("message") in a dialogue entry node's Script field:
  • Script: ShowAlert("<sprite= name='maguffin'>\nCongrats! You got the maguffin!")

Using Your Own Panel
Alternatively, you could create your own panel. Set it up similarly to the steps above. The differences are:
  • You'll need to write your own C# method to show the panel. You can register it with Lua to use it in the Script field or make it a sequencer command to use it in the Sequence field.
  • Instead of hooking up its continue button to StandardDialogueUI.HideAlert, configure the button to just close the panel.
HunterTom
Posts: 18
Joined: Fri Dec 24, 2021 4:58 pm

Re: Inserting a Canvas UI in the middle of a dialogue

Post by HunterTom »

Thank you for the reply!

I am not writing my own canvas to display the image and text, instead of using the built-in alert.

There are two issues I am having:

1. My own panel shows up without any problem, but the dialogue UI still exists. I am trying to hide it temporarily by setting the game object that contains the "StandardDialogueUI" component to inactive. However, after I re-enable that object after my getItemUI gets destroyed, my portrait image didn't come back.

2. Currently I se up the dialogue manager so that there is not continue button in the dialogue UI. The conversation will continue if either left mouse is clicked or button E is pressed. However, to dismiss my getItemUI, a button also needs to be pressed (by mouse left click) and that would trigger the conversation to move on to the next sentence. I don't want that to happen. I am guessing temporarily disable the DialogueUI game object would solve the problem, but then the question goes back to Question #1 I just asked about.

Do you have any suggestions?

Thank you very much!
User avatar
Tony Li
Posts: 22152
Joined: Thu Jul 18, 2013 1:27 pm

Re: Inserting a Canvas UI in the middle of a dialogue

Post by Tony Li »

Hi,

The safest way to hide the dialogue UI without resetting anything inside it is to disable its Canvas. Example:

Code: Select all

DialogueManager.displaySettings.defaultCanvas.enabled = false;
However, if you're using a UI Button Key Trigger to map 'E' and left clicks to the continue button rather than relying solely on the Unity UI EventSystem's Submit input, you'll need to temporarily turn off continue button mode:

Code: Select all

if (DialogueManager.isConversationActive)
{
    DialogueManager.displaySettings.subtitleSettings.continueButton = DisplaySettings.SubtitleSettings.ContinueButtonMode.Never;
    DialogueManager.conversationView.SetupContinueButton();
}
HunterTom
Posts: 18
Joined: Fri Dec 24, 2021 4:58 pm

Re: Inserting a Canvas UI in the middle of a dialogue

Post by HunterTom »

How about I use a sequence in the conversation node that waits for a message? The message will get sent after I dismiss the getItemUI. I am understanding sequence correctly, the conversation node will not proceed as long as the sequence is waiting for the message, even if I am pressing continue button?

However, I am a bit unsure about how to add a sequence command that does nothing but to only wait for a message.

Thank you!
User avatar
Tony Li
Posts: 22152
Joined: Thu Jul 18, 2013 1:27 pm

Re: Inserting a Canvas UI in the middle of a dialogue

Post by Tony Li »

Hi,

Continue buttons can always cut sequences short. However, you can use the SetContinueMode() sequencer command to turn off the continue button. For example, say your dialogue UI canvas is uniquely named "DialogueCanvas" and your special message UI calls Sequencer.Message("DismissedUI") when it closes. Then you can use a sequence like this:

Code: Select all

SetContinueMode(false);
SetEnabled(Canvas, false, DialogueCanvas);
required SetContinueMode(original)@Message(DismissedUI);
required SetEnabled(Canvas, true, DialogueCanvas)@Message(DismissedUI);
Continue()@Message(DismissedUI)
The first line will turn off the continue button.

The second line will hide the dialogue UI canvas.

The third and fourth lines wait until your special message UI calls Sequencer.Message("DismissedUI"). Then they turn the continue button back on and show the canvas again.

The last line simulates a continue button client. If you don't want to automatically advance the conversation when the player dismisses your special message UI, remove the line.
HunterTom
Posts: 18
Joined: Fri Dec 24, 2021 4:58 pm

Re: Inserting a Canvas UI in the middle of a dialogue

Post by HunterTom »

Thank you for your answer! The sequence solution worked for what I described so far, but now I am having a new problem.

In my design, the getItemUI will only appear for the first time I get the item. If it's not the first time, a pop up message will show up instead and the pop up message will disappear by itself. Also in the pop up message case, the dialogue UI should not be hidden.

However, with the current implementation, the PopUpShow() is called in the node which is the same as the node where the sequencers are called. Therefore, even if I send the message inside the PopUpShow() function, the sequencer never seem to receive it. (the popup message did show up but the dialogue UI doesn't reappear, and I don't want it to disappear in the first place in the pop up message case.)

Is there a way to only conditionally execute the sequencer? Preferably based on a return value from a C# function which can be registered to lua? So that the sequencer will only get executed the first time player gets the item.

Thank you!
User avatar
Tony Li
Posts: 22152
Joined: Thu Jul 18, 2013 1:27 pm

Re: Inserting a Canvas UI in the middle of a dialogue

Post by Tony Li »

Hi,

You can't conditionally execute a Sequence, but you can branch to two nodes -- one for the first-time message and another for the disappearing pop-up message:

branchingSequences.png
branchingSequences.png (15.44 KiB) Viewed 1332 times
HunterTom
Posts: 18
Joined: Fri Dec 24, 2021 4:58 pm

Re: Inserting a Canvas UI in the middle of a dialogue

Post by HunterTom »

Thank you for the suggestion! I think setting up two node might be a bit too much since I have hundreds of items to set up and that would double the work.

Maybe setting it up in the sequencer is not the best way to do it. I then tried

Code: Select all

if (DialogueManager.isConversationActive)
{
    DialogueManager.displaySettings.subtitleSettings.continueButton = DisplaySettings.SubtitleSettings.ContinueButtonMode.Never;
    DialogueManager.conversationView.SetupContinueButton();
}
which you suggested in an earlier post reply.

However, I found that once the ContinueButtonMode is set to Never, the conversation node would automatically proceed every 2 second or so (all I did was executing the code above once the getItemUI is shown, and if I do not execute the code above, the dialogue would not proceed automatically). Do you know what is going on?

Thank you very much!
User avatar
Tony Li
Posts: 22152
Joined: Thu Jul 18, 2013 1:27 pm

Re: Inserting a Canvas UI in the middle of a dialogue

Post by Tony Li »

Hi,

Since you have lots of items, I completely agree that the two-node approach isn't the best approach. It's not scalable.

When you turn off continue button mode using the code in your post above, the subtitle will not wait for the player to click the continue button. It will advance the conversation as soon as the node's Sequence is done.

Instead, you could leave continue button mode on and write a sequencer command -- or C# method registered with Lua -- that disables the continue button until the player dismisses your message UI. Here's an example:

DS_MessageBoxExample_2022-02-14.unitypackage

The example registers a C# method named AcquireItem("itemName") with Lua. You can type it directly into a dialogue entry's Script field or use the "..." dropdown to reduce typing. It shows a message box on top of the dialogue UI. While the message box is open, the current subtitle panel's continue button is unclickable, and its UIButtonKeyTrigger component (if present) is disabled.
Post Reply