游戏开发引擎Cocos2dx自定义血条及其美化之游戏开发《赵云要格斗》4.docx
《游戏开发引擎Cocos2dx自定义血条及其美化之游戏开发《赵云要格斗》4.docx》由会员分享，可在线阅读，更多相关《游戏开发引擎Cocos2dx自定义血条及其美化之游戏开发《赵云要格斗》4.docx（11页珍藏版）》请在冰豆网上搜索。
游戏开发引擎Cocos2dx自定义血条及其美化之游戏开发《赵云要格斗》4
游戏发开引擎—Cocos2d-x自定义血条及其美化--之游戏开发《赵云要格斗》（4）
本文关键词：
游戏引擎，游戏开发引擎，cocos引擎html5游戏开发
本章要讲解给怎么在界面上加一个血条，老规矩，还是在《Cocos2d-x地图随精灵无限滚动与边缘检测--之游戏开发《赵云要格斗》（三）》的基础上进行增加功能的。
在游戏开发中，血条是一个很重要的东西，这里的血条是通过两个图片来完成，一个是前景图（红色），一个是背景图（灰色），通过改变红色图在长度显示，灰色图不变就可实现血量的变化了。
当然，这里为了让界面更加好看些，又为血条加了个血框和人物的小头像。
Cocos2d-x版本：
2.2.5
工程环境：
Windows7+VS2010
先来看看效果吧（由于还没有引入怪物，所以我弄成攻击一次，血条少1或10两种来看看效果）：
一、自定义血条类
本着后头血条要给怪物来用，所以设计了一个血条类。
原理其实就是两个ccsprite对像，控制前景示的大小就可以改变血量了。
首先是资源，在Resources添加以下图片
红血条（前景）：
灰血条（背景）：
血条框架：
赵云左上角小头像：
头文件ProgressView.h：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
#ifndef __PROGRESSVIEW_H__
#define __PROGRESSVIEW_H__
#include "cocos2d.h"
using namespace cocos2d;
class ProgressView :
public CCNode
{
public:
ProgressView（）;
public:
//设置血条背景
void setBackgroundTexture（const char *pName）;
//设置血条前景
void setForegroundTexture（const char *pName）;
//设置总血量
void setTotalProgress（float total）;
//设置当前血量
void setCurrentProgress（float progress）;
//得到当前血量
float getCurrentProgress（） const;
//得到总血量
float getTotalProgress（） const;
private:
//设置前景血条显示的长度
void setForegroundTextureRect（const CCRect &rect）;
private:
CCSprite *m_progressBackground;//背景血条
CCSprite *m_progressForeground;//前景血条
float m_totalProgress;//总血量
float m_currentProgress;//当前血量
float m_scale;//放大倍数
};
#endif
实现文件ProgressView.cpp:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
#include "ProgressView.h"
ProgressView:
:
ProgressView（）
:
m_progressBackground（NULL）
, m_progressForeground（NULL）
, m_totalProgress（0.0f）
, m_currentProgress（0.0f）
, m_scale（1.0f）
{
}
void ProgressView:
:
setBackgroundTexture（ const char *pName ）
{
m_progressBackground = CCSprite:
:
create（pName）;
this->addChild（m_progressBackground）;
}
void ProgressView:
:
setForegroundTexture（ const char *pName ）
{
m_progressForeground = CCSprite:
:
create（pName）;
m_progressForeground->setAnchorPoint（ccp（0.0f, 0.5f））;//设置锚点
m_progressForeground->setPosition（ccp（-m_progressForeground->getContentSize（）.width * 0.5f, 0））;
this->addChild（m_progressForeground）;
}
void ProgressView:
:
setTotalProgress（ float total ）
{
if （m_progressForeground == NULL） {return;}
m_scale = m_progressForeground->getContentSize（）.width / total;
m_totalProgress = total;
}
void ProgressView:
:
setCurrentProgress（ float progress ）
{
if （m_progressForeground == NULL） {return;}
if （progress < 0.0f） {progress = 0.0f;}
if （progress > m_totalProgress） {progress = m_totalProgress;}
m_currentProgress = progress;
float rectWidth = progress * m_scale;
const CCPoint from = m_progressForeground->getTextureRect（）.origin;
const CCRect rect = CCRectMake（from.x, from.y, rectWidth, m_progressForeground->getContentSize（）.height）;
setForegroundTextureRect（rect）;
}
void ProgressView:
:
setForegroundTextureRect（ const CCRect &rect ）
{
m_progressForeground->setTextureRect（rect）;
}
float ProgressView:
:
getCurrentProgress（） const
{
return m_currentProgress;
}
float ProgressView:
:
getTotalProgress（） const
{
return m_totalProgress;
}
好了，这个血条类就定义好了，编译下没报错，可以移值了。
二、使用自定义血条类并进行美化
首先然要用到的地方，就是HelloWorldScene.h中添加头文件
1
#include "ProgressView.h"
然后定义成员变量：
1
2
3
4
5
6
private:
HRocker* rocker;//摇杆，第一篇摇杆文章中定义的
Hero* hero;///精灵， Arial, Helvetica, sans-serif;">第一篇摇杆文章中定义的
ControlButton* btn;//按钮控件变量，第二篇自定义按钮定义的
Map* mymap;//地图 ，第三篇定义的
ProgressView *m_pProgressView; //血条
然后就在init（）函数中初始化：
1
2
3
4
5
6
7
8
9
//设置英雄的血条
m_pProgressView = new ProgressView（）;
m_pProgressView->setPosition（ccp（150, 450））;
m_pProgressView->setScale（2.2f）;
m_pProgressView->setBackgroundTexture（"xue_back.png"）;
m_pProgressView->setForegroundTexture（"xue_fore.png"）;
m_pProgressView->setTotalProgress（100.0f）;
m_pProgressView->setCurrentProgress（100.0f）;
this->addChild（m_pProgressView, 2）;
效果：
半血
感觉好丑啊，想想再给血条加个框，再加个小头像。
将上面改为：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//设置英雄的血条
m_pProgressView = new ProgressView（）;
m_pProgressView->setPosition（ccp（150, 450））;
m_pProgressView->setScale（2.2f）;
m_pProgressView->setBackgroundTexture（"xue_back.png"）;
m_pProgressView->setForegroundTexture（"xue_fore.png"）;
m_pProgressView->setTotalProgress（100.0f）;
m_pProgressView->setCurrentProgress（50.0f）;
//下面两个是为了让血条更好好看
CCSprite *xuekuang=CCSprite:
:
create（"kuang.png"）;//添加血条的框架
xuekuang->setPosition（ccp（m_pProgressView->getPositionX（）,m_pProgressView->getPositionY（）））;
CCSprite *touxiang=CCSprite:
:
create（"touxiang.png"）;//添加英雄的左上角的小头像
touxiang->setPosition（ccp（m_pProgressView->getPositionX（）-120,m_pProgressView->getPositionY（）））;
this->addChild（touxiang,2）;
this->addChild（xuekuang,2）;
this->addChild（m_pProgressView, 2）;
下面再来看看效果：
事实再次证明，美工是多么重要啊！
这样子明显好看多了，这时血条有了。
三、改变英雄血量
其实这里改变血量很简单了，
m_pProgressView->setCurrentProgress（改动）;这一句就可以了，那我们要怎么来验证了，我想到了一个方法，攻击一次，血条让它自己少1（初始是100）；
voidHelloWorld:
:
update（floatdelta）函数中改动：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
void HelloWorld:
:
update（float delta）
{
//判断是否按下摇杆及其类型
CCSize visibleSize1 = CCDirector:
:
sharedDirector（）->getVisibleSize（）;//得到窗口大小
switch（rocker->rocketDirection）
{
case 1:
hero->SetAnimation（"run_animation.plist","run_animation.png","run_",8,rocker->rocketRun）;
//"run_"为run_animation.png集合图片中每张图片的公共名称部分
if（hero->getPositionX（）<=visibleSize1.width-8）//不让精灵超出右边,8可以改成你喜欢的
{
if（!
hero->JudgePositona（visibleSize1）||mymap->JudgeMap（hero,visibleSize1））
//精灵没到达窗口中间位置或者地图已经移动到边缘了，精灵才可以移动，否则只播放动画
hero->setPosition（ccp（hero->getPosition（）.x+1,hero->getPosition（）.y））; //向右走
//下面是移动地图
mymap->MoveMap（hero,visibleSize1）;
}
break;
case 2:
hero->SetAnimation（"run_animation.plist","run_animation.png","run_",8,rocker->rocketRun）;//"run_"为run_animation.png集合图片中每张图片的公共名称部分
hero->setPosition（ccp（hero->getPosition（）.x, hero->getPosition（）.y+1））; //向上走
break;
case 3:
hero->SetAnimation（"run_animation.plist","run_animation.png","run_",8,rocker->rocketRun）;//"run_"为run_animation.png集合图片中每张图片的公共名称部分
if（hero->getPositionX（）>=8）//不让精灵超出左边,8可以改成你喜欢的
hero->setPosition（ccp（hero->getPosition（）.x-1,hero->getPosition（）.y））; //向左走
break;
case 4:
hero->SetAnimation（"run_animation.plist","run_animation.png","run_",8,rocker->rocketRun）;//"run_"为run_animation.png集合图片中每张图片的公共名称部分
hero->setPosition（ccp（hero->getPosition（）.x,hero->getPosition（）.y-1））; //向下走
break;
case 0:
hero->StopAnimation（）;//停止所有动画和运动
break;
}
//判断是否出动攻击
if（btn->isTouch）
{
if（hero->IsAttack）//英雄没在攻击
return;
hero->AttackAnimation（"attack1_animation.plist","attack1_animation.png","attack_",6,rocker->rocketRun）;
m_pProgressView->setCurrentProgress（m_pProgressView->getCurrentProgress（）-1）; //更改血量
}
}
每次减少1：
每次减少10：
源码下载：
Cocos2d-x自定义血条及其美化
升级会员 