【Cocos2dx】利用音量螺旋控件控制血量条

其实主要是利用一个小例子来说明两个控件如何使用，一个是CCControlPotentiometer音量螺旋控件，另一个是如何利用CCControlSlider控件整出游戏中常见的血量条。

如图，随着音量螺旋控件的扭动，血量条在变化。

制作过程如下：

一、基本准备

1、首先同样还是利用(cocos2d-x-2.2.6安装目录)\tools\project-creator下的create_project.py用python命令创建一个名为PotentiometerSlider的工程。这里在《【Cocos2dx】Windows平台下Cocos2dx 2.x的下载、安装、配置，打造自己的Helloworld》（点击打开链接）已经说过了，不再赘述。

2、之后，先打开(cocos2d-x-2.2.6安装目录)\samples\Cpp\TestCpp\Resources\Images中，拷贝两张图片到PotentiometerSlider的资源文件夹Resource中，分别是r1.png与r2.png，将作为这个音量螺旋控件的背景。

3、同时，如上图所示，开始->附件->画图，自己手工画3张图片，一张是大小为1x1的，什么都没有的图片1.png，一张是100x100背景为纯黄色的Yellow.png，一张是100x100背景近似黑色的灰色的Black.png，此两张图片直接利用其中的填充工具完成，只要Ctrl+E调好尺寸即可。直接保存到这个工程的资源文件夹中。

Cocos2dx的资源文件夹在《【Cocos2dx】资源文件夹，播放背景音乐，导入外部库》（点击打开链接）已经介绍过了，这里不再赘述。

二、程序编写

1、打开工程\PotentiometerSlider\proj.win32中的HelloCpp.sln，先对Helloworld.h中的回调函数（组件事件的执行方法）的声明进行修改，同时注意引入相应的类与命名空间。

#include "cocos2d.h"
#include "cocos-ext.h"//使用此组件，必须要需要的头文件
USING_NS_CC_EXT;//使用此组件，必须要需要的命名空间  

class HelloWorld : public cocos2d::CCLayer
{
public:
	// Here's a difference. Method 'init' in cocos2d-x returns bool,instead of returning 'id' in cocos2d-iphone
	virtual bool init();  

	// there's no 'id' in cpp,so we recommend returning the class instance pointer
	static cocos2d::CCScene* scene();

	// a selector callback
	void valueChange(CCObject* pSender,CCControlEvent event);//声明CCControlPotentiometer音量螺旋控件被扭动之时的回调函数

	// implement the "static node()" method manually
	CREATE_FUNC(HelloWorld);
};

2、之后是对HelloWorldScene.cpp修改，其实这部分与《【Cocos2dx】使用CCControlButton创建按钮、按钮点击事件，点击事件中的组件获取，setPosition的坐标问题》（点击打开链接）同样是组件操作的核心问题。这部分主要是两个组件的初始化与CCControlPotentiometer音量螺旋控件被扭动的回调函数。

#include "HelloWorldScene.h"
#include "cocos-ext.h"//使用此组件，必须要需要的头文件

USING_NS_CC;
USING_NS_CC_EXT;//使用此组件，必须要需要的命名空间 

//定义两个宏变量，主要是关于“血条”的最大值与最小值
#define CONTROL_SLIDER_MIN 0
#define CONTROL_SLIDER_MAX 10000


CCScene* HelloWorld::scene()
{
    // 'scene' is an autorelease object
    CCScene *scene = CCScene::create();
    
    // 'layer' is an autorelease object
    HelloWorld *layer = HelloWorld::create();

    // add layer as a child to scene
    scene->addChild(layer);

    // return the scene
    return scene;
}

// on "init" you need to initialize your instance
bool HelloWorld::init()
{
	//获取屏幕的尺寸、位置信息等    
    CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();  

	//新建一个音量螺旋控件CCControlPotentiometer
	CCControlPotentiometer *potentiometer=CCControlPotentiometer::create("r1.png","r2.png","CloseSelected.png");//第1个参数是按钮没扭动部分的背景图片、第2个是按钮扭动部分的背景图片、第3个是按钮的主题图片
	potentiometer->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));//此组件居中
	potentiometer->addTargetWithActionForControlEvents(this,cccontrol_selector(HelloWorld::valueChange),CCControlEventValueChanged);//第3个参数声明此组件被扭动时的回调函数是第2个参数所指明的函数
	this->addChild(potentiometer);//将此控件添加到场景，默认不自动添加
	
	//新建一个血条CCControlSlider
	CCControlSlider *controlSlider = CCControlSlider::create("Black.png","Yellow.png","1.png");//第1个参数是血条没有被占据的部分的背景图片，第2是血条被占据的部分的背景图片，第3个参数是条件按钮。
	controlSlider->setPosition(ccp(visibleSize.width/2,visibleSize.height-visibleSize.height/6));//将此组件布置在距离上方还有窗口高度1/6的位置，水平居中
	//设置按钮最大、最小值的基准
	controlSlider->setMinimumValue(CONTROL_SLIDER_MIN);
	controlSlider->setMaximumValue(CONTROL_SLIDER_MAX);
	//------
	controlSlider->setValue(CONTROL_SLIDER_MIN);//设置按钮当前值
	//本来CCControlSlider是供用户调节的，调节按钮是1.png，但是1.png是一张1x1的近乎看不到的图片，同时利用setTouchEnabled(false)将此按钮锁上，禁止用户调节
	controlSlider->setTouchEnabled(false);
	this->addChild(controlSlider,1);//将此控件添加到场景，同时设置Tag为1
	return true;
}


void HelloWorld::valueChange(CCObject* pSender,CCControlEvent event){//这个HelloWorld::命名空间不能省，虽然在这个场景当中，但是缺少它，无法通过编译
	CCControlPotentiometer *potentiometer=(CCControlPotentiometer *)pSender;//相当于this的作用，指代为被监听的音量螺旋控件CCControlPotentiometer
	CCControlSlider *controlSlider = (CCControlSlider *)this->getChildByTag(1);//获取血条
	//potentiometer->getValue()，获取音量螺旋控件CCControlPotentiometer的值，此值为一个0-1的数值，为螺旋的部分占据总部分的百分比
	//controlSlider->setValue设置血条的值，尽管controlSlider->setTouchEnabled(false);，但还是可以用代码控制的
	controlSlider->setValue(potentiometer->getValue()*CONTROL_SLIDER_MAX);
}

原文链接：https://www.f2er.com/cocos2dx/341595.html

【Cocos2dx】利用音量螺旋控件控制血量条

猜你在找的Cocos2d-x相关文章