Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 12 Next capture
2021 2022 2023
1 capture
12 Jun 22 - 12 Jun 22
sparklines
Close Help
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
4
Question by supernat · Feb 21, 2018 at 05:50 PM · user interfaceslicing

Work around for broken Unity 9 Slicing UI Image

I discovered a bug in Unity 9-slicing, specifically in the UI Image component. Unity even confirmed the bug, but then recently updated the case and marked it as "Per Design...Due to the nature of the bug". My guess is that to fix the bug would break everyone in the world that has already found a work around for it.

The issue is that if you create a 9 sliced sprite using the Unity UI, it basically just doesn't behave like a normal 9 slice. I tested this by rendering a pixel-accurate sprite to the left, then to the right of it, the same image but converted to 9 slice. The two images should be identical at the same size. However, the 9 sliced one was stretched on the ends even at rest.

What is everyone else doing to work around this terrible bug? Are you just creating your buttons at 1 size and not using 9 slicing for them? I've tried many other work arounds, and this seems to be the only reasonable approach. I have googled this problem, and it's mentioned in tons of places, but no one seems to have a concise work around for it.

For those interested, here is a link to the bug: https://fogbugz.unity3d.com/default.asp?976216_q91ojraidh086m7d Look at the 2nd animation. Just compare the top MIX button with the second MIX button. Both use the same pixel-accurate dimensions, yet the second button is stretched on the sides both at rest and in motion. I just want the sides of the buttons to remain accurate. If I scale them manually to unbreak Unity, it's fine, but then when the aspect ratio of the device changes, it's broken again.

So any ideas how to get sliced sprite behavior for a UI Image component without using the built-in slicing?

Comment
Add comment · Show 1
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image OlliIllustrator · Aug 08, 2018 at 06:07 PM 0
Share

@supernat: yeah, same here-- Just making my first steps in UI design and this sucks. Image slice behaves totally different from Sprite Renderer sliced. What is the workaround?

4 Replies

· Add your reply
  • Sort: 
avatar image
1

Answer by Bunny83 · Aug 08, 2018 at 07:32 PM

Well, the issue is only the scale of the objects. If you want to avoid stretching do not scale any object non-uniformly. The canvas scaler should only scale uniformly. So when you want to check the size of an element you should change it's Anchor min / max values. When anchors of a child object are placed correctly within it's parent it should change it's size accordingly without changing it's scale.


The left, top, right and bottom values define the actual size of the object while the anchors define the relation to the parent If you place the child anchors at the corners of the child, the child will change it's size 1-to-1 with the parent. So the child will keep its relative size. If you place the anchor at the corners or the parent, the child will keep its current distances from the border of the parent.


So just never touch the scale or if you have to only scale it uniformly.

Comment
Add comment · Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image OlliIllustrator · Aug 08, 2018 at 07:50 PM 0
Share

Hmm-- seems I have misunderstood the problem discussed here.

$$anonymous$$y problem is that if add a sliced sprite to an image in UI it does not behave the same as if I add the sliced sprite to sprite renderer but I need to use images for scaling backgrounds because a sprite renderer won`t fade with the canvas group.

I thought this was related to the topic.

avatar image
1

Answer by EnJenGames · Nov 17, 2018 at 03:24 AM

Do i understand the problem correctly, that when you scale a 9sliced sprite unevenly, the edges gets misshaped? If so, leave the scale at 1. Change the width and height property in the rect transform instead.

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image
1

Answer by exzizt · Feb 02, 2019 at 04:32 AM

This is still a bug! I can nine-slice a sprite fine with the SpriteRenderer, but when I use that same sprite on an Image, it doesn't work! Discovered this while trying to make a nine-slice Fill for a Slider.

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image
0

Answer by IARI · Dec 01, 2021 at 04:59 PM

I hate this kind of stuff. This whole 9-slicing system is completely unusable for buttons, which are often shown as a "prime usecase" - scaling uniformly is completely useless for a button with round corners. Calling this "per design" is just lazy. Its simple, this behaviour wrong - period. Whoever would design something like this has the design wrong. Whats the point of having unity modular in packages, release a "UI" 1.0 package and never update it. Just fix this, and whoever is afraid of having his UI broken by this fix just don't update - ui is legacy now anyways.

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this Question

Answers Answers and Comments

82 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

How to enable user to create new button with input name? 0 Answers

Making a UI menu loop while navigating 1 Answer

How to implement a simple dialogue system and disable movement/shooting? 1 Answer

Visual list of NPCs 0 Answers

Unity splitting up terrains into equal heightmap resolution ones. 0 Answers


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges