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:

Re: How to add image in dialogue

Post by supadupa64 »

Alright! Everything's working perfect now! This is great! Thanks!!!
User avatar
supadupa64
Posts: 200
Joined: Sun Mar 06, 2016 9:40 pm
Contact:

Re: How to add image in dialogue

Post by supadupa64 »

Actually, for some reason I can't change the size of the camera, or maybe it's the render to make it wider. I can make it more vertical, but can't make it more horizontal. I can make it wider, but it gets stretched.
User avatar
Tony Li
Posts: 21679
Joined: Thu Jul 18, 2013 1:27 pm

Re: How to add image in dialogue

Post by Tony Li »

Are you talking about the image UI element on the dialogue UI? Or the camera shot itself?

If it's the image UI element, the settings in the Image section are a bit complicated. But that's because it's a direct translation of Unity's GUI.DrawTexture API, which is also a bit complicated.

Try changing the Scale Mode. This specifies how to fix the image (the render texture) into the UI element's Scaled Rect.

To make the Scaled Rect wider, inspect Scaled Rect > Width, and increase the value. I think I set width and height to 128 pixels in the example.
Xpyke
Posts: 13
Joined: Sun May 22, 2016 11:29 am

Re: How to add image in dialogue

Post by Xpyke »

Hey Tony, I've stumbled upon this thread in a search to insert an image into a sequence, I found out that the easiest way to do so it to create an image in the canvas with an sprite attached to it, and inside my dialogue I would put a lot of SetActive() and keep changing from an image to another, but here's the deal:

I have this NPC that I want to talk to, his name is Harold and as I walk close by his name appear:

http://imgur.com/CyxGrPo

But as I arrive at the "cutscene" image this happens:

http://imgur.com/7KlsEfZ

How can I put the image above Harold's name and beneath my dialogue box? I tried to change the layers but to no avail... And if there's a better way to show a slideshow as a cutscene please let me know. And thanks for the amazing support!
User avatar
Tony Li
Posts: 21679
Joined: Thu Jul 18, 2013 1:27 pm

Re: How to add image in dialogue

Post by Tony Li »

Hi,

Do you essentially want to display an animated portrait? When do you want it to appear - during conversations or when the player targets the NPC with the Selector/ProximitySelector component?

For the animated portrait, if you have a series of images such as a sprite sheet, I suggest setting it up as an animation clip. Briefly, you'll have a Unity UI Image component and an Animator component. Create an animator controller with your animation clip, and assign it to the Animator component.

If you're displaying it during conversations, add the Image to your dialogue UI. In this case, you'll use the same Image for all NPCs. Create a separate animation clip for each NPC, and add them as separate, unconnected animation states in your animator controller. In each conversation's START node, use the AnimatorPlay() sequencer command to play the animation state that corresponds to the NPC.

If you're displaying it when the player targets the NPC (btw, which selector component are you using?), create a separate world space canvas for each NPC, and make it a child of the NPC so it follows the NPC. Add an Image to the world space canvas. You can create a separate animator controller for each NPC and assign it to the world space canvas, and set the animated portrait state to play as the default state. If this is what you want to do, and once I know which selector component you're using, I can describe how to make it appear only when the player targets the NPC.

If I'm totally off base, please steer me in the right direction or post a mock-up of how you want it to look.
Xpyke
Posts: 13
Joined: Sun May 22, 2016 11:29 am

Re: How to add image in dialogue

Post by Xpyke »

Now I see that I was not so clear with my question, sorry about that...

This is an example of what I want to do:
http://gamelab.mit.edu/wp/wp-content/up ... c2vnss.png

An image that covers the screen, but with the options/text above it, but my problem is that when I get near an npc (harold on the previous image), his name gets above the image and that's what I want to remove, I'm using the proximity selector and his name appears when I enter his trigger radius, is there a way to deactivate or hide his name beneath the image? Sorry if I'm not being clear, my native language is not english...
User avatar
Tony Li
Posts: 21679
Joined: Thu Jul 18, 2013 1:27 pm

Re: How to add image in dialogue

Post by Tony Li »

Hi,

If I understand correctly, you just need to add a Set Component Enabled On Dialogue Event component to the player. Set the trigger to On Conversation. Add the Proximity Selector component to the On Start and On End events. In On Start, set if state to False. While the player is in a conversation, the proximity selector will be disabled, so it won't show the label.

If you want the proximity selector to never show the label at any time, just untick Use Default GUI.

To show the large NPC image, you can still use the Image techniques I described in my previous post.
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 noticed quite a bit of attention to this thread, so I'll post what the end result currently is. It's a small image that shows during conversation. It's a camera so you can place anything you want inside it. In this case I placed the quest item you will be looking for. The reason it's a camera is because it's a motion graphic, so the quest item spins in a circle.
shot10_low.jpg
shot10_low.jpg (78.61 KiB) Viewed 2062 times
User avatar
Tony Li
Posts: 21679
Joined: Thu Jul 18, 2013 1:27 pm

Re: How to add image in dialogue

Post by Tony Li »

Nice. Using a camera is clever. It gives you the flexibility to point it at anything, and the motion makes it more interesting than a static image. Thanks for sharing!
Xpyke
Posts: 13
Joined: Sun May 22, 2016 11:29 am

Re: How to add image in dialogue

Post by Xpyke »

Guys, sorry to unburrow this topic, but as I was trying to accomplish the things said above I came to a stop, I am using the "SetEnabled (P Controller, flip, listener)" sequence command, where "P Controller" is the name of the script component that controls my player movement, but it keep giving me an error saying it couldn't locate the component no matter how I write its name... The same is happening with the proximity selector... What am I doing wrong here?
Post Reply