【iOS-cocos2d-X 游戏开发之十二】自定义Cocos2dx摇杆(增强Joystick),增加摇杆跟随

对于虚拟摇杆在游戏开发中必不可少，Android方面的是由Himi自己实现封装的，大家可以移步到这里查看详细实现机制：

【Android游戏开发二十四】360°平滑游戏摇杆（触屏方向导航） 

那么在Cocos2d引擎已提供此摇杆类（Joystick）,所以Himi也就懒得重写了，但是Cocos2dx中并没有封装，那么这里Himi给出Cocos2dx版的Joystick（HRocker类），并且Himi对此类添加了一个跟随用户触点作为摇杆坐标的功能！

这里不多说代码结构直接贴出源码，然后重点说下使用与方法参数，具体实现可以参考源码以及Android部分Himi的实现机制；

1. // 
2. //  HRocker.h 
3. //  RockerPro 
4. // 
5. //  Created by Himi on 12-3-30. 
6. //  Copyright (c) 2012年 Himi. All rights reserved. 
7. // 
8.   
9. #ifndef RockerPro_HRocker_h 
10. #define RockerPro_HRocker_h 
11.   
12. #ifndef HRocker_H 
13. #define HRocker_H 
14. #include "cocos2d.h" 
15.   
16. using namespace cocos2d; 
17.   
18. class HRocker :public CCLayer { 
19.   
20. public : 
21.     //初始化 aPoint是摇杆中心 aRadius是摇杆半径 aJsSprite是摇杆控制点 aJsBg是摇杆背景 
22.     static HRocker*  HRockerWithCenter(CCPoint aPoint ,float aRadius ,CCSprite* aJsSprite,CCSprite* aJsBg,bool _isFollowRole); 
23.   
24.     //启动摇杆 
25.     void Active(); 
26.   
27.     //解除摇杆 
28.     void Inactive(); 
29.   
30. private: 
31.     HRocker * initWithCenter(CCPoint aPoint ,float aRadius ,CCSprite* aJsSprite,CCSprite* aJsBg,bool _isFollowRole); 
32.   
33.     CCPoint centerPoint;//摇杆中心 
34.   
35.     CCPoint currentPoint;//摇杆当前位置 
36.   
37.     bool active;//是否激活摇杆 
38.   
39.     float radius;//摇杆半径 
40.   
41.     CCSprite *jsSprite; 
42.   
43.     bool isFollowRole;//是否跟随用户点击 
44.   
45.     CCPoint getDirection(); 
46.   
47.     float getVelocity(); 
48.   
49.     void  updatePos(ccTime dt); 
50.   
51.     virtual bool ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent); 
52.     virtual void ccTouchMoved(CCTouch *pTouch, CCEvent *pEvent); 
53.     virtual void ccTouchEnded(CCTouch *pTouch, CCEvent *pEvent); 
54.     LAYER_NODE_FUNC(HRocker); 
55. }; 
56. #endif 
57.   
58. #endif 

1. // 
2. //  HRocker.cpp 
3. //  RockerPro 
4. // 
5. //  Created by Himi on 12-3-30. 
6. //  Copyright (c) 2012年 Himi. All rights reserved. 
7. // 
8. #include "HRocker.h" 
9.   
10. void HRocker::updatePos(ccTime dt){ 
11.     jsSprite->setPosition(ccpAdd(jsSprite->getPosition(),ccpMult(ccpSub(currentPoint, jsSprite->getPosition()),0.5))); 
12. } 
13. //启动摇杆 
14. void HRocker::Active() 
15. { 
16.     if (!active) { 
17.         active=true; 
18.         schedule(schedule_selector(HRocker::updatePos));//添加刷新函数 
19.         CCTouchDispatcher::sharedDispatcher()->addTargetedDelegate(this, 0,false);//添加触摸委托 
20.     }else { 
21.     } 
22. } 
23. //解除摇杆 
24. void   HRocker::Inactive() 
25. { 
26.     if (active) { 
27.         active=false; 
28.         this->unschedule(schedule_selector(HRocker::updatePos));//删除刷新 
29.         CCTouchDispatcher::sharedDispatcher()->removeDelegate(this);//删除委托 
30.     }else { 
31.     } 
32. } 
33. //摇杆方位 
34. CCPoint HRocker::getDirection() 
35. { 
36.     return ccpNormalize(ccpSub(centerPoint, currentPoint)); 
37. } 
38. //摇杆力度 
39. float HRocker::getVelocity() 
40. { 
41.     return ccpDistance(centerPoint, currentPoint); 
42. } 
43. HRocker* HRocker:: HRockerWithCenter(CCPoint aPoint ,float aRadius ,CCSprite* aJsSprite,CCSprite* aJsBg,bool _isFollowRole){ 
44.     HRocker *jstick=HRocker::node(); 
45.     jstick->initWithCenter(aPoint,aRadius,aJsSprite,aJsBg,_isFollowRole); 
46.     return jstick; 
47. } 
48. bool HRocker::ccTouchBegan(CCTouch* touch, CCEvent* event) 
49. { 
50.   
51.     if (!active) 
52.         return false; 
53.     this->setIsVisible(true); 
54.     CCPoint touchPoint = touch->locationInView(touch->view()); 
55.     touchPoint = CCDirector:: sharedDirector()->convertToGL(touchPoint); 
56.     if(!isFollowRole){ 
57.         if (ccpDistance(touchPoint, centerPoint) > radius){ 
58.             return false; 
59.         } 
60.     } 
61.     currentPoint = touchPoint; 
62.     if(isFollowRole){ 
63.         centerPoint=currentPoint; 
64.         jsSprite->setPosition(currentPoint); 
65.         this->getChildByTag(88)->setPosition(currentPoint); 
66.     } 
67.     return true; 
68. } 
69. void  HRocker::ccTouchMoved(CCTouch* touch, CCEvent* event) 
70. { 
71.     CCPoint touchPoint = touch->locationInView(touch->view()); 
72.     touchPoint = CCDirector:: sharedDirector()->convertToGL(touchPoint); 
73.     if (ccpDistance(touchPoint, centerPoint) > radius) 
74.     { 
75.         currentPoint =ccpAdd(centerPoint,ccpMult(ccpNormalize(ccpSub(touchPoint, centerPoint)), radius)); 
76.     }else { 
77.         currentPoint = touchPoint; 
78.     } 
79. } 
80. void  HRocker::ccTouchEnded(CCTouch* touch, CCEvent* event) 
81. { 
82.     currentPoint = centerPoint; 
83.     if(isFollowRole){ 
84.         this->setIsVisible(false); 
85.     } 
86. } 
87.   
88. HRocker* HRocker::initWithCenter(CCPoint aPoint ,float aRadius ,CCSprite* aJsSprite,CCSprite* aJsBg,bool _isFollowRole){ 
89.   
90.     isFollowRole =_isFollowRole; 
91.     active = false; 
92.     radius = aRadius; 
93.     if(!_isFollowRole){ 
94.         centerPoint =aPoint; 
95.     }else{ 
96.         centerPoint =ccp(0,0); 
97.     } 
98.   
99.     currentPoint = centerPoint; 
100.     jsSprite = aJsSprite; 
101.     jsSprite->setPosition(centerPoint); 
102.     aJsBg->setPosition(centerPoint); 
103.     aJsBg->setTag(88); 
104.     this->addChild(aJsBg); 
105.     this->addChild(jsSprite); 
106.     if(isFollowRole){ 
107.         this->setIsVisible(false); 
108.     } 
109.     this->Active();//激活摇杆 
110.     return this; 
111. } 

