制作横版游戏KillBear第5课：添加血条 攻击按键

在这个系列课程中，我们已经进入了第五课。在前几课里，我们依次学习了地图添加、英雄添加、摇杆添加以及英雄控制，并且在上一课中实现了边缘检测和地图滚动。在本篇文章中，我们将在 OperateLayer.cpp 中加入一个攻击按钮，以实现英雄的攻击功能，同时在游戏界面的左上角添加一个血条显示。

开发环境

• 操作系统：Win64
• 开发工具：vs2010
• 游戏框架：Cocos2d - x v3.4Final
• 纹理打包工具：TexturePackerGUI
• 地图编辑工具：MapEdit

攻击按钮的实现

代码构建

1. OperateLayer.h 文件

在 OperateLayer.h 文件中添加攻击按钮的回调函数声明：

void attackButton(Ref* pSender);

2. OperateLayer.cpp 文件

在 init 函数中添加以下代码来创建并设置攻击按钮：

auto visibleSize = Director::getInstance()->getVisibleSize();

// 创建 attackItem 图标
auto attackItem = MenuItemImage::create("attackbuttonNormal.png", "attackbuttonSelected.png", CC_CALLBACK_1(OperateLayer::attackButton, this));

// 设置图标大小
attackItem->setScale(1.5);

// 设置图标位置
attackItem->setPosition(visibleSize.width - attackItem->getContentSize().width / 2 - 50, attackItem->getContentSize().height / 2 + 20);

auto menu = Menu::create(attackItem, NULL);
menu->setPosition(Vec2::ZERO);
this->addChild(menu, 100);

同时，实现 attackButton 回调函数：

void OperateLayer::attackButton(Ref* pSender)
{
global->hero->onAttack(1);
}

效果

通过上述代码，我们成功在游戏界面中添加了一个攻击按钮。当玩家点击该按钮时，会调用 global->hero->onAttack(1) 函数，触发英雄的攻击动作。

血条显示的实现

代码构建

1. StateLayer.h 文件

在 StateLayer.h 文件中包含 HpShow.h 头文件：

#include "HpShow.h"

2. StateLayer.cpp 文件

在 init 函数中添加以下代码来创建并添加血条显示：

auto Hp = HpShow::create();
this->addChild(Hp);

3. 新建 HpShow 类

HpShow.h 文件

#ifndef _HP_SHOW_H_
#define _HP_SHOW_H_

#include "cocos2d.h"
#include "Global.h"

USING_NS_CC;

class HpShow : public Node
{
public:
HpShow();
~HpShow();
virtual bool init();
void update(float dt);
CREATE_FUNC(HpShow);

private:
ProgressTimer* m_preal;
};

#endif

HpShow.cpp 文件

#include "HpShow.h"

HpShow::HpShow()
{
}

HpShow::~HpShow()
{
}

bool HpShow::init()
{
bool ret = false;
do
{
CC_BREAK_IF(!Node::init());
auto visibleSize = Director::getInstance()->getVisibleSize();

// 创建血条背景
Sprite* HeroHp = Sprite::create("bloodBg.png");
HeroHp->setPosition(HeroHp->getContentSize().width / 2, visibleSize.height - HeroHp->getContentSize().height / 2);
this->addChild(HeroHp);

// 创建 ProgressTimer 类，用于显示血条
m_preal = ProgressTimer::create(Sprite::create("blood.png"));
m_preal->setType(ProgressTimer::Type::BAR);
m_preal->setMidpoint(Point(0, 0.5));
m_preal->setBarChangeRate(Point(1.0, 0));
m_preal->setPosition(HeroHp->getContentSize() / 2);
m_preal->setPercentage(100);
HeroHp->addChild(m_preal);

this->scheduleUpdate();
ret = true;
} while (0);
return ret;
}

void HpShow::update(float dt)
{
// 更新血条状态
m_preal->setPercentage((float)global->hero->getCurtLifeValue() / global->hero->getSumLifeValue() * 100);
}

结果

通过上述代码，我们在游戏界面的左上角成功添加了一个血条显示。血条会根据英雄的当前生命值实时更新显示状态。

结语

在本篇文章中，我们添加了一个攻击按钮和一个血条显示。攻击按钮使得英雄可以播放攻击动画，而血条会在每一帧更新血量，实时显示英雄的当前血量。下一篇文章中，我们将实现敌人的加入，并为其添加一些简单的 AI 逻辑。