How does Resolution Magic 2D work?In a nutshell, it modifies the 2D game camera(s) to ensure a pre-defined area of gameplay is visible (and fills the screen as much as possible) on all screens.
With and without Resolution MagicWith so many devices out there it’s difficult to plan your game to work equally well on all possible resolutions and aspect ratios. I created a simple scene to show how Unity alters the view at different aspect ratios. I will then show the same scene with Resolution Magic 2D turned on.
ScenarioEvery game is different, so I’ll set out my test scenario. This is important because Resolution Magic will show the content you tell it to show. I’ve tried to keep the example simple rather than realistic. I have a mysterious sports game played by aliens from the planet Kenney:
The scene as it looks inside the Unity editor
IMPORTANTIn this example I want the green court area to be as big as possible (i.e. fill up as much screen space as possible). Anything in the yellow area is filler that I only want my player to see if their screen is not the same shape as the green court. In a real game you would probably want some of those spectators visible to add to the atmosphere, but for this example we want to see ALL the green area and as little yellow as possible.
Without Resolution MagicI designed this game with a 16:9 ratio, and here’s what it looks like on a 16:9 device:
A perfect view of whatever sport those critters are player on 16:9 screens (regardless of pixel resolution). But what about the players who don’t have 16:9 screens?
3:2 (common on iPhone and iPad devices):
Oh no! The goalies have fallen off the screen because it’s not as wide as the game design!
16:10 (common on Windows Phone and Android)
Not as bad as the 3:2, but the edges are still cut off. The game might be playable, but you can’t publish it to an app store in that state!Unity leaves your content alone, not adapting to the screen it’s on. It’s not good enough!
With Resolution Magic 2DHere are images from the same scene, but this time with Resolution Magic 2D enabled. Remember, I told Resolution Magic to make the green area fill as much screen as possible and to show anything in the yellow area only if the screen is a different shape (aspect ratio) to the green court.
Since the game was designed for 16:9 this image looks identical to the one without Resolution Magic.
3:2 (typical iOS)
There’s the magic. Without Resolution Magic the yellow goalies were cut off. Resolution Magic makes sure the entire court area stays on the screen with some of the crowd in the yellow area visible in the ‘dead space’ created by using a different aspect ratio to what you designed. Your player sees everything they should! Like magic.
Bonus: fit to backgroundResolution Magic 2D also lets you set a second, larger area of interest so you can further adapt your game. In the following screenshot I have told Resolution Manager to show the entire game area instead of just the court:
The scaling still works, but now you have a view that gives users with larger, higher-resolution screens a more interesting scene, while you can still focus on the court for smaller devices where every pixel matters.
Get the assetIf you want some of that magic in your Unity project, you can get the asset at the Unity Asset Store. It’s only $10, and I’ve only shown the main functionality here - it does more:
- Automatically fits your chosen content to any screen ratio or resolution
- All features can be used without scripting
- Drag-and-drop the prefabs for out-of-the-box functionality
- Customise behaviour and settings via inspector fields.
- All features are fully documented (you can download the documentation below and get details of every feature and how to use the asset).
- All code is fully commented (C#).
- Simple UI system lets you position UI elements on screen edges and corners, and they stay in their place on any screen.
- No interference with or from other assets and Unity features
- Resolution Magic does all its work at the start of a scene. It only affects the 2D camera’s initial position and scale.