Author Topic: Evenly space buttons across the screen  (Read 2508 times)

Meltdown

  • Jr. Member
  • **
  • Thank You
  • -Given: 10
  • -Receive: 0
  • Posts: 56
    • View Profile
Evenly space buttons across the screen
« on: August 17, 2015, 06:07:41 PM »
I've searched the forums on how to evenly space buttons across the screen, but all I can find is to use a 'Custom' option on the Anchor which isn't useful as this option no longer exists.

I need the buttons to evenly space themselves across the screen and adapt to the screen width and aspect ratio on different devices.
I have 4 buttons, each need to take 25% of the screen width.

How do I achieve this with NGUI 3.9.1?


ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Evenly space buttons across the screen
« Reply #1 on: August 18, 2015, 05:24:40 PM »
Select any widget. It has the "Anchor" section. Change the type to "Unified", then for each field (left, right, bottom, top), set them to what you need them to be. Custom is one of the options there.

For example to anchor something in the bottom-left and make it 25% width, set left to be target's left +0, right be custom 0.25 +0.

Meltdown

  • Jr. Member
  • **
  • Thank You
  • -Given: 10
  • -Receive: 0
  • Posts: 56
    • View Profile
Re: Evenly space buttons across the screen
« Reply #2 on: September 01, 2015, 11:24:37 PM »
I've tried exactly what you suggested, when I'm designing in the editor in 1024x768 game view, all looks good with the settings you have proposed. As soon as I change the game window resolution to 1920 x 1080, then the button is no longer anchored to the left.

I've tried setting the anchor transform to a sprite which is anchored to left and right of the screen, and I've tried setting the anchor transform to the parent panel, but no matter what I can't get it right.

Here is a screenshot in the editor with 1024x768 resolution, the 'Define Areas' button is sitting in the bottom left, taking up 1/4 width
https://cdn.pbrd.co/images/kyEt9zg.png

Here is a screenshot in the editor with 1920x1080 resolution, the 'Define Areas' button is off from the bottom left, less than 1/4 width
https://cdn.pbrd.co/images/kyJ77FT.png

Any other tips?

Holy Manfred

  • Jr. Member
  • **
  • Thank You
  • -Given: 1
  • -Receive: 8
  • Posts: 71
    • View Profile
Re: Evenly space buttons across the screen
« Reply #3 on: September 04, 2015, 03:42:17 PM »
The only reason I could think of is that the UISprite you are using as a anchor target is not correctly anchored itself. When it is correctly anchored to the UIRoot is should work. Do you maybe have any offset or unset anchors in the sprite that is the anchor target of your button?

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Evenly space buttons across the screen
« Reply #4 on: September 06, 2015, 05:39:30 PM »
As Holy Manfred mentioned, you seem to have it anchored to "Sprite", where you should have anchored it to the UI Root.

Meltdown

  • Jr. Member
  • **
  • Thank You
  • -Given: 10
  • -Receive: 0
  • Posts: 56
    • View Profile
Re: Evenly space buttons across the screen
« Reply #5 on: September 07, 2015, 07:30:18 PM »
Okay I've anchored everything to the UI Root, thanks guys.

If anyone else struggles with this, these are the settings I used...
The UIRoot content width and height is 2048x1536.

I set the initial button width to 512 (2048 / 4). But in the Unity editor it seems to scale them to 682px wide.

Button 1
Left - Targets Left + 0
Right - Custom 0.25 + 0

Button 2
Left - Custom 0.25 + 0
Right - Targets Center + 0

Button 3
Left - Target's Center + 0
Right - Custom 0.75 + 0

Button 4
Left - Custom 0.75 + 0
Right - Target's Right + 0