Tasharen Entertainment Forum

Support => NGUI 3 Support => Topic started by: dipu5683 on March 28, 2014, 12:58:22 AM

Title: NGUI page scaling
Post by: dipu5683 on March 28, 2014, 12:58:22 AM

hi

I am newer to ngui. I am creating a interface using ngui for Mobiles . My app have a UIRoot . I am creating a prefab for any page say main menu  it consists of sprite as BG , UIbutton for back and forward movement , some title sprite etc. I am using the latest version of ngui. When i transferred the app on device ( 1280*800 ) or (960*640) ,i am facing the streching issue. BG is not stretched according to device resolution , button anchor got changed etc....
I tried UIStrech  with Both params set to stretch the BG & UIAnchor to anchor the buttons, title etc.
But there is still some borders left at left and right and also buttons are not positioned as per anchor.
(My UIRoot settings are FixedSize and height is 640)

Can some one help me ? How can we design our ngui(interface) pages which got scaled (bg) automatically according to device resolution and button according to anchor?



thanks

Title: Re: NGUI page scaling
Post by: ArenMook on March 28, 2014, 01:06:53 AM

If you have the latest version of NGUI, why are you using UIAnchor and UIStretch? Both have been deprecated ages ago.

When the aspect ratio changes, what's visible on the sides changes as well. You will see less or more, depending on the aspect ratio. Which is why widgets get anchored. There is a video explaining this in detail called "catering to different screen sizes".

Title: Re: NGUI page scaling
Post by: dipu5683 on March 28, 2014, 05:27:47 AM

Thanks for the replay Aren.

this is working fine in a scene.

But now i am instantiating prefbs dynamically.
In that case, the sprite on which i set unified UIAnchor, got reset to none.

What is wrong i am doing?

Title: Re: NGUI page scaling
Post by: ArenMook on March 28, 2014, 09:13:57 AM

Prefabs can't reference objects that are not a part of the same prefab. This is how Unity works, and it makes perfect sense if you think about it. Prefabs are self-contained objects.

Title: Re: NGUI page scaling
Post by: dipu5683 on April 01, 2014, 02:27:56 AM

Aren now i understand that in prefab, we cant make any references of the GameObject from the scene.

But i am making a build for iOS and Android. And as per my understanding i create seperate builds for iPad and iPhone with UIRoot's manual height (fixedsize) to 768 and 640 respectively.

Due to this, i am keeping the UIRoot prefab in Project and directly sets the anchor references in the page prefab. (please refer the attached image).

is it a correct way? or is there any better way to handle this kind of situation?

Title: Re: NGUI page scaling
Post by: ArenMook on April 01, 2014, 08:13:28 AM

That's not the right way to do it. You're referencing a prefab here, not its instance -- and you need to be referencing the instance.

Instead simply create a script that will set the anchor's target in its OnEnable and attach this script to your widget or panel.

Title: Re: NGUI page scaling
Post by: dipu5683 on April 02, 2014, 01:15:09 PM

Hi

I have created a custom anchor stretch script to anchor & stretch the bg.

UIRoot uiRoot = NGUITools.FindInParents<UIRoot> (this.gameObject);

sprite.SetAnchor(uiRoot.transform);
sprite.leftAnchor.absolute = 0;
sprite.rightAnchor.absolute = 0;
sprite.topAnchor.absolute = 0;
sprite.bottomAnchor.absolute = 0;
         
This is working absolutely correct in case of background image.Its streching as per device resoulution.

But When i am trying to anchor and stretch the topbar sprite (628*50) to align top (with full width of device & 50 in height) then it's not working correctly. The same thing is also happening with UIButton when tried to anchor bottom left with some offset.
How can i anchor a sprite of say 302*300 to the bottom right?

Title: Re: NGUI page scaling
Post by: ArenMook on April 02, 2014, 04:08:37 PM

If you want to anchor a 302x300 sprite to the bottom right, you would:

1. sprite.SetAnchor(uiRoot.transform);
2. sprite.leftAnchor.Set(1, -302); // Right-hand side, subtract 302
3. sprite.rightAnchor.Set(1, 0); // Right-hand side, no offset
4. sprite.bottomAnchor.Set(0, 0); // Bottom, no offset
5. sprite.topAnchor.Set(0, 300); // Bottom + 300 pixels
6. sprite.ResetAnchors();
7. sprite.UpdateAnchors();

Title: Re: NGUI page scaling
Post by: dipu5683 on April 05, 2014, 02:12:00 AM

Thanks Aren , code is working fine.
I have created a generic script .

sprite.SetAnchor(uiRoot.transform);
sprite.leftAnchor.Set(relativeLeftAnchor , leftAnchorAbsVal);
sprite.rightAnchor.Set(relativeRightAnchor , rightAnchorAbsVal);
sprite.bottomAnchor.Set(relativeBottomAnchor , bottomAnchorAbsVal);
sprite.topAnchor.Set(relativeTopAnchor , topAnchorAbsVal);
sprite.ResetAnchors();
sprite.UpdateAnchors();

Which is exactly correct at the run time. But at the design time of prefab how can i achieve this?
Each time i have to run the prefab and check at run time alinement and stretching at different resolution.

Title: Re: NGUI page scaling
Post by: ArenMook on April 05, 2014, 11:42:41 AM

To set both relative and absolute values, choose "Custom" instead of "Left", "Right", etc.