Author Topic: transition between menu's  (Read 9437 times)

Roots

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 6
    • View Profile
transition between menu's
« on: February 03, 2015, 01:41:54 PM »
Hi,

i know this question was asked before and I looked at several answers but not clear still how one can easily transition from menu a to menu b.

I created 2 UIpanels and when the user clicks button on menu a my code will de-activate the menu a uipanel and activate menu b uipanel (using SetActive function).

What is the  easiest to have a smoother transition between these two menu's? I don't mind if it is an animation or a fade, was hoping there are some OOTB functions I can simply leverage (and not have to manually code the alpha for each UIWidget for instance).

Any sample code or links to solutions would be greatly appreciated.

Thanks

StabbAmonte

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 1
  • Posts: 7
    • View Profile
Re: transition between menu's
« Reply #1 on: February 04, 2015, 01:15:51 AM »
You can use TweenPosition or TweenAlpha or a combination of the two to create a simple transition.  Just add those scripts to your Menu objects and in your code where you are calling SetActive to enable/disable the Menus use the Tween objects PlayForward() to activate and PlayReverse() to deactivate.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: transition between menu's
« Reply #2 on: February 05, 2015, 09:15:36 AM »
Easiest? Starlink UI kit comes with a window transition framework built-in where you just go UIWindow.Show(...). It keeps history for you so you can UIWindow.GoBack(). I've also posted that script here on the forum ages ago, although I don't have a link on hand.

Aside from that, TweenAlpha.Begin(firstGameObject, 0.25f, 0f); to fade out one, then TweenAlpha.Begin(secondGameObject, 0.25f, 1f); to fade in the other.

Roots

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 6
    • View Profile
Re: transition between menu's
« Reply #3 on: February 05, 2015, 11:03:00 PM »
Ok thanks for those suggestions.

I tried the TweenAlpha.Begin(FirstGameObject, 0.25f, 0f) and  TweenAlpha.Begin(SecondGameObject, 0.25f, 1f) but nothing is really happening.

A couple of questions, maybe my approach is incorrect, NGUI has evolved a lot since my purchase and usage of NGUi 1.5 years ago :)

Right now my menu is build using basic NGUI UIPanels say UIPanel1 and UIPanel2. My main game script has both these gameobjects referenced an on start I simply SetActive false for UIPanel2.

Then UIPanel1 has one button and in the onclick of the that button I do:
UIPanel1.SetActive(false);
UIPanel2.SetActive(true);

Now I tried the suggestion below but I think I am missing something.
TweenAlpha.Begin(UIPanel1, 0.25f, 0f);
TweenAlpha.Begin(UIPanel2, 0.25f, 1f);

Any help?

Many thanks.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: transition between menu's
« Reply #4 on: February 06, 2015, 09:40:10 PM »
UIPanel1 and 2 must be actual game objects with a UIRect on them -- meaning a UIPanel or a widget (UIWidget, UISprite, UITexture). Have a look inside TweenAlpha to see how it works and what it works with.

Roots

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 6
    • View Profile
Re: transition between menu's
« Reply #5 on: February 07, 2015, 12:26:22 AM »
Ok, the UIpanel1 and UIpanel2 are gameobjects with a UIPanel. Will look at the TweenAlpha code example

So if I use TweenAlpha.Begin(UIPanel1, 0.25f, 0f) do i still need to do a SetActive(false) as well?

Thanks

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: transition between menu's
« Reply #6 on: February 08, 2015, 11:35:33 PM »
Ideally you will want to disable them at the end, yes. No need for them to stay enabled if they aren't needed. I suggest you have a look at the UIPlayTween script. It has a condition that lets you disable the object after animation finishes.

Roots

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 6
    • View Profile
Re: transition between menu's
« Reply #7 on: February 10, 2015, 11:58:35 AM »
Hi,

I just be doing something wrong but can't figure it out.

So I have two gameobjects and each one has a UIPanel. These are my menu1 and menu2 items. I only have 1 camera the UICamera as the game is the menu (is a training app).

Now on the menu1 I also haver a UIbutton and a onClick event. The OnClick event then calls the ButtonClick function in my main game script.

In the click event I basically want to fade out menu1 and fade in menu 2. The script below is attached to my "main" gameobject which is my game controller script. It has public references to all my menu's".

Can someone please correct my code? Also once the fade-out is completed or fade-in is completed I need to activate the gameobjects but not sure which event I can use?

Many thanks. I feel I am making a stupid mistake here but can't seem to see it myself....

public void ButtonClick(string buttonname)
{
   if(name == "menu-option-2")
      {
         TweenAlpha.Begin(menu1, 0.25f, 0f);
                        TweenAlpha.Begin(menu2, 0.25f, 1f);

                }
}

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: transition between menu's
« Reply #8 on: February 11, 2015, 07:23:59 PM »
Get rid of (string buttonname). Not sure why you have it there. When specifying a callback for the button's On Click notification, that string parameter will only get in the way.

Next, consider simply using the same setup I have for the Menu example. You place TweenAlpha scripts on the panels going from 0 to 1. You then use UIPlayTween attached to the button to start playing the tween. Since your one button click needs to activate tweens on both panels, add two UIPlayTween scripts -- one pointing to one playing it forward (fading in), the other pointing to the second panel playing it in reverse (fading out).

Disabling the game object after tween finishes is one of the options on UIPlayTween.

No coding necessary this way.

Roots

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 6
    • View Profile
Re: transition between menu's
« Reply #9 on: February 11, 2015, 08:26:17 PM »
Thanks will try this.

The reason I have the string buttonname is because all my buttons feed the onClick event up to this function call so each button has a small script that does this (probably obsolete):

void OnClick()
   {
      GameObject.Find("Main").GetComponentInChildren<Main>().ButtonClick(this.gameObject.name);
   }

Now I downloaded the latest NGUI but can't find the UIPlayTween script. Where can I find this?

Thanks for your patience and help so far!

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: transition between menu's
« Reply #10 on: February 11, 2015, 09:50:42 PM »
UIPlayTween is a part of NGUI, found in NGUI/Scripts/Interaction.

OnClick() function is called automatically by the event system. There is no need to assign it to a button On Click notification. Notifications themselves are called as a result of the OnClick() function call.