Slicing UI button in multiple areas

uvviesigma · January 12, 2023, 7:37pm

I have this button (or any button for that matter, that isn’t continuously stretchable between the sides):

Upon slicing it with the Sprite Editor, it understandably resizes the button by also stretching the middle area:

Is there by chance a workaround to keeping the middle area intact, or a means to only stretch multiple areas like below?

Kurt-Dekker · January 12, 2023, 7:50pm

I don’t think it could do that natively… maybe fake it by two images side-by-side and your button only having HALF of its current width, then flip it on the other side. If you made a scalable prefab out of that, it might be pretty close to what you want.

Otherwise you could always get the source for Image.cs and hack it to support your spiffy little five-slice method!

The generate sliced sprite code starts on line 970 here:

github.com

Unity-Technologies/uGUI/blob/5ab4c0fee7cd5b3267672d877ec4051da525913c/UnityEngine.UI/UI/Core/Image.cs

using System;
using System.Collections.Generic;
using System.Text;
using UnityEngine.Serialization;
using UnityEngine.U2D;

namespace UnityEngine.UI
{
    /// <summary>
    /// Image is a textured element in the UI hierarchy.
    /// </summary>

    [AddComponentMenu("UI/Image", 11)]
    /// <summary>
    ///   Displays a Sprite inside the UI System.
    /// </summary>
    public class Image : MaskableGraphic, ISerializationCallbackReceiver, ILayoutElement, ICanvasRaycastFilter
    {
        /// <summary>
        /// Image fill type controls how to display the image.

This file has been truncated. show original

Looks like 982 gets the inner / outer rects, padding and border, then just calculates the verts and streams them out in a loop.

uvviesigma · January 12, 2023, 10:10pm

Thanks for the input, I eventually found a script that allows a button to have the two halves as multiple target graphics, so far this was the most satisfying workaround… unless another problem shows up in the future

I’ve also had a good look at that method, but it looks more complicated than I thought (and beyond my level of programming skill). Would it be enough if I just changed the way sliced sprites are made in that method, given there’s just a single border? Maybe it would also affect how other sprites are being sliced too

Kurt-Dekker · January 12, 2023, 10:53pm

Oh that’s a perfect workaround. Thanks for writing back.

You should post the link to the script for others.

Good question… I kinda like your solution more though. Every line of code that I don’t have to write!

uvviesigma · January 13, 2023, 8:34am

It’s in another forum thread from here actually, the last two scripts: https://discussions.unity.com/t/556754