Bubble button arrangement

Announcements, support questions, and discussion for the Dialogue System.
joeylu
Posts: 111
Joined: Sun May 17, 2020 1:07 pm

Bubble button arrangement

Post by joeylu »

I have successfully setup the bubble dialogue and it works perfectly, tks to this great asset

One question, my bubble setup has total 3 custom bubbles, left, mid and right, all three has different image and styles
These three bubbles dedicate to the menu panel
I'm trying to make something like:
When there's only one menu choice, show the middle bubble
When there are two menu choices, show left and right bubbles
When there are three menu choices, show all of them

Can you give me some brief ideas that how can I achieve this in the script? tks
User avatar
Tony Li
Posts: 21049
Joined: Thu Jul 18, 2013 1:27 pm

Re: Bubble button arrangement

Post by Tony Li »

Hi,

Here are two ways you could do it:

1. Make a subclass of StandardUIMenuPanel. Override the ShowResponses() method. Currently it just uses buttons in the order they appear in the Buttons list, unless a response's text has a [position=#] markup tag in it.

2. Or add a script that adds [position=#] markup tags to the responses. Something like:

Code: Select all

using UnityEngine;
using PixelCrushers.DialogueSystem;
public class PositionResponseButtons : MonoBehaviour
{
    void OnConversationResponseMenu(Response[] responses)
    {
        if (responses.Length == 2)
        {
            // If only 2 responses, add [position=#] tags to use buttons 1 (left) and 2 (right):
            responses[0].formattedText.position = 1;
            responses[1].formattedText.position = 2;
        }
    }
}
joeylu
Posts: 111
Joined: Sun May 17, 2020 1:07 pm

Re: Bubble button arrangement

Post by joeylu »

Hi Tony, I implemented your second option and it works perfectly! thank you again.

One another animation question might not be related to this topic

I'm using the bubble template standard menu UI from your demo prefab
I customized the bubble image to my own and try to apply some animations
I try to follow your document "Panel animation" to achieve the show/hide/focus/unfocus animations

My question is that since my three bubble uses different images, their animations is different too, so I added different animator controller to each of the response panel under the main panel
I did this and added 4 trigger parameters (Show/Hide/Focus/Unfocus), I configured it in animator condition with animations to these 4 trigger parameter
but it didn't trigger these 4 animation properly when played, any ideas? tks
User avatar
Tony Li
Posts: 21049
Joined: Thu Jul 18, 2013 1:27 pm

Re: Bubble button arrangement

Post by Tony Li »

Hi,

The Standard UI Menu Panel component only controls one Animator.

If you don't mind scripting, you could write a subclass and override the ShowResponses and HideResponses method.

However, a simpler solution might be:

1. Remove the Animators that you added.

2. Configure the Main Panel's Show/Hide/Focus/Unfocus animations to animate all 3 bubbles. If a bubble isn't used (for example, if bubble 1 is hidden because the current conversation only has 2 responses), then the bubble will be inactive. It will still technically be animated, but it won't be visible since it will be inactive.
User avatar
Tony Li
Posts: 21049
Joined: Thu Jul 18, 2013 1:27 pm

Re: Bubble button arrangement

Post by Tony Li »

joeylu
Posts: 111
Joined: Sun May 17, 2020 1:07 pm

Re: Bubble button arrangement

Post by joeylu »

That is brilliant, using one animator but hide part of it by its behavior, I will try it and let you know if I have issues, thank you!
joeylu
Posts: 111
Joined: Sun May 17, 2020 1:07 pm

Re: Bubble button arrangement

Post by joeylu »

Hi Tony, by adding some additional scripts I have successfully achieved separated animation with both of your suggestion, tks for your patient!

one more last thing for this topic, back to the Bubble Template Standard UI Menu Panel, under main panel, there are three response panels, each of them holds a button.
I'm trying to access to those response panels from the script to do more customized stuff, currently I'm using the OnConversationResponseMenu method, I have created a custom script that attaches to the dialogue manager gameobject.
And use DialogueManager.currentActor.Find() method to iterate those panels.
Don't feel it is the best way to get those panels' reference, is there any better way to access? tks
User avatar
Tony Li
Posts: 21049
Joined: Thu Jul 18, 2013 1:27 pm

Re: Bubble button arrangement

Post by Tony Li »

It would be better to get each menu's button's parent:

Code: Select all

StandardUIMenuPanel menuPanel;
Button button1 = menuPanel.buttons[0];
Transform button1Panel = button1.transform.parent;
This way you don't have to Find() anything.

However, you could also write a subclass of StandardUIMenuPanel. Add fields where you can assign the panels at design time. Roughly:

Code: Select all

public class CustomMenuPanel : StandardUIMenuPanel
{
    public Animator[] buttonPanelAnimators; //<--ASSIGN IN INSPECTOR.
    
    public override void ShowResponses(Subtitle subtitle, Response[] responses, Transform target)
    {
        base.ShowResponses(subtitle, responses, target);
        foreach (var buttonPanelAnimator in buttonPanelAnimators)
        {
            buttonPanelAnimator.SetTrigger("Show");
        }
    }
}
joeylu
Posts: 111
Joined: Sun May 17, 2020 1:07 pm

Re: Bubble button arrangement

Post by joeylu »

I wrote a subclass to override the ShowResponses, works perfectly, thank you
User avatar
Tony Li
Posts: 21049
Joined: Thu Jul 18, 2013 1:27 pm

Re: Bubble button arrangement

Post by Tony Li »

Glad to help! :-)
Post Reply