创建使用方法很eazy，如下函数：

HRocker* HRocker:: HRockerWithCenter(CCPoint aPoint ,float aRadius ,CCSprite* aJsSprite,CCSprite* aJsBg,bool _isFollowRole)；

第一个参数aPoint：摇杆中心点的坐标；

第二个参数aRadius: 摇杆的半径

第三个参数：aJsSprite :摇杆的图片资源精灵

第四个参数：aJsBg: 摇杆背景图片资源精灵

第五个参数：isFollowRole：是否让摇杆永远跟随用户触屏点（Himi新添加的功能）

这里对于最后一个参数可能很多童鞋不太理解，那么这里大概描述下：

对于手机游戏而言，虚拟的摇杆并不是一个很好的操作方式，但是为了满足游戏的必要操作无疑必须使用，但是虚拟摇杆存在两方面问题：

1.没有实体感觉，对于用户来说不能触觉上明显分清当前自己有没有触摸在虚拟摇杆上或者当前是按下还是按上等；

2.遮挡部分游戏画面，这一点不仅仅式虚拟摇杆的存在造成遮挡画面，用户使用虚拟摇杆时更加的造成游戏画面被挡住；

3.不容易操作，过于死板，不小心就触发了虚拟摇杆区域之外；

对于虚拟摇杆存在的第一方面没有实体感我们没法改进，但是,是否触摸到虚拟键盘这个可以使用手机震动提示；第二，三方面的问题在当前iOS手机游戏上很多公司采用了让虚拟摇杆跟随用户触屏点为摇杆中心的方式！并且用户不触摸屏幕默认不显示虚拟摇杆；这么一来不仅让游戏画面能在不需要操作的时候尽可能的完美展示外，还能有效避免用户触摸不到摇杆判断区域的问题；摇杆跟随功能就是Himi封装Rocker类创建时第五个参数 isFollowRole，传入true即可跟随！

如果还有童鞋听的不是很清楚，那么将Himi这个Rocker类进行拷贝自己项目中，然后使用以下代码进行创建使用尝试下吧：

1. CCSprite *spRocker=CCSprite::spriteWithFile("CloseSelected.png");//摇杆 
2. CCSprite *spRockerBG=CCSprite::spriteWithFile("rockerBg.png");//摇杆背景 
3. HRocker *rocker=HRocker::HRockerWithCenter(ccp(210.0f,130.0f),50.0f ,spRocker ,spRockerBG,false);//创建摇杆 
4. this->addChild(rocker);//摇杆添加到layer中 
5. //this 是个layer 
6.   
7. CCSprite *spRocker2=CCSprite::spriteWithFile("CloseSelected.png");//摇杆 
8. CCSprite *spRockerBG2=CCSprite::spriteWithFile("rockerBg.png");//摇杆背景 
9. HRocker* rocker2=HRocker::HRockerWithCenter(ccp(210.0f,130.0f),50.0f ,spRocker2 ,spRockerBG2,true);//创建摇杆 
10. this->addChild(rocker2);//摇杆添加到layer中 

截图如下：

更多的自定义大家可以自行尝试，Himi就不添加了，毕竟每款游戏都有不同需求～