Cocos2d-x 自定义血条及其美化----之游戏开发《赵云要格斗》(4)

本章要讲解给怎么在界面上加一个血条,老规矩,还是在Cocos2d-x地图随精灵无限滚动与边缘检测----之游戏开发《赵云要格斗》  
的基础上进行增加功能的。

cocos2d-x版本:2.2.5

工程环境:windows7+VS2010

先来看看效果吧:由于还没有引入怪物,所以我弄成攻击一次,血条少1或10两种来看看效果

目录:

一、自定义血条类

二、使用自定义血条类并进行美化

三、改变英雄血量

一、自定义血条类

本着后头血条要给怪物来用,所以设计了一个血条类。原理其实就是两个ccsprite对像,控制前景示的大小就可以改变血量了。

首先是资源,在Resources添加以下图片

红血条(前景):

灰血条(背景):

血条框架:

赵云左上角小头像:

头文件ProgressView.h:

#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:

#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中添加头文件#include "ProgressView.h"

然后定义成员变量:

private:
	HRocker* rocker;//摇杆,第一篇摇杆文章中定义的
	Hero*    hero;///精灵,<span style="font-family: Arial, Helvetica, sans-serif;">第一篇摇杆文章中定义的</span>
	ControlButton* btn;//按钮控件变量,第二篇自定义按钮定义的
	 Map*     mymap;//地图  ,第三篇定义的
	 ProgressView *m_pProgressView;  //血条

然后就在init()函数中初始化:

//设置英雄的血条
	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);  

效果:

半血

感觉好丑啊,想想再给血条加个框,再加个小头像

将上面改为:

	//设置英雄的血条
	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);

void HelloWorld::update(float delta)函数中改动:

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:

<span style="font-size:24px;">最后,有需要的把邮箱留下,不管是工程还是资源都可以~</span>
时间: 2024-10-29 19:08:30

Cocos2d-x 自定义血条及其美化----之游戏开发《赵云要格斗》(4)的相关文章

使用 Cocos2d 3.1.1 创建 Windows Phone 8 游戏开发环境

cocos2d-x 是目前流行的游戏游戏开发框架,目前最新的版本是 3.1.1, 网上有些教程已经比较老了,本文将会介绍如何使用最新的 3.1.1 创建 Windows Phone 8 开发环境. 本文假设你已经安装了 VS2012 或者 VS2013,并且已经安装了 Windows Phone8 的 SDK. 一.下载和安装 Cocos2d-x 官网地址:http://www.cocos2d-x.org/ 点击菜单栏中的 Download, 进入下载页面. 我们下载最新的 V3.1.1,新版功

Cocos2d-x 血条跟随怪物运动----之游戏开发《赵云要格斗》(5)

本章在前面的基础上,设计一个怪物类,并实现怪物的上方显示血条,血条跟随怪物的运动而运动. 重要说明:由于TexturePacker试用期结束了,不能再用,所以接下来的动画都不合成plist和整张的PNG.同时,之前的赵云图像太动画效果不是很好,所以换了个赵云的图片.另外,将整个项目的类都分别归档,这样更加容易看懂些. 这是本章的一个效果: (下一章的效果) 一.更改英雄类 赵云的图片:以下中是一部分,动画就是通过读一张一张的PNG图片来实现的(没有再合成Plist和整张PNG) 更改后的英雄类H

Unity3d中NGUI加强版血条(Healthbar)的制作

这阵子项目中需要用到一种特殊样式的血条.描述如下: 1. 正常颜色为红色.受到伤害后,即将扣除的血量变暗(暗红色),并有下降动画效果: 2. 加护盾效果后,增加一部分血量值,该额外部分为白色,护盾效果消失后该部分血量瞬间消失: 3. 在护盾效果下受到伤害时,首先扣除白色血量.白色血量不足扣除时,余下部分从红色血量中扣除: 4. 白色血量的扣除效果为变为灰色并有下降动画效果: 4. 当加护盾效果时,若即将添加的白色血量将使总血条“溢出”,从新计算百分比并排满血条: 5. 中毒时,将相应的血量(按照

Unity UGUI Canvas 使用Slider制作角色血条

最近课程实训选修Unity,讲解的是Unity官方案例--SpaceShoot,培训无聊,便想着给游戏角色制作一下血条,以此增加游戏的可玩性. Unity版本:5.4.1 案例模版:太空射击 原文作者:茄阁云云 原文连接:http://www.cnblogs.com/vmoor2016/p/6044941.html 把一个大象装进冰箱里需要三步:①把冰箱门打开:②把大象塞冰箱里:③关上冰箱门. 那么制作一个角色的血条需要几部呢?在这里也划分为三步:①制作血条:②摆放血条:③操作血条. 下面就来给

Cocos2d-x实现游戏怪物血条血条

最近刚接触cocos2d  在需求中需要血条,顺便写个 首先自己写个方法 //怪物血条 void Fighting::getBloodbar(MenuItemImage  *guaisprite ,float a){ //guaispirte为怪物精灵的参数 CCSprite *pBloodKongSp = CCSprite::create("b.png");//空血条 pBloodKongSp->setPosition(Vec2(guaisprite->getConten

IOS开发-关于自定义TabBar条

今天在做项目的时候,突然有一个模块需要自定义TabBar条. 在平常很多做项目的时候,都没有去自定义过,大部分都是使用系统自带的.今天整理一个自定义TabBar条的步骤. 首先看下我们最终实现的效果: 首先需要继承UItabBar自定义一个自己的tabBar .h #import <UIKit/UIKit.h> @class THTabBar; @protocol THTabBarDelegate <UITabBarDelegate> @optional - (void)tabBa

WASD控制UI界面血条加减

using UnityEngine; using System.Collections; using UnityEngine.UI; public class HealthController : MonoBehaviour { //当前对象是血条还是蓝条 public bool isHealth = false; //虚拟轴,横轴,纵轴 private float hor,ver; //血条的最大宽度 private float healthMaxWidth = 470; //蓝条的最大宽度

自定义进度条(圆形、横向进度条)

自定义进度条实现大体流程 1.自定义属性声明(attrs文件) 2.自定义属性获取 3.测量(onMeasure) 4.绘制(onDraw) 代码: attrs文件: <!-- 自定义声明 --> <attr name="progress_unreach_color" format="color"></attr> <attr name="progress_unreach_height" format=&q

android113 自定义进度条

MainActivity: package com.itheima.monitor; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.View; import android.widget.ProgressBar; public class MainActivity extends Activity { private MyProgressBa