Tasharen Entertainment Forum

Support => NGUI 3 Support => Topic started by: Tripwire on January 08, 2013, 06:23:40 AM

Title: iPhone like slide to unlock screen, and resolution problems
Post by: Tripwire on January 08, 2013, 06:23:40 AM
Hi,

1. I'm building an app which is using a slide to unlock screen the same as used on the iPhone. What's the best way to create such an unlock screen?

2. The app i'm building uses textures the size of iPhone 5 resolution and aspect ratio. But the app also must be useable for the iPhone 4 and 3GS and maybe even Android phones. When i build the app on the iPhone 4 it scales the height like it should but not the width. Should i use UIAnchors for this?

Thx!
Title: Re: iPhone like slide to unlock screen, and resolution problems
Post by: Cripple on January 08, 2013, 09:44:01 AM
1. Didn't really had time to use them, but I think you will have to handle some kind of custom UIDragObject : http://www.tasharen.com/?page_id=893

2. You have to unselect 'Automatic' from UIRoot (the UI scales with the resolution), set your default scale and then use UI/Anchor/UIStretch to manage the Widgets positions/scale.
Title: Re: iPhone like slide to unlock screen, and resolution problems
Post by: Tripwire on January 08, 2013, 01:48:46 PM
Quote from: Cripple on January 08, 2013, 09:44:01 AM
1. Didn't really had time to use them, but I think you will have to handle some kind of custom UIDragObject : http://www.tasharen.com/?page_id=893

2. You have to unselect 'Automatic' from UIRoot (the UI scales with the resolution), set your default scale and then use UI/Anchor/UIStretch to manage the Widgets positions/scale.

Thx for your reply!

1. I'll go and try to figure out how it works.

2. The UIAnchor thing, should i make 4 of them for eacht of the corners of the screen?
Title: Re: iPhone like slide to unlock screen, and resolution problems
Post by: Cripple on January 08, 2013, 04:19:10 PM
It is up to you. Widgets under a GameObject with an UIAnchor attached to it will be anchored to that point and will keep the same size in pixel. There are 9 points available.
Title: Re: iPhone like slide to unlock screen, and resolution problems
Post by: Tripwire on January 08, 2013, 04:40:36 PM
Quote from: Cripple on January 08, 2013, 04:19:10 PM
It is up to you. Widgets under a GameObject with an UIAnchor attached to it will be anchored to that point and will keep the same size in pixel. There are 9 points available.

Right but how do i use the UIAnchor then? Right now i have the Anchor which comes with creating a New UI. Which is set to Center. I have a total of 11 panels added to the UI.
Title: Re: iPhone like slide to unlock screen, and resolution problems
Post by: Cripple on January 08, 2013, 04:43:21 PM
Yup at start, all the elements are anchored to the center of the screen.

You will get more information there : http://www.youtube.com/watch?v=XAeRXckXMMw

There is also an example in the NGUI package explaining anchors.
Title: Re: iPhone like slide to unlock screen, and resolution problems
Post by: Tripwire on January 08, 2013, 04:54:50 PM
I've seen the movie and checked out the example, but i can't get it working properly. Like i  said it still scales only the height but not the width. I also tried the UIStretch but that screws up the UI.
So how does the UIAnchor work if you have 11 panels which all need to be scaled properly to the good aspect ratio and resolution.
Title: Re: iPhone like slide to unlock screen, and resolution problems
Post by: Cripple on January 08, 2013, 05:26:28 PM
http://www.tasharen.com/forum/index.php?topic=2397.0

Is it what you need ?
Title: Re: iPhone like slide to unlock screen, and resolution problems
Post by: Tripwire on January 09, 2013, 04:57:17 AM
Right so i checked out the script but doesn't that only change the height of the UI instead of the width? I added it to my UIRoot but now the UI is smaller than the full screen size on any of the devices i got here.
  1. using UnityEngine;
  2.  
  3. [RequireComponent(typeof(UIRoot))]
  4. public class UIRootAdjustment : MonoBehaviour
  5. {
  6.     public int targetHeight = 720;
  7.  
  8.     UIRoot mRoot;
  9.  
  10.     void Awake () { mRoot = GetComponent<UIRoot>(); }
  11.  
  12.     void Update ()
  13.     {
  14.         if (Screen.width > Screen.height)
  15.         {
  16.             mRoot.manualHeight = targetHeight;
  17.         }
  18.         else
  19.         {
  20.             mRoot.manualHeight = Mathf.RoundToInt(targetHeight * ((float)Screen.height / Screen.width));
  21.         }
  22.     }
  23. }
  24.  

Maybe my UIRoot settings are wrong? Here are the settings of my UIRoot:
Automatic = off
Manual Height = 1136
Minimum Height = 480
Maximum Height = 1136
Title: Re: iPhone like slide to unlock screen, and resolution problems
Post by: ArenMook on January 09, 2013, 03:50:53 PM
Why would it change the width? o_O Are you trying to skew your UI?

Manual height of 1136 means your UI components will think that they are always being used on a screen that's 1136 pixels tall. Strange height...
Title: Re: iPhone like slide to unlock screen, and resolution problems
Post by: Tripwire on January 09, 2013, 05:03:14 PM
Quote from: ArenMook on January 09, 2013, 03:50:53 PM
Why would it change the width? o_O Are you trying to skew your UI?

Manual height of 1136 means your UI components will think that they are always being used on a screen that's 1136 pixels tall. Strange height...

iPhone 5 resolution = 1136x640. Which height do you recommend then for the manual height? Let's say i'm using:
iPhone 3GS: 480x320
iPhone4: 960x640       
iPhone5: 1136x640
Title: Re: iPhone like slide to unlock screen, and resolution problems
Post by: Tripwire on January 10, 2013, 04:32:27 AM
So i fixed the whole problem for iPhones. I made a second scene for iPhone 4 and 3GS resolutions. So that works now. But i still would like to know how to get one scene for all iPhone resolutions.

And offcourse the lockscreen issue which i still didn't figure out :)
Title: Re: iPhone like slide to unlock screen, and resolution problems
Post by: ArenMook on January 10, 2013, 01:17:13 PM
By using anchors. The UI has to be modular. If you only have one UIAnchor (as you get with a default UI layout), then everything will remain at the center.
Title: Re: iPhone like slide to unlock screen, and resolution problems
Post by: Tripwire on January 10, 2013, 04:01:04 PM
Quote from: ArenMook on January 10, 2013, 01:17:13 PM
By using anchors. The UI has to be modular. If you only have one UIAnchor (as you get with a default UI layout), then everything will remain at the center.

I've got an Anchor which is centered. But when i run the app which is build for iPhone 5 on the iPhone 4 the height scales good but not the width. And i still don't know how to use multiple Anchors with 11 panels which all need to be scaled to proper resolution and aspect ratio
Title: Re: iPhone like slide to unlock screen, and resolution problems
Post by: ArenMook on January 10, 2013, 05:38:15 PM
Right, as I said, your UI is not modular, which is the problem. NGUI will never skew your UI for you -- it looks hella ugly if you do, and will cause all your circles to look like ovals.

There are 2 video tutorials and a built-in example that covers usage of UIAnchor and the creation of modular UIs. I really don't know how else to explain it. :(