Changing the way images display within Conversations?

nadya

Unity version: 2022.3.8f1
AC version: 1.81.3

In my prototype, I need certain (but not all) conversation items to display an image when you mouse over them.

I added Icon Textures to those conversation items, I am using a Unity UI Prefab for my Conversations menu, and I have "Icons and Text" selected under Display Type in my Dialogue List.

When I run my game, a given choice in a Conversation, when moused over, looks like this:

But what I want on mouseover for a given Conversation option is something more like this... the texture being more visible, and the correct aspect ratio, and not interfering with the legibility of my conversation item:

What is the cleanest way to accomplish this?

Also, I've noticed that the conversation button options' green highlight color no longer works on items with no image texture attached to them, once I pick "Icons and Text" versus "Text Only." That is a separate issue and less urgent, but curious if there's a fix or if I now have to add textures to every conversation item to have it highlight if I'm doing "Icons and Text."

ChrisIceBox

Firstly, switch over to Unity UI as the Menu's Source. The built-in "Adventure Creator" option is really best suited to rapid prototyping at this point.

With Unity UI, each Dialogue Option slot is linked to a Button - and AC will control its Text and/or Image children based on the element's "Display type". This Image can be positioned where intended in the UI prefab.

Is your screenshot suggesting that each icon should appear in the same place? If so, there's a couple of ways to do this:

1. Have each Button use Animation transitions, and give them animations that set the position or enabled state of their Images - so that they're only in the correct place when hovered-over.
2. Remove the Image components, and instead use scripting to get the currently-selected option's associated icon, and show it in a single RawImage (necessary because icons are Texture2D assets) already in the correct place.

Something like this, attached to each button:

using UnityEngine;
using UnityEngine.EventSystems;
using AC;
using UnityEngine.UI;

public class SelectTest : MonoBehaviour, IPointerEnterHandler
{

    public int slotIndex;
    public RawImage rawImage;
    Canvas canvas;

    void Awake ()
    {
        canvas = GetComponentInParent<Canvas> ();
    }

    public void OnPointerEnter(PointerEventData eventData)
    {
        Menu menu = KickStarter.playerMenus.GetMenuWithCanvas (canvas);
        var element = menu.GetElementWithGameObject (this) as MenuDialogList;
        var texture = element.GetDialogueOption (slotIndex).icon;
        rawImage.texture = texture;
    }

}

nadya

Thanks for your help! Still struggling with this one. Here's where I'm at:

First, I tried to implement the code from the forum. I encountered an error when I tried to use this code: Argument 1: cannot convert from 'SelectTest' to 'UnityEngine.GameObject'. I fixed it by replacing this with gameObject when calling the method GetElementWithGameObject. Once I made that fix, the script compiled.

I then attached this code to each button in my ConversationUI Prefab. I also made a RawImage in the ConversationUI Prefab, and I referenced that RawImage from Inspector for each button. Screenshots: https://imgur.com/a/2iMTYVd

But when I try it, unfortunately, the texture still shows up over the button’s image, like so, while the RawImage just shows up as a white square: https://imgur.com/a/0Plx5Ny

Additionally, when I disable the button’s Image component, no texture appears at all, and the button interaction itself stops working.

ChrisIceBox

I fixed it by replacing this with gameObject when calling the method GetElementWithGameObject.

Quite right, apologies.

But when I try it, unfortunately, the texture still shows up over the button’s image, like so, while the RawImage just shows up as a white square: https://imgur.com/a/0Plx5Ny

The white square will show for now by default, but we can sort that once we've got it working when hovering over options.

Does anything display in the Console if you place a Debug.Log statement inside OnPointerEnter? Are you using Unity's new Input System, or the built-in Input Manager for input?

The alternative to this approach would be to use AC's event system to listen out for the options being selected. Try this instead:

using UnityEngine;
using UnityEngine.EventSystems;
using AC;
using UnityEngine.UI;

