Author Topic: Calculating anchored positions  (Read 5133 times)

Tripwire

  • Full Member
  • ***
  • Thank You
  • -Given: 9
  • -Receive: 0
  • Posts: 163
    • View Profile
Calculating anchored positions
« on: March 10, 2014, 05:50:55 AM »
Hi,

I have a question about how to calculate the anchored position of an object. Let me explain what I need:
I have an app which is being build for Android and iOS. I tween the anchored screens in and out, these screens have to be hugged agains each other (for instance is the screen width is 640 panel 1 is at position 0 and panel 2 is at position 640) so no white background can bes seen from the camera background (see screenshot).
At the moment the panels are made for iPhone 5 resolutions (1136x640).
UIRoot settings:
Scaling style: FixedSizeOnMobiles
Manual Height: 1136
Minimun Height: 960
Maximum Height 1920

Panel 1 anchor positions:
Left: 269
Right: -269
Bottom: 518
Top: -518

Panel 2 anchor positions
Left: 910
Right: 371
Bottom: 518
Top: -518

Lets say i'm testing the UI on an Android Phone with a resolution of 1280x800. How do I calculate Panel 2's anchor position so that the second panel is still hugged against the first panel?


ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Calculating anchored positions
« Reply #1 on: March 10, 2014, 09:17:42 PM »
Those values don't make much sense to me as they seem to have different origin points.

"Left" anchored to the left is very different from "Right" anchored to the right. Otherwise I don't see why left is positive and right is negative. If you want the two panels to hug each other, just ensure that they both use the same anchor point. That is, if one is anchored to the window's left side, the other one should also be anchored to the window's left side. It's often easier to use "Center" because of this.

Tripwire

  • Full Member
  • ***
  • Thank You
  • -Given: 9
  • -Receive: 0
  • Posts: 163
    • View Profile
Re: Calculating anchored positions
« Reply #2 on: March 11, 2014, 04:23:08 AM »
Those values don't make much sense to me as they seem to have different origin points.

"Left" anchored to the left is very different from "Right" anchored to the right. Otherwise I don't see why left is positive and right is negative. If you want the two panels to hug each other, just ensure that they both use the same anchor point. That is, if one is anchored to the window's left side, the other one should also be anchored to the window's left side. It's often easier to use "Center" because of this.

Right but I need to anchor the panels to Left, Right, Bottom, Top to get them scaled to the correct resolution on the device it's running on since the UI has to be full screen on all resolutions. So like I said i'm currently testing on iOS on iPhone 4 and iPhone 5 resolutions. Since the UI in based on an iPhone 5 resolution I had to figure out how NGUI scales the UI to the correct size on iPhone 4. I've done it manually to test out how the anchoring positions should be. Keep in mind that i'm using Widget containers to TweenPosition the whole UIPanel (Screen) at once:
For iPhone 5
Left: 910
Right: 371

For iPhone 4
Left: 1029
Right: 490

So i've made this script:
  1. using UnityEngine;
  2. using System.Collections;
  3.  
  4. public class SetAnchorPosition : MonoBehaviour {
  5.        
  6.         private float width;
  7.         private float height;
  8.         private UIWidget container;
  9.        
  10.         private void Start()
  11.         {
  12.                 width = Screen.width;
  13.                 height = Screen.height;
  14.  
  15.                 container = this.gameObject.GetComponent<UIWidget>();
  16.  
  17.                 SetAnchorPos();
  18.         }
  19.  
  20.         //Sets the anchor positions to the correct value for each resolution
  21.         private void SetAnchorPos()
  22.         {
  23.                 if(Screen.width == 1080 && Screen.height == 1920)
  24.                 {
  25.                 }
  26.                 else if(Screen.width == 720 && Screen.height == 1280)
  27.                 {
  28.                 }
  29.                 else if(Screen.width == 640 && Screen.height == 1136)
  30.                 {
  31.                         container.leftAnchor.absolute = 910;
  32.                         container.rightAnchor.absolute = 371;
  33.                 }
  34.                 else if(Screen.width == 640 && Screen.height == 960)
  35.                 {
  36.                         container.leftAnchor.absolute = 1029;
  37.                         container.rightAnchor.absolute = 490;
  38.                 }
  39.                 else if(Screen.width == 540 && Screen.height == 960)
  40.                 {
  41.  
  42.                 }
  43.                 else if(Screen.width == 480 && Screen.height == 800)
  44.                 {
  45.                 }
  46.         }
  47. }
  48.  

Basically what this script does, is it sets the correct anchor positions for the panels which are offscreen and always on the left side of the first screen (like the picture in the first post).

I attach this script to each container with a UIPanel in it. What I would like to know is how NGUI calculates the Left and Right anchor position based on the screen resolution so I can calculate them for each resolution i'm targeting.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Calculating anchored positions
« Reply #3 on: March 11, 2014, 04:03:50 PM »
If you are trying to anchor something using percentage values, then use a Custom type anchor. It's explained here: http://www.tasharen.com/forum/index.php?topic=7013.0

Also keep in mind the easiest way to cater to different screen sizes involves using a Fixed Size UIRoot.

http://www.youtube.com/watch?v=XAeRXckXMMw might also help, even though it's a bit outdated.

Tripwire

  • Full Member
  • ***
  • Thank You
  • -Given: 9
  • -Receive: 0
  • Posts: 163
    • View Profile
Re: Calculating anchored positions
« Reply #4 on: March 12, 2014, 05:02:40 AM »
If you are trying to anchor something using percentage values, then use a Custom type anchor. It's explained here: http://www.tasharen.com/forum/index.php?topic=7013.0

Also keep in mind the easiest way to cater to different screen sizes involves using a Fixed Size UIRoot.

http://www.youtube.com/watch?v=XAeRXckXMMw might also help, even though it's a bit outdated.

Hi ArenMook,

I have my UIRoot set to FixedSizeOnMobiles with these settings:
Manual Height = 1136
minimum height = 960
maximum height = 1920

I'm not using percentage to calculate Anchor positions, the values i'm getting are calculated by NGUI itself when setting the anchors to Unified. What I'd like to know is how these positions are calculated so I can calculate the offscreen anchor positions for each screen type i'm targetting.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Calculating anchored positions
« Reply #5 on: March 12, 2014, 06:15:50 PM »
Each anchor point is a pair of values -- a relative value, and an absolute value.

Final position = Target Width * Relative + Absolute.

"Unified" anchor is just a simplified version of displaying them. "Left" = Relative value of 0. "Right" = Relative value of 1. "Center" = Relative value of 0.5. You can see all this by choosing "Custom".