Multiple questions on an big project that I need to have done by friday :D

[BooBi]

Hi,

I received an app to develop within a week, for IOS and Android. It's mainly a portrait app including a menu and 2 sets of text+img pages that you flick throught + somes videos. I ve been suggested to use NGUI to facilitate that multiplatform work.
Yesterday, I've learned the basics of NGUI, got the storyboard of the app ready, set up Unity android, and got the project hierarchy ready to go.

The App will be composed by:
- a Tiled sprite for the background
- Main menu:
  - Top left corner button (setup with anchor top left)
  - Top right corner button (setup with anchor top right)
  - Top Logo  (setup with anchor top)
  - Two images in the center + title(2x) + Play video buttons(2x)
  - Bottom full width button "Information"

- The Two sets of pages:
  - Top left corner button (Back to Menu) (setup with anchor top left)
  - Center filled with text and/or images
  - Bottom full width button "Play Video"

The app is fully 2D, 3D real time scenes will be inserted at later day but it's not important atm, i won't need NGUI for them.


Problems and questions:

- The buttons doesn't have an editable pivot point like the labels and slicedSprites. If I use an UIAnchor on the button, stick it to the bottom and use an Offset to have the button fully displayed, the offset doesn't fit the different ratio and resolutions (iphone 4/5,androids,iPad SD/HD). What would be the easiest way to do that?

- Is there a way to sort of scale the labels, buttons etc depending on the resolution and screen density?

- I'm using fingergesture and I would like to do the transitions between pages like the transitions between the different desktop screen of the ipad/iphone. I've got the idea of how to do it, and I know how to script it. But NGUI-wise how should I do that?
My idea was to always have 3 pages ready, the screen one + one on each side of the screen and then swap the text and images inside. I would set the standard position of the 3 pages and use a panel composed with all the pages inside and use that 3 times (each page) and just turn on and off the right labels and images.
How should I set up that in NGUI? Use a unity animation for the page slide and control it with the delta of the finger movement? like the Draggable windows example? like the Scroll view panel example?

- The anchors stick the objects regarding the camera position, in that case, how can my 3 panels system could work ? Should I do it like the Scroll View camera example and have all the pages set up as panels and flick through all of them? In that case how can I switch between page 5 and the main menu?

More questions will be added, as I'm working on the project.
I've attached a mockup screenshot of the main menu

Thanks a lot for the help.

(That post allows me to think out loud too so I might found the answers as I write the questions )

[selzero]

1- NGUI is pretty versatile in the components you can use, I'm not sure exactly how to do this but, would adding the "OnClick()" event to a spliced sprite instead of using the button widget work?

2- Yes I do this all the time, simply scale using the traditional Unity transform scale method.

3- You can do this exactly as you mentioned, you can also follow the NGUI scroll bar option (look in the examples), it does the trick, but uses 3 cameras and can be a bit messy.

I like NGUI because it lets me think like I'm coding standard game objects, I have even modified NGUI and used it as an engine for a match 3 game. The components and scripts are easy to use and modify, you dont need to feel like your breaking anything if you follow your own design pattern.

I use a combination of NGUI UI's and turn cameras on and off, I use layers to differentiate between objects and the cameras they belong to, I swipe / size / position objects as if they are unity game objects.

NGUI is designed in components and done well, so whatever design pattern you are using you can adapt the NGUI components to it.

[selzero]

Also, regarding the scaling issue, if you use the standard unity "set resolution" call, and set the NGUI UI resolution to the same resolution, you will get an automatic scaling effect (no guarantees on image quality though)

[BooBi]

Is there a demo scene available for the Main Menu webplayer from the Documentation page? That would more than help me understand how to set up my scene!

[ArenMook]

It's part of the examples that come with NGUI.

[BooBi]

I'm working on the evaluation version atm to see if it's realistic to work with NGUI on this project. Is this demo only available on the paid version?

[Nicki]

Free version is obsolete.

[BooBi]

ok got the full now Im gonna look into this menu scene thx

[BooBi]

Ok, I used the Scroll view panel example as a base to build my scene. On the screenshots, you can see that I placed the top buttons in a panel, the bottom one in another (at later day I'll anim them during the transition) and all the pages as separate Panels in an UIGrid within a draggable panel (like in the demo example).

I'll have to link the "Line width" of the text to a percentage of the screen width and have the scale of the page collider automatically fit the screen resolution and therefore the Cell width of the UIGrid as the screen width.
Hopefully that should be too complicated... Any suggestions or tips?

After that, my big concern is about the way the pages will stop when you release the swipe. As explained earlier, I want to do the same (as close as possible within the time scale ive got) as the ios/android mobile desktops: start swiping the screen, release and the page stops at the next one (or the actual one if the swipe is too small), not in the middle of two pages. I imagine I need to tweak the UIDraggablePanel.CS to do that. Any suggestions or tips?

Sorry to ask all theses questions and help on theses big features but time scale is too short on that one

Thanks for the help

[Nicki]

UICenterOnChild centers on the child of a draggable panel.

I think the line width is in virtual pixels, so you can calculate it based on what your UIRoot uses as activeHeight (* aspect to get width).

UIDraggablePanel has momentum built in.

Remember if something updates position inside a panel, the whole panel rebuilds its meshes, so it can be tasking on your device. If possible try not to put any anchors or grids inside panels, or at least turn them off once it's been placed, so it doesn't constantly change the position in Update() and kills your performance.

[BooBi]

Ok thanks a lot!! I'm trying that now.

How should I anchor my buttons and logos? Anchor>panel>button instead of panel>Anchor>button hierarchy wise?
Anything else like that, that I should be careful of?

Edit: the UICenterOnChild seems to center inbetween the children not on their pivot point? Should it be set up in a specific way?

Edit2: I just realised that the ScrollPanel scene was somehow different, I've redownload the NGUI from the assetstore and now I can see the structure of the scene.
it still recenter on inbetween the pages tho..

Edit3: OK i found where the problem came from ( centered inbetween pages), it came from the clipping of the Sliding panel. But that brings me to another problem.  As you can see on the latest screenshots i've added, when you compare the way the buttons (top) are placed with the anchor top left/right and you see on the view the size of the background (with I made fit to the iphone5 tall screen res) or the position of the pages determined by the UIGrid (i use screen.width at start to set the Cell width of the grid), there is a difference between what unity seemed to read and the way it s displayed. The buttons position seems smaller that the width read at start and yet they are positioned correctly but not the Cell width of the Grid. Not sure where that comes from and not sure I'm really clear in my explanation sorry...

Edit4: it's working! I've centered the clipping. I'm going to connect everything that needs to be dynamically resized and restructure the project to fit what you ve just said (anchor etc)
Thanks for the help