
This is a record of creating a window in Unity using the 9-slice feature. It's easy to create a variable size window interface like this.
The window can be made transparent, and it is good to be able to create a variable size window directly from a single image.
Software | Version |
---|---|
Unity | Unity2020.3 LTS |
OS | Windows 10 Home |
The following is the process from preparing the image to displaying it in Unity.
Create an image for the window. Prepare an image that will be divided into 9 parts.
This is the image of the completed Window example.
In this case, we have prepared a png file of an image like the one below, including transparent colors.
Drag and drop the image into Unity.
After importing the image, set the texture settings.
Select the
button. The Sprite Editor will be displayed.If the editor does not appear and you get the message "No Sprite Editor Window registerd.
If the editor appears without any errors, you don't need to do this.
You can download it from the menu
Set the search destination to "Unity Registry" and enter "2D Sprite" in the search text.
Select 2D Sprite, and press the
button in the lower right corner.After a while, the installation will be complete. (There will be no message when it finishes.) Press the
button from the texture again, and if the editor appears properly, you're all set!A window similar to the following will appear.
From here, divide the image into 9 areas by dividing the window into left, right, top, bottom, and center.
The following is the initial state without any settings. You can see the green dots on the left, right, top, bottom, and center. You can move this with the mouse to specify the dividing point.
The delimiter position has been changed as follows.
After separating them, press the
button to apply the changes.Now, create a new Canvas in the Unity scene and place a Image under it. Create a new Image under it.
If we specify the texture we just created in the
of the "Image" we created, we can successfully create a variable window-like object as shown below!
The example image above shows three Image instances placed under Canvas, with the Width, Height, and display position changed respectively.
The logo image borrowed from the Unity official website is used in the article.
This article are not sponsored by or affiliated with Unity Technologies or its affiliates. Unity Trademark is a trademark or registered trademark of Unity Technologies or its affiliates in the U.S. and elsewhere.
date | modification |
---|---|
none |
Thank you for your message.
Sorry. The Error has occurred.We apologize for the inconvenience.Please try again in a few minutes or contact us via DM below.
Twitter:@NodachiSoft_engName:Send the following information to us. If you are happy with your submission, please click "Send". If you want to modify it, please click "Back".
Name: