Cocos2dx学习笔记（19）——滑块控件

发表于   |   分类于   |  

游戏设置中经常有滑块来控制数值的大小，既方便又美观，那么Cocos是怎么实现的呢？

本文仅供个人记录和复习，不用于其他用途

滑块类

滑块类CCControlSlider继承于控件类CCControl，发生了相应的触发事件后，就会调用回调函数，这个和CCMenu是一样的。

3.x版本改变

  • 去掉CC
  • 对象类CCObject改为Ref
  • CCControlEvent改为强枚举Control::EventType
  • CCControlEventValueChanged改为Control::EventType::VALUE_CHANGED
  • 按钮事件回调依旧为cccontrol_selector，没有使用CC_CALLBACK_2

2.x滑块控件

事实上，电脑中的音量调节按钮，就是一个滑块控件。我们可以拖动滑块，从而达到改变音量的目的。

首先呢，我们需要包含一个头文件，并且声明命名空间：

1
2
#include "cocos-ext.h"
using namespace cocos2d::extension;

创建方法如下：

1
ControlSlider *slider = ControlSlider::create("sliderTrack.png", "sliderProgress.png", "sliderThumb.png");

第一个参数代表轨道，第二个参数代表滑块的进度，第三个参数就是拖动按钮。

然后创建一个标签和回调函数：

1
2
3
CCLabelTTF* label; // 显示滑块数值的Label
void valueChanged(CCObject* sender, CCControlEvent controlEvent); // 当值改变时触发的控件事件

下面是一些设置属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 创建显示Slider值的标签
label = CCLabelTTF::create("20", "Courier New", 20);
label->setPosition( midPos + ccp(0, 100) );
this->addChild(label);
// 创建滑块控件CCControlSlider
CCControlSlider* slider = CCControlSlider::create("sliderTrack.png", "sliderProgress.png", "sliderThumb.png");
slider->setPosition( midPos );
this->addChild(slider);
// 设置属性
slider->setMinimumValue(0);         // 设置滑块最小值
slider->setMaximumValue(100);       // 设置滑块最大值
slider->setMinimumAllowedValue(20); // 设置允许滑动的最小值
slider->setMaximumAllowedValue(80); // 设置允许滑动的最大值
slider->setValue(20);               // 设置当前滑块的值
// 绑定事件，当滑块的值改变时触发控件事件
slider->addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::valueChanged), CCControlEventValueChanged);

回调函数的实现如下：

1
2
3
4
5
6
7
8
9
10
11
12
// 事件响应函数，值改变时，修改label标签的内容
void HelloWorld::valueChanged(CCObject* sender, CCControlEvent controlEvent)
{
    // 获取事件委托者：滑块控制CCControlSlider
    CCControlSlider* slider = (CCControlSlider*)sender;
    // 修改label的值，显示滑块的当前值
    // sprintf为C语言中的字符串格式转换，这里将float转换为字符串
    char str[50];
    sprintf(str, "%g", slider->getValue() );  //字符串格式转换
    label->setString(str);
}

效果如下：

常见问题

3.x版本中会遇到一个问题，那就是包含了cocos-ext.h后，仍然无法找到相关的定义。查看相关的类文件，我们会发现一个问题，那就是提示无法打开源文件extensions/ExtensionExport.h。

3.4版本后，首先在你自己的头文件中包含头文件和命名空间：

1
2
#include "cocos-ext.h"
USING_NS_CC_EXT;

然后选中工程右键属性->配置属性->c/c++->常规->附加包含目录中添加下列代码：

$(EngineRoot)
$(EngineRoot)cocoseditor-support
$(EngineRoot)cocos