How can a custom button sprite stretch/scale the same way the default sprite does?

When creating a new button we get a nice white box with rounded edges that stretches the middle regions (and not the corners) perfectly as we re-size its Rect Transform.

However, when replacing the texture with a custom sprite those 9 regions that determine the “stretching” part of the sprite are no longer there resulting in a, undesirably, uniform stretching of said sprite.

Do I have to create separate sprites for every button size, or is it possible to somehow set up a custom sprite in the editor (not with a script) that stretches like the default button sprite?

GOT IT!!

  • Open image in Sprite editor
  • Use “boarder” to split image into 9 tiles
  • Select the button in the hierarchy and in the inspector set the Image component’s “Image Type” to “Tiled”

:smile:

4 Likes