Using ConversationLogUI to Imitate a Text Messaging UI

[coffeeman80]

I'm trying to use the Conversation Log UI package to imitate text messaging on the iPhone, like this: http://cdn1.theodysseyonline.com/files/ ... es_get.jpg.

My problem is that I'm trying to have each person's line (PC and NPC) formatted in its own panel image, like a bubble. But the way the ConversationLogUI script is written it places all lines (Player and NPC) into a single panel with a single style of formatting. I'm not sure how to separate the speakers in order to have control over their formatting.

In order to imitate a mobile text messaging interface, each person's line needs its own text formatting (ex: NPC left-aligned, PC right-aligned) and is contained within their own colored panel image/bubble. Is there an easy way for me to extend ConversationLogUI to be able to do this?

[Tony Li]

Hi,

In the ConversationLogUI script's OnConversationLine method, instead of appending the single Text element's content, you could instantiate a new Text element and add it as a child to a Vertical Layout Group panel. Below is a modified script that does this. You need to assign the NPC Template, PC Template, and Text Content fields. In my test using the Conversation Log UI example scene, I assigned Conversation Log Panel to the Text Content field. I copied Conversation Text, renamed them NPC Template and NPC template, and assigned them to the NPC Template and PC Template fields. I also changed Text Content to use a Vertical Layout Group, since it was using a horizontal one in the original example.

Code: Select all

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

namespace PixelCrushers.DialogueSystem
{

    /// <summary>
    /// Add this to a Unity UI Dialogue UI to configure it as a conversation logger.
    /// This means it will log all text in the conversation so the player can
    /// scroll back to review it.
    /// </summary>
    [AddComponentMenu("Dialogue System/UI/Unity UI/Dialogue/Conversation Log UI")]
    public class ConversationLogUI : MonoBehaviour
    {

        [Tooltip("Show the speaker's name in front of the dialogue text")]
        public bool showSpeakerName = true;

        [Tooltip("If Show Speaker Name is ticked, use this separator between the name and dialogue text")]
        public string nameSeparator = ": ";

        [Tooltip("Text element template for NPC lines")]
        public RectTransform npcTemplate;

        [Tooltip("Text element template for PC lines")]
        public RectTransform pcTemplate;

        [Tooltip("The container for the templates")]
        public RectTransform textContent;

        [Tooltip("Scroll Rect that holds the conversation text")]
        public UnityEngine.UI.ScrollRect scrollRect;

        public List<GameObject> instantiatedLines = new List<GameObject>();

        void Awake()
        {
            if (npcTemplate == null && DialogueDebug.LogWarnings) Debug.LogWarning("Dialogue System: Need to assign NPC Template", this);
            if (pcTemplate == null && DialogueDebug.LogWarnings) Debug.LogWarning("Dialogue System: Need to assign PC Template", this);
            if (textContent == null && DialogueDebug.LogWarnings) Debug.LogWarning("Dialogue System: Need to assign Text Content", this);
            if (scrollRect == null && DialogueDebug.LogWarnings) Debug.LogWarning("Dialogue System: Need to assign Scroll Rect", this);
        }

        void OnConversationEnd(Transform actor)
        {
            foreach (var line in instantiatedLines)
            {
                Destroy(line.gameObject);
            }
            instantiatedLines.Clear();
        }

        void OnConversationLine(Subtitle subtitle)
        {
            if (subtitle == null || string.IsNullOrEmpty(subtitle.formattedText.text)) return;
            var text = subtitle.formattedText.text;
            if (showSpeakerName) text = subtitle.speakerInfo.Name + nameSeparator + text;
            var template = (subtitle.speakerInfo.characterType == CharacterType.NPC) ? npcTemplate : pcTemplate;
            var go = Instantiate(template.gameObject) as GameObject;
            go.SetActive(true);
            var lineText = go.GetComponentInChildren<UnityEngine.UI.Text>();
            lineText.text = text;
            instantiatedLines.Add(go);
            go.transform.SetParent(textContent.transform, false);
            StartCoroutine(JumpToBottom());
        }
        
        void OnConversationResponseMenu(Response[] responses)
        {
            StartCoroutine(JumpToBottom());
        }

        IEnumerator JumpToBottom()
        {
            if (scrollRect == null) yield break;
            yield return null;
            scrollRect.verticalNormalizedPosition = 0;
        }

    }
} 

[coffeeman80]

Wow, thanks for that response! I tried the script and it's very close to what I'm aiming for.

One thing I'm still unsure of is how to attach a background image to the text line, so that way the formatted text is housed within a "bubble" of its own. I tried to make the text element of NPC/PC Template a child of another UI element, but the image component in the parent never appears in the conversation.

Is that what Instantiated Lines is meant to be used for?

[Tony Li]

Hi,

The way the script is written, you can create an NPC Template that's an Image (your background image) with a child GameObject that's a Text element (the subtitle text). Same for the PC Template. Assign the parent (the Image). The script will automatically find the Text element in the child GameObject.

Here's an example scene, and an updated script that makes instantiatedLines private. There's no need for it to be public.

TextingLogUI_2016-05-18.unitypackage

[coffeeman80]

Thanks! That example scene seems to demonstrate exactly what I'm looking for.

[Tony Li]

Great!