Fix Stretched UI in Unity (9-Slice Explained)


If your UI elements in Unity start looking stretched when you resize them, you probably ran into one of the most common beginner problems. You make a button or a panel, scale it up, and suddenly the corners look wrong and everything feels distorted.

This happens because Unity stretches sprites by default. It treats them like normal images, so when you change the size, every part of the sprite gets scaled equally. That works fine for photos, but not for UI.

Here’s what that looks like:

The fix for this is something called 9-slice.

If you prefer seeing it first, here’s a quick video that shows the problem and the fix:


9-slice is a way to tell Unity which parts of your sprite should stay the same and which parts are allowed to stretch. The corners stay untouched, the edges stretch only in one direction, and the center fills the rest. That’s why buttons and panels can scale without breaking visually.

To fix your UI, go to your sprite in the Project window and select it. In the Inspector, make sure the texture type is set to Sprite (2D and UI). Then open the Sprite Editor.

Inside the Sprite Editor, you’ll see green lines around your sprite. These define the borders. Drag them inward slightly so that the corners of your sprite are inside those borders. These corner areas will no longer stretch.



Apply the changes and go back to your UI element. In the Image component, change the Image Type from “Simple” to “Sliced”.

Now when you resize the UI element, the corners should stay clean and the edges will stretch properly.

If it still looks wrong, it’s usually something small. Either the borders weren’t set correctly, the changes weren’t applied, or the Image Type is still set to Simple.

If it still looks wrong, it’s usually something small. Either the borders weren’t set correctly, the changes weren’t applied, or the Image Type is still set to Simple.



Comments

Post a Comment

Popular posts from this blog

How to Burn a CD on Windows 11 (Step-by-Step Guide for Beginners)

Image
Disclaimer: This page contains affiliate links. If you purchase through these links, I may earn a small commission at no extra cost to you. Burning a CD on Windows 11 is still possible and surprisingly easy, even on modern laptops. All you need is a USB CD burner and blank CDs. In this guide, I’ll show you step by step how to create your own music or data CD in just a few minutes. Step 1- Get what you need: To get started, you’ll need an external USB CD burner and a pack of blank CDs. Most modern laptops no longer include a built-in drive, so using an external one is the easiest solution. Insert a blank CD into your burner before continuing. Here are some simple options to get started: Burner Blank CDs Step 2 - Open Windows Media Player: Windows 11 still includes Windows Media Player. Open it and go to the “Burn” tab in the top right corner. You should see your connected USB CD burner listed there, along with an area where you can drag your files. Step 3 - Drag files: Now simply ...
Read more

I built a random Pokémon generator while learning JavaScript

Image
  I built a random Pokémon generator while learning JavaScript Open Tool Page View Source Code A while ago, when I started learning JavaScript, I made a small project just to understand how things actually work. Nothing serious, just trying things out and seeing what happens. Recently I saw a TikTok where someone was building a random Pokémon team using Google’s number generator. And I thought, wait, I already made something like that. So I went back and found this old project again. It’s basically just a small website where you press a button and it gives you a random Pokémon. It picks a random number, sends a request to an API, and then shows the name and the image. That’s all it does, but at the time it felt like a big step. The main reason I built it was because I wanted to understand how websites actually get data. Before that, everything I did was kind of static. This was one of the first times where I worked with real data coming from somew...
Read more

How to Use APIs in a Web Game (Pokémon Example with JSON Optimization)

How I Built a Pokémon API Game and Optimized It Using JSON I built a simple browser game where you compare two Pokémon and guess which one has higher stats. The idea is very simple. You see two Pokémon and pick the one you think has the higher value. The game uses real data from an API, in this case the PokéAPI. That makes it a good small project to understand how APIs work in a real scenario. Overview Random Pokémon Generator Fetching Data per Round Using a Local JSON File Performance Impact Conclusion At the beginning I used the most direct approach. Every time the user clicked a button, the game sent a fetch request to the API. I had already used this pattern in an earlier project, a random Pokémon generator, so it felt natural to reuse it. For that kind of tool it works fine. The problem started when I turned the idea into a game. In a higher or lower game you do not just fetch once. You fetch multiple times per round. One round needs two Pokémon. Ten rounds can...
Read more