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); |
响应的事件类型如下:
/** 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; |
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 touchDownCallBack(CCObject* sender, CCControlEvent event); void touchDragInsideCallBack(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; } bool T12UI::init() { TBack::init(); CCScale9Sprite *bgButton = CCScale9Sprite::create("button.png"); CCScale9Sprite *bgButtonLighted = CCScale9Sprite::create("buttonHighlighted.png"); CCLabelTTF * text = CCLabelTTF::create("Touch Me", "Couier New", 50); CCControlButton * button = CCControlButton::create(text, bgButton); //为按钮添加位置 button->setPosition(ccp(winSize.width / 2, winSize.height / 2)); button->setBackgroundSpriteForState(bgButtonLighted, CCControlStateHighlighted); button->setTitleColorForState(ccRED, CCControlStateHighlighted); addChild(button); //为按钮添加监听事件,添加的是按钮被点击的事件 button->addTargetWithActionForControlEvents(this, cccontrol_selector(T12UI::touchDownCallBack), CCControlEventTouchDown); //为按钮添加监听事件,添加的是按钮Drag的事件 button->addTargetWithActionForControlEvents(this, cccontrol_selector(T12UI::touchDragInsideCallBack), CCControlEventTouchDragInside); return true; } void T12UI::touchDownCallBack(CCObject* sender, CCControlEvent event) { CCLog("touchDownCallBack"); } void T12UI::touchDragInsideCallBack(CCObject* sender, CCControlEvent event) { CCLog("touchDragInsideCallBack"); } |
运行结果: |
1cocos2dx扩展库UI控件,CCControlSlider,CCScale9Sprite(九妹图),CCControlSwitch,CCControlButton相关推荐
- JavaFX UI控件教程(九)之Text Field
翻译自 Text Field 本章讨论文本字段控件的功能. 的TextField类实现接受并显示文本输入的UI控制.它提供了从用户接收文本输入的功能.与另一个文本输入控件一起,PasswordFi ...
- Unity编辑器扩展 UI控件篇
前摇 :认识编辑器扩展的必要性 由于各种各样的原因,无论是移动端亦或是主机/PC端,进几年的发行的游戏体量是越来越大.通常来说大体量的游戏开发需要一套很成熟完善的工作流,亦或说有很强的工业化的能力,像 ...
- ComponentOne Studio 企业版,.NET UI 控件的完整集合
ComponentOne Studio 企业版ComponentOne Studio Enterprise(以前称为 ComponentOne Studio)是一个广泛.灵活的高性能.可扩展 .NET ...
- 基于Visual Studio扩展的WPF工业组态UI控件-ConPipe
本文的组态控件是由<轻量而敏捷的工业组态软件UI设计工具-ConPipe Studio 2022> 和 <轻量而敏捷的工业组态软件UI设计工具-机械组态篇>两篇文章中的方案全新 ...
- RxSwift UI控件扩展
RxSwift UI控件扩展 最好的示例是参考RxCocoa查看类似的属性如何扩展Rx化的. 为了配合RxSwift的绑定关系,RxCocoa提供简单的基于Cocoa控件的扩展,但是很少,比如Labe ...
- UI控件库分享:DWZ(j-UI)、LigerUI、Linb
DWZ(j-UI): 在线演示地址:http://demo.dwzjs.com 在线文档:http://demo.dwzjs.com/doc/dwz-user-guide.pdf DWZ框架Ajax开 ...
- MahApps.Metro扁平化UI控件库(可修改主题色等)
一.名词解释 使用MahApps.Metro扁平化UI控件库,可以使界面呈现更加美观.本文将总结MahApps.Metro的使用方法,及如何自定义修改其主题颜色等. 详细内容可参考官网:https:/ ...
- wpf教程-metro扁平化样式UI控件库推荐:MahApps.Metro
wpf虽然做出来的ui效果已经很好了,但是还是会有很多客户要求在完善.不如在win8出来后,很多用户就喜欢metro的样式. 今天给大家推荐metro扁平化样式UI控件库:MahApps.Metro ...
- RxSwift之UI控件UITextField与UITextView扩展的使用
一.监听单个 textField 内容的变化(textView 同理) 将 textField 里输入的内容实时地显示到控制台中,示例代码: // 创建文本输入框 let textField = UI ...
最新文章
- Attention is All You Need?LSTM提出者:我看未必
- 实时分布式搜索引擎比较(senseidb、Solr、elasticsearch)
- mysql vim_MySQL的安装配置
- python中面向对象的缺点_最简单的方法搞懂Python面向对象
- bzoj4152: [AMPPZ2014]The Captain
- 任务太多?学着突破重围
- (转载)python调用shell命令之os 、commands、subprocess
- mysql时间段查询语句_MySQL 如何查看慢查询语句
- 2017四川省赛E题( Longest Increasing Subsequence)
- catti二级笔译综合能力真题_2006年-2011年CATTI二级笔译综合能力试题及答案2018年.doc...
- Opera 首个 “重生” 版本亮相:启用全新用户界面
- Linux中Vim的安装
- 无刷直流电机控制MATLAB仿真,使用Simulink进行无刷直流电机控制仿真
- FIRST集 FOLLOW集和SELECT集
- 安装瑞星全功能安全软件2009
- 编程之美 - 孟岩点评
- An internal error occurred during: Fetching child
- php连接数据库的留言板,PHP+MySql实现简单的留言板功能
- android实训报告ppt,ppt实验报告总结
- 守望先锋打开黑屏闪退,已经重装过好几次都没用? 真正原因在这里
热门文章
- 模拟实现ArrayList与 LinkedList
- OpenCASCADE绘制测试线束:图形命令之AIS 查看器——对象命令
- wxWidgets:使用自定义对话框
- boost::mpl模块实现unpack_args相关的测试程序
- boost::hana::minus用法的测试程序
- boost::gil::num_channels用法的测试程序
- boost::geometry::default_distance_result用法的测试程序
- boost::fusion::as_map用法的测试程序
- boost::container模块实现显式实例集的测试程序
- Boost:boost::mp11的使用实例