NGUI 3.0.9f7 multiplatform app

[Tripwire]

So i'm starting a new project with the latest NGUI and Unity 4.3. The app consists of 40+ screens using as much 9 slice scaling as possible. I'd like to know how to approach this using NGUI 3.0.8f7. I'm used to NGUI 2.7.0 with MultiPlatformToolkit, but i'd like to know if it is possible with the latest NGUI.

The resolutions i'm going to support:
IOS
iPhone 4  (960x640)
iPhone 5  (1136x640)

Android
1920x1080
1280x720
960x540
800x480

The app will be portrait only.

Thx!

[Shifty Geezer]

You can use relative anchors. I'm targeting every device with my app and relative positioning using anchors means I can lock my two UI panels to left and right sides of the screen, and the space between them will adapt to screen aspect. This is enough for simple UIs although working with trickier interactive elements has proven more than I can handle on my own, hence my posting on this forum just now.

[Tripwire]

You can use relative anchors. I'm targeting every device with my app and relative positioning using anchors means I can lock my two UI panels to left and right sides of the screen, and the space between them will adapt to screen aspect. This is enough for simple UIs although working with trickier interactive elements has proven more than I can handle on my own, hence my posting on this forum just now.

Thx! As I couldn't wait for an answer I started with using MultiPlatformToolkit which also works perfectly as far as setting positions. I haven't tried scaling yet.

[ArenMook]

New anchoring system is quite powerful and lets you do what you want in terms of positioning. Relative to screen size, fixed dimensions, combination of the two, relative to other widgets, etc.

[Tripwire]

New anchoring system is quite powerful and lets you do what you want in terms of positioning. Relative to screen size, fixed dimensions, combination of the two, relative to other widgets, etc.

So since i'm only using 9 slice scaled textures, the scaling shouldn't be a problem. I was thinking about this, what if I set the Anchor type to unified with the following settings on a UISprite:
Left:      Target Left
Right:    Target Right
Bottom: Target Center
Top:      Target Center

If i'm understanding the anchors correctly this would Center the UISprite and stretch the 9 Slice scaled texture along the left and right side of the screen. Is that the way to approach the use of anchors on a multiplatform app?

Edit:
I'm using HOTween to tween panels in and out of the screens. I noticed when changing to the NGUI Anchor system instead of MultiPlatformToolkit, the tweens aren't working anymore? Seems like when tweening a panel with unified Anchors the panel stretches instead of setting the position of the panel to -640 for instance.

[ArenMook]

It wouldn't center the sprite. It would be relative to the center vertically, however. Meaning if the screen gets bigger, the sprite will appear to be narrower vertically, and closer to the center (when in fact it will use the same number of pixels, it's just there will be more of them).

If you want to tween something, don't anchor it, or tween its child. You can't tween something that has been anchored.

[Tripwire]

It wouldn't center the sprite. It would be relative to the center vertically, however. Meaning if the screen gets bigger, the sprite will appear to be narrower vertically, and closer to the center (when in fact it will use the same number of pixels, it's just there will be more of them).

If you want to tween something, don't anchor it, or tween its child. You can't tween something that has been anchored.

Hmm so if i just use Unified and use the default settings when the UI is build it would scale correctly if building for instance for an iPhone 4 and then switching to iPhone 5?

If I can't Anchor it how do I make a multiplatform app with multiple screens in it? It seems impossible to me now I know Anchoring can't be used.

[ArenMook]

You can (and should) use anchors. You just can't tween an anchored object. Both anchors and tweens modify the widget's position. If you have two of them, then they are going to be fighting each other.

As I mentioned, use tweens on child objects. Anchor something, then tween its child. Nothing is preventing you from having a structure like this:

UIWidget (anchored)
- UISprite (tweened)

[Tripwire]

You can (and should) use anchors. You just can't tween an anchored object. Both anchors and tweens modify the widget's position. If you have two of them, then they are going to be fighting each other.

As I mentioned, use tweens on child objects. Anchor something, then tween its child. Nothing is preventing you from having a structure like this:

UIWidget (anchored)
- UISprite (tweened)

Hmm ok, that means that i'll be using a lot more tweens, because now i was only tweening the panels, not the individual objects. Because each sprite should be anchored to scale correctly, I should tween each sprite, and eacht button individually. This gives me way more work than not using Anchoring and switching back to NGUI 2.7.0 with MutliPlatformToolkit. I found some scripts though on the NGUI support forum which tweens an object which is anchored (scripts where made 2012), why aren't they included in NGUI then? Seems to save a lot of work for anyone who is making a complex gui.

[ArenMook]

You can still have a few tweens:

Panel (Anchored)
- GameObject (tweened)
-- Sprite
-- Label
-- Another sprite
-- ...etc.

As I said, nothing is preventing you from adding an extra game object into your hierarchy. You don't have to put everything on the same game object.

[ArenMook]

Also, if you're truly worried about making your UI adapt to all resolutions and looking consistent with minimal effort, simply use a Fixed Size UIRoot. Then nothing will change size. Only the aspect ratio may change.

[Tripwire]

Hmm ok, can you please explain a bit more on how to do a screen with multiple sprites and buttons? For instance this screen i have created:
http://www.plaatjesdump.nl/upload/902910e2901c50277074823e884894cb.png


