Adding Portraits to the Letterbox Dialogue UI Prefab

[lardmaster]

Wondering how to add portraits to the an existing UI prefab that doesn't include portraits. I tried adding portrait prefabs from the JRPG prefab template, but nothing showed up and I made sure that the dialogue UI was the correct modified version of the letterbox ui.

Thanks for any help!

[Tony Li]

Hi,

Make sure to assign the portrait images to the Standard UI Subtitle Panel components' Portrait Image fields.

Here's an example in which I've added a portrait image to the letterbox UI's NPC Subtitle Panel:

DS_LetterboxDialogueUIWithPortraitImage_2020-07-04a.unitypackage
(Edit: Updated link)

[lardmaster]

Hi,

thanks for the example! I tried it out and tried to replicate it for the player character as well, and made sure to drag the duplicated image into the standard ui subtitle panel portrait image field, but the image still did not show up for the player character. I just duplicated the NPC portrait image you had in the example, then dragged it under the PC Subtitle Panel then put the PC portrait image into the portrait image field. Am I missing any steps?

What my hierarchy and inspector look like just in case

bug14.JPG (154.71 KiB) Viewed 1382 times

Second, I'm having weird issues with the placement of the portraits on UI.
Despite placing the portrait image at the very edge of the canvas, it shows up in the middle of the screen in game. I am new to Unity UI so i'm sorry if this is a noob question but any pointers would be very helpful. I am also using cinemachine if that changes anything regarding camera and UI.

what it looks like on canvas

bug12.JPG (59.54 KiB) Viewed 1382 times

in game

bug13.JPG (181.84 KiB) Viewed 1382 times

Thanks so much for your help!

[Tony Li]

Hi,

It's a Unity UI placement issue. Here's an updated prefab with images also assigned for the PC Subtitle Panel and Response Menu Panel:

DS_LetterboxDialogueUIWithPortraitImage_2020-07-04a.unitypackage

I moved them outside the NPC Subtitle Panel, PC Subtitle Panel, and Response Menu Panel GameObjects since, at least in your screenshot, they're not actually contained within the boundaries of those panels.

Check the anchor values of the images' Rect Transforms. The PC image, for example, has its pivot in the lower right of the image. And it's anchored to the lower right, which means that the pivot point (lower right corner of the image) will be aligned to the lower right corner of the screen. Then I adjusted the Pos Y to offset it to the top of the PC subtitle panel.


Another thing you can do is to add a Canvas Scaler to the Dialogue Manager's Canvas if it doesn't have one. Configure it to Scale To Screen Size. Then set a reference resolution (e.g., 1920x1080), position and size your UI elements, and play with the Width/Height slider to get the appearance you want at different screen sizes.

[lardmaster]

Hi,

Thank you so much for making the letterbox portrait prefab and your suggestions, I played around with it and the the portraits looked great. However, I have a problem with the portraits and when they appear. When the player character portrait appears, it doesn't go away when the dialogue switches to the NPC dialogue. Also the way the NPC portrait dissapears is delayed and choppy, is there a way to smooth it out and have it go as soon as they are done talking? Another problem is that when talking to the character for a second time, both portraits appear despite only the player character talking, while I only want the person who is talking to have their portrait show.

Here's a quick video showing my problems:
https://www.youtube.com/watch?v=zfduyt2 ... e=youtu.be

Also, another quick question, how do you get a set camera angle and get the camera to stay still during a conversation without using the pause game function?

Thank you so much for ur help!

[Tony Li]

Hi,

Thank you so much for making the letterbox portrait prefab and your suggestions, I played around with it and the the portraits looked great. However, I have a problem with the portraits and when they appear. When the player character portrait appears, it doesn't go away when the dialogue switches to the NPC dialogue. Also the way the NPC portrait dissapears is delayed and choppy, is there a way to smooth it out and have it go as soon as they are done talking? Another problem is that when talking to the character for a second time, both portraits appear despite only the player character talking, while I only want the person who is talking to have their portrait show.

The delay is probably the result of an animation that's playing. As a test, inspect the subtitle panels and remove the Animator components. (Keep a backup copy with the Animator components in case you want them back.) Does that cause the NPC portraits to appear as soon as they're done talking?

For the PC portrait:

1. Make sure it's assigned to the response menu's PC Portrait Image and the PC Subtitle Panel's Portrait Image.

2. Try setting the Visibility dropdowns of the subtitle panels to Only During Content.

The Standard UI Subtitle Panel and Standard UI Menu Panel provide a lot of options. I'm not sure exactly what result you're trying to get. I recommend trying different options to see how they work.

Also, another quick question, how do you get a set camera angle and get the camera to stay still during a conversation without using the pause game function?

A gameplay script is probably controlling the camera. See the last part of the Interaction Tutorial. It demonstrates how to use Dialogue System Events to temporarily disable gameplay script(s) during conversations.

[lardmaster]

Hi,

Thanks once again. I tried all your suggestions and the animator did make the delay go away although I would like to have some sort of transition as that seemed a bit too abrupt. I was wondering how I would go about making my own transition for just the portraits. Also, I tried ur suggestions for the PC portrait but it still remains there even when the PC is not talking. Putting the visibility of the PC Subtitle Panel to only during content only caused the PC portrait to dissappear at the end of all the the stuff he had to stay for that conversation as opposed to every time when the PC was not. I'm not sure why thats the case when the NPC subtitle panel and portrait image works perfectly.

And an example of the kind of dialogue I am going for is like this: I just want only the portrait of the person talking to show up during dialogue.

Thanks so much for all your help, i hope im not being too bothersome haha.

[Tony Li]

That's no problem. I'm out of time today, but tomorrow I'll put together a little example.

[lardmaster]

Great thank you!

[Tony Li]

Hi,

Here's an example:

DS_RiverCityGirlsStyle_2020-07-13.unitypackage
[EDIT: Updated example]

You can restyle the fonts, etc. But I think it functions now the way you want.