Configuring sprite images - Unity Tutorial

- [Lecturer] In this chapter we're going to be configuring the buttons for our main menu. Now to start doing that, I'm going to be tweaking and configuring the image that we'll use for the background of the button. To do that I'm going to make sure I select inside the project panel the options menu nine slice dot PNG file from the inspector. If you take a look at the preview here you can see in the bottom left hand side of the image we have the pixel data to be used for our button background. We're not interested in this blue section here all the vertical slice on the right hand side these are pixels that could potentially be related to other elements in the UI but the only ones that are relevant the only pixels that are relevant to our button are those in the bottom left-hand side. At the moment this is one single complete image. Here we're going to configure this image so that we can section off this area for the button and also configure the edges the top and the bottom of this image here so that it will stretch nicely if the buttons resized a different dimensions. To get started, I'm going to select the texture and from the inspector here under the Sprite mode setting I'm going to change that from single to multiple to indicate that there are multiple sprites within this image and then choose the apply button. Now that I've applied those settings I'm going to move up here to Sprite editor click my mouse to display the Sprite editor in this free floating window. I'm going to leave it in this free-floating window. And then I can simply click and drag inside the image to create this rectangular selection to indicate the pixels that I want to choose. And in this case, I'm going to move and drag the rectangle around the texture that I want for the button and click and drag making sure that when I click and drag, I'm clicking on the blue edge here to resize this. To somewhere about there for the right-hand side here for the top and then here for the bottom. That's now sectioned off the complete rectangle for the button image. You'll notice also we have these green handles and this allows us to section off interior sections of the Sprite, making it easy for the button to resize. I'm going to click and drag on this to about there to the right-hand side of this panel and the same for the left-hand one, making sure that I'm clicking and dragging on green boundary, not the blue. I'll click and drag on this handle to move that down to about here and then pull this one up to about here so that the central version the center slice represents the interior of the button and then the remaining outer slices here represent the corners and the edges of the button. I'll then choose apply to confirm those changes and close the Sprite editor. You can already see the outline section here in the preview. If I move to the project panel and I moved to the Sprite here and click on the right put pointing arrow you can see that now it's sectioned off this central element. If I take a look carefully at this element I can see that perhaps on the left-hand side there's a bit too much transparent space. Well, that's easy to fix. I'm just going to go back to the Sprite, back to the Sprite editor and just bring the blue boundary into the left a bit more and then choose apply and close this. If I now select the Sprite and you can see it's repaired that transparent edge. That's great, we've now configured our Sprite by sectioning off the entire area, and then configuring the nine slices within that's going to be useful later for creating a button that can easily resize. In the next movie we're going to get started at creating the button itself from this image.