SpriteBuilder CCButton stretched images?

Question

In spritebuilder, the tool to create UI along with cocos2d, how come whenever I try to add a background image to a CCButton, it appears stretched or altered in some way?

It is hard to explain but after fiddling with every CCButton option for 20 minutes this is the closest I could get it. The first image is the original image and the second in the image in SpriteBuilder.

enter image description here

As you can see in the second image, the edges seem jagged a bit and are curving in the wrong direction. Can anyone explain to me why this is happening and how I can fix this?

Thanks!

I haven't checked but CCButton may be using CCSprite9Slice internally which might explain the stretching. Also, there may be tiny discrepancies between Spritebuilder and the actual app, so if you haven't check what it looks like in the app on a device. — CodeSmile, Jun 12 '14 at 19:08
@LearnCocos2D Will do. Is there any way to turn off CCSprite9Slice or change the filtering somehow so that it looks likes the first image? — SimplyKiwi, Jun 12 '14 at 19:16

score 2 · Answer 1 · answered Mar 18 '15 at 22:20

I got this settings to work correctly by clicking the "Reset to default size" button. It automatically set the Preferred Size to half the width and height of my original image (since my 'default scaling' is set to '2x' in File->Project Settings).

To keep the button size intact while adding text then set the 'max size' property to the same as 'preferred size'.

score 1 · Answer 2 · answered Jun 13 '14 at 00:33

1

CCButton uses a CCSprite9Slice and you need to set the preferred size of the button to solve your problem. If the preferred size matches the image size then the image will not be stretched:

enter image description here

You also need to take the scaling factor into account. If the you provide the image as a 4x asset, you need to set preferred size to 1/4 of the image size.

answered Jun 13 '14 at 00:33

Ben-G

4,996
27
33

1

I tried that and it still looks stretched in the corners both on in SpriteBuilder and on the device? Any other workarounds? – SimplyKiwi Jun 14 '14 at 07:10
Can you try setting the *Max size* to the same size? If that works for you I will update my answer. – Ben-G Jul 02 '14 at 19:36
You need to make sure that you have no title inside the button... sometimes if the title text is bigger, it can stretch the button. – Jonny Feb 09 '15 at 10:54

score 0 · Answer 3 · answered Jun 19 '14 at 01:43

0

If you created the image try editing it so you don't have to scale it.

answered Jun 19 '14 at 01:43

jakesan700

56
9

score 0 · Accepted Answer · answered Jul 24 '14 at 00:15

0

I just ended up subclassing CCSprite and just adding my own touch controls to that. Now it looks great!

answered Jul 24 '14 at 00:15

SimplyKiwi

12,376
22
105
191

SpriteBuilder CCButton stretched images?

4 Answers4