CCScale9Sprite & CCControlButton boxed out

cocos2d-x C++
#1

Hi,

I am completely lost as to using CCScale9Sprite & CCControlButton.
As you can see in the screenshot http://imgur.com/vu05xSj
The image on the left is the original and right is the outcome. Why is the image on the right boxed out ???
I tried editing the image, in TP set it to Basic, Trim set to None… I still get the same results. Even if I make the whole image solid with no transparency, its still the same sort of weird stretching.

Here the code where I try to create a button.

CCScale9Sprite downButtonSprite = CCScale9Sprite::createWithSpriteFrameName;
CCControlButtonDowncontrolButton = CCControlButton::create(downButtonSprite);
DowncontrolButton~~>setPreferredSize );
DowncontrolButton~~>setPosition( ccp(winSize.width - 70 , 150) );
this->addChild(DowncontrolButton);

Im using cocos2d-x-2.1.5. What is really the problem. Scale9 is driving me nuts! I think we need a proper tutorial on Scale9.
Thanks in advance.

#2

anyone help on this issue ? left side is original and right side is the weird picture.

#3

To use CCScale9Sprite, you need a 3-by-3 square image.

#4

Check the wiki:

http://www.cocos2d-x.org/wiki/CCControlExtension?project_id=cocos2d-x

And if your button is less than than the border width, you get some weird effects as the sub-images overlap.

#5

You can also call setAdjustBackgroundImage(false) on your CCControlButton to tell it to not treat your image like a scale9 sprite.