Widgets fade in/out

[jeldrez]

I'm really new with Unity and NGUI, I was using another own company engine, so I can't found a lot of things.

But I have a similar opacity question related to widgets, I need to create the initial screen when logos appears.
I've already created the scene with the logos and a white background, now I need to start fading in/out each one separated for a period of time, and when it's over move to the main menu screen, that I suppose it's a new scene.

Any help will be great!

[Cripple]

You can add a TweenAlpha on every widget you want to fade in.

You set the 'From' to 0 and the 'To' to 1, the duration and the easing function (how the value of the alpha changes over time). You may also setup a callback to get the event when the Tweening is ended

[jeldrez]

Thanks!
the callbacks are scripting I've to do to call the other image?

[jeldrez]

Ok, I get that I've to used 'Event Receiver' and 'Call When Finished' states, but I don't get how to use it.

Actually I have:

Logo01
Method: EasyIn
Style: Once
Delay: 0
Duration: 3
Tween Group: 1
Event Receiver: None(Game Object)
Call When Finish: [None]
From: 0
To: 1

Logo02
Method: EasyIn
Style: Once
Delay: 10
Duration: 3
Tween Group: 2
Event Receiver: None(Game Object)
Call When Finish: [None]
From: 0
To: 1

Logo03
Method: EasyIn
Style: Once
Delay: 20
Duration: 3
Tween Group: 3
Event Receiver: None(Game Object)
Call When Finish: [None]
From: 0
To: 1

What I need to do it's fading in Logo01 and showing it for 3 seconds, then fade it out + delay 1 sec + repeat action with Logo02 + same with Logo03

Which it's the correct way to do that?

PS: the logo images are Sliced Sprites into the Panel.

Thanks in advance!

[Cripple]

Ah ok I see now what you want to do.

The best way to do it is by code in a specified script. This script animates all children widgets one by one using this pattern (FadeIn -> Pause -> FadeOut).

I have done it for you, just create an Empty GameObject and attach the next script. Parent all your SlicedSprite (or any widget you want to animate) to it. Start the game

You can modify the function OnAnimationEnd() to add the stuff you need or make it more generic by adding event callback etc..

1. using UnityEngine;
2. using System.Collections;
3. using System.Collections.Generic;
4.  
5. public class LogosAnimation : MonoBehaviour {
6.  
7.     public float FadeInDuration = 1.0f;
8.     public float PauseDuration = 3.0f;
9.     public float FadeOutDuration = 1.0f;
10.  
11.     private enum FadeType
12.     {
13.         FadeOut = -1,
14.         Pause = 0,
15.         FadeIn = 1
16.     }
17.  
18.     private float _duration = 0.0f;
19.     private float _time = 0.0f;
20.     private int _currentWidget = 0;
21.     private FadeType _currentAnimation;
22.     UIWidget[] _widgets;
23.  
24.         // Use this for initialization
25.         void Start ()
26.     {
27.         _widgets = GetComponentsInChildren<UIWidget>();
28.        
29.         foreach (UIWidget widget in _widgets)
30.         {
31.             SetWidgetAlpha(widget, 0.0f);
32.         }
33.  
34.         SetupAnimation(FadeType.FadeIn);
35.         }
36.  
37.     // Update is called once per frame
38.     void Update()
39.     {
40.         _time += Time.deltaTime;
41.  
42.         // If there is a widget to animate
43.             if( _currentWidget < _widgets.Length)
44.         {
45.             // Check if the current animation is done.
46.             if(_time > _duration)
47.             {
48.                 if (_currentAnimation == FadeType.FadeOut)
49.                 {
50.                     // Animate the next widget
51.                     _currentWidget++;
52.                    
53.                     // Check if all widgets have been animated.
54.                     if (_currentWidget >= _widgets.Length)
55.                     {
56.                         OnAnimationEnd();
57.                     }
58.                     else
59.                     {
60.                         SetupAnimation(FadeType.FadeIn);
61.                     }
62.                 }
63.                 else
64.                 {
65.                     // Next widget animation
66.                     SetupAnimation(_currentAnimation - 1);
67.                 }
68.             }
69.             else
70.             {
71.                 // Apply the alpha modification;
72.                 UpdateWidgetAlpha(_widgets[_currentWidget], Time.deltaTime * ((float)_currentAnimation));
73.             }
74.         }
75.         }
76.  
77.     private void OnAnimationEnd()
78.     {
79.         // Do some stuff when the animation is done.
80.         // Call the next level for example.
81.     }
82.  
83.     private void SetWidgetAlpha(UIWidget widget, float alpha)
84.     {
85.         Color color = widget.color;
86.         color.a = alpha;
87.         widget.color = color;
88.     }
89.  
90.     private void UpdateWidgetAlpha(UIWidget widget, float toAdd)
91.     {
92.         SetWidgetAlpha(widget, widget.alpha + toAdd);
93.     }
94.  
95.     private void SetupAnimation(FadeType type)
96.     {
97.         _time = 0;
98.         _currentAnimation = type;
99.  
100.         switch (type)
101.         {
102.             case FadeType.FadeIn:
103.                 _duration = FadeInDuration;
104.                 break;
105.             case FadeType.Pause:
106.                 _duration = PauseDuration;
107.                 break;
108.             case FadeType.FadeOut:
109.                 _duration = FadeOutDuration;
110.                 break;
111.  
112.         }
113.     }
114. }
115.  
116.  

