Nodachisoft Nodachisoft logo, Katana Sword Icon
  
@Amaji✎ Update December-18-2021

How to draw your own window (GUI) in Unity

How to draw your own window (GUI) in Unity

Abstract

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.

Original Window GUI Image on Unity

The window can be made transparent, and it is good to be able to create a variable size window directly from a single image.

My Enviroment

Software Version
Unity Unity2020.3 LTS
OS Windows 10 Home

Steps for creating original winodow

The following is the process from preparing the image to displaying it in Unity.

Prepare the image

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.

Window sample

Importing into Unity

Drag and drop the image into Unity.

After importing the image, set the texture settings.

Inspector

  • Set Texture Type to Sprite(2D and UI).
  • Change MeshType to Full Rect.

Select the Sprite Editor button. The Sprite Editor will be displayed.

"No Sprite Editor Window registerd." is displayed.

If the editor does not appear and you get the message "No Sprite Editor Window registerd.

Download it

If the editor appears without any errors, you don't need to do this.

You can download it from the menu Window{/ } -> Package Manager.

Package Manager

Set the search destination to "Unity Registry" and enter "2D Sprite" in the search text.

Searching 2D Sprite

Select 2D Sprite, and press the Install button in the lower right corner.

After a while, the installation will be complete. (There will be no message when it finishes.) Press the Sprite Editor button from the texture again, and if the editor appears properly, you're all set!

Displaying the Sprite Editor

A window similar to the following will appear.

Appear Sprite Editor

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.

InitialState

The delimiter position has been changed as follows.

AfterModifiedSpriteDivisor

After separating them, press the Apply button to apply the changes.

Try to display a Window in the Unity scene

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 Source Image of the "Image" we created, we can successfully create a variable window-like object as shown below!

3windows ex

The example image above shows three Image instances placed under Canvas, with the Width, Height, and display position changed respectively.

Websites and references that were very helpful.

notice

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.

Page History

date modification
none
 
 
Message sent

Thank you for your message.

Something error has occured!

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_eng
Name:
 
Replay To:
 
Message:
 
Back
Check the content!

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:
 
Reply To:
 
Message:
 
Enter a confirmation key to make sure that you are not operating from a Robot.
Confirmation Key is 95
Back
 / 
Go to Confirmation
Entry fields
Go to Confirmation

There are 5 articles that may be relevant!

System.Type.GetType returns null in Unity C# code

System.Type.GetType returns null in Unity C# code

#Unity#.net✎ 2022-1-11
System.Type.GetType returns null in Unity C# code
Table Of Contents
How to draw your own window (GUI) in Unity
How to draw your own window (GUI) in Unity
Abstract
Abstract
My Enviroment
My Enviroment
Steps for creating original winodow
Steps for creating original winodow
Prepare the image
Prepare the image
Importing into Unity
Importing into Unity
"No Sprite Editor Window registerd." is displayed.
"No Sprite Editor Window registerd." is displayed.
Displaying the Sprite Editor
Displaying the Sprite Editor
Try to display a Window in the Unity scene
Try to display a Window in the Unity scene
Websites and references that were very helpful.
Websites and references that were very helpful.
notice
notice
Page History
Page History
Nodachisoft © 2021