How to add image in dialogue

Announcements, support questions, and discussion for the Dialogue System.
User avatar
supadupa64
Posts: 200
Joined: Sun Mar 06, 2016 9:40 pm
Contact:

How to add image in dialogue

Post by supadupa64 »

How can I add an image in a dialogue conversation?
User avatar
Tony Li
Posts: 22108
Joined: Thu Jul 18, 2013 1:27 pm

Re: How to add image in dialogue

Post by Tony Li »

What kind of image?

To show actor portrait images like below:
Image
assign images to the actors in your dialogue database, and configure your dialogue UI with UI elements for portrait images. (The Unity UI Generic Dialogue UI is configured for portrait images if you want to see an example, as is the Mobile prefab shown above.)

If you want to show images inline with your text, I recommend buying TextMesh Pro. Neither Unity UI nor legacy Unity GUI have built-in support for inline images. But with TextMesh Pro you can do things like this:
Image

If you just want an image to appear on the screen, you can use the SetActive() sequencer command. Create a GameObject with an image (for example, a Unity UI Image in a Canvas) and set it inactive. Then use SetActive() to activate the GameObject at the desired time.
User avatar
supadupa64
Posts: 200
Joined: Sun Mar 06, 2016 9:40 pm
Contact:

Re: How to add image in dialogue

Post by supadupa64 »

I'm looking to have an image of a quest item appear in the dialogue. Thanks for the idea! I'll just use the setactive sequence. I'm a fan of that.
User avatar
supadupa64
Posts: 200
Joined: Sun Mar 06, 2016 9:40 pm
Contact:

Re: How to add image in dialogue

Post by supadupa64 »

This is slightly unrelated, but I figure it is probably related somehow to dialogue UI. I'm using a camera with an image of my quest item to show during the dialogue screen.

The problem is that if the screen size changes, the image will be in a different spot. I'm trying to lock it into the dialogue ui so it shows the same size every time on the screen. The camera with image is currently behind the dialogue, which I assume is an easy fix also if I can adjust the canvas order somehow. See image below:

1) Keep image same size so it fits in dialogue window
2) Place image in front of dialogue window
dialogueUI.jpg
dialogueUI.jpg (166.16 KiB) Viewed 3609 times
User avatar
Tony Li
Posts: 22108
Joined: Thu Jul 18, 2013 1:27 pm

Re: How to add image in dialogue

Post by Tony Li »

A common way to do this is to use a render texture.

1. Create a render texture in your project.

2. Set up your camera so it's pointing to the object. Assign your render texture to the camera's Target Texture.

3. Add a Raw Image UI element to your UI, and assign the render texture to it.
User avatar
supadupa64
Posts: 200
Joined: Sun Mar 06, 2016 9:40 pm
Contact:

Re: How to add image in dialogue

Post by supadupa64 »

Great, so I've got it working, I think. I say I think because it shows behind the dialogue window and I'm trying to figure out how to bring it to the front. I really appreciate the help!!!
User avatar
Tony Li
Posts: 22108
Joined: Thu Jul 18, 2013 1:27 pm

Re: How to add image in dialogue

Post by Tony Li »

Are you using a render texture, or are you rendering straight from the camera? The render texture gives you the most control over positioning.

If you're rendering straight from camera (let's call it Camera2), set your canvas to Screen Space - Camera and assign a camera. Then set Camera2's Depth field to a higher value than the camera assigned to the Screen Space - Camera canvas. This will make it render on top of the canvas.
User avatar
supadupa64
Posts: 200
Joined: Sun Mar 06, 2016 9:40 pm
Contact:

Re: How to add image in dialogue

Post by supadupa64 »

Yeah I was doing that and it doesn't work because of the screen size changes, then the camera position changes. So I started using a texture render which I think works perfect except it's not rendering on top the dialogue window.
User avatar
Tony Li
Posts: 22108
Joined: Thu Jul 18, 2013 1:27 pm

Re: How to add image in dialogue

Post by Tony Li »

Is your render texture vertically lower in the Hierarchy view? Unity UI renders things from top to bottom in the Hierarchy, so the UI elements that are lower down are rendered on top.

When you play the game and bring up the window, switch over to the Hierarchy view and play with the order to get it the way you want. Then stop the game and make the same changes at design time.
User avatar
supadupa64
Posts: 200
Joined: Sun Mar 06, 2016 9:40 pm
Contact:

Re: How to add image in dialogue

Post by supadupa64 »

I think the problem might be the UI. I use another scene for my UI which includes main menu and pause menu stuff. But my main scene uses Dialogue Manager which holds my dialogue UI stuff. It doesn't work if I try to put it in the Dialogue UI. I've moved it all around and it doesn't show above. I don't know if there is a right way to set up a UI, but I have UI's in two different scenes.
Post Reply