Author Topic: Multiscreen resolutions setup for pixel perfect  (Read 6050 times)

roady

  • Newbie
  • *
  • Thank You
  • -Given: 1
  • -Receive: 0
  • Posts: 30
    • View Profile
Multiscreen resolutions setup for pixel perfect
« on: October 05, 2014, 08:20:59 AM »
I'm trying to setup a multiscreen pixel perfect project.
To do this I'll use multiple atlas that is swapped on necessary resolutions. For this there's a lot of examples and scripts.

My question is how should I setup the different resolutions, calculating sprite sizes. Any best practices?

I create all graphics for iPad retina 1536 x 2048 (iPad@2x).
Then I need to create the same graphic for different resolutions.

example Splash Logo
iPad@2x: 500x500
iPad: 250x250 (50%)
iPhone: 115x115 (23%)
iPhone@2x: 235x235 (47%)

But on top of this there's more resolutions (we are still only speaking iOS here, not android).
The image is my setup for different iOS resolutions mapped to atlases (using 4 atlases for 1 game)




The issue here is for all the default values the sprite size is good, but the other screens I use with same atlas (example iPhone@2x the second device resolution). This will change the size of the sprite.

Need some guidance here. Must I have a new atlas for each resolution or is there a fix?
Can I setup pixel perfect for some devices and the rest is scaled to match sprite sizes?

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Multiscreen resolutions setup for pixel perfect
« Reply #1 on: October 05, 2014, 09:12:20 AM »
Nicki is generally the one who gives advice on this particular topic. I would use the same atlas for iPad and iPhones. 960x1136 and 768x1024 aren't too different for example. Can use the same atlas. Assuming your UI is properly designed to be modular with anchors, where elements adjust their position and/or size based on the size of the screen, everything will work as expected.

Also note the absolute easiest thing to do is to just have one atlas, and a Constrained type UIRoot. You just won't get fully crisp UIs this way on certain devices, but if your UIs are 3D it won't matter. I took this approach in Starlink, for example.

roady

  • Newbie
  • *
  • Thank You
  • -Given: 1
  • -Receive: 0
  • Posts: 30
    • View Profile
Re: Multiscreen resolutions setup for pixel perfect
« Reply #2 on: October 06, 2014, 04:47:12 AM »
Now I've been pulling my hair for a while. And this is what I got so far where I'm using 3 atlases with pretty close sizes.

Graphics is created in 1536 x 2048 and scaled down for the smaller atlases

Retina 25%
Non Retina 50%


ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Multiscreen resolutions setup for pixel perfect
« Reply #3 on: October 06, 2014, 10:31:37 AM »
So what's the question? Also not sure what this UI you're using is.

roady

  • Newbie
  • *
  • Thank You
  • -Given: 1
  • -Receive: 0
  • Posts: 30
    • View Profile
Re: Multiscreen resolutions setup for pixel perfect
« Reply #4 on: October 06, 2014, 10:35:34 AM »
I'm using NGUI RetinaPro with NGUI.

The question is How is your project setup for multiple devices and Pixel Perfect.

Cannot find anywhere how people are actually setup these values for best look and minimum number of atlases.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Multiscreen resolutions setup for pixel perfect
« Reply #5 on: October 06, 2014, 10:41:36 AM »
Ok, I didn't make RetinaPro, so I can't help you with that.

In my case I kept it simple with Starlink, as I mentioned. I only had one atlas, and UIRoot was set to Constrained. I didn't have to worry about any of this.

roady

  • Newbie
  • *
  • Thank You
  • -Given: 1
  • -Receive: 0
  • Posts: 30
    • View Profile
Re: Multiscreen resolutions setup for pixel perfect
« Reply #6 on: October 06, 2014, 10:56:05 AM »
RetinaPro is just functions to swap atlases for devices. Functionality that's already in NGUI so that's no problem.

My designer is kind of an pixel pusher and want everything super crispy. That's why I cannot scale any graphics.

As you said in Starlink, you used 3D objects for menu, not NGUI at all then?

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Multiscreen resolutions setup for pixel perfect
« Reply #7 on: October 07, 2014, 09:53:23 AM »
Starlink used a mix of 2D and 3D UIs. The menu windows were mostly 3D, but some were 2D. HUD elements were always 2D. I didn't use any objects. I used NGUI.