![]() From Unity’s point of view, you have the Game view - or viewport - set to such a small size that it displays only the portion of the image that fits within the Game view. You’ll use the Canvas Scaler to adjust the background image display.įirst, you need to know that the display is not the result of a bug. You’ll tackle this issue by using a Canvas Scaler. You’ll soon see how the UI can adapt to different game resolutions. This is why all the game art supports 1136 x 640 and 960 x 640 resolutions. Note: The original game design was for iPhones with 3.5- and 4-inch displays. If you switch to the Game view, you’ll see only a part of the background image, as if the camera is too close to the image to capture it completely. Shrink your Scene view, and you’ll see that the white rectangle of the Canvas covers only part of the image. To fix this, find the Set Native Size button in the Inspector and click it to set the size to 1136 x 640. However, it’s not great! It’s too small and the aspect ratio is incorrect. Now you have a background image instead of the default white image. Drag it to the Source Image field of the Image component in Background in the Inspector: Next, open RW ‣ UI ‣ Menu in the Project window and find the menu_background image. In the Hierarchy, select Image and rename it to Background. The first thing to do is rename your image. As with the Canvas, The UI requires the Event System, so Unity automatically adds it. It’s also responsible for managing raycasting. The EventSystem processes and routes input events to objects within a scene. It has multiple properties that allow you to control how your UI renders. Remember, Unity creates this for you when you add your first UI element. The Canvas is the root object for all your UI elements. The Image is a non-interactive control that displays a sprite, with many options for customization.įor instance, you can apply color to the image, assign a material to it, control how much of the image displays or even animate it on the screen using a clockwise wipe. In the Hierarchy, you’ll see three new objects in the scene: Right now, there are three things to be aware of. You’ll set the correct position and size in a moment. It positions, rotates and scales UI elements within a Canvas. Note: The Rect Transform is the UI equivalent to Transform. You’ve just discovered the Rect Transform: Select the Image and set its position to (X:0, Y:0). If you don’t have one, Unity will create one for you automatically. You should see it in the Hierarchy as a child of Canvas. This adds an object named Image to the scene. The first element you’ll make is the background image for the menu scene.įrom the top bar, select GameObject ‣ UI ‣ Image. Woo-hoo! You’ve finished the setup and you’re ready to create your first UI element using the Unity UI system. Make sure all the assets in UI / Menu are set to the Sprite (2D and UI) texture setting. Once the assets are in the project, check their import settings. It’s nice to keep a tidy folder structure, so in the Project window, create a new folder inside RW named UI.įrom your file explorer, drag the Menu and Fonts folders into the UI folder in the Project window: You can thank Rodrigo Fuenzalida for the Titan One font and Draghia Cornel for the DCC Dreamer font. The game art is provided by Game Art Guppy, where you can find a lot of other game art for your practice games. Note: The Menu folder contains background images, buttons, icons and other game art. There you’ll find two folders: Menu and Fonts. Then, enter MenuScene as the scene name and save it to the RW / Scenes folder, right next to the RocketMouse scene.įirst on your to do list is to add assets to the scene, so unpack the UI Assets package in your file explorer. Open the Save Scenes dialog by choosing File ‣ Save Scenes. ![]() From the menu bar, Select File ‣ New Scene to create a new empty scene. Now, you’ll create a new scene to work with. You’ll be working out of the RW folder, which contains a Scenes folder. The RocketMouse game is already set up, and all the assets for it are in its own folder. Open the Introduction to Unity UI Part 1 Starter project in Unity. ![]() To get the package, and the starter project files, click on the Download Materials button at the top or bottom of this tutorial. ![]() I’ve prepared a special package that has everything you need. Don’t worry, you won’t have to draw anything yourself or scour the web for the right assets. You’ll need some images for backgrounds, buttons and other UI elements, as well as a few fonts for the labels and buttons. The goal here is to provide an introduction to Unity’s UI system and familiarize you with its components. Note: Keep in mind that this tutorial does not cover the creation of the game itself.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |