Skip to content

Commit 491a577

Browse files
YunYouJunYunYouJun
committed
🎨 simplify & friendly
1 parent de24a6b commit 491a577

File tree

14 files changed

+107
-32420
lines changed

14 files changed

+107
-32420
lines changed

‎LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2019 云游君
3+
Copyright (c) 2019 云游君 (YunYouJun) [email protected]
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.en.md‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111

1212
Online Address: <https://yunyoujun.github.io/cocos-creator-joystick/>
1313

14+
The latest version has been rewritten with TypeScript, with a more friendly structure and comments. If you want to view the pure JavaScript version, please see the old version [v0.0.2](https://github.com/YunYouJun/cocos-creator-joystick/releases/tag/v0.0.2).
15+
1416
## Usage
1517

1618
### Downoload
@@ -45,20 +47,21 @@ You can see it in `demo.fire` scene.
4547
- Touch Place (custom Joystick width and height)
4648
- [x] Full Screen
4749
- [x] Half Screen
50+
- Decoupling between nodes (only need to monitor Touch events, without mounting the Player node to Joystick, can control many Players)
4851

4952
### Joystick
5053

51-
| Argument | Type | Default | Description | Customizable |
52-
| ------------ | ---------------------------------------- | ------------------ | -------------------------------- | ------------ |
53-
| joystickType | JoystickType.FIXED / JoystickType.FOLLOW | JoystickType.FIXED | types of joystick | √ |
54-
| player | cc.Node | - | mount the player node to control | √ |
55-
| ring | cc.Node | - | joystick background node | √ |
56-
| dot | cc.Node | - | joystick control node | √ |
54+
| Argument | Type | Default | Description | Customizable |
55+
| ------------ | ---------------------------------------- | ------------------ | ------------------------ | ------------ |
56+
| joystickType | JoystickType.FIXED / JoystickType.FOLLOW | JoystickType.FIXED | types of joystick | √ |
57+
| ring | cc.Node | - | joystick background node | √ |
58+
| dot | cc.Node | - | joystick control node | √ |
5759

5860
### Player
5961

6062
| Argument | Type | Default | Description | Controled by Joystick | Customizable |
6163
| ----------- | -------------------------------------------------- | -------------------------- | ----------------------------- | --------------------- | ------------ |
64+
| rigidbody | boolean | false | Rigidbody (Physics) mode | × | x |
6265
| moveDir | Vec2 | cc.v2(0, 1) // straight up | initial direction of movement | √ | √ |
6366
| \_speedType | SpeedType.STOP / SpeedType.NORMAL / SpeedType.FAST | SpeedType.NORMAL | speed type | √ | × |
6467
| \_moveSpeed | cc.Integer | 0 | speed of movement | × | × |
@@ -70,14 +73,11 @@ You can see it in `demo.fire` scene.
7073

7174
> assets/script
7275
73-
| Filename | Description | Function |
74-
| ---------------- | --------------------- | ------------------------------------------------------------------------------------------------------------ |
75-
| Joystick.js | Joystick Script | store joystick main logic |
76-
| JoystickEnum.js | Joystick Enum Script | store joystick type and event |
77-
| JoystickEvent.js | Joystick Event Class | store joystick event |
78-
| Player.js | Player Script | use JoystickEvent watch JoystickEnum.JoystickEventType on demand (You can customize it.) |
79-
| PlayerPhysics.js | Physics Player Script | use JoystickEvent watch JoystickEnum.JoystickEventType on demand (You can customize it.) |
80-
| UI.js | UI | provide switch joystick type function for online preview（You can delete it directly if you don't need it.） |
76+
| Filename | Description | Function |
77+
| ----------- | --------------- | ------------------------------------------------------------------------------------------------------------ |
78+
| Joystick.js | Joystick Script | store joystick main logic (include some type definitions and global events listen) |
79+
| Player.js | Player Script | listen events emitted by Joystick (You can customize it.) |
80+
| UI.js | UI | provide switch joystick type function for online preview（You can delete it directly if you don't need it.） |
8181

8282
## Other
8383

‎README.md‎

Lines changed: 25 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,16 @@
33
> Cocos Creator 虚拟摇杆样例
44
55
![GitHub package.json version](https://img.shields.io/github/package-json/v/YunYouJun/cocos-creator-joystick.svg?style=social)
6-
[![Cocos Creator version](https://img.shields.io/badge/Cocos_Creator-v2.2.x-blue.svg?style=social)](https://www.cocos.com/creator)
6+
[![Cocos Creator version](https://img.shields.io/badge/Cocos_Creator-v2.4.x-blue.svg?style=social)](https://www.cocos.com/creator)
77
![GitHub top language](https://img.shields.io/github/languages/top/YunYouJun/cocos-creator-joystick.svg?style=social&logo=javascript)
88
![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/YunYouJun/cocos-creator-joystick.svg?style=social&logo=visual-studio-code)
99

1010
中文文档 | [English Docs](./README.en.md)
1111

1212
在线预览: <https://yunyoujun.github.io/cocos-creator-joystick/>
1313

14+
最新版本已使用 TypeScript 重写，更友好的结构与注释。如果您想要查看纯 JavaScript 版本，请见旧版本 [v0.0.2](https://github.com/YunYouJun/cocos-creator-joystick/releases/tag/v0.0.2)。
15+
1416
## 使用
1517

1618
### 下载
@@ -19,8 +21,8 @@
1921

2022
### 通过文件导入
2123

22-
> Cocos Creator v2.2.x -> 文件 -> 资源导出... -> 选择 -> assets/demo.fire
23-
> Cocos Creator v2.2.x -> 文件 -> 资源导入...
24+
> Cocos Creator v2.x -> 文件 -> 资源导出... -> 选择 -> assets/demo.fire
25+
> Cocos Creator v2.x -> 文件 -> 资源导入...
2426
2527
### 通过 Git
2628

@@ -45,47 +47,37 @@ git clone https://github.com/YunYouJun/cocos-creator-joystick.git
4547
- 触摸感应位置（自定义 Joystick 宽高）
4648
- [x] 全屏感应
4749
- [x] 半屏感应
50+
- 节点间解耦（只需要监听 Touch 事件，而无需挂载 Player 节点至 Joystick，可控制任意多个 Player）
4851

4952
### 虚拟摇杆
5053

51-
| 属性 | 类型 | 默认值 | 描述 | 可自定义 |
52-
| ------------- | ---------------------------------------- | ------------------ | ------------------------ | -------- |
53-
| joystickType | JoystickType.FIXED / JoystickType.FOLLOW | JoystickType.FIXED | 虚拟摇杆类型 | √ |
54-
| player | cc.Node | - | 挂载要控制的玩家节点 | √ |
55-
| playerPhysics | cc.Node | - | 挂载要控制的玩家物理节点 | √ |
56-
| area | cc.Node | - | 摇杆触摸激活区域参考 | √ |
57-
| ring | cc.Node | - | 摇杆背景节点 | √ |
58-
| dot | cc.Node | - | 摇杆操纵点 | √ |
54+
| 属性 | 类型 | 默认值 | 描述 | 可自定义 |
55+
| ------------ | ---------------------------------------- | ------------------ | ------------ | -------- |
56+
| joystickType | JoystickType.FIXED / JoystickType.FOLLOW | JoystickType.FIXED | 虚拟摇杆类型 | √ |
57+
| ring | cc.Node | - | 摇杆背景节点 | √ |
58+
| dot | cc.Node | - | 摇杆操纵点 | √ |
5959

6060
### 玩家
6161

62-
| 属性 | 类型 | 默认值 | 描述 | 由虚拟摇杆控制 | 可自定义 |
63-
| ----------- | -------------------------------------------------- | ----------------------- | ------------ | -------------- | -------- |
64-
| moveDir | Vec2 | cc.v2(0, 1) // 竖直向上 | 初始移动方向 | √ | √ |
65-
| \_speedType | SpeedType.STOP / SpeedType.NORMAL / SpeedType.FAST | SpeedType.NORMAL | 速度类型 | √ | × |
66-
| \_moveSpeed | cc.Integer | 0 | 移动速度 | × | × |
67-
| stopSpeed | cc.Integer | 0 | 停止时速度 | × | √ |
68-
| normalSpeed | cc.Integer | 100 | 正常速度 | × | √ |
69-
| fastSpeed | cc.Integer | 200 | 加快时速度 | × | √ |
62+
| 属性 | 类型 | 默认值 | 描述 | 由虚拟摇杆控制 | 可自定义 |
63+
| ----------- | -------------------------------------------------- | ----------------------- | ---------------- | -------------- | -------- |
64+
| rigidbody | boolean | false | 刚体（物理）模式 | × | x |
65+
| moveDir | Vec2 | cc.v2(0, 1) // 竖直向上 | 初始移动方向 | √ | √ |
66+
| \_speedType | SpeedType.STOP / SpeedType.NORMAL / SpeedType.FAST | SpeedType.NORMAL | 速度类型 | √ | × |
67+
| \_moveSpeed | cc.Integer | 0 | 移动速度 | × | × |
68+
| stopSpeed | cc.Integer | 0 | 停止时速度 | × | √ |
69+
| normalSpeed | cc.Integer | 100 | 正常速度 | × | √ |
70+
| fastSpeed | cc.Integer | 200 | 加快时速度 | × | √ |
7071

7172
## 项目结构
7273

7374
> 逻辑文件均位于 `assets/script` 目录下
7475
75-
| 文件名 | 描述 | 功能 |
76-
| ---------------- | ---------------- | -------------------------------------------------------------------------------------------- |
77-
| Joystick.js | 虚拟摇杆脚本文件 | 存储 Joystick 主逻辑 |
78-
| JoystickEnum.js | 虚拟摇杆枚举文件 | 存储摇杆类型定义、事件定义 |
79-
| JoystickEvent.js | 虚拟摇杆事件类 | 存储摇杆事件管理器 |
80-
| Player.js | 玩家脚本文件 | 可根据需求通过 JoystickEvent 监听 JoystickEnum.JoystickEventType。（可根据需要自行修改删除） |
81-
| PlayerPhysics.js | 玩家脚本文件 | 可根据需求通过 JoystickEvent 监听 JoystickEnum.JoystickEventType。（可根据需要自行修改删除） |
82-
| UI.js | UI | 提供在线预览页面，玩家切换摇杆类型功能。（不需要可直接删除） |
83-
84-
## 新特性
85-
86-
- 节点间解耦
87-
通过 `JoystickEvent.js` 的观察者模式管理摇杆动作，需要知道摇杆操作动作的只需要监听事件，不需要暴露自己的节点给 `Joystick.js`。
88-
`Joystick.js` 只需要处理摇杆逻辑，假设有多个 player 需要知道摇杆的 touchStart，那么只需要监听 JoystickEnum.JoystickEventType.TOUCH_START 事件即可。
76+
| 文件名 | 描述 | 功能 |
77+
| ----------- | ---------------- | ------------------------------------------------------------ |
78+
| Joystick.js | 虚拟摇杆脚本文件 | 存储 Joystick 主逻辑 （包含一些类型定义与全局监听实例） |
79+
| Player.js | 玩家脚本文件 | 监听 Joystick 发射的事件（可根据需要自行修改删除） |
80+
| UI.js | UI | 提供在线预览页面，玩家切换摇杆类型功能。（不需要可直接删除） |
8981

9082
## 其他
9183

@@ -109,6 +101,5 @@ npm run deploy
109101

110102
### Todo
111103

112-
- [ ] Write with TypeScript
113104
- [ ] Keep half screen layout (now is fixed width)
114105
- [ ] How about set dot as a child of ring?

‎assets/scenes/demo.fire‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,7 @@
180180
"array": [
181181
0,
182182
0,
183-
360.2579999908796,
183+
362.8646441856798,
184184
0,
185185
0,
186186
0,
@@ -344,11 +344,11 @@
344344
"__id__": 5
345345
},
346346
"_enabled": true,
347+
"rigidbody": false,
347348
"moveDir": {
348-
"__type__": "cc.Vec3",
349+
"__type__": "cc.Vec2",
349350
"x": 0,
350-
"y": 1,
351-
"z": 0
351+
"y": 1
352352
},
353353
"_speedType": 0,
354354
"_moveSpeed": 0,
@@ -524,25 +524,25 @@
524524
"_id": "1fhuyDG7tEKrwDxP5C6Rro"
525525
},
526526
{
527-
"__type__": "7d4c0PcHhpH74n/NBlzr5Rz",
527+
"__type__": "ba452nnVcJMPYIauwJ4Favx",
528528
"_name": "",
529529
"_objFlags": 0,
530530
"node": {
531531
"__id__": 8
532532
},
533533
"_enabled": true,
534+
"rigidbody": true,
534535
"moveDir": {
535-
"__type__": "cc.Vec3",
536+
"__type__": "cc.Vec2",
536537
"x": 0,
537-
"y": 1,
538-
"z": 0
538+
"y": 1
539539
},
540540
"_speedType": 0,
541541
"_moveSpeed": 0,
542542
"stopSpeed": 0,
543543
"normalSpeed": 100,
544544
"fastSpeed": 200,
545-
"_id": "d0OKFzitZNJbVMPussSzt7"
545+
"_id": "43eXP+hnhPKLMNODVyFsfk"
546546
},
547547
{
548548
"__type__": "cc.Node",
@@ -1693,7 +1693,7 @@
16931693
"__id__": 26
16941694
},
16951695
"component": "",
1696-
"_componentId": "b578d4RwmNB97QPmxn2E0ls",
1696+
"_componentId": "df968oG9ClOtaKssOzeyetw",
16971697
"handler": "useFixedType",
16981698
"customEventData": ""
16991699
},
@@ -2079,7 +2079,7 @@
20792079
"__id__": 26
20802080
},
20812081
"component": "",
2082-
"_componentId": "b578d4RwmNB97QPmxn2E0ls",
2082+
"_componentId": "df968oG9ClOtaKssOzeyetw",
20832083
"handler": "useFollowType",
20842084
"customEventData": ""
20852085
},

‎assets/scripts/Joystick.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,14 @@ export default class Joystick extends cc.Component {
5151
ring = null;
5252

5353
@property({
54+
type: cc.Enum(JoystickType),
5455
displayName: "Touch Type",
5556
tooltip: "触摸类型",
5657
})
5758
joystickType = JoystickType.FIXED;
5859

5960
@property({
61+
type: cc.Enum(DirectionType),
6062
displayName: "Direction Type",
6163
tooltip: "方向类型",
6264
})
@@ -92,21 +94,21 @@ export default class Joystick extends cc.Component {
9294
* 启用时
9395
*/
9496
onEnable() {
95-
instance.on("change_joystick_type", this._onChangeJoystickType, this);
97+
instance.on("set_joystick_type", this._onSetJoystickType, this);
9698
}
9799

98100
/**
99101
* 禁用时
100102
*/
101103
onDisable() {
102-
instance.off("change_joystick_type", this._onChangeJoystickType, this);
104+
instance.off("set_joystick_type", this._onSetJoystickType, this);
103105
}
104106

105107
/**
106108
* 改变摇杆类型
107109
* @param type
108110
*/
109-
_onChangeJoystickType(type: JoystickType) {
111+
_onSetJoystickType(type: JoystickType) {
110112
this.joystickType = type;
111113
this.node.opacity = type === JoystickType.FIXED ? 255 : 0;
112114
}

‎assets/scripts/Player.ts‎

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@ import { instance } from "./Joystick";
55

66
@ccclass
77
export default class Player extends cc.Component {
8+
@property({
9+
displayName: "刚体模式",
10+
tooltip: "不会立即停止",
11+
})
12+
rigidbody = false;
13+
814
// from joystick
915
@property({
1016
displayName: "Move Dir",
@@ -28,7 +34,7 @@ export default class Player extends cc.Component {
2834

2935
@property({
3036
type: cc.Integer,
31-
displayName: "Speed When Stop",
37+
displayName: "Stop Speed",
3238
tooltip: "停止时速度",
3339
})
3440
stopSpeed = 0;
@@ -45,31 +51,48 @@ export default class Player extends cc.Component {
4551
})
4652
fastSpeed = 200;
4753

54+
_body: cc.RigidBody;
55+
4856
onLoad() {
57+
if (this.rigidbody) {
58+
cc.director.getPhysicsManager().enabled = true;
59+
this._body = this.getComponent(cc.RigidBody);
60+
}
61+
4962
instance.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
5063
instance.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
5164
instance.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);
5265
}
5366

5467
onTouchStart() {}
5568

56-
onTouchMove(event, data) {
69+
onTouchMove(event: cc.Event.EventTouch, data) {
5770
this._speedType = data.speedType;
5871
this.moveDir = data.moveDistance;
5972
}
6073

61-
onTouchEnd(event, data) {
74+
onTouchEnd(event: cc.Event.EventTouch, data) {
6275
this._speedType = data.speedType;
6376
}
6477

65-
// methods
78+
/**
79+
* 移动
80+
*/
6681
move() {
6782
this.node.angle =
6883
cc.misc.radiansToDegrees(Math.atan2(this.moveDir.y, this.moveDir.x)) - 90;
69-
const oldPos = cc.v2();
70-
this.node.getPosition(oldPos);
71-
const newPos = oldPos.add(this.moveDir.mul(this._moveSpeed / 120));
72-
this.node.setPosition(newPos);
84+
85+
if (this.rigidbody) {
86+
this._body.applyForceToCenter(
87+
cc.v2(this.moveDir.x * 200, this.moveDir.y * 200),
88+
true
89+
);
90+
} else {
91+
const oldPos = cc.v2();
92+
this.node.getPosition(oldPos);
93+
const newPos = oldPos.add(this.moveDir.mul(this._moveSpeed / 120));
94+
this.node.setPosition(newPos);
95+
}
7396
}
7497

7598
update(dt) {
@@ -86,6 +109,8 @@ export default class Player extends cc.Component {
86109
default:
87110
break;
88111
}
89-
this.move();
112+
if (this._speedType !== SpeedType.STOP) {
113+
this.move();
114+
}
90115
}
91116
}

0 commit comments

Comments
 (0)