Character portraits beside dialog options
Hello, I'm working on a project in which I'd like to be able to display character portraits beside each dialog option; preferably to the left of each of the options. This is because the player will be controlling two characters who travel together at all times. So different choices may be asked by each character, and the portrait beside the selection would indicate who will be talking when they select the choice.
I've seen there are ways to have portraits appear during a conversation, but I just want them to appear when the player is making choice selections, and I want them to be different for each choice. Is there a way to do this? I have noticed the 'Icon Texture' option that each dialog option contains but have yet to figure out how to utilize this. Thank you.
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
Welcome to the community, @reismahnic.
The options dispayed on-screen are detached from the speech that clicking them may result in.
Though you could potentially make use of custom scripting, I'd say the "Icon texture" field would be the best bet. This field allows you to associate a dialogue line with a graphic. Conversation options can be displayed using icons, not just text - see the 2D Demo's converation with the Bird for reference.
To make use of both icons and text at the same time, however, you'll need to make sure that your Conversation menu is rendered using Unity UI - you can do this by setting its Source property to Unity Ui Prefab. If you're relying on the default Converation menu, it should already have a ConversationUI prefab you can then edit. If not, you'll need to create one (see a general tutorial on working with Unity UI here).
After switching source, you can then select the Converstion menu's DialogList element, and set its Display type to Icon And Text, to allow both labels and icon textures to be displayed together.
It should then just be a case of updating the menu's UI canvas prefab with Image components for each dialog option slot. If you'd like more specific advice on this, feel free to share some screenshots of your setup and I'll point out what needs putting where.
Hello @ChrisIceBox , I feel like I'm getting a lot closer now but am still struggling a little bit. As you can see I've got things switched over to Unity UI Prefab, and I do see the option list, which is great. I can shift text over to the right (I want the small character portrait to display to the left of the text), but my struggle is that I can't seem to adjust the actual button (containing the portrait image) at all, and the portrait image currently just displays over top of the text as a result. Furthermore, the portrait image is green, and I haven't found a way yet to set the target graphic color to just its normal color rather than a specific one, if that makes sense.
Thank you again for the help and please let me know if you need me to send more info.
Image, since I'm struggling with embedding it: https://drive.google.com/file/d/1nNLuEQK9bNRaQ4lQmmIDqcODfjA5dTHs/view?usp=sharing
You'll likely want the Image component to be on a separate child of the Button - beside the Text in the Hierarchy.
That way, you can attach e.g. a Horizontal Layout Group to the Button, so that the child elements are arranged horizontally. It's a bit of fiddling, but when a Menu relies on Unity UI, AC relinquishes styling/layout to the Unity's UI components.
The way a Button's colour changes is down to its Transition settings - but bear in mind the DialogList element has its own colour options for already-chosen options as well.
@ChrisIceBox I've made some progress - again, thank you for the assistance, it's amazing - but I'm still encountering a couple issues I've struggled to bypass.
The first is that with my changes to the layout of the dialog box I've now been unable to get it to resize if there are less than the maximum slot # accounted for - see uploaded screenshot #2.
The second is that I'm still struggling to find a way to have the Button color just be its original color set - not just a single color, but the full PNG image's color. Also in screenshot #2.
My third and final issue is that while I set the engine to default to keyboard & game pad controls, I'd also LIKE the player to be able to use the mouse if they feel like it - where can I re-enable that?
Thank you!
Screenshot #1: https://drive.google.com/file/d/1sV025LJ__tEbwKJT5kCPt4Wq_iV0fdIH/view?usp=sharing
Screenshot #2: https://drive.google.com/file/d/1TWR4WKXV3vnUaYADlH9ZvRC79Z-zQBgM/view?usp=sharing
Having the dialog box resize to fit only the shown options is tricky, but the first step will be to ensure that the Panel object (which should have the Content Size Fitter component to resize itself based on its children) only has the same number of immediate enabled children as there are available options. That is, if you have 5 slots but only 4 are shown (as in your screenshot), then 1 of Panel's immediate children is disabled.
I'm not clear from your Hierarchy - are the Images attached to the "GameObject" objects, themselves parents of each of the "btnOption" objects?
You'll need to arrange the Hierarchy so that each option is of the form:
i.e. the Image and Text components are on separate GameObjects, but have the same parent and depth as one another.
That way, both the Text and Images will be disabled when their parent Button is disabled.
You can then use the Button's Transition settings to configure what exactly changes colour, if at all, and how.
There's a few approaches, but the approach taken by this page on the AC wiki involves switching "Input method" based on what input button was last detected:
https://adventure-creator.fandom.com/wiki/Switching_input_method_dynamically
Hey @ChrisIceBox (thanks again for all this help, you're wonderful), my reasoning for the hierarchy was that assigning an empty parent object to each button allowed me to move and resize them as I wished, whereas before they were locked to a strict grid. My hesitation with assigning the portraits to individual image elements is (correct me if I'm wrong) I'm under the impression that the fields in the ConversationUI prefab are specifically looking for a button element to attach them to, and the image data for that is coming from the linked button. So adding an image element wouldn't work as that image is governed by the one being assigned in the Conversation, and I want to be able to change those images per each individual dialog option through the game.
The Image components will be controlled by the Conversation option, yes - in the same way that the Text components will.
I'm not suggesting you embed the portrait images directly within the UI - just have the Image components be present so that they can be controlled. Unless I'm misunderstanding your intent here.
It is indeed the Button that gets mapped to the slot - and this'll be the GameObject that gets disabled when the option is hidden. If you want to resize the UI dynamically, then, you'll need to ensure there aren't any visual UI components between the Buttons and the Layout Group components in the Hierarchy.
AC will only affect the first-found Image component associated with each slot, however - starting with the one (if present) on the Button itself.