UIResizer: Whole-Fat-Pixel UI for NGUI
I have a script that I have been using for a while now which serves a singular purpose: to adjust the manual height of a NGUI UIRoot such that it always comes as close as possible to using a whole 1:N ratios for individual "fat" pixels.
The general problem with fractional-sized pixels is easily illustrated by looking at two images side-by-side...
The first image shows worst-case example: a ratio of fat pixel to screen pixel of 2:3 (three screen pixels for every two fat pixels). The second is a much nicer 1:2 (two screen pixels for every one fat pixel).
Since most of the stuff that I do in my aesthetic involves blowing up pixels, it's really important to me that the fat pixels are as close as possible to whole ratios. Even if the ratio is very slightly off -- say 1:2.1 -- you get what I find are some pretty nasty artifacts.
Notice that the tops of the button are thicker than the bottoms, because the tops cover three pixels, but the bottoms only cover two. Yuck!
It's really important to me that my fat pixels have nice whole 1:N ratios.
UIResizer is a script which is attached to an NGUI UIRoot and adjusts its manualHeight such that the fat pixels get as close as possible to having a 1:N ratio. Essentially, where the above screenshot has a fat pixel ratio of 1:2, if I gradually increase the height of the screen, the size on-screen of the UI doesn't increase until it has enough room to have a 1:3 ratio.
This is accomplished by giving UIResizer a "desired pixel height" (in this case 120), calculating the manual height based on the multiple of that desired pixel height fits within the screen height.
In addition to this, I've decided that I use this script enough that it warrants some pretty gizmos in Unity, so in the scene view, it can show some extra information.
The red wireframe shows the "safe zone" based on a 4:3 screen (like an iPad or a CRT monitor). The red-shaded areas show areas outside of this safe zone. The cyan lines indicate the recommended maximum extends of edge-anchored panels. In this case, since the screen is wider than the safe zone, panels anchored the left and right sides of the screen should come towards the center no further than the two vertical cyans lines. The 120 pixel height fits this screen size perfectly (400x240), so the horizontal cyan lines meet in the center.
It's possible to turn these gizmos off, or turn on only the central or edge indicators. Very handy for figuring out if a UI layout will fit appropriately on all devices I'm targeting. For example -- it wasn't until I had this set up that I realized that the mock frame I had laid out is actually too wide to fit properly in the 4:3 safe zone! Neat!
I've happily made this script available. If anyone finds it useful, I'd love to hear about it. Script comes with no strings attached. (It's not that complicated. :))
