Making Resolution Independent Menus with NGUI
Resolution independent NGUI Menu
Making Resolution Independent Menus in Unity 3D has always been painful. Not to mention the bad performance with Unity’s inbuilt GUI in mobile devices! The Matrix.TRS method was being abused to its extent until NGUI came to rescue.
Old School Way
First, lets decide the overall screen resolution of the game, say 1920 X 1080 ( HD ). So, in every C# Script that we have to use, we need to put these lines in the OnGUI() method at the beginning :
GUI.matrix = Matrix4x4.TRS(Vector3.zero, Quaternion.identity, new Vector3(Screen.width / customWidth, Screen.height / customHeight, 1f));
where customWidth and customHeight are self explanatory.
If you are using Cube or Quad GameObjects, try putting camera.aspect=screen.width/screen.height; on Start() method.
Now, instead, lets go NGUI way …
So in this article, I am going to show you how to use it in multiple resolutions. Mainly the urge to think this way is simply that
unlike Apple products, Android devices come in a wide range of resolutions. This is both good, as well as complex at the same time for developers. With Unity’s basic GUI, we used to use Matrix.TRS method to scale it and keep it consistent across all devices. Sometimes this resulted in stretched textures which simply looked UGLY.
The problem was with the urge for finding a 1-stop-solution for all UI needs. Although it worked, deep down the heart, UI UX artists working with me sighed. So we started searching for a more intuitive and hack-free correct solution. After EZGUI and other stuffs, we finally settled with NGUI.
So what’s in the box?
So, making Resolution independent NGUI Menu is quite easy and very sensible. Infact, I think that is the most correct way of achieving true resolution independent screens menus.
Download NGUI, and import the package into a fresh project.
Now, what we just need to do is use Anchors. We set custom Unified Anchor settings, which will do everything else. Remember, NGUI works with vertical scaling.