How to change the Dialogue UI, character pics, and font in code.

Announcements, support questions, and discussion for the Dialogue System.
Post Reply
CheChe
Posts: 5
Joined: Thu Nov 12, 2020 8:17 am

How to change the Dialogue UI, character pics, and font in code.

Post by CheChe »

Hi Tony. First let me thank you for making this dope game engine. I released my first game with it earlier this year, and I'm trying to use it for my next project. That said, I'm making a game that exist in both 2D and 3D at the same time, switching back and forth between the two at the press of a button. Every part of the game can become 2D or 3D at any moment. I have a dialogue UI for 2D and another for 3D. I have pixel art character pics for 2D and high-res versions for 3D. Same thing with the fonts. From what I can tell, the database holds the character pics and the Dialogue Manager prefab holds the Dialogue UI. When I call the function to switch from 2D to 3D or vice versa, I need a way switch the Dialogue UI & the font in the middle of the game, and then I need to be able to switch character pics without switching to a different conversation database for a continuous experience. Is this even possible the way your dialogue system is set up?
User avatar
Tony Li
Posts: 22143
Joined: Thu Jul 18, 2013 1:27 pm

Re: How to change the Dialogue UI, character pics, and font in code.

Post by Tony Li »

Hi,

To switch the dialogue UI between 2D and 3D, use the C# method DialogueManager.UseDialogueUI(). I recommend adding two Canvases to the Dialogue Manager and putting each dialogue UI in a Canvas.

To switch the actors' portraits, I recommend this:
  • Use one database.
  • Use one actor for each character.
  • Set the actor's Portrait Sprite #1 to the pixel art portrait and #2 to the high-res version.
  • When you switch to 2D mode, in C# call DialogueLua.SetActorField("actor name", "Current Portrait", "pic=1");
  • When you switch to 2D mode, in C# call DialogueLua.SetActorField("actor name", "Current Portrait", "pic=2");
If the player can switch between 2D and 3D in the middle of a conversation, let me know. There are a few extra steps for that. (Set DialogueManager.conversationView.dialogueUI, etc.)
CheChe
Posts: 5
Joined: Thu Nov 12, 2020 8:17 am

Re: How to change the Dialogue UI, character pics, and font in code.

Post by CheChe »

follow-up question. I have a SET of pics for both 2D and 3D mode using a range of emotions: happy, sad, angry, laughing, etc. Kinda like:
pic1 = 2Dhappy
pic2 = 2Dsad
pic3 = 2Dangry
pic4 = 3Dhappy
pic5 = 3Dsad
pic6 = 3Dangry

So it's not just 2D = pic1, 3D = pic2. Couldn't I have the dialogue manager send a variable that represents an emotion to my script somewhere, and then use a simple if statement to check which emotion pic that converts to? Did I just answer my own question or is there a much simpler solution to this?
User avatar
Tony Li
Posts: 22143
Joined: Thu Jul 18, 2013 1:27 pm

Re: How to change the Dialogue UI, character pics, and font in code.

Post by Tony Li »

In dialogue text, [var=variable] tags are processed before [pic=#] tags.

In 2D, you could set 3 variables:

Code: Select all

DialogueLua.SetVariable("happypic", "[pic=1]");
DialogueLua.SetVariable("sadpic", "[pic=2]");
DialogueLua.SetVariable("angrypic", "[pic=3]");
And in 3D:

Code: Select all

DialogueLua.SetVariable("happypic", "[pic=4]");
DialogueLua.SetVariable("sadpic", "[pic=5]");
DialogueLua.SetVariable("angrypic", "[pic=6]");
Then, in your dialogue text, use [var=happypic] to show the happy pic:
  • Dialogue Text: "Yay! I'm happy! [var=happypic]"
---

Alternatively, assuming you've ticked the Dialogue Manager's Other Settings > Instantiate Database so you don't mess up your actual database asset, you could leave pics 1-3 unassigned. Assign the 2D images to 4-6, and the 3D images to 7-9.

When you switch to 2D, assign the 2D images to pic 1-3:

Code: Select all

foreach (Actor actor in DialogueManager.masterDatabase.actors)
{
    actor.spritePortrait = actor.alternatePortraits[2];
    actor.spritePortraits[0] = actor.alternatePortraits[3];
    actor.spritePortraits[1] = actor.alternatePortraits[4];
}
When you switch to 3D:

Code: Select all

foreach (Actor actor in DialogueManager.masterDatabase.actors)
{
    actor.spritePortrait = actor.alternatePortraits[5];
    actor.spritePortraits[0] = actor.alternatePortraits[6];
    actor.spritePortraits[1] = actor.alternatePortraits[7];
}
Then you can use [pic=1], [pic=2], and [pic=3], and it will work regardless of whether you're in 2D or 3D.

Note: The code above doesn't do any checking on the array sizes. If you use this idea, add error checking.
Post Reply