游戏开发引擎Cocos2dx自定义血条及其美化之游戏开发《赵云要格斗》4.docx
- 文档编号:6437348
- 上传时间:2023-01-06
- 格式:DOCX
- 页数:11
- 大小:17.93KB
游戏开发引擎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自定义血条及其美化
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 赵云要格斗 游戏 开发 引擎 Cocos2dx 自定义 及其 美化 赵云要 格斗