Ever play a game in a high resolution and have the UI become tiny? Or, blocky? It kind of sucks.
We spent some time last week ensuring Blast Zone! Tournament’s UI will always look crisp and clear – regardless of your TV or monitor’s resolution.
New TVs are “4K”; the Playstation 4 Pro and the new Xbox can render at 4k. 4K resolution is actually 3840 pixels across by 2160 pixels down with a 16×9 aspect ratio. They call TV’s “4K” as it sounds more impressive than 2160p. Yet, 4k is still special.
4K is ‘special’ because it is exactly 4x the resolution of 1080p (2x the pixels on the horizontal axis and 2x on the vertical axis) and 9x the resolution of 720p (3x the pixels on each axis).
Programs like Photoshop to a great job when reducing image sizes when you can say something like “every 3×3 block of pixels will become 1 pixel in the smaller image”.
After a bit of work and testing, BZT’s UI looks great at 720p, 1080p, and at 4k. Also, I’m using a retina Apple monitor on my PC. The monitor is 1440p and BZT’s UI looks great there too.
Some technical notes for people that want to learn a little more:
- We are using the newest Unity with NGUI 2.7
- Blast Zone! Tournament’s UIRoot in NGUI is set to the 4k resolution of 3840 x 2160 pixels. On 108op, we render 1/4th the pixels of 4k (1/2 across x 1/2 vertically). In 720p, we render 1/9th the pixels (1/3 across x 1/3 vertically).
- To ensure the UI looks good at 720p, we have to keep the detail level reasonable to avoid aliasing issues.
- NGUI has the concept of a sprite atlas where individual small textures are grouped into a single bigger texture to help with performance. We used Photoshop to create optimized UI atlases for 108op (1/2 resolution on each axis) and 720p (1/3 the pixels on each axis). NGUI atlases have the concept of “Pixel Size”. The 1080p atlas has a Pixel Size of 2. The 720p atlas has a Pixel Size of 3. The Pixel Size settings are used to ensure sliced sprites look the same at each atlas resolution.
- Graphics performance is often bound by the complexity of your pixel shaders as well as the screen buffer’s resolution – to really render a 4k screen, the game must render 9x the pixels of a game that is running at 720p. For BZT, running at 60 FPS is more important than running at 4k. We’ll run at 4k on devices that have the horsepower to do so while keeping the frame rate at 60.