Notice that this screen has to be full screen and pixel perfect on the android resolutions and iPhone resolutions specified in the first post.

I have my UIRoot set to FixedSizeOnMobiles:
Manual Height = 1136 (iPhone 5 Height)
Minimum Height = 800 (800x480 minimum android height)
Maximum Height = 1920 (1920x1080 maximum android height)

I don't really get how anchoring is working right now (i've watched the tutorial video's 10 times). If i'm using Anchoring Unified it sets my Header sprite for instance on a 1136 x 640 resolution to a dimension width of 1517 instead of 640.
Also i've tried to use tweening on an Parent object with anchored items below but that doesn't really work either it just stretches the sprite to 1517 px width it tweens out the labels and everything but not the sprite which is anchored. Here are the settings for the red Header object.
Looks like this:
-Panel
--Parent object needed to be tweened
---HeaderSprite (anchored unified)
---HeaderLabel  (anchored unified)
---Arrowbutton  (anchored unified)
---HelpButton    (anchored unified)

[Shifty Geezer]

When you use a fixed size, NGUI automatically scales content proportionally. So let's say you specify a 1080 x 1920 interface. In that you place a 1080 x 200 pixel image. When rendered on a 480 x 800 screen, the size will be reduced to (1920/800) of the size, or 2.4x smaller. The image will be drawn 450 x 83.3333.

In your example, you probably don't need anchors at all. That interface could be achieved with a table or grid. If you want to place sprites, you can either

1) specify the anchor object relative to the previous item in the list

Sprite 1 - anchor target = UI, left = 0 px from left side, right = 0 px from right side, top = 0 px from top side, bottom = 200 px from top side (these sizes will be scaled by Fixed Size interface).

Sprite 2 - anchor targer = Sprite 1, left = 0 px from left side, right = 0 px from right side, top = 0 px from bottom side, bottom = 200 px from bottom side.

2) Place them with absolute positions and let Fixed Size scale them

Sprite 1 positioned 0,0 from top left, sized 1080 x 200

Sprite 2 positioned 0,200 from top left, sized 1080 x 200

[Tripwire]

When you use a fixed size, NGUI automatically scales content proportionally. So let's say you specify a 1080 x 1920 interface. In that you place a 1080 x 200 pixel image. When rendered on a 480 x 800 screen, the size will be reduced to (1920/800) of the size, or 2.4x smaller. The image will be drawn 450 x 83.3333.

In your example, you probably don't need anchors at all. That interface could be achieved with a table or grid. If you want to place sprites, you can either

1) specify the anchor object relative to the previous item in the list

Sprite 1 - anchor target = UI, left = 0 px from left side, right = 0 px from right side, top = 0 px from top side, bottom = 200 px from top side (these sizes will be scaled by Fixed Size interface).

Sprite 2 - anchor targer = Sprite 1, left = 0 px from left side, right = 0 px from right side, top = 0 px from bottom side, bottom = 200 px from bottom side.

2) Place them with absolute positions and let Fixed Size scale them

Sprite 1 positioned 0,0 from top left, sized 1080 x 200

Sprite 2 positioned 0,200 from top left, sized 1080 x 200

Hi ShiftyGeezer thx for your reply.

I'm thinking of giving this up and going back to NGUI 2.7.0 with MultiPlatformToolkit. I can't get the UITable working don't know why. I tried this hierarchy:
TestPanel
-UITable
--001Column (position 0,0,0)
---Header sprite
---Header label
--002Column (position 0,0,0)
---Input field
---Horizontal line (dotted line)
--003Column (position 0,0,0)
---Input field
---Horizontal line (dotted line)

This just doesn't work for me, I can't get the UITable work with all my elements. I can't use anchoring because I apparently can't tween them (believe me i've tried). And with NGUI 3.0.8f7 I can't use MultiPlatformToolkit. That leaves me with 2 options, go back to NGUI 2.7.0 and use MultiPlatformToolkit, or write my own script which manages the scaling for all my UI elements

EDIT:
@ArenMook if your reading this can you please make some tutorials about using the anchoring system and tweening? I think i'm not the only one not getting how this is suppose to work. Anyways I want to thank you for the support!

[Shifty Geezer]

You can't tween anchored objects directly, as anchors position the object each frame just as tweening does. What you can do is create a container and apply anchors to that, and then position tweened objects inside.

Like you, I'm having to put in a lot of trial and error to work out how to use NGUI, particularly to combine it with scripting. A lot of what I'd like to do is extremely easy to do with scripting (get display measurements and place accordingly) but combining that with the functionality and flexibility of NGUI is tricky. There could definitely be a lot better educational materials; the existing tutes and examples cover a small set of basics and don't look at many of the real-world uses. We could do with some lengthy walkthroughs looking at real-world examples. At least the support here is very quick and useful.

The choice of going with NGUI 2.7 means losing access to support and features. If that'll work for you from past experience, it's a valid choice. Spending time learning the new system can either be seen as a nuisance as it slows down your current project, or an investment as it'll make future projects faster and better to implement. I see learning NGUI as a bit of both in equal measure at the moment.

I'm also hopeful there'll be some parallels with Unity's DNFUI whenever it appears, and we should get lots of tutorials and training as an official Unity feature. Although 2D training has been limited, so there'll still be a substantial time to learn from DNFUI release to fluent use.