Join Jesse Freeman for an in-depth discussion in this video Creating an image, part of Unity 5: UI.
- View Offline
- Now we're ready to look at how to work with image components. Let's create a new scene so we can test them out. Let's name this ImageScene, and save it into our Scenes folder. Next, we'll create a new image. As you can see, the image is made up of a Rect Transform, a Canvas Renderer, and an Image Component. On the Image Component, we're able to change the Source Image, which is a sprite.
We can change the Color Tint on that sprite. We can also add a Material, and we can Raycast the target, as well as preserve the Aspect Ratio as we scale it. When we created our project, we imported an Artwork folder, which had a sprite called ButtonBorder. Let's add this as our image's Source. As you can see, we now have the image stretched to 100 by 100, which was the width and height of the image component when we created it.
If we scroll down and select the Set Native Size, you'll see the image will re-size itself to match the sprite itself. The image still looks a little bit blurry. So let's select the Texture, and let's change its Filter Mode to Point, and its Format to True Color, then hit Apply. Now, the image will look a lot sharper. The next thing we want to do is change the Pixels to Units.
Let's set this to one, and hit Apply. And now in our Canvas, let's change the Canvas Scaler, the Mode to Scale with Screen, and we're going to change the Reference Pixels To Units to one. This way, if we design this image to be at a certain size, based on a specific resolution, we can now match them up exactly how we originally designed it. And then the Canvas Scaler will handle scaling up and scaling down the canvas to match the resolution we set as a reference.
Let's select the image, and click on Set Native Size. It's not going to change, simply because we already set that before. So now in the Game view, we are seeing what a 64 by 64 pixel image would look like at that particular resolution. Next, we'll talk about the image type and some of the different ways the image can render out its own sprite.
- Adding new components to the Canvas
- Working with RectTransforms
- Nesting UI elements
- Adding rich text and effects to the UI
- Creating images
- Styling UI buttons
- Handling input
- Creating sliders
- Controlling the layout of the screen
- Adding toggles and dropdowns