New UI Button: Have sprite fill entire button (overflow).

Questions & Answers
1

Hi,

I’m looking for the best way to achieve image overflow in the new Unity UI system. I have a button with an image component that should always remain at 160 x 90 px. I’m putting in different sprites, which I don’t have control over (end users can set custom images). Instead of stretching or squashing those images to fit my buttons, I would like to scale them up so that they fill the entire button and mask away the overshoot. In other applications this is often called “overflow”.

It sounds like this should be built into the UI system already, so am I missing it or do I have to build my own solution by calculating the sizes and using a mask component?

I don’t care about positioning the images other than center, as long as they are not stretched and my buttons are completely filled.

49685-cropbutton.jpg
49685-cropbutton.jpg1000×483 79.7 KB

Thanks!

2

Simply add the image as a child of the button and add a Mask component to the button itself. If you stretch the image with and check the keep aspect ratio checkbox it should work.

Tutorial for the UI Mask is found here: https://unity3d.com/learn/tutorials/modules/beginner/ui/ui-mask