Create my own UI - How to edit dialogues animation

Announcements, support questions, and discussion for the Dialogue System.
Post Reply
jghesquiere
Posts: 10
Joined: Thu Aug 04, 2016 10:58 am

Create my own UI - How to edit dialogues animation

Post by jghesquiere »

Hello,

I'm currently working with the "SF Unity UI Dialogue UI" provided in the OVRScene package.

With this UI, the buttons appears with a small fade in. But I don't want it. How to edit this ?

Also, I would like to do a "POP" effect for the NPC dialogues like this : https://www.youtube.com/watch?v=5Z5kvkdnEs8

Here is the image that I want to make poping : Image (the text will be inside, and not typerwriter effect)

Thank you :D
User avatar
Tony Li
Posts: 22107
Joined: Thu Jul 18, 2013 1:27 pm

Re: Create my own UI - How to edit dialogues animation

Post by Tony Li »

Hi,

This requires being a little familiar with two things in Unity: UI RectTransforms and Animation.

Briefly, here are the steps:

1. Set the pivot point of the cartoon bubble panel's RectTransform to the point of its tail (i.e., at the bottom).

2. Inspect the panel that you want to animate. If you want the cartoon bubble to pop open at the beginning of the conversation, inspect the Dialogue Panel. If you want it to pop open with every line that the NPC speaks, inspect the NPC Subtitle Panel. If you're using the NPC Subtitle Panel, expand its Animation Transitions section. Set the Show field to "Show" and the Hide field to "Hide".

3. Make sure the panel has an Animator component. Create a new AnimatorController and assign it to the Animator. You can make a copy the SF Unity UI Dialogue UI's AnimatorController. This makes it easier because it's already set up; you will only need to assign different animation clips to the states.

4. Then open the Animation window. Create a new animation clip, maybe called "PopOpen". Add a key for the bubble panel's Scale. At keyframe 0, set the scale to (0,0,0). At a later keyframe (e.g., 0:10), set the scale to (1,1,1).

5. Finally, add/replace the animation clips in your AnimatorController.

When you play your scene, keep the Animator window open, and inspect the bubble panel. This will show the panel's current animation state. When you start a conversation, it should transition to the Show state.
jghesquiere
Posts: 10
Joined: Thu Aug 04, 2016 10:58 am

Re: Create my own UI - How to edit dialogues animation

Post by jghesquiere »

You can make a copy the SF Unity UI Dialogue UI's AnimatorController
Thank you, but I will need some help.

I don't know how I can use the AnimatorController from the SF Unity UI.
I know how works the animator. I know how works the trigger (Show and Hide ? Wright).
When I try something, I have a couple of bugs like :
- The panel show up a the begenning of the conversation, it shouldn't, because the player have to selection a button.
- The animation loops on the "Show" animation after triggering the "Show" trigger

Tell me if you need some screenshots or videos.

Thank you !
User avatar
Tony Li
Posts: 22107
Joined: Thu Jul 18, 2013 1:27 pm

Re: Create my own UI - How to edit dialogues animation

Post by Tony Li »

Hi,

I'll send you an example later today. Would you please send a copy of the cartoon bubble image to tony (at) pixelcrushers.com? I'll use it in the example so you can import it and use it right away.
User avatar
Tony Li
Posts: 22107
Joined: Thu Jul 18, 2013 1:27 pm

Re: Create my own UI - How to edit dialogues animation

Post by Tony Li »

Thank you for sending the files. I replied with a unitypackage that contains an example scene and animation clips.
jghesquiere
Posts: 10
Joined: Thu Aug 04, 2016 10:58 am

Re: Create my own UI - How to edit dialogues animation

Post by jghesquiere »

Sorry for the late.

Thank you, it works great. ;)
User avatar
Tony Li
Posts: 22107
Joined: Thu Jul 18, 2013 1:27 pm

Re: Create my own UI - How to edit dialogues animation

Post by Tony Li »

Happy to help!
Post Reply