[LivelyChatBubbles] + portraits

[DarkFlameMaster]

Hello, and thank you for this incredible asset

I succesfully integrated lively chat bubbles as subtitles for my conversations, however I'd like to add portraits next to the bubbles.

I got a sprite inside the bubble prefab, that correctly follows its size and position, however I have no idea on where and how to make that my sprite inside the prefab can read my characters' portrait.

I think that the "Lively Chat Bubble Subtitle Panel" would be the place to do that, but I can't manage to grasp exactly how it works, and how to modify it (tried to add a sprite variable, but it would not show in the inspector despite being public)

The final goal would be to be able to display a different portrait for each node of the conversation, but again, I can't find how to do that, despite searching the doc and the forums.

if you need any further information please notify me, thanks by advance for any help you might give me.

[Tony Li]

Hi,

Thanks for using the Dialogue System!

Make a subclass of LivelyChatBubbleSubtitlePanel, and override the ShowSubtitle() method. Something roughly like:

Code: Select all

public class LCBSubtitlePanelWithPortrait : LivelyChatBubbleSubtitlePanel
{
    public override void ShowSubtitle(Subtitle subtitle)
    {
        base.ShowSubtitle(subtitle);
        yourPortraitImage.sprite = subtitle.GetSpeakerPortrait();
    }
}

Then use your subclass instead of the original LivelyChatBubbleSubtitlePanel.

One twist in this is that you'll need a way to find the portrait image in the ChatBubble. In the code above, I just called it "yourPortraitImage" and assumed the subclass already had a reference to the image. If you didn't want to make a subclass of ChatBubble, you could give your portrait image a unique name such as "Portrait Image" and use Transform.Find(), something like:

Code: Select all

public class LCBSubtitlePanelWithPortrait : LivelyChatBubbleSubtitlePanel
{
    private Image portraitImage = null;
    
    public override void ShowSubtitle(Subtitle subtitle)
    {
        base.ShowSubtitle(subtitle);
        if (portraitImage == null) portraitImage = chatBubble.transform.Find("Portrait Image");
        if (portraitImage != null) portraitImage.sprite = subtitle.GetSpeakerPortrait();
    }
}

[DarkFlameMaster]

Hello, thank you for your answer

I get how it should have worked, however it's not at all, I believe there is some kind of editor script that I'm not seeing which changes what variables are shown in the inspector ?



These are the two inspectors, and this is the script ; I don't think I've made any mistake in the classes inheritance

Code: Select all

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

namespace PixelCrushers.DialogueSystem.LivelyChatBubblesSupport
{
    public class LCBSubtitlePanelWithPortrait : LivelyChatBubbleSubtitlePanel
    {
        public Sprite portrait_image;

        public override void ShowSubtitle(Subtitle subtitle)
        {
            base.ShowSubtitle(subtitle);
            //yourPortraitImage.sprite = subtitle.GetSpeakerPortrait();
            print(portraitImage);
        }
    }
}

Actually my sprite variable is not appearing at all :/

[DarkFlameMaster]

Well, I went a different road which is working fine for now, altough not the best way I think.

I extended the ChatBubble class with a ChatBubbleWithPortrait one, which has the link to the image container, and an empty sprite
I got a second class "Portrait" which is on the player and the NPC, with their portrait sprite.
Then in the Awake function of LivelyChatBubbleSubtitlePanel I link both variables with a GetComponent and transform.root.

I guess I'll find a way to change portraits depending on the current text later, should be fairly doable since my portraits are stacked on their own class

[Tony Li]

I just added support for portrait images to the LCB integration. You can download the updated integration package on the Extras page or here: direct download.

On your ChatBubble prefab, replace the ChatBubble component with the new ChatBubbleWithPrefab and assign a portrait image.

(Use the [pic=#] markup tag or SetPortrait() sequencer command to show different portrait images for a character.)

[DarkFlameMaster]

Oh my, thank you very much for that
working perfectly

[Tony Li]

Happy to help!

[DarkFlameMaster]

Quick feedback : I managed to make portraits to change for each dialogue just fine with markup tag, however the SetPortrait() caused the dialogue to completely skip (I think it instantiated the bubble, then instantly deactivate it)

Maybe I did something wrong but I don't think so, just letting you know if you're interested in testing it or something


again, markup tag is working wonderfuly, and actually way more practical to use, so it's all right, thanks a lot again

[Tony Li]

Include the {{default}} sequence, too. Something like:

Code: Select all

SetPortrait(George, pic=2); {{default}}

Otherwise it will set the portrait image and then immediately advance to the next node in the conversation.