As the programmer/2D artist on Animal Warfare, I was responsible for implementing all of the in-game menus/UI elements. On this project, I came across two different ways to do menus and there are both strengths and weaknesses to each.
Because Animal Warfare is an action-RPG game, there are a number of menus that the player must navigate to select their character, weapons, upgrades, etc. It was very important that these menus be completely functioning as part of the prototype. As such, a great deal of development time was spent creating the menu screens (and tweaking them). With the release of the new native 2D dev tools in Unity, one nice-to-have in the final game would be to have all sprite-based menu objects. They will be much easier to manage and can really add a nice aesthetic the menus by having less "rigid" buttons. There is also the potential to add in some interesting menu animation as a polish item as well.
Unity UI #1 - OnGUI()
In Unity, the standard way to implement UI assets is using the OnGUI() function in a script. Anything within this function will be rendered on the screen. OnGUI() is great for displaying things like textures, text and other on-screen objects like buttons. One of the benefits of using OnGUI() is that objects in that function and displayed using screen coordinates. If everything is rendered using percentages of the screen width and height, then all UI elements will always be proportionate to each other, regardless of the screen size.
One of the drawbacks that I found is that it’s difficult to get pixel perfect resolution of textures because you create them at one size (e.g. 200x300 pixels), but it could be skewed depending on the screen size making it blurry or just plain ugly. You could set the height/width of the texture display to match the asset, but the problem there is that it crowds the screen if the screen is really small.
Unity UI #2 – Game Objects
The other way to create a UI in Unity is to use Game Objects. In Animal Warfare, all of the menu elements on each screen are planes, with scripts attached to them. Each of these scripts has the following 3 methods in them to make them function like buttons:
The benefit of using game objects is that, unlike OnGUI(), these elements can be re-sized/moved in the scene, so you can adjust them as needed without having to run the game. Additionally, they always keep their proportions based on the size of the game window, which means less worry when it comes to varying screen sizes. One of the down sides is that depending on the aspect ratio of the screen, game objects could be cut off the sides of the screen, making them essentially useless. To combat this problem, I made sure all of the menus fit within a minimum 4:3 aspect ratio (which is essentially a square).
Brad
Because Animal Warfare is an action-RPG game, there are a number of menus that the player must navigate to select their character, weapons, upgrades, etc. It was very important that these menus be completely functioning as part of the prototype. As such, a great deal of development time was spent creating the menu screens (and tweaking them). With the release of the new native 2D dev tools in Unity, one nice-to-have in the final game would be to have all sprite-based menu objects. They will be much easier to manage and can really add a nice aesthetic the menus by having less "rigid" buttons. There is also the potential to add in some interesting menu animation as a polish item as well.
Unity UI #1 - OnGUI()
In Unity, the standard way to implement UI assets is using the OnGUI() function in a script. Anything within this function will be rendered on the screen. OnGUI() is great for displaying things like textures, text and other on-screen objects like buttons. One of the benefits of using OnGUI() is that objects in that function and displayed using screen coordinates. If everything is rendered using percentages of the screen width and height, then all UI elements will always be proportionate to each other, regardless of the screen size.
One of the drawbacks that I found is that it’s difficult to get pixel perfect resolution of textures because you create them at one size (e.g. 200x300 pixels), but it could be skewed depending on the screen size making it blurry or just plain ugly. You could set the height/width of the texture display to match the asset, but the problem there is that it crowds the screen if the screen is really small.
Unity UI #2 – Game Objects
The other way to create a UI in Unity is to use Game Objects. In Animal Warfare, all of the menu elements on each screen are planes, with scripts attached to them. Each of these scripts has the following 3 methods in them to make them function like buttons:
- OnMouseEnter() – Tells the plane to change the texture to a highlighted texture, signaling the player has their mouse on a “button.”
- OnMouseExit() – Tells the plane to change the texture back to the original texture, signaling to the player that their mouse has left the “button.”
- OnMouseDown() – Tells the “button” to do something.
The benefit of using game objects is that, unlike OnGUI(), these elements can be re-sized/moved in the scene, so you can adjust them as needed without having to run the game. Additionally, they always keep their proportions based on the size of the game window, which means less worry when it comes to varying screen sizes. One of the down sides is that depending on the aspect ratio of the screen, game objects could be cut off the sides of the screen, making them essentially useless. To combat this problem, I made sure all of the menus fit within a minimum 4:3 aspect ratio (which is essentially a square).
Brad