本文转载至Cocos2d-x v3.2学习笔记（十）Joystick 摇杆控件
代码：
|
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
#ifndef __Joystick__#define __Joystick__#include "cocos2d.h"USING_NS_CC;enum JoystickEnum{ DEFAULT, D_UP, D_DOWN, D_LEFT, D_RIGHT, D_LEFT_UP, D_LEFT_DOWN, D_RIGHT_UP, D_RIGHT_DOWN};class Joystick : public Layer{ public: /** 启动搖杆器 */ void onRun(); /** 清除数据 */ void onDisable(); /** 设置死亡半径，即超出半径將摇杆器失效 */ void setDieRadius(float radius); /** 设置无效区域半径（如果在无效区域內，將重置） */ void setFailRadius(float radius); /** 是否显示底盘和触点 */ void setVisibleJoystick(bool visible); /** 是否自由变换摇杆器的位置，即在屏幕上每一次按下鼠标时的坐标将是摇杆器的坐标，移动时将不改变摇杆器坐标，直到下次按下鼠标 */ void setAutoPosition(bool value); /** 回调函数指针 */ std::function<void(JoystickEnum)> onDirection; /** 静态创建函数（需要传入底盘和触点图片路径） */ static Joystick* create(std::string chassisPath,std::string dotPath); /** 初始化摇杆器（需要传入底盘和触点图片路径） */ void initWithJoystick(std::string chassisPath,std::string dotPath); protected: /** 有效区域半径 */ float _radius; /** 失效区域半径 */ float _failradius; /** 是否移出有效区域 */ bool isMoveOut; /** 是否存在有效区域半径 */ bool isDieRadius; /** 是否自由变换摇杆器坐标 */ bool isAutoPosition; /** 方向 */ JoystickEnum _direction; /** 底盘 */ Sprite* _chassis; /** 触点 */ Sprite* _touchDot; EventListenerTouchOneByOne* listener; bool onTouchBegan(Touch* touch,Event* event); void onTouchMoved(Touch* touch,Event* event); void onTouchEnded(Touch* touch,Event* event); /** 1、设置触点，并判断是否在无效区域内（如果在无效区域内，将重置） 2、发送角度变化（如果不在无效区域内） */ void setTouchDotPosition(Vec2 vec1,Vec2 vec2); /** 1、计算摇杆器八方向 2、发送角度变化，回调弧度变化函数 */ void changeAngle( Vec2 position ); /** 回调注册的监听函数 */ void callDirectionFun(); /** 重置（当弧度不是 DEFAULT时才重置） */ void resetState(); };#endif |
|
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
|
#include "Joystick.h"Joystick* Joystick::create(std::string chassisPath,std::string dotPath){ auto joystick = new Joystick(); joystick->initWithJoystick(chassisPath,dotPath); return joystick;}void Joystick::initWithJoystick(std::string chassisPath,std::string dotPath){ _chassis = Sprite::create(chassisPath); this->addChild(_chassis,0); _touchDot = Sprite::create(dotPath); this->addChild(_touchDot,1); isDieRadius = false; isAutoPosition = false; isMoveOut = false; _direction = DEFAULT;}void Joystick::onRun(){ listener = EventListenerTouchOneByOne::create(); listener->setSwallowTouches(false); listener->onTouchBegan = CC_CALLBACK_2(Joystick::onTouchBegan,this); listener->onTouchMoved = CC_CALLBACK_2(Joystick::onTouchMoved,this); listener->onTouchEnded = CC_CALLBACK_2(Joystick::onTouchEnded,this); this->_eventDispatcher->addEventListenerWithSceneGraphPriority(listener,this);}bool Joystick::onTouchBegan(Touch* touch,Event* event){ Vec2 locationInNode = this->convertToNodeSpace(touch->getLocation()); if( isAutoPosition ) { this->setPosition(touch->getLocation()); return true; } if( isAutoPosition==false && isDieRadius ) { if( locationInNode.getLength() > _radius ) { return false; } } _touchDot->setPosition(locationInNode); if( locationInNode.getLength() > _failradius ) { changeAngle(locationInNode); } return true;}void Joystick::onTouchMoved(Touch* touch,Event* event){ Vec2 locationInNode = this->convertToNodeSpace(touch->getLocation()); if( isDieRadius ) { if( locationInNode.getLength() < _radius ) { if( isMoveOut ) { _touchDot->setPosition(locationInNode); isMoveOut = false; } setTouchDotPosition(locationInNode,_touchDot->getPosition() + touch->getDelta()); return; } } else { setTouchDotPosition(locationInNode,_touchDot->getPosition() + touch->getDelta()); return; } isMoveOut = true; _touchDot->setPosition(0,0); resetState();}void Joystick::onTouchEnded(Touch* touch,Event* event){ _touchDot->setPosition(0,0); isMoveOut = false; resetState();}void Joystick::setTouchDotPosition(Vec2 vec1,Vec2 vec2){ _touchDot->setPosition(vec2); if( _failradius>0 ) { if( vec1.getLength() < _failradius ) { resetState(); return; } } changeAngle(vec1);}void Joystick::setDieRadius(float radius){ _radius = radius; isDieRadius = true;}void Joystick::setAutoPosition(bool value){ isAutoPosition = value;}void Joystick::setFailRadius(float radius){ _failradius = radius;}void Joystick::onDisable(){ this->_eventDispatcher->removeEventListener(listener); isDieRadius = false; isAutoPosition = false; isMoveOut = false;}void Joystick::changeAngle( Vec2 position ){ auto angle = CC_RADIANS_TO_DEGREES(position.getAngle()); if(angle > -22.5 && angle < 22.5) { _direction=D_RIGHT; } else if(angle > 22.5 && angle < 67.5) { _direction=D_RIGHT_UP; } else if(angle > 67.5 && angle < 112.5) { _direction=D_UP; } else if(angle > 112.5 && angle < 157.5) { _direction=D_LEFT_UP; } else if((angle > 157.5 && angle < 180)||(angle < -157.5 && angle > -180)) { _direction=D_LEFT; } else if(angle < -112.5 && angle > -157.5) { _direction=D_LEFT_DOWN; } else if(angle < -67.5 && angle > -112.5) { _direction=D_DOWN; } else if(angle < -22.5 && angle > -67.5) { _direction=D_RIGHT_DOWN; } callDirectionFun();}void Joystick::callDirectionFun(){ if( onDirection ) { onDirection(_direction); }}void Joystick::resetState(){ if(_direction != DEFAULT) { _direction = DEFAULT; callDirectionFun(); }}void Joystick::setVisibleJoystick(bool visible){ _chassis->setVisible(visible); _touchDot->setVisible(visible);} |
当然，如果有用到的朋友可以自己修改。这只是最简单的实现。
下面有效果图，不过加载比较慢
普通模式：
|
1
2
3
4
5
|
auto joystick = Joystick::create("rocker.png","rocker_joy.png");//通过两张图片初始化控件this->addChild(joystick);joystick->setPosition(VisibleRect::leftBottom()+Vec2(200,200));//設置初始位置 joystick->onDirection=CC_CALLBACK_1(SceneMain::onDirection,this);//角度变化更新（onDirection(JoystickEnum enums)）joystick->onRun();//启动 |
存在死亡半径模式：（超出死亡半径将触点重置初始位置，移动失效）
|
1
2
3
4
5
6
|
auto joystick = Joystick::create("rocker.png","rocker_joy.png");//通过两张图片初始化控件this->addChild(joystick);joystick->setPosition(VisibleRect::leftBottom()+Vec2(200,200));//设置初始位置joystick->setDieRadius(60);//设置死亡半径（外圈）joystick->onDirection=CC_CALLBACK_1(SceneMain::onDirection,this);//角度变化更新（onDirection(JoystickEnum enums)）joystick->onRun();//启动 |
设置失效半径：（在失效半径内将不会触发角度改变事件）
|
1
2
3
4
5
6
7
|
auto joystick = Joystick::create("rocker.png","rocker_joy.png");//通过两张图片初始化控件this->addChild(joystick);joystick->setPosition(VisibleRect::leftBottom()+Vec2(200,200));//设置初始位置joystick->setDieRadius(60);//设置死亡半径（外圈）joystick->setFailRadius(30);//设置失效半径（內圈） joystick->onDirection=CC_CALLBACK_1(SceneMain::onDirection,this);//角度变化更新（onDirection(JoystickEnum enums)）joystick->onRun();//启动 |
设置自由变换位置：以鼠标按下的坐标为初始位置
|
1
2
3
4
5
6
|
auto joystick = Joystick::create("rocker.png","rocker_joy.png");//通过两张图片初始化控件this->addChild(joystick);joystick->setPosition(VisibleRect::leftBottom()+Vec2(200,200));//设置初始位置joystick->setAutoPosition(true);//是否自由改变坐标joystick->onDirection=CC_CALLBACK_1(SceneMain::onDirection,this);//角度变化更新joystick->onRun();//启动 |
设置隐藏摇杆：（不显示摇杆底盘和触点，一般会设置成自由改变位置）
|
1
2
3
4
5
6
7
|
auto joystick = Joystick::create("rocker.png","rocker_joy.png");//通过两张图片初始化控件this->addChild(joystick);joystick->setPosition(VisibleRect::leftBottom()+Vec2(200,200));//设置初始位置joystick->setAutoPosition(true);//是否自由改变坐标joystick->setVisibleJoystick(false);//是否显示joystick->onDirection=CC_CALLBACK_1(SceneMain::onDirection,this);//角度变化更新joystick->onRun();//启动 |
