當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

1cocos2dx扩展库UI控件，CCControlSlider，CCScale9Sprite（九妹图）,CCControlSwitch,CCControlButton

發布時間：2024/9/27 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 1cocos2dx扩展库UI控件，CCControlSlider，CCScale9Sprite（九妹图）,CCControlSwitch,CCControlButton 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

UI控件來自cocos2dx的擴展庫，完善了UI方面的元素，使cocos2dx更加豐富多彩。使用擴展庫需包含：

#include “cocos-ext.h”

USING_NS_CC_EXT;

CCControlSlider

CCControlSlider * slider = CCControlSlider::create(“sliderTrack.png”,”sliderProgress.png”,”sliderThumb.png”);

??? 第一個參數表示，slider滑動的軌道，即背景色。第二個參數表示滑動的進度。第三個參數表示拖動的按鈕。

slider->setMaximumValue(2.0f);?? //設置滑動最大值

slider->setMinimumValue(0.0f);?? //設置滑動最小值

slider->setValue(0.5f);?????????? //設置默認值

slider->setMaximumAllowedValue(1.2f);?? //設置某一個范圍內的最大值

slider->setMinimumAllowedValue(0.3f);?? //設置某一個范圍內的最小值

slider->addTargetWithActionForControlEvents(this,

cccontrol_selector(T12UI::controlCallback),

CCControlEventValueChanged);

設置事件的響應函數

typedef unsigned int CCControlEvent;

typedef void (CCObject::*SEL_CCControlHandler)(CCObject*, CCControlEvent);

#define cccontrol_selector(_SELECTOR)(SEL_CCControlHandler)(&_SELECTOR);

關于CCControlEvent

/** Kinds of possible events for the control objects. */

enum

{

??? CCControlEventTouchDown?????????? = 1 << 0,??? // A touch-down event in the control.

??? CCControlEventTouchDragInside???? = 1 << 1,??? // An event where a finger is dragged inside the bounds of the control.

??? CCControlEventTouchDragOutside??? = 1 << 2,??? // An event where a finger is dragged just outside the bounds of the control.

??? CCControlEventTouchDragEnter????? = 1 << 3,??? // An event where a finger is dragged into the bounds of the control.

??? CCControlEventTouchDragExit?????? = 1 << 4,??? // An event where a finger is dragged from within a control to outside its bounds.

??? CCControlEventTouchUpInside?????? = 1 << 5,??? // A touch-up event in the control where the finger is inside the bounds of the control.

??? CCControlEventTouchUpOutside????? = 1 << 6,??? // A touch-up event in the control where the finger is outside the bounds of the control.

??? CCControlEventTouchCancel???????? = 1 << 7,??? // A system event canceling the current touches for the control.

??? CCControlEventValueChanged??????? = 1 << 8????? // A touch dragging or otherwise manipulating a control, causing it to emit a series of different values.

};

typedef unsigned int CCControlEvent;

slider案例說明：

T12UI.h

#ifndef __T12UI_H__

#define __T12UI_H__

#include "cocos2d.h"

#include "TBack.h"

#include "cocos-ext.h"

USING_NS_CC;

USING_NS_CC_EXT;

class T12UI :public TBack

{

public:

??? static CCScene * scene();

??? CREATE_FUNC(T12UI);

??? bool init();

??? CCLabelAtlas * atlas;

??? //slider的回調函數

??? void sliderCallBack(CCObject* sender, CCControlEvent event);

};

#endif

T12UI.cpp

#include "T12UI.h"

#include "AppMacros.h"

#include "SimpleAudioEngine.h"

using namespace CocosDenshion;

CCScene *T12UI::scene()

{

??? CCScene * scene = CCScene::create();

??? T12UI * layer = T12UI::create();

??? scene->addChild(layer);

??? return scene;

}

//UI控件來自cocos2dx的擴展庫，完善了UI方面的元素，使cocos2dx更加豐富多彩。使用擴展庫需要包含

bool T12UI::init()

{

??? TBack::init();

??? //第一個參數表示slider滑動的軌道，即背景色。第二個參數表示滑動的進度。

??? //第三個參數表示拖動的按鈕

??? CCControlSlider *slider = CCControlSlider::create("sliderTrack.png","sliderProgress.png","sliderThumb.png");

??? //設置滑動最大值

??? slider->setMaximumValue(2.0f);

??? //設置滑動的最小值

??? slider->setMinimumValue(0.0f);

??? //設置默認值

??? slider->setValue(0.5f);

??? //設置某一范圍內的最大值，當移動到了1.2之后移動不了了

??? slider->setMaximumAllowedValue(1.2f);

??? //設置某一范圍內的最小值，向左移動到0.3之后移動不了了

??? slider->setMinimumAllowedValue(0.3f);

??? //設置slider的所在位置

??? slider->setPosition(ccp(winSize.width / 2,winSize.height/2? - 30));

??? slider->addTargetWithActionForControlEvents(

??????? this,

??????? cccontrol_selector(T12UI::sliderCallBack),

??????? CCControlEventValueChanged);

??? CCString *str = CCString::createWithFormat("%.2g", slider->getValue());

??? //第一個參數表示要顯示的字符串

??? //第二個參數表示從哪張圖片中取值

??? //第三個參數表示的是每個字的寬度width

??? //第四個參數表示的是每個字的高度

??? //第五個參數表示的是起始的字符

??? /* creates the CCLabelAtlas with a string, a char map file(the atlas),

??? the width and height of each element and the starting char of the atlas

??? */

??? atlas = CCLabelAtlas::create(

??????? str->getCString(),

??????? "fonts/fps_images.png",

??????? 12,32,'.');

??? atlas->setAnchorPoint(ccp(0.5,0.5));

??? //設置字體的放大效果

??? atlas->setScale(2.0f);

??? atlas->setPosition(ccp(winSize.width / 2, winSize.height / 2 + 30));

??? addChild(atlas);

??? slider->setValue(1.3f);

???

??? addChild(slider);

??? return true;

}

//設置slider的回調函數

//這里的sender表示發送的一者

void T12UI::sliderCallBack(CCObject* sender, CCControlEvent event)

{

??? CCControlSlider * slider = (CCControlSlider *)sender;

??? CCString *str = CCString::createWithFormat("%.2g", slider->getValue());

??? //因為成為了全局的了，所以能夠訪問的到

??? atlas->setString(str->getCString());

}

運行結果：

最大值

最小范圍：

最大范圍：

運行結果在0.3和1.2之間

CCControlSwitch

第一個參數，掩底背景圖片，第二個參數為開的圖片，第三個參數為關的圖片，第四個參數為手指劃到按鈕，第五，六個參數分別為開和關顯示的文字。

CCControlSwitch * sw = CCControlSwitch::create(

CCSprite::create("switch-mask.png"),

CCSprite::create("switch-on.png"),

CCSprite::create("switch-off.png"),

CCSprite::create("switch-thumb.png"),

CCLabelTTF::create("ON","Courier New",20),

CCLabelTTF::create("OFF","Courier New",20)

);

設置時間觸發后的響應函數

sw->addTargetWithActionForControlEvents(this,cccontrol_selector(T12UI::switchCallback),

CCControlEventValueChanged)

如何在響應函數中獲取選項

void T12UI::switchCallback(CCObject * sender,CCControlEvent event)

{

CCControlSwitch * sw = (CCControlSwitch *)sender;

If(sw->isOn())

{

??? CCLog(“On”);

} else {

??? CCLog(“off”);

}

5? CCControlSwitch案例說明

T12UI.h

#ifndef __T12UI_H__

#define __T12UI_H__

#include "cocos2d.h"

#include "TBack.h"

#include "cocos-ext.h"

USING_NS_CC;

USING_NS_CC_EXT;

class T12UI :public TBack

{

public:

??? static CCScene * scene();

??? CREATE_FUNC(T12UI);

??? bool init();

??? //開關的回調函數

??? void switchCallBack(CCObject* sender, CCControlEvent event);

};

#endif

T12UI.cpp

#include "T12UI.h"

#include "AppMacros.h"

#include "SimpleAudioEngine.h"

using namespace CocosDenshion;

CCScene *T12UI::scene()

{

??? CCScene * scene = CCScene::create();

??? T12UI * layer = T12UI::create();

??? scene->addChild(layer);

??? return scene;

}

//UI控件來自cocos2dx的擴展庫，完善了UI方面的元素，使cocos2dx更加豐富多彩。使用擴展庫需要包含

bool T12UI::init()

{

??? TBack::init();

??? //通過SimpleAudioEngine的方式實現加載音樂

??? SimpleAudioEngine::sharedEngine()->preloadBackgroundMusic("audio/start.wav");

??? //創建開關、

??? //第一個參數為：掩底背景CCSprite

??? //第二個參數為開的CCSprite

??? //第三個參數為關的CCSprite

??? //第四個參數為手指滑到CCSprite

??? //第五個參數on的label

??? //第六個參數為off的label

??? CCControlSwitch *sw = CCControlSwitch::create(

??????? CCSprite::create("switch-mask.png"),

??????? CCSprite::create("switch-on.png"),

??????? CCSprite::create("switch-off.png"),

??????? CCSprite::create("switch-thumb.png"),

??????? CCLabelTTF::create("ON", "Courier New", 20),

??????? CCLabelTTF::create("OFF", "Courier New", 20)

??? );

??? //設置開關的位置

??? sw->setPosition(ccp(winSize.width / 2,winSize.height / 2));

??? sw->addTargetWithActionForControlEvents(this,

??????? cccontrol_selector(T12UI::switchCallBack),

??????? CCControlEventValueChanged);

??? //設置開關默認是關閉的

??? sw->setOn(false);

??? //將開關添加到Layer中去

??? addChild(sw);

??? return true;

}

//開關的回調函數

void T12UI::switchCallBack(CCObject* sender, CCControlEvent event)

{

??? CCControlSwitch * sw = (CCControlSwitch *)sender;

??? if (sw->isOn())

??? {

??????? CCLog("click On");

??????? //通過playBackgroundMusic打開音樂

??? ??? SimpleAudioEngine::sharedEngine()->playBackgroundMusic("audio/start.wav");

??? }

??? else

??? {

??????? //通過stopBackgroundMusic()關閉音樂

??? ??? SimpleAudioEngine::sharedEngine()->stopBackgroundMusic("audio/start.wav");

??????? CCLog("click off");

??? }

}

運行結果：

CCScale9Sprite九妹圖

CCScale9Sprite對象，是一種CCSprite對象的變形，它的用法和CCSprite類似，不同點是：CCScale9Sprite對象有個特性就是縮放貼圖時可以盡量不失幀。比如QQ聊天內邊框

原理：

CCScale9Sprite的實現非常巧妙，是通過1個CCSpriteBatchNode和9個CCSprite來實現的，原理很簡單，通過將原紋理資源切割成9部分（PS:這也是叫九宮圖的原因）。根據想要的尺寸，完成以下三個步驟：

保持4個角部分不變形

單向拉伸4條邊（即在4個角兩兩之間的邊，比如上邊，只做橫向拉伸）

雙向拉伸中間部分（即九宮圖的中間部分，橫向，縱向同時拉伸，PS:拉伸比例不一定相同）

??? CCSpriteBatchNode的資源為整個的紋理，9 個CCSprite 對應于紋理的9

個部分（根據紋理不同，9 部分所占比例會有所不同），根據想要的尺寸，

將9 部分拼裝在一起!

需要包含的頭文件

#include “cocos-ext.h”??????????????????? //包含cocos-ext.h頭文件

using namespace cocos2d::extension;?????? //引用cocos2d::extension 命名空間

使用說明：

CCScale9Sprite::create(const char* file,CCRect rect, CCRect, capInsets);

第一個參數為文件，第二個參數使用文件的大小，第三個參數如下，若未設置，或設置圖分別如下：

我們知道CCSprite的拉伸方式是通過setScale();來實現的，而對于CCScale9Sprite則不同。它是通過setContentSize(constCCSize & size);來實現圖片的拉伸。

測試代碼：

CCScale9Sprite * spr = CCScale9Sprite::create("scale9.png",CCRectMake(0, 0, 116, 102), CCRectMake(40, 30, 30, 40));

spr->setPosition(ccp(winSize.width/2,winSize.height/2));

addChild(spr);

//spr->setScale(4.0f);

spr->setPreferredSize(CCSizeMake(400,200));

關于CCScale9Sprite::create()

T12UI.h

#ifndef __T12UI_H__

#define __T12UI_H__

#include "cocos2d.h"

#include "TBack.h"

#include "cocos-ext.h"

USING_NS_CC;

USING_NS_CC_EXT;

class T12UI :public TBack

{

public:

??? static CCScene * scene();

??? CREATE_FUNC(T12UI);

??? bool init();

};

#endif

T12UI.cpp

#include "T12UI.h"

#include "AppMacros.h"

#include "SimpleAudioEngine.h"

using namespace CocosDenshion;

CCScene *T12UI::scene()

{

??? CCScene * scene = CCScene::create();

??? T12UI * layer = T12UI::create();

??? scene->addChild(layer);

??? return scene;

}

//UI控件來自cocos2dx的擴展庫，完善了UI方面的元素，使cocos2dx更加豐富多彩。使用擴展庫需要包含

bool T12UI::init()

{

??? TBack::init();

??? CCScale9Sprite * s9spr = CCScale9Sprite::create(

??????? "scale9.png",

??????? CCRectMake(0, 0, 116, 102),

??????? CCRectMake(30, 40, 56, 20));

??? s9spr->setPosition(ccp(winSize.width / 2, winSize.height / 2));

??? addChild(s9spr);

??? s9spr->setPreferredSize(CCSize(500,100));

??? return true;

}

運行結果：

CControlButton

CCScale9Sprite * bgbutton = CCScale9Sprite::create("button.png");

//背景色圖片

CCScale9Sprite * bgbuttonlighted =

CCScale9Sprite::create("buttonHighlighted.png");

//背景色高亮圖片

CCLabelTTF * titlebutton = CCLabelTTF::create("Touch Me", "Courier

New", 30);

//按鈕的文本

CCControlButton * button =

CCControlButton::create(titlebutton,bgbutton);

//創建按鈕

button->setColor(ccc3(159, 168, 176));

//調色

button->setBackgroundSpriteForState(bgbuttonlighted,

CCControlStateHighlighted);

//按下后背景高亮

button->setTitleColorForState(ccWHITE,

CCControlStateHighlighted);

//按下后文本高亮

button->addTargetWithActionForControlEvents(this,cccontrol_selector(T12UI::buttonTouchDown));

button->addTargetWithActionForControlEvents(this,cccontrol_selector(T12UI::buttonTouchDown),CCControlEventTouchDown);

button->addTargetWithActionForControlEvents(this,cccontrol_selector(T12UI::buttonTouchDragInside),CCControlEventTouchDragInside);

響應的事件類型如下：