Adapting the Letterbox Dialogue UI

Announcements, support questions, and discussion for the Dialogue System.
Post Reply
rairun
Posts: 34
Joined: Mon Feb 19, 2018 3:48 pm

Adapting the Letterbox Dialogue UI

Post by rairun »

Hello, I'm using Dialogue System along with Adventure Creator. I don't need DS to display normal dialogue lines on Unity UI because I'm using ACSpeech(entrytag) to display them on AC's own interface. However, I do need DS to display responses on Unity UI, but I'm having a hard time creating the interface I want.

Basically, what I'm trying to do is use the "Letterbox Unity UI Dialogue UI" prefab, deleting the top panel altogether and only allowing the bottom one to appear during responses (instead of the entire dialogue).

If I leave Dialogue Panel assigned to Dialogue>Panel, and assign Bottom Panel to Response Menu>Panel, I almost get the effect I want, except the Bottom panel simply appears and disappears without any animation effects.

I thought I could make the animations work by unassigning "Dialogue Panel" from Dialogue>Panel, assigning it to Response Menu>Panel, and setting the Response Menu's Animation Transitions to Show and Hide. But what actually happens is that the Dialogue Panel's Canvas Group Alpha will only go up to 0.5573666 (instead of 1), and the Bottom Panel's Y Scale will also only go up to 0.5573666 (again, instead of 1). This also only happens the first time I trigger a conversation - from the second time on, the bottom panel won't appear at all.

Does anyone know why this happens, and what I should do to achieve the effect I want?
User avatar
Tony Li
Posts: 21962
Joined: Thu Jul 18, 2013 1:27 pm

Re: Adapting the Letterbox Dialogue UI

Post by Tony Li »

Hi,

Please download and import the updated Unity UI Support package from the Dialogue System Extras page, or right here: direct download. It fixes an issue in which response panel animations weren't always playing correctly if the main panel was unassigned.

You might also want to download this example scene: Letterbox_Edited_Example_2018-02-19.unitypackage

Here's how I set it up:

1. Added the Letterbox UI to the Dialogue Manager's Canvas.

2. Unassigned the Dialogue Panel field.

3. Assigned the Dialogue Panel to the Response Menu > Panel field.

4. Set Response Menu > Animation Transitions to "Show" and "Hide".

5. Inspected Top Panel. Added a Canvas Group. Set Alpha to zero. Unticked Interactable and Block Raycasts. This makes the top panel invisible.

If you play the example scene, it will seem a bit strange because the NPC doesn't visibly say anything. (The scene doesn't use ACSpeech.) But after a few seconds, the response menu should come up.
rairun
Posts: 34
Joined: Mon Feb 19, 2018 3:48 pm

Re: Adapting the Letterbox Dialogue UI

Post by rairun »

Thank you! It worked perfectly. Really appreciated.
User avatar
Tony Li
Posts: 21962
Joined: Thu Jul 18, 2013 1:27 pm

Re: Adapting the Letterbox Dialogue UI

Post by Tony Li »

Happy to help!
NM644
Posts: 1
Joined: Sun Nov 06, 2022 1:53 pm

Re: Adapting the Letterbox Dialogue UI

Post by NM644 »

Hey Tony,

Sorry to dig up an ancient topic, but I've been trying to do one specific thing with LetterBox UI and can't seem to get it right. I'd like the bottom, 'response' panel to be visible during conversation but only when there are responses available in the particular node. Example: player character interacts with an NPC and NPC has a few lines of information for the player with no option for the player to reply - I still see a black bar that's blocking the bottom of the screen. How can I ensure that the 'response' panel only appears when there are actual responses for the player to choose from?

Thanks!
User avatar
Tony Li
Posts: 21962
Joined: Thu Jul 18, 2013 1:27 pm

Re: Adapting the Letterbox Dialogue UI

Post by Tony Li »

Hi,

In the current Letterbox Template Standard Dialogue UI prefab, the Dialogue Panel has a single animation that shows the black bars named Top Panel and Bottom Panel. This is intended to letterbox the screen to convey that the game has entered a different mode (dialogue/cinematic mode).

To make your change, you'll need to edit the Dialogue Panel's animation so it doesn't control the Bottom Panel.

Instead, promote the Response Menu Panel to be on the same level as the Top Panel, with the Bottom Panel (black bar) as a child, or just put the black image on the Response Menu Panel itself. Then add an Animator to the Response Menu Panel that shows the bottom black bar with Show and Hide triggers. Specify the trigger parameter names in the Response Menu Panel's StandardUIMenuPanel component.

I recommend doing all of these customizations on a copy of the Letterbox UI, not the original. This way you won't lose your customizations when you update the Dialogue System.
Post Reply