「cocos2d-x」虚拟摇杆实现（2）
上一篇文章「cocos2d-x」虚拟摇杆实现（1）讲了如何实现一个虚拟摇杆，但是这种方法实现的虚拟摇杆存在以下问题：
- 适用于屏幕与背景相同的情况，如果屏幕比背景小，要实现滚屏时，咱们的控制器虚拟摇杆就滑出屏幕了，之后游戏完全失去了控制。
本次采用了分层设计，将虚拟摇杆放在了HudLayer层，在屏幕滚动时，虚拟摇杆的位置会保持不变。
以下的视频演示了2种方法实现虚拟摇杆的差异：
http://www.56.com/u50/v_OTE2ODY1MzU.html
程序设计最重要的思想和设计模式，而不是掌握了多少API和函数，这一点深有体会：
- 初次在实现滚屏又不丢失摇杆时，我根据玩家的位置算出来摇杆的相对位置，然后实时地更改摇杆的位置，但是相对于屏幕来说，摇杆还是有滑出屏幕的可能，而且会在屏幕上浮动，位置不固定，用户体验极差；
- 利用分层模式，一个层为游戏背景层，专门显示背景图，再加一个HUD层，HUD层上面放游戏菜单、玩家的血条，虚拟摇杆等
- 在实现分层模式时，2个层之间要传递玩家的坐标，我在这里卡了很久，起初想在一个层中得到上层节点，然后再根据tag向下找，结果失败告终，几个类互相包含时，头文件错综复杂，用了#pragma once指令后，又引发了CC_SYNTHESIZE等宏定义的错误，总之，在2个CCLayer之间交换数据花了很多时间，VS中一堆莫名其妙的错误，以下为当时的代码。
//获取GameLayer层的实例_gamelayer，这种方法行不通，还是在2个类的父类中进行数据交换吧 //GameScene * _gamescene = (GameScene *)(CCDirector::sharedDirector()->getRunningScene()); //GameLayer * _gamelayer = _gamescene->getGameLayer(); //_player->setPosition(_gamelayer->getHeroBorn());
2个节点之间的数据交互，建议将2个CCLayer封装为一个Scene或CCLayer类的数据成员，然后由父节点调用，这样可以很方便地完成数据交换。如下代码轻易地完成了hudlayer和gamelayer2个CCLayer之间玩家坐标的数据交换：
_gamelayer = GameLayer::create(); //创建GameLayer this->addChild(_gamelayer, GameLayerTag, GameLayerTag); _hudlayer = HudLayer::create(); //创建HudLayer this->addChild(_hudlayer, GameLayerTag, HudLayerTag); //设置玩家出生位置 _hudlayer->getPlayer()->setPosition(_gamelayer->getHeroBorn());
本次的例子进行了分模块设计，如下图所示：
GameLayer是游戏背景层，实现了游戏TMX地图的加载及地图滚动
HudLayer是玩家信息层，实现了虚拟摇杆实时控制玩家在地图中移动
GameScene是游戏场景层，把GameLayer和HudLayer作为实现变量封装进去
因为我们实现了自己的场景类，所以AppDelegate.cpp中默认的Helloword场景需要改成我们的。
// create a scene. it's an autorelease object //CCScene *pScene = HelloWorld::scene(); CCScene *pScene = GameScene::create(); // run scene pDirector->runWithScene(pScene);
GameScene类的声明代码：
#include "HudLayer.h" #include "GameLayer.h" #include "cocos2d.h" using namespace cocos2d; class GameScene : public cocos2d::CCScene { public: virtual bool init(); GameScene(); ~GameScene(); void update(float dt); CREATE_FUNC(GameScene); CC_SYNTHESIZE(GameLayer *, _gamelayer, GameLayer); CC_SYNTHESIZE(HudLayer *, _hudlayer, HudLayer); };
GameScene类的实现代码：
#include "GameScene.h" GameScene::GameScene() { _gamelayer = NULL; _hudlayer = NULL; } GameScene::~GameScene() { } void GameScene::update(float dt) { _gamelayer->setViewpointCenter(_hudlayer->getPlayer()->getPosition()); } bool GameScene::init() { bool bRet = false; do { //先初始化父类，如果失败则break循环 CC_BREAK_IF(! CCScene::init()); _gamelayer = GameLayer::create(); //创建GameLayer this->addChild(_gamelayer, GameLayerTag, GameLayerTag); _hudlayer = HudLayer::create(); //创建HudLayer this->addChild(_hudlayer, GameLayerTag, HudLayerTag); //设置玩家出生位置 _hudlayer->getPlayer()->setPosition(_gamelayer->getHeroBorn()); this->scheduleUpdate(); bRet = true; }while(0); return bRet; }
GameLayer的声明：
#include "cocos2d.h" using namespace cocos2d; class GameLayer : public cocos2d::CCLayer { public: GameLayer(); //构造函数声明 ~GameLayer(); //析构函数声明 CREATE_FUNC(GameLayer); //类似于cocos2d中的node方法，返回一个autorelease对象 virtual bool init(); //本类对象初始化 bool InitTmxMap(); //初始化TMX地图 //设置视图位置 void setViewpointCenter(cocos2d::CCPoint position); //cocos2d::CCTMXTiledMap *_TiledMap; CC_SYNTHESIZE(cocos2d::CCPoint , _heroborn, HeroBorn); CC_SYNTHESIZE(cocos2d::CCTMXTiledMap *, _tiledmap, TiledMap); CC_SYNTHESIZE(cocos2d::CCTMXLayer*, _background, Background); };
GameLayer的实现：
#include "GameLayer.h" GameLayer::GameLayer() { _tiledmap = NULL; _background = NULL; } GameLayer::~GameLayer() { } bool GameLayer::init() { bool bRet = false; do { //先初始化父类，如果失败则break循环 CC_BREAK_IF(! CCLayer::init()); InitTmxMap(); bRet = true; }while(0); return bRet; } bool GameLayer::InitTmxMap() { bool bRet = false; do { //创建瓦片地图 this->setTiledMap(CCTMXTiledMap::create("pd_tilemap1.tmx")); _tiledmap->setAnchorPoint(ccp(0.0f, 0.0f)); //设置瓦片地图的锚点为屏幕正中间 _tiledmap->setPosition(ccp(0, 0)); //设置瓦片地图的位置为屏幕左下角 this->setBackground(_tiledmap->layerNamed("Layer1")); this->addChild(_tiledmap, 2); //加入场景层 //获取Objects对象层 CCLOG("_tileMap %d", _tiledmap->retainCount()); CCTMXObjectGroup *objects = _tiledmap->objectGroupNamed("Objects"); CCLOG("_tileMap %d", _tiledmap->retainCount()); CC_BREAK_IF(!objects); //如果失败，退出 //获取SpawnPoint的字典（包含坐标，高和宽等信息） CCDictionary *spawnPoint = objects->objectNamed("SpawnPoint"); CC_BREAK_IF(!spawnPoint); //如果失败，退出 //分别取x和y坐标的值 int x = spawnPoint->valueForKey("x")->intValue(); int y = spawnPoint->valueForKey("y")->intValue(); this->setHeroBorn(ccp(x, y)); //设置玩家出生坐标 bRet = true; }while(0); return bRet; } void GameLayer::setViewpointCenter(cocos2d::CCPoint position) { CCSize winSize = CCDirector::sharedDirector()->getWinSize(); int x = MAX(position.x, winSize.width / 2); int y = MAX(position.y, winSize.height / 2); x = MIN(x, (_tiledmap->getMapSize().width * _tiledmap->getTileSize().width) - winSize.width / 2); y = MIN(y, (_tiledmap->getMapSize().height * _tiledmap->getTileSize().height) - winSize.height / 2); CCPoint actualPosition = ccp(x, y); CCPoint centerOfView = ccp(winSize.width / 2, winSize.height / 2); CCPoint viewPoint = ccpSub(centerOfView, actualPosition); this->setPosition(viewPoint); }
HudLayer的声明：
#include "cocos2d.h" typedef enum { HudLayerTag = 2, GameLayerTag =1, }GameLayersTags; using namespace cocos2d; class HudLayer : public cocos2d::CCLayer { public: HudLayer(); //构造函数声明 ~HudLayer(); //析构函数声明 CREATE_FUNC(HudLayer); //类似于cocos2d中的node方法，返回一个autorelease对象 virtual bool init(); //本类对象初始化 void InitJoystick(); //初始化摇杆 void InitHero(); //初始化主角精灵 void menuCloseCallback(CCObject* pSender); //触摸事件处理 virtual void ccTouchesBegan(CCSet *pTouches, CCEvent *pEvent); virtual void ccTouchesMoved(CCSet *pTouches, CCEvent *pEvent); virtual void ccTouchesEnded(CCSet *pTouches, CCEvent *pEvent); float heronsformula(float x1, float y1, float x2, float y2, float x3, float y3); bool triangleContainPoint(float x1, float y1, float x2, float y2, float x3, float y3, float px, float py); void setPlayerPosition(cocos2d::CCPoint position); //设置玩家位置 CC_SYNTHESIZE(cocos2d::CCSprite*, _player, Player); //CC_SYNTHESIZE(); private: void Moving(float dt); cocos2d::CCSprite *joystick; cocos2d::CCSprite *joystick1; cocos2d::CCSize size; cocos2d::CCPoint O; //中心点O float R; //大圆半径 //精灵移动的速度分量值 float speedX; float speedY; //是否移动的标志 bool IsMoving; };
HudLayer的实现：
#include "Hudlayer.h" HudLayer::HudLayer() { //初始化需要的变量 IsMoving = false; speedX = speedY = 0; } HudLayer::~HudLayer() { } bool HudLayer::init() { bool bRet = false; do { //先初始化父类，如果失败则break循环 CC_BREAK_IF(! CCLayer::init()); //创建一个关闭按钮菜单置于屏幕右下角 CCMenuItemLabel *txtmenItem = CCMenuItemLabel::create(CCLabelTTF::create("Exit", "Arial", 24), this, menu_selector(HudLayer::menuCloseCallback)); CC_BREAK_IF(! txtmenItem); txtmenItem->setPosition(ccp(CCDirector::sharedDirector()->getWinSize().width - txtmenItem->getContentSize().width/2, 20)); CCMenu* pMenu = CCMenu::create(txtmenItem, NULL); pMenu->setPosition(CCPointZero); CC_BREAK_IF(! pMenu); // Add the menu to HelloWorld layer as a child layer. this->addChild(pMenu, 10); this->InitHero(); //初始化精灵 this->setTouchEnabled(TRUE); //打开触摸事件处理 this->InitJoystick(); //初始化摇杆 //每帧要执行的函数 this->schedule(schedule_selector(HudLayer::Moving)); bRet = true; }while(0); return bRet; } void HudLayer::menuCloseCallback(CCObject* pSender) { CCDirector::sharedDirector()->end(); } void HudLayer::InitJoystick() { //创建摇杆下面部分 joystick1 = CCSprite::create("joystick1.png"); //设置透明度，锚点，位置 joystick1->setOpacity(150); joystick1->setAnchorPoint(ccp(0, 0)); joystick1->setPosition(ccp(0, 0)); joystick1->setColor(ccYELLOW); //大圆半径 R=joystick1->getContentSize().width/2; //中心点 O = ccp(R, R); //添加进布景 this->addChild(joystick1, 3); //创建摇杆上面圆圈部分 joystick = CCSprite::create("joystick2.png"); //设置位置为摇杆中心点并添加进布景 joystick->setPosition(ccp(O.x, O.y)); joystick->setColor(ccRED); joystick->setScale(0.8f); this->addChild(joystick, 4); } void HudLayer::InitHero() { CCSize size = CCDirector::sharedDirector()->getWinSize(); this->setPlayer(CCSprite::create("hartnett.jpg")); _player->setPosition(ccp(size.width/2, size.height/2)); //获取GameLayer层的实例_gamelayer，这种方法行不通，还是在2个类的父类中进行数据交换吧 //GameScene * _gamescene = (GameScene *)(CCDirector::sharedDirector()->getRunningScene()); //GameLayer * _gamelayer = _gamescene->getGameLayer(); //_player->setPosition(_gamelayer->getHeroBorn()); _player->setScale(0.3f); this->addChild(_player); } void HudLayer::Moving(float dt) { if (IsMoving && (speedX != 0 || speedY != 0)) { //精灵移动 CCPoint position=ccp(_player->getPosition().x + speedX, _player->getPosition().y + speedY); CCSize size=CCDirector::sharedDirector()->getWinSize(); CCRect rect=CCRectMake(0, 0, size.width, size.height); //_player->setPosition(position); //判断触摸点是否在屏幕内 if(rect.containsPoint(position)) { _player->setPosition(position); } } } float HudLayer::heronsformula(float x1,float y1,float x2,float y2,float x3,float y3) { //求边长a float a = sqrt(pow(x1 - x2, 2) + pow(y1 - y2, 2)); //求边长b float b = sqrt(pow(x2 - x3, 2) + pow(y2 - y3, 2)); //求边长c float c = sqrt(pow(x3 - x1, 2) + pow(y3 - y1, 2)); //求半周长s float s = (a + b + c) / 2; //根据海伦公式返回三角形面积 return sqrt(s * (s - a) * (s - b) * (s - c)); } //判断三个新三角形面积和是否等于原先三角形面积的函数的实现 bool HudLayer::triangleContainPoint(float x1,float y1,float x2,float y2,float x3,float y3,float px,float py) { //求S1的面积 float s1=heronsformula(x1,y1,x2,y2,px,py); //求S2的面积 float s2=heronsformula(x2,y2,x3,y3,px,py); //求S3的面积 float s3=heronsformula(x3,y3,x1,y1,px,py); //求S的面积 float s=heronsformula(x1,y1,x2,y2,x3,y3); //返回S是否等于S1,S2,S3的和 return abs(s-(s1+s2+s3))<0.001f; } void HudLayer::ccTouchesBegan(CCSet *pTouches, CCEvent *pEvent) { CCTouch *touch = (CCTouch*)pTouches->anyObject(); CCPoint location = touch->getLocation(); CCRect rect = joystick->boundingBox(); if (rect.containsPoint(location)) { IsMoving = true; } } void HudLayer::ccTouchesMoved(CCSet *pTouches, CCEvent *pEvent) { CCTouch *touch = (CCTouch*)pTouches->anyObject(); CCPoint location = touch->getLocation(); //判断触摸滑动点是否在摇杆范围内 bool inRange = pow(O.x - location.x, 2) + pow(O.y - location.y, 2) < pow(R, 2); if (IsMoving && inRange) { CCPoint position=_player->getPosition(); joystick->setPosition(location); float r = R * 2 / 6; float d = R * 2 / 3; //上，区域2或5 if(triangleContainPoint(O.x, O.y, O.x - r, O.y + r, O.x +r, O.y + r, location.x, location.y) || CCRectMake(O.x - r, O.y + r, d, d).containsPoint(location)) { speedX = 0; speedY = 1; } //下，区域6或11 else if (triangleContainPoint(O.x, O.y, O.x - r, O.y - r, O.x + r, O.y - r, location.x, location.y) || CCRectMake(O.x - r, O.y - r - d, d, d).containsPoint(location)) { speedX = 0; speedY = -1; } //左，区域4或7 else if (triangleContainPoint(O.x, O.y, O.x - r, O.y + r, O.x - r, O.y - r, location.x, location.y) || CCRectMake(O.x - r - d, O.y - r, d, d).containsPoint(location)) { speedX = -1; speedY = 0; } //右，区域9或8 else if (triangleContainPoint(O.x, O.y, O.x + r, O.y + r, O.x + r, O.y - r, location.x, location.y) || CCRectMake(O.x + r, O.y - r, d, d).containsPoint(location)) { speedX = 1; speedY = 0; } //右上，区域3 else if (location.x - (O.x + r) > 0 && location.y - (O.y + r) > 0) { speedX = 0.7f; speedY = 0.7f; } //左上，区域1 else if (location.x - (O.x - r) < 0 && location.y - (O.y + r) > 0) { speedX =- 0.7f; speedY = 0.7f; } //左下，区域10 else if (location.x - (O.x - r) < 0 && location.y - (O.y - r) < 0) { speedX = -0.7f; speedY = -0.7f; } //右下，区域12 else if (location.x - (O.x + r) > 0 && location.y - (O.y - r) < 0) { speedX = 0.7f; speedY = -0.7f; } } } void HudLayer::ccTouchesEnded(CCSet *pTouches, CCEvent *pEvent) { IsMoving = false; joystick->setPosition(O); speedX = speedY = 0; }
