Join Jesse Freeman for an in-depth discussion in this video Configure project, part of Unity 5 2D: Advanced UI.
- View Offline
- [Voiceover] Let's go ahead and create our project. Let's name it AdvancedUnityUI, set it to 2D mode, and create the project itself. As you can see, I've already configured Unity to the way that I like to work. I have my hierarchy and inspector panels on the right, I have my project and console below, and I stack the scene on top of the game. This way, when we're working inside of the UI in the scene view, we're able to get a live preview in the game window. Next, let's import all the artwork and fonts we'll need for the project.
Go to the Assets menu, click Import Package, and Custom Package. From here inside of the assets folder that was included with the download of your project you'll see an AdvancedUIAssets.unitypackage. Select it and open it up. Now you'll have all of the artwork and fonts we need to get started. Make sure everything is checked and hit Import. Next, we'll want to add the other folders that are missing. Let's create a new folder for our prefabs, a folder for our scenes, and finally, a folder for our scripts.
Next, let's set up the aspect ratios we'll want to test our UI in. By default, Unity is already set to the free aspect resolution. If you look at the resolution drop down, you'll see several different aspect ratios as well as a standalone 1024x768 resolution. Now when building game UI, in this course we're not gonna focus on a specific resolution, but instead a set of aspect ratios which are commonly shared across desktop and mobile devices.
As you can see, 4:3 and 16:9 are already set up for us. We're gonna add one other aspect ratio which is 8:5, which is commonly found on Android tablets. Simply click on the plus sign, and call the new resolution 8:5. Here, we'll change its type to aspect ratio, and set it up to be 8:5, then click OK. Our game screen is now set up to the 8:5 aspect ratio.
We can cycle through these as we work through the project to make sure that our UI scales correctly across all different types of aspect ratios. For now, let's leave it at 8:5, since that sits neatly in the middle of 4:3 and 16:9. Next, we're gonna want to configure all the artwork in our project. Go to the artwork folder, and select each of the sprites. Let's give them a Packing Tag of Sprites, set their Pixels to Units to 1, get rid of Mip maps, set the filter mode to point, and hit Apply.
Now, we're gonna do a quick trick to make sure that all of this artwork shows up on the same texture atlas. This is something that I covered in my optimizing 2D graphics course. With all the sprites selected, change their texture type to Advanced, scroll down to the bottom, and change the format to ARGB 32 bit, then hit Apply. This will force even the images with no transparency to be on a transparent texture, and when we go in to pack the artwork, all of them will show up on the same texture atlas.
Let's go to Window, Sprite Packer, hit Pack, and here you'll see everything now sits on a single page. This will greatly reduce our draw calls as we build out our UI throughout the course. Next, let's create the canvas so that we can build our UI elements in. From hierarchy, click Create, go to UI, and select Canvas. We'll set the render mode to camera, and make the render camera the main camera. Then on the canvas scaler, we'll set this to scale to screen size, and we're gonna change the resolution to equal 240x160.
This closely matches the original resolution of the Game Boy. Since we're having our UI scale based on the different aspect ratios of the device our game is running on, this will scale our UI up, so even though all of our sprites are set to 16x16, and our reference resolution is very low, it'll still look large and crisp as it gets scaled up. The last thing we're gonna do is set the pixel reference to 1, and then we can save our scene. Put the scene inside of the Scenes folder, and call it UIStaging, and now we have everything configured in order to start building out our UI.
Unity expert Jesse Freeman helps you design your UI using custom prefabs (reusable UI elements), UI components such as windows and buttons, simple buildup animations, and transitions. He also helps you create a window manager to guide changes and relationships between windows, and extend the window system with a custom Unity editor that lets you standardize window display and navigation throughout your game.
- Creating Unity prefabs: fonts, colors, buttons, and labels
- Adding a title, credits, and buttons to the start screen
- Adding a game over screen
- Creating animated stats for the game over screen
- Transitioning between windows
- Building a keyboard window
- Mouse, keyboard, and controller navigation
- Building a custom Unity editor for managing in-game windows
- Adding a window to select difficulty level