Author Topic: two draggable panels side by side?  (Read 9293 times)

pretender

  • Full Member
  • ***
  • Thank You
  • -Given: 1
  • -Receive: 0
  • Posts: 155
    • View Profile
two draggable panels side by side?
« on: June 26, 2013, 12:05:10 PM »
Hi!

I want to make two draggable panels side by side where left one would take 1/3 of the screen and right one would
take 2/3 of the screen. I am using fixed size.

I decided to make both panels anchor to left. and to position them side by side, but i don't know how to make right one to strech to the end of the screen. I know i cant use width and i tried with scale but no luck. I want to avoid using UIStrech if possible because it will distort the elements.

Is this possible with NGUI (i need it to work on mobiles and desktops). I am using NGUI for a year now but i come across some things that i dont know how to do once in a while, so i need help!

Thanks! great package!


ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: two draggable panels side by side?
« Reply #1 on: June 26, 2013, 12:50:17 PM »
Don't anchor them to the left. Keep them underneath the centered anchor, and position / resize them yourself based on screen width. It will be easier.

Alternatively, anchor one panel to 0.16667 left (33% of the screen, centered from the left so divide by 2), second to 0.6667 (2/3rd of the screen, centered from the right so 1.0 - 0.3333), and set the first panel's clip width to 1/3rd of the screen, second to 2/3rd of the screen.

pretender

  • Full Member
  • ***
  • Thank You
  • -Given: 1
  • -Receive: 0
  • Posts: 155
    • View Profile
Re: two draggable panels side by side?
« Reply #2 on: June 27, 2013, 10:55:29 AM »
Don't anchor them to the left. Keep them underneath the centered anchor, and position / resize them yourself based on screen width. It will be easier.

Alternatively, anchor one panel to 0.16667 left (33% of the screen, centered from the left so divide by 2), second to 0.6667 (2/3rd of the screen, centered from the right so 1.0 - 0.3333), and set the first panel's clip width to 1/3rd of the screen, second to 2/3rd of the screen.

Ok, i tried first option, it works on mobile (FixedSize set on UIRoot) but when built for web it is not correctly placed.
It does not matter FixedSize or FixedSizeForMobile is set.

For second option i am not sure what you mean. This time i should have two anchors for left side of the screen? and to set their transforms to the values you specified? I will deal with clipping later, currently i want to make left part to be one third and right two thirds of the screen for all platforms mobile/web/desktop and i will make further adjustments later i only need to know is it possible to do it this way but to be consistent through all platforms or most of them?

there are lot of options, i guess it is possible. let me know if i am doing something wrong! thanks man!

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: two draggable panels side by side?
« Reply #3 on: June 27, 2013, 01:27:14 PM »
When positioning things yourself and the UI is not pixel-perfect, you need to take UIRoot.pixelSizeAdjustment into account.

I'm not sure how else to explain the second option.

rokcus

  • Guest
Re: two draggable panels side by side?
« Reply #4 on: June 27, 2013, 11:45:00 PM »
my project also have two panel which are half on left and half on right on a screen.
For that I used anchor on each panel. But in order to adjust on different screen size I added my script.
I used fixedonmoilbe scale.

on the gameobject where panel is attached, attach a script of this

 start() {
  manualHeight = NGUITool.FindInParents<UIRoot>(gameObject).manualHeight;
 float acutalWidth = (float) Screen.width / Screen.height * manualHeight;
  Vector 4 cr = this.GetComponent<UIPanel>().clipRange;
 cr.z = acutalWidth * 0.5 ;// in your case it should be 0.6666 or 0.3333
this.GetComponent<UIPanel>().clipRange = cr;
}

you can modify as you like
hope this would help you
 

pretender

  • Full Member
  • ***
  • Thank You
  • -Given: 1
  • -Receive: 0
  • Posts: 155
    • View Profile
Re: two draggable panels side by side?
« Reply #5 on: June 28, 2013, 02:17:26 AM »
@rokcus
Do you have two panels with different anchors one left, one right or something else?