public class SelectTest : MonoBehaviour, IPointerEnterHandler
{

    public int slotIndex;
    public RawImage rawImage;
    Canvas canvas;

    void OnEnable ()
    {
        canvas = GetComponentInParent<Canvas> ();
        EventManager.OnMouseOverMenu += OnMouseOverMenu;
    }

    void OnDisable () { EventManager.OnMouseOverMenu -= OnMouseOverMenu; }

    void OnMouseOverMenu (Menu _menu, MenuElement _element, int _slot)
    {
        if (_element.GetObjectToSelect (_slot) == gameObject)
        {
            var element = _menu.GetElementWithGameObject (this) as MenuDialogList;
            var texture = element.GetDialogueOption (slotIndex).icon;
            rawImage.texture = texture;
        }
    }

}

Additionally, when I disable the button’s Image component, no texture appears at all, and the button interaction itself stops working.

To prevent the icon from showing in the Dialogue List, set the Display type in the Menu Manager to Text Only.

nadya

Are you using Unity's new Input System, or the built-in Input Manager for input?

It says Input Manager (Old) in my project settings.

I feel like I'm getting closer to getting it working! Here is my current code:

using UnityEngine;
using AC;
using UnityEngine.UI;

public class SelectTest : MonoBehaviour
{
    public int slotIndex;         // Index for identifying the specific dialogue option slot
    public RawImage rawImage;      // Reference to the designated RawImage for displaying icons
    private Canvas canvas;

    void OnEnable()
    {
        // Locate the parent Canvas and subscribe to the mouseover event
        canvas = GetComponentInParent<Canvas>();
        EventManager.OnMouseOverMenu += OnMouseOverMenu;
    }

    void OnDisable()
    {
        // Unsubscribe to avoid memory leaks
        EventManager.OnMouseOverMenu -= OnMouseOverMenu;
    }

    // Triggered when the mouse hovers over a menu element
    void OnMouseOverMenu(Menu _menu, MenuElement _element, int _slot)
    {
        // Ensure we're dealing with a MenuDialogList element
        if (_element is MenuDialogList)
        {
            var element = _menu.GetElementWithGameObject(gameObject) as MenuDialogList;
            Debug.Log($"Element found: {element != null}");

            if (element != null)
            {
                // Debug loop to verify each dialogue option’s icon presence
                for (int i = 0; i < element.GetNumSlots(); i++)
                {
                    var option = element.GetDialogueOption(i);
                    Debug.Log($"Slot {i}: Icon assigned = {option.icon != null}");
                }

                // Retrieve the icon texture for the specified slotIndex
                var texture = element.GetDialogueOption(slotIndex).icon;
                Debug.Log($"Hovered over slot: {slotIndex}. Icon texture applied: {texture != null}");

                // Apply the texture to the RawImage if it's valid
                if (rawImage != null && texture != null)
                {
                    rawImage.texture = texture;
                    rawImage.SetNativeSize();  // Maintain correct aspect ratio
                }
            }
        }
    }
}

When I run it, I get these kinds of debug statements:

Hovered over slot: 1. Icon texture applied: False
Hovered over slot: 2. Icon texture applied: False
Hovered over slot: 3. Icon texture applied: False
Slot 1: Icon assigned = False
Slot 2: Icon assigned = False
etc.

So I know it's recognizing when I hover over different slots, just not assigning textures right.

Here's how I've got things set up as regards to my ConversationUI hierarchy, Dialoglist in my menu, assigned icon textures in conversations, and various buttons: https://imgur.com/a/q5HfrX4

I feel like this is really close to working and I am grateful for any help in getting it there. Thank you!

ChrisIceBox

Ah, my fault again - sorry.

The icon property has been deprecated - cursorIcon is the one to use now:

var texture = element.GetDialogueOption(slotIndex).cursorIcon.texture;

nadya

That did the trick! Thank so much for your help!!!