1cocos2dx扩展UI控制,CCControlSlider,CCScale9Sprite(九妹图。),CCControlSwitch,CCControlButton
UI控件来自cocos2dx的扩展库。完好了UI方面的元素,使cocos2dx更加丰富多彩。使用扩展库需包括:
#include “cocos-ext.h” USING_NS_CC_EXT; |
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdG90b3R1enVvcXVhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
CCControlSlider
CCControlSlider * slider = CCControlSlider::create(“sliderTrack.png”,”sliderProgress.png”,”sliderThumb.png”); |
第一个參数表示。slider滑动的轨道。即背景色。
第二个參数表示滑动的进度。
第三个參数表示拖动的button。
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 CCControlEventTouchDragInside CCControlEventTouchDragOutside CCControlEventTouchDragEnter CCControlEventTouchDragExit CCControlEventTouchUpInside CCControlEventTouchUpOutside CCControlEventTouchCancel CCControlEventValueChanged }; typedef |
slider案例说明:
T12UI.h |
#ifndef #define #include #include #include USING_NS_CC; USING_NS_CC_EXT; class { public: static CREATE_FUNC(T12UI); bool CCLabelAtlas * //slider的回调函数 void }; #endif |
T12UI.cpp |
#include #include #include using CCScene *T12UI::scene() { CCScene * T12UI * scene->addChild(layer); return } //UI控件来自cocos2dx的扩展库。完好了UI方面的元素,使cocos2dx更加丰富多彩。使用扩展库须要包括 bool { TBack::init(); //第一个參数表示slider滑动的轨道,即背景色。第二个參数表示滑动的进度。 //第三个參数表示拖动的button CCControlSlider *slider //设置滑动最大值 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 slider->addTargetWithActionForControlEvents( this, cccontrol_selector(T12UI::sliderCallBack), CCControlEventValueChanged); CCString *str //第一个參数表示要显示的字符串 //第二个參数表示从哪张图片中取值 //第三个參数表示的是每一个字的宽度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 = str->getCString(), "fonts/fps_images.png", 12,32,'.'); atlas->setAnchorPoint(ccp(0.5,0.5)); //设置字体的放大效果 atlas->setScale(2.0f); atlas->setPosition(ccp(winSize.width addChild(atlas); slider->setValue(1.3f); addChild(slider); return } //设置slider的回调函数 //这里的sender表示发送的一者 void { CCControlSlider * CCString *str //由于成为了全局的了,所以可以訪问的到 atlas->setString(str->getCString()); } |
执行结果: 最大值 最小范围: 最大范围: 执行结果在0.3和1.2之间 |
CCControlSwitch
第一个參数,掩底背景图片,第二个參数为开的图片,第三个參数为关的图片。第四个參数为手指划到button,第五。六个參数分别为开和关显示的文字。
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 #define #include #include #include USING_NS_CC; USING_NS_CC_EXT; class { public: static CREATE_FUNC(T12UI); bool //开关的回调函数 void }; #endif |
T12UI.cpp |
#include #include #include using CCScene *T12UI::scene() { CCScene * T12UI * scene->addChild(layer); return } //UI控件来自cocos2dx的扩展库,完好了UI方面的元素。使cocos2dx更加丰富多彩。 使用扩展库须要包括 bool { TBack::init(); //通过SimpleAudioEngine的方式实现载入音乐 SimpleAudioEngine::sharedEngine()->preloadBackgroundMusic("audio/start.wav"); //创建开关、 //第一个參数为:掩底背景CCSprite //第二个參数为开的CCSprite //第三个參数为关的CCSprite //第四个參数为手指滑到CCSprite //第五个參数on的label //第六个參数为off的label CCControlSwitch *sw CCSprite::create("switch-mask.png"), CCSprite::create("switch-on.png"), CCSprite::create("switch-off.png"), CCSprite::create("switch-thumb.png"), CCLabelTTF::create("ON", CCLabelTTF::create("OFF", ); //设置开关的位置 sw->setPosition(ccp(winSize.width sw->addTargetWithActionForControlEvents(this, cccontrol_selector(T12UI::switchCallBack), CCControlEventValueChanged); //设置开关默认是关闭的 sw->setOn(false); //将开关加入到Layer中去 addChild(sw); return } //开关的回调函数 void { CCControlSwitch * if (sw->isOn()) { CCLog("click //通过playBackgroundMusic打开音乐 SimpleAudioEngine::sharedEngine()->playBackgroundMusic("audio/start.wav"); } else { //通过stopBackgroundMusic()关闭音乐 SimpleAudioEngine::sharedEngine()->stopBackgroundMusic("audio/start.wav"); CCLog("click } } |
执行结果: |
CCScale9Sprite九妹图
CCScale9Sprite对象,是一种CCSprite对象的变形,它的使用方法和CCSprite类似,不同点是:CCScale9Sprite对象有个特性就是缩放贴图时能够尽量不失帧。比方QQ聊天内边框
原理:
CCScale9Sprite的实现非常巧妙。是通过1个CCSpriteBatchNode和9个CCSprite来实现的。原理非常easy,通过将原纹理资源分割成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);
第一个參数为文件。第二个參数使用文件的大小,第三个參数例如以下。若未设置,或设置图分别例如以下:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdG90b3R1enVvcXVhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
我们知道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()
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdG90b3R1enVvcXVhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
T12UI.h |
#ifndef #define #include #include #include USING_NS_CC; USING_NS_CC_EXT; class { public: static CREATE_FUNC(T12UI); bool }; #endif |
T12UI.cpp |
#include #include #include using CCScene *T12UI::scene() { CCScene * T12UI * scene->addChild(layer); return } //UI控件来自cocos2dx的扩展库,完好了UI方面的元素,使cocos2dx更加丰富多彩。使用扩展库须要包括 bool { TBack::init(); CCScale9Sprite * "scale9.png", CCRectMake(0, 0, 116, 102), CCRectMake(30, 40, 56, 20)); s9spr->setPosition(ccp(winSize.width addChild(s9spr); s9spr->setPreferredSize(CCSize(500,100)); return } |
执行结果:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdG90b3R1enVvcXVhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""> |
CControlButton
CCScale9Sprite * bgbutton = CCScale9Sprite::create("button.png"); //背景色图片 CCScale9Sprite * bgbuttonlighted = CCScale9Sprite::create("buttonHighlighted.png"); //背景色高亮图片 CCLabelTTF * titlebutton = CCLabelTTF::create("Touch Me", "Courier New", 30); //button的文本 CCControlButton * button = CCControlButton::create(titlebutton,bgbutton); //创建button 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 CCControlEventTouchDragInside CCControlEventTouchDragOutside CCControlEventTouchDragEnter CCControlEventTouchDragExit CCControlEventTouchUpInside CCControlEventTouchUpOutside CCControlEventTouchCancel CCControlEventValueChanged }; typedef |
T12UI.h |
#ifndef #define #include #include #include USING_NS_CC; USING_NS_CC_EXT; class { public: static CREATE_FUNC(T12UI); bool void void }; #endif |
T12UI.cpp |
#include #include #include using CCScene *T12UI::scene() { CCScene * T12UI * scene->addChild(layer); return } bool { TBack::init(); CCScale9Sprite *bgButton CCScale9Sprite *bgButtonLighted CCLabelTTF * CCControlButton * //为button加入位置 button->setPosition(ccp(winSize.width button->setBackgroundSpriteForState(bgButtonLighted, button->setTitleColorForState(ccRED, addChild(button); //为button加入监听事件,加入的是button被点击的事件 button->addTargetWithActionForControlEvents(this, cccontrol_selector(T12UI::touchDownCallBack), CCControlEventTouchDown); //为button加入监听事件,加入的是buttonDrag的事件 button->addTargetWithActionForControlEvents(this, cccontrol_selector(T12UI::touchDragInsideCallBack), CCControlEventTouchDragInside); return } void { CCLog("touchDownCallBack"); } void { CCLog("touchDragInsideCallBack"); } |
执行结果:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdG90b3R1enVvcXVhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""> |
版权声明:本文博客原创文章,博客,未经同意,不得转载。
1cocos2dx扩展UI控制,CCControlSlider,CCScale9Sprite(九妹图。),CCControlSwitch,CCControlButton的更多相关文章
- Android基础新手教程——1.6 .9(九妹)图片怎么玩
Android基础新手教程--1.6 .9(九妹)图片怎么玩 标签(空格分隔): Android基础新手教程 1.本节引言: 可能有的一些疑问: 1.什么是.9图片? 答:图片后缀名前有.9的图片,如 ...
- UML总结4---UML九种图关系说明
转自:http://blog.csdn.NET/chenyujing1234/article/details/8173519 UML中包括九种图:用例图.类图.对象图.状态图.时序图.协作图.活动图. ...
- UML 小结(6)- UML九种图的比较与学习
UML中的九种图: 用例图.类图.对象图.状态图.时序图.协作图.活动图.部署图.构件图. 1)用例图(Use Case Diagram) 它是UML中最简单也是最复杂的一种图.说它简单是因为它采用了 ...
- UML总结---UML九种图关系说明
UML中包括九种图:用例图.类图.对象图.状态图.时序图.协作图.活动图.组件图.配置图. 1)用例图(Use Case Diagram) 它是UML中最简单也是最复杂的一种图.说它简单是因为它采用了 ...
- UML九种图作用简介
UML(统一建模语言):是面向对象的可视化建模语言. UML中有3种构造块:事物.关系和图,事物是对模型中最具有代表性的成分的抽象,关系是把事物结合在一起,图聚集了相关的事物 UML中有九种图如下: ...
- 转发-UI基础教程 – 原生App切图的那些事儿
UI基础教程 – 原生App切图的那些事儿 转发:http://www.shejidaren.com/app-ui-cut-and-slice.html 移动APP切图是UI设计必须学会的一项技能,切 ...
- [UML]转:浅谈UML的概念和模型之UML九种图
转自:http://blog.csdn.net/jiuqiyuliang/article/details/8552956 目录: UML的视图 UML的九种图 UML中类间的关系 上文我们介绍了,UM ...
- QT模态对话框用法(在UI文件中设置Widget背景图,这个图是一个带阴影边框的图片——酷)
QT弹出模态对话框做法: 1.新建UI文件时,一定要选择基类是QDialog的,我的选择是:Dialog without Buttons(),如下图: 2.然后在使用的时候: MyDialog dlg ...
- 讨论UML概念和模型UML九种图。
文件夹: UML的视图 UML的九种图 UML中类间的关系 上文我们介绍了,UML的视图.在每一种视图中都包括一个或多种图. 本文我们重点解说UML每种图的细节问题: 1.用例图(use case d ...
随机推荐
- android file.createnewfile ioexception
近期在写项目的时候,文件有时候能创建成功有时候直接io异常,真是太扯淡.找了许久,最终找到原因 android 中创建文件,文件的名字中不能包括冒号啊这种特殊字符, 仅仅要你感觉有点特殊的字符最好都不 ...
- Websocket实例
C#版Websocket实例 websocket有java.nodejs.python,Php等等版本,我使用的是C#版本,服务器端是Fleck,github地址:https://github.com ...
- kd-tree注解 & bzoj 2648 & 2716 & 3053 解决问题的方法
[KD-TREE简介]于SYC1999大神"迷住"下一个.我开始接触这样的算法. 首先.这个概念大概能去百度百科.详细的实施.我在看RZZ的代码长大的. 我们能够想象在平面上有N个 ...
- Linux了解进程的地址空间
供Linux了解虚拟内存,非常好的引导了.原文链接:http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=26683523&i ...
- Crazy Rows
Problem You are given an N x N matrix with 0 and 1 values. You can swap any two adjacent rows of the ...
- 第11章 享元模式(Flyweight Pattern)
原文 第11章 享元模式(Flyweight Pattern) 概述: 面向对象的思想很好地解决了抽象性的问题,一般也不会出现性能上的问题.但是在某些情况下,对象的数量可能会太多,从而导致了运行时 ...
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(10)- VSS源代码管理
原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(10)- VSS源代码管理 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 ( ...
- MyEclipse2014 设备 checkstyle、PMD、findbugs 最简单的方法 详细说明
最近的实验需要的代码审查和应用程序性能优化.在需求MyEclipse安装某些插件,由于如今的MyEclipse版本号和大多数教程的不一样了,一些安装选项也已经改变,所以安装起来非常费事,通过不断的尝试 ...
- elasticsearch的rest搜索---对于相关度的大牛的文档
目录: 一.针对这次装B 的解释 二.下载,安装插件elasticsearch-1.7.0 三.索引的mapping 四. 查询 五.对于相关度的大牛的文档 五.对于相关度的大牛的文档 http: ...
- java学习笔记2——Eclipse的安装及汉化图解
Eclipse的安装 有了JDK,你可以编译Java源码,运行Java程序,但是还没有代码编辑器,没有版本管理工具,也不能方便的管理工程文件,不能与团队协作.安装Eclipse,你才能完成这些工作. ...