Best way to display a tutorial image in the middle of a conversation?

Announcements, support questions, and discussion for the Dialogue System.
Post Reply
2linescrossed
Posts: 31
Joined: Tue May 16, 2023 10:37 pm

Best way to display a tutorial image in the middle of a conversation?

Post by 2linescrossed »

Hi, please excuse me for asking a basic question, but what is the best way to show a pop-up tutorial message during a conversation, resuming the conversation when the popup is closed?

Off the cuff, I was considering 'brute forcing' it by just having one conversation, playing that, then when that conversation ends, spawning the popup, then when the popup is closed, playing the rest of the conversation (split into a separate entry). That seems a bit inefficient though.

So I'd like to ask, what's the script or sequence I need to input in order to call a method with the popup I've got in it? Is there a way to resume the conversation where it left off instead of making another dialog entry?

As a side question, I'd also like some clarification on good practice for implementing dialog before gameplay begins - so far, I've been intending on playing a conversation at the start of gameplay, having that play out, then turning on a boolean to enable the game actually starting on the last node/an empty node at the end. This should be fine, right?
Again, excuse me for asking a basic question, as the documentation can be a bit labyrinthine sometimes, but what's the simplest way to trigger a variable in a non-Dialogue manager script via sequence/script in a dialog node's fields?
User avatar
Tony Li
Posts: 21053
Joined: Thu Jul 18, 2013 1:27 pm

Re: Best way to display a tutorial image in the middle of a conversation?

Post by Tony Li »

Hi,

Here's an example scene:

DS_PopUpTutorialExample_2023-11-26.unitypackage

A Dialogue System Trigger set to OnSaveDataApplied starts the intro conversation -- as long as a DS variable named "HasPlayedIntro" isn't true:

popUpExample2.png
popUpExample2.png (67.52 KiB) Viewed 652 times

OnSaveDataApplied works the same as OnStart except that it will wait for save data to be applied if the player is loading a saved game or coming from another scene using the save system. I used OnSaveDataApplied here to make sure that the value of HasPlayedIntro is correct (e.g., possiblyt restored from saved game) before checking it.

The intro conversation looks like this:

popUpExample.png
popUpExample.png (39.26 KiB) Viewed 652 times

The scene has an inactive canvas named "Pop Up Canvas" that the conversation activates. This canvas is higher than the Dialogue Manager's canvas, so it blocks the player from clicking on the conversation until the player dismisses the pop-up. The pop-up's button has a Dialogue System Trigger. The button's OnClick() event calls the trigger's OnUse, which sends the sequencer message that the conversation is waiting for in order to continue:

popUpExample3.png
popUpExample3.png (57.43 KiB) Viewed 652 times

The first node shows this canvas and waits for the sequencer message. The second node hides the canvas.

The final node just does a fade-in to simulate starting the game.

BTW, to get and set DS variable values in your own C# code, use the DialogueLua class, such as:

Code: Select all

if (DialogueLua.GetVariable("HasPlayedIntro").asBool == false)
{
    Debug.Log("Need to play intro.");
}
and:

Code: Select all

DialogueLua.SetVariable("HasPlayedIntro", true);
2linescrossed
Posts: 31
Joined: Tue May 16, 2023 10:37 pm

Re: Best way to display a tutorial image in the middle of a conversation?

Post by 2linescrossed »

Hi, this mostly works great! But there is a bit of an issue where the dialog doesn't go away when the popup is spawned. While I can shift things around by changing the canvas layering, the main issue is that the dialog's still very, very noticeable whether it's above or under the popup. I tried making an empty node after the dialog, but it doesn't 'close' the dialog before spawning the popup. What should I do?
User avatar
Tony Li
Posts: 21053
Joined: Thu Jul 18, 2013 1:27 pm

Re: Best way to display a tutorial image in the middle of a conversation?

Post by Tony Li »

Hi,

In the dialogue entry that shows the pop-up tutorial image, add this to the Sequence:

Code: Select all

SetDialoguePanel(false);
Example:

Code: Select all

SetDialoguePanel(false);
SetActive(Pop Up Canvas);
Continue()@Message(ClosedPopup)
In the next entry, show the dialogue panel again::

Code: Select all

ShowDialoguePanel(true);
SetActive(Pop Up Canvas, false)
Post Reply