Sign in to follow this  
fredMer

How to make a responsive button with a complicated design and use it for texts with different length?

Recommended Posts

Hi,
What is the workaround to create 3 buttons with the same design but different texts (short text, medium length text, long text)?
a) do I need 3 different images as a background ? What if i don’t know the length of the text ?
b) or I can use a single image and shrink/stretch it horizontally/vertically somehow when a text needs more/less space to fit in?

I hope i don’t need hundreds of images for each button :slight_smile:

I’m just a beginner. What is the best practice ?

Share this post


Link to post
Share on other sites

it depends on the background. if it is a rectangle with rounded corners 3 images sounds correct. just slice the ends off and use a 1px wide image for the centre and stretch it for the width of the text. you could cheat and have just 1 end and flip it when drawing the other end but the first option seems standard. if it's a rectangle with square corners, you can just use 1px wide image and stretch it, so super simple. if it's a stylized background with elements which can't be limited to 1px and looks wrong when stretching, you can just repeat it over multiple text widths, at least that's what i'd do. in the end you'll just have to test test test.

Share this post


Link to post
Share on other sites
10 hours ago, hotfeet said:

it depends on the background. if it is a rectangle with rounded corners 3 images sounds correct. just slice the ends off and use a 1px wide image for the centre and stretch it for the width of the text. you could cheat and have just 1 end and flip it when drawing the other end but the first option seems standard. if it's a rectangle with square corners, you can just use 1px wide image and stretch it, so super simple. if it's a stylized background with elements which can't be limited to 1px and looks wrong when stretching, you can just repeat it over multiple text widths, at least that's what i'd do. in the end you'll just have to test test test.

Is it possible to resize just the middle of the image ? maybe on a lower level like pixi or even webgl ?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.