Page 1 of 1

Create my own UI - How to edit dialogues animation

Posted: Fri Aug 19, 2016 11:41 am
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

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

Posted: Fri Aug 19, 2016 4:13 pm
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.

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

Posted: Fri Aug 26, 2016 9:43 am
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 !

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

Posted: Fri Aug 26, 2016 10:09 am
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.

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

Posted: Fri Aug 26, 2016 9:42 pm
by Tony Li
Thank you for sending the files. I replied with a unitypackage that contains an example scene and animation clips.

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

Posted: Thu Sep 01, 2016 9:47 am
by jghesquiere
Sorry for the late.

Thank you, it works great. ;)

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

Posted: Thu Sep 01, 2016 9:55 am
by Tony Li
Happy to help!