Tasharen Entertainment Forum

Support => NGUI 3 Support => Topic started by: xikky on August 04, 2013, 06:08:53 AM

Title: I need help with Tweens
Post by: xikky on August 04, 2013, 06:08:53 AM
I don't think I really understand how these work. What I need to do is to tween panel alpha to create fade in/out effect when I activate/deactivate panels. I tried some methods with no successful results yet, but now I kind of discovered TweenPanelAlpha component and I would like to know how to use this.

The Tween is only working on the first time the panel is activated. How can I tween panel alpha each time the panel is activated? And how to tween panel alpha when panel is deactivated? Do I need two components of tween panel alpha on each panel to do so?

Pls help! Thank you!
Title: Re: I need help with Tweens
Post by: ArenMook on August 04, 2013, 07:04:58 AM
TweenAlpha.Begin(panelGameObject, duration, targetAlpha);
Title: Re: I need help with Tweens
Post by: xikky on August 05, 2013, 03:33:27 AM
I still can't get this to work :/

My last attempt was to attached a UIPanelAlpha and a TweenAlpha script to my Panel. Then when a button is clicked to display the panel:

  1.  
  2. var panelAlpha:UIPanelAlpha;
  3.  
  4. function OnClick () {
  5.        
  6.         panelAlpha.alpha = 0.0f;
  7.         NGUITools.SetActive(pausePanel, true);
  8.         TweenAlpha.Begin(pausePanel, 2.0, 1.0);
  9.         Time.timeScale = 0.0001;
  10. }
  11.  
  12.  

I've added UIPanelAlpha to give the panel the initial alpha needed.

Been playing around this four a couple of hours now and I still can't get it to work, even though initially this would be quite a simple tweek. Pls be patient with me and show me how I can do this.

Thank you loads!
Title: Re: I need help with Tweens
Post by: ArenMook on August 05, 2013, 08:10:11 AM
Why are you changing the timeScale?

What is "pausePanel"?
Title: Re: I need help with Tweens
Post by: xikky on August 06, 2013, 03:29:44 AM
Sry for the late reply but I was away from home. Pause panel is the resume/back to menu panel which when triggered, timeScale is set to .0001 to stop game physics. Removing this function still does not make the tween work though.

How can I make a tween available on a number of panels, so that when the user navigates from one panel to another, the panels fade in/out accordingly?
Title: Re: I need help with Tweens
Post by: xikky on August 06, 2013, 06:11:31 AM
I managed to find a work around but still got one problem.

To fade in/out I'm attaching 2 scripts to each panel: UIPanelAlpha and another Script I created - ChangeAlpha

Below I'm posting ChangeAlpha Script for those users who might want to take my approach - Totally works for panel fade in and fade out

The only problem is that when I fade in a panel, buttons appear as disabled (but do not act like disabled) - the button color tint is changed to any color that is set as disabled in UIButton. OnHover/OnClick colour tint work fine, and after OnHover, the button is changed back to original colour (not to disabled). Can you point me to why this is happening?

  1. #pragma strict
  2.  
  3. private var fade:float;
  4. private var realTime:float;
  5. private var difference:float;
  6. private var panelAlpha:UIPanelAlpha;
  7.  
  8. function Awake () {
  9.        
  10.         fade = 0.0;
  11.         realTime = 0.0;
  12.         difference = 0.0;
  13.         panelAlpha = GetComponent(UIPanelAlpha);
  14. }
  15.  
  16. function FadeOut (time:float, alphaFrom:float, alphaTo:float) {
  17.        
  18.         panelAlpha.alpha = alphaFrom;
  19.         realTime = Time.realtimeSinceStartup;
  20.         fade = Time.realtimeSinceStartup - realTime;
  21.         difference = alphaFrom - alphaTo;
  22.        
  23.         while (fade < time) {
  24.                
  25.                 fade = time - (Time.realtimeSinceStartup - realTime);
  26.                 panelAlpha.alpha = fade/time * difference;
  27.                 yield;
  28.         }
  29. }
  30.  
  31. function FadeIn (time:float, alphaFrom:float, alphaTo:float) {
  32.        
  33.         panelAlpha.alpha = alphaFrom;
  34.         realTime = Time.realtimeSinceStartup;
  35.         fade = Time.realtimeSinceStartup - realTime;
  36.         difference = alphaTo - alphaFrom;
  37.        
  38.         while (fade < time) {
  39.                
  40.                 fade = Time.realtimeSinceStartup - realTime;
  41.                 panelAlpha.alpha = fade/time * difference;
  42.                 yield;
  43.         }
  44. }
  45.  

All you need to do then is to call this from where ever:

  1.                 NGUITools.SetActive(GameObjectPanel, true);
  2.                 GameObjectPanel.GetComponent(ChangeAlpha).FadeIn(0.25, 0.0, 1.0);
  3.  
Title: Re: I need help with Tweens
Post by: xikky on August 07, 2013, 02:10:27 AM
This solutions brings up another problem. I have noticed that when fading in, disabled widgets within the panel will still appear. I'm lost now, cannot figure out how to properly do fading to panels :( if any one can help pls do so
Title: Re: I need help with Tweens
Post by: xikky on August 07, 2013, 03:46:50 AM
I also tried fading UIPanel's alpha, this time using UIButtonPlayAnimation script, but fonts in widgets do not appear on fade in. I think panel alpha settings are bugged :(
Title: Re: I need help with Tweens
Post by: ivomarel on August 07, 2013, 04:16:44 AM
Hey Xikky,

To work with alpha-tweens on panels, just use the TweenAlpha-script. I quickly tested:

Create a button, add the ButtonTween-script (does nothing except for calling the tween)

Create a panel, add the TweenAlpha-script.

Set up the ButtonTween script to target the panel, set Play Direction to toggle
Set up the TweenAlpha-script to tween from 0 to 1.

Should work, it works for me at least.
Title: Re: I need help with Tweens
Post by: xikky on August 07, 2013, 10:33:05 AM
Thanks a lot! This is what I asked for in the first place. If I need to tween from script (switching from panel to panel on timer not on button) would it be a good approach to place a ButtonTween script on a panel and call the Play method?
Title: Re: I need help with Tweens
Post by: ArenMook on August 08, 2013, 10:17:58 AM
Starlink UI kit has a solid system for switching between windows easily and in a smooth fashion. Complete with "go back" functionality at that.

I suggest you do it via code (ie: TweenAlpha.Begin). Don't set up your tweens beforehand. Better yet, use animations, and trigger them using either ActiveAnimation.Play or UIButtonPlayAnimation.