Cocos2d-x 3.9教程：4.精灵的创建和基本操作

4. 精灵的创建和基本操作

1.1. 精灵的创建

①正常创建

Sprite *sprite = Sprite::create("man.png");//通过图片创建精灵

sprite->setPosition(CCPoint(500, 500));//设置位置

this->addChild(sprite);//精灵必须被Layer添加，才能显示出来

②创建时剪裁

Sprite *sprite = Sprite::create("man.png", CCRect(0,0,200,200));

1.2. 精灵的缩放

设置Scale缩放系数

sprite->setScale(0.5f);

//等同于

//sprite->setScaleX(0.5f);

//sprite->setScaleY(0.5f);

1.3. 9宫格精灵及缩放

9宫格缩放是我们经常使用的缩放方法，即将素材分为9个部分：

在构造好一个9宫格素材后，拉伸它时相应的区域尺寸不变。我们一般用于按钮等需要动态改变大小，而又不希望四个角的圆角失真时。比如手机聊天工具中的气泡效果：

下面的代码，为构造一个9宫格缩放精灵：

//原始大小的图片（图片原始尺寸283×60）

Scale9Sprite *sp1 = Scale9Sprite::create("button.png");

sp1->setPosition(400, 600);

this->addChild(sp1);

 

//设定9宫插值尺寸的图片

Scale9Sprite *sp2 = Scale9Sprite::create("button.png");

sp2->setCapInsets(CCRect(10, 10, 263, 40));//10,10决定了左上角那一格的大小，263，40是中心那一格的宽和高

sp2->setPreferredSize(CCSize(100, 30));//设定“建议尺寸”，即是拉伸后的尺寸

sp2->setPosition(400, 500);

this->addChild(sp2);

 

//放大的图片

Scale9Sprite *sp3 = Scale9Sprite::create("button.png");

sp3->setCapInsets(CCRect(10, 10, 263, 40));

sp3->setPreferredSize(CCSize(300, 120));

sp3->setPosition(400, 400);

this->addChild(sp3);

运行效果及图解如下：

1.4. 按钮的基本使用及9宫格缩放

按照9宫格精灵的描述，其中的一种应用便是启用9宫格缩放的按钮：

关键代码：

#include "ui/UIButton.h"

using namespace ui;

 

//先创建一个用于控制的普通按钮，并绑定按钮事件

Button * buttonControl = Button::create("button_normal.png","button_pressed.png");

buttonControl->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2 + 100));

buttonControl->addTouchEventListener(CC_CALLBACK_2(HelloWorld::buttonCallback,this));//该回调中，执行一次就缩小或放大后面的按钮

this->addChild(buttonControl);

 

//若要给按钮上添加文字，则需如下操作

//buttonControl->setTitleText("Button!");

 

//再创建一个开启了9宫格缩放功能的按钮

Button * button = Button::create("button.png");

button->setTag(1);

button->setScale9Enabled(true);

button->setCapInsets(CCRect(10, 10, 263, 40));

button->setPressedActionEnabled(true);

button->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));

this->addChild(button);

绑定的回调函数中，通过设定button的contentSize来进行9宫格缩放按钮：

void HelloWorld::buttonCallback(Ref*pSender,Widget::TouchEventType event)

{

static bool beScale =true;

 

if (event != cocos2d::ui::Widget::TouchEventType::BEGAN)

return;

 

Button * buttonControl = static_cast<Button*>(getChildByTag(1));

 

if (beScale)

{

buttonControl->setContentSize(CCSize(100, 30));

}

else

{

buttonControl->setContentSize(CCSize(283, 60));

}

 

beScale = !beScale;

}