[jeldrez]

Thanks a lot dude!
I'm going to try it and tell you how it works.

Merry Christmas!

Best regards.

[jeldrez]

Thanks a lot dude, it works great!
I'm not sure how to change the screen, I should create a new scene? And how I change it?

EDIT
WHAT A N00B! sorry!

I just realized about the OnAnimationEnd(), I would add: Application.LoadLevel( "SplashScreen" ); to change the screen when it's done.
thanks a lot!

[jeldrez]

There's any way to change the Widgets order on the Panel? because know it takes the inverse order how I added to the panel. So the first widget it's the last image it shows.

How can I arrange that?

[ArenMook]

Depth parameter controls what's drawn in what order.

[jeldrez]

Yeps, I get it, but what I'm looking for it's how it's how to arrange the widgets in the Cripple's script above.

_widgets = GetComponentsInChildren<UIWidget>();

So, when it's getting the widgets from the panel it's the order how I created, there's any way to change this?

[Cripple]

Hi,

This is a C# question, you should document yourself on google for those.

Anyway here is the solution, you can use the static Method Reverse of Array to do that for you

1. System.Array.Reverse(_widgets);

[jeldrez]

Ok, but I thought that it could be a unity/ngui thing to know the widgets order inside the panel.

Thanks anyway

[jeldrez]

Ok, finally I got what I want (thanks to a friend).
Now I can arrange the widgets using their depth.

1. using UnityEngine;
2. using System.Collections;
3. using System.Collections.Generic;
4.  
5. public class SRC_LogosAnimation : MonoBehaviour {
6.  
7.     public float FadeInDuration = 1.0f;
8.     public float PauseDuration = 3.0f;
9.     public float FadeOutDuration = 1.0f;
10.  
11.     private enum FadeType
12.     {
13.         FadeOut = -1,
14.         Pause = 0,
15.         FadeIn = 1
16.     }
17.  
18.     private float _duration = 0.0f;
19.     private float _time = 0.0f;
20.     private int _currentWidget = 0;
21.     private FadeType _currentAnimation;
22.     UIWidget[] _widgets;
23.         UIWidget[] children;
24.  
25.     // Use this for initialization
26.     void Start ()
27.     {
28.         _widgets = GetComponentsInChildren<UIWidget>();
29.                
30.                 children = new UIWidget[_widgets.Length];
31.                
32.                 foreach (UIWidget widget in _widgets)
33.         {
34.                 children[widget.depth-1] = widget;    
35.         }
36.                
37.                 // Reverse order
38.                 // [CODE] System.Array.Reverse(_widgets);
39.                
40.                 //UIWidget.depth
41.  
42.        
43.        /* foreach (UIWidget widget in _widgets)
44.         {
45.             SetWidgetAlpha(widget, 0.0f);
46.         }
47.                  */
48.                 for(int i=0;i < _widgets.Length;i++)
49.                 {
50.                         SetWidgetAlpha(children[i], 0.0f);
51.                 }
52.         SetupAnimation(FadeType.FadeIn);
53.     }
54.  
55.     // Update is called once per frame
56.     void Update()
57.     {
58.         _time += Time.deltaTime;
59.  
60.         // If there is a widget to animate
61.         if( _currentWidget < _widgets.Length)
62.         {
63.             // Check if the current animation is done.
64.             if(_time > _duration)
65.             {
66.                 if (_currentAnimation == FadeType.FadeOut)
67.                 {
68.                     // Animate the next widget
69.                     _currentWidget++;
70.                    
71.                     // Check if all widgets have been animated.
72.                     if (_currentWidget >= _widgets.Length)
73.                     {
74.                         OnAnimationEnd();
75.                     }
76.                     else
77.                     {
78.                         SetupAnimation(FadeType.FadeIn);
79.                     }
80.                 }
81.                 else
82.                 {
83.                     // Next widget animation
84.                     SetupAnimation(_currentAnimation - 1);
85.                 }
86.             }
87.             else
88.             {
89.                 // Apply the alpha modification;
90.                 //UpdateWidgetAlpha(_widgets[_currentWidget], Time.deltaTime * ((float)_currentAnimation));
91.                                 UpdateWidgetAlpha(children[_currentWidget], Time.deltaTime * ((float)_currentAnimation));
92.             }
93.         }
94.     }
95.  
96.     private void OnAnimationEnd()
97.     {
98.         // Do some stuff when the animation is done.
99.         // Call the next level for example.
100.                 Application.LoadLevel(1);
101.     }
102.  
103.     private void SetWidgetAlpha(UIWidget widget, float alpha)
104.     {
105.         Color color = widget.color;
106.         color.a = alpha;
107.         widget.color = color;
108.     }
109.  
110.     private void UpdateWidgetAlpha(UIWidget widget, float toAdd)
111.     {
112.         SetWidgetAlpha(widget, widget.alpha + toAdd);
113.     }
114.  
115.     private void SetupAnimation(FadeType type)
116.     {
117.         _time = 0;
118.         _currentAnimation = type;
119.  
120.         switch (type)
121.         {
122.             case FadeType.FadeIn:
123.                 _duration = FadeInDuration;
124.                 break;
125.             case FadeType.Pause:
126.                 _duration = PauseDuration;
127.                 break;
128.             case FadeType.FadeOut:
129.                 _duration = FadeOutDuration;
130.                 break;
131.  
132.         }
133.     }
134. }
135.  

Thanks Cripple!