Tweens, Anchors and other Joys...

[Holy Manfred]

It is probably kind of a common problem and I searched around quite a bit but couldn't find any way to figure it out so far:
I am building a menu which has buttons 'flying in' from the left using a TweenPosition component and I am having problems making it work in different aspect ratios.

The UI Root is set to pixel perfect and the menu is being instantiated from a prefab. All static elements within the menu are anchored and are placed nicely even in weird resolutions due to the fantastic anchor system.
I have no idea however what the recommended way of having objects tween in would be. The TweenPosition values are kind of absolute, so when I switch my resolution from a 4:3 to 16:9 resolution for example the buttons don't fly in all the way anymore, because the new 4:3 screen is 'not wide enough' (see attachment). I'd anchor the buttons but position tweens do not work on anchored objects.

What would be the recommended way of having my buttons enter the screen nicely tweened and properly positioned in all aspect ratios? Adding a 'relative' option to the tween script? Positioning the buttons manually after the menu opened in script? Any suggestions are welcome.

[ArenMook]

You need to make your UI modular by using anchors. You can't simply put everything relative to the center and call it a day. You actually have to have multiple anchor points. Look at the very first example that comes with NGUI. It has widgets attached to all corners of the screen that stay there, regardless of the screen size.

[Holy Manfred]

Well, having stuff modular is not so much the problem. I have everything working nicely down from 800x600 up to 1920x1080. Maybe I was a bit unclear, but my question was rather about how to deal with tweening buttons and suchm especially with acnhored objects. As I said, when things are anchored, I cannot tween them and when I don't anchor them and put a position tween on them it messes up the positioning on different aspect ration.

[ArenMook]

You won't be able to tween anchored objects, but you can tween children of anchored objects.

Although thinking about it, adding some kind of support for tweening anchors would be a good idea.

Edit: I've gone ahead and done just that. In the next update you will be able to use TweenPosition to move anchored widgets.

[Holy Manfred]

Dude, you rock! Thanks a lot for adding that!

[dleight]

Thanks for adding this. I have a couple of questions:

1.  How do I set the from and to under tween position so that they are relative like the anchor numbers?  I'm trying to have the menu items move in from the right and have the right edge of the button line up with the right edge of the screen.

EDIT: just to be clear, I'm able to do this for any one device, just not all of them since the xyz is different for each device.

I am also using this for a menu, but was would like to have a delay between each tween. Is there a way to do this?  If I use the standard start delay in the tween position script, the button stays at it's anchor point at the right edge of the screen and, after the delay, starts it's tween. That makes sense, but I'm wondering how to go about getting around it.  Any help is appreciated.

[ArenMook]

Anchors can be relative, but tweens can't be. If you want a relative tween, I suggest writing custom code for that instead. It's much easier to tween to a position that you know is going to be off-screen on all devices, if that's what you're trying to do.

I'm not sure I understand the last question. Getting around what? A delay is just that -- a delay before the tween starts playing. Also note that you can always modify the curve and have it start playing at something like 0.5 instead of 0. That will effectively make it wait to 50% of duration before playing, thus creating a delay.

[dleight]

I just ended up going with tween alphas so that I could keep them anchored and stretching in all environments.

Now, though, I'm having an issue where the first 3 menu buttons tween in together (Tween Alpha from 0 to 1), while the 4th button seems to lag behind.  The menu is the first thing to come up when the app launches.  So, the way this presents itself is that when the app launches, the first 3 buttons go to alpha 0 before they ever appear (which is exactly what I want), while the forth button is visible (alpha 1) for a second before going to alpha 0.  It finishes it's tween, as desired, with the other 3 buttons.  I have deleted the 4th button and recreated it both from scratch and by duplicating the other buttons, but can't get it to work.  If I add a 5th button, it does the same thing as the 4th.  Any ideas what could be causing this?  Thanks for your help.

[ArenMook]

No, but you can figure out what's happening by putting a

1. Debug.Log(Time.frameCount + ": " + NGUITools.GetHierarchy(gameObject));

inside UITweener.Start method. It should give you an idea of when each Start function is being fired.

[whitedrow]

Hi,

can you tell when the update with the relative position tweening will be in the asset store?

Greetings.

[ArenMook]

Relative to what though?

[whitedrow]

Relative to your post from above ;-)

Edit: I've gone ahead and done just that. In the next update you will be able to use TweenPosition to move anchored widgets.

[ArenMook]

The TweenPosition doesn't move relative values. Only absolute values on anchors. Each anchor has 2 values -- relative (percentage-based), and absolute (added as-is). Adjusting absolute values is simple -- you just add X pixels in one place, or remove them in another. Adjusting relative values is not as simple. Relative, percentage-based, are relative to something. One can be relative to widget A's dimensions, another -- to widget B's dimensions. You can't tween that as easily.

That's why I asked "relative to what?".

The Asset Store version already has the ability to tween anchored widgets, but it does so by adjusting the absolute values on anchors.