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.

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

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.

Importing into Unity

Drag and drop the image into Unity.

After importing the image, set the texture settings.

• 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.

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

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

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

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.

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 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!

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.

• answers.unity.com - no-sprite-editor-window-registered-please-download

• docs.unity3d.com - Unity2020.3 - 9SliceSprites

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