Categories
Uncategorized

Custom virtual joystick component allows you to once and for all

Recent research in virtual joystick implementation, we found the tutorial online implementation of portability is not particularly good, so I decided to implement a virtual joystick component, to save their own component libraries, when used to facilitate future direct use (number of public attention backstage reply “virtual joystick components” can get this component), the following text begins.

 

Realization of ideas:

In order to achieve highly portable, two nodes are defined attributes, and a scene of the player character for binding, and further added PlayerNodeSpeed ​​properties MaxR property for controlling the moving speed of the player and the rocker node moving range.

 

Implementation process:

1. First, create an empty node Rocker, mounted below the background rockerBg and rocker node joystick virtual joystick:

 

2. Then add a good node to create a virtual joystick appropriate resources, partners can not have the resources of a small number of public attention backstage reply “virtual joystick” to obtain multiple sets of fine arts resources:

 

3. After writing the script below, the code has detailed notes as well, there is still not clear if the background of a small partner can private letter I, after seeing I will promptly reply:

  1 // Rocker.js
  2 
  3 cc.Class({
  4     extends: cc.Component,
  5 
  6     properties: {
  7         sceneNode: {    //

SceneNode

8 type: cc.Node, 9 default: null, 10 }, 11 12 playerNode: { //

player node

13 type: cc.Node, 14 default: null, 15 }, 16 17 playerNodeSpeed: 100, //

player movement speed

18 19 Max_r: 100, //

Rocker radius of movement, adjust according to their own art assets

20 }, 21 22 onLoad() { 23 //

Hide rocker component node

24 this.node.active = false; 25 26 //

Get Joystick node and the node initialize joystick position and the angle

27 this.joystick = this.node.getChildByName('joystick') 28 this.joystick.setPosition(cc.v2(0, 0)); 29 this.dir = cc.v2(0, 0); 30 31 //

Registered parent of touch monitor events

32 this.sceneNode.on(cc.Node.EventType.TOUCH_START, this.cbTouchStart, this); 33 this.sceneNode.on(cc.Node.EventType.TOUCH_MOVE, this.cbTouchMove, this); 34 this.sceneNode.on(cc.Node.EventType.TOUCH_END, this.cbTouchEnd, this); 35 this.sceneNode.on(cc.Node.EventType.TOUCH_CANCEL, this.cbTouchCancel, this); 36 }, 37 38 update(dt) { 39 if (this.dir.mag() < 0.5) { 40 return; 41 } 42 43 let vx = this.dir.x * this.playerNodeSpeed; 44 let vy = this.dir.y * this.playerNodeSpeed; 45 46 let sx = vx * dt; 47 let sy = vy * dt; 48 //

mobile

49 this.playerNode.x += sx; 50 this.playerNode.y += sy; 51 52 let windowsSize = cc.winSize; 53 54 let minX = -windowsSize.width / 2 + this.playerNode.width / 2; //

Minimum X coordinate

55 let maxX = Math.abs(minX); //

The maximum X-coordinate

56 let minY = -windowsSize.height / 2 + this.playerNode.height / 2; //

Minimum Y coordinate

57 let maxY = Math.abs(minY); //

Maximum Y coordinate

58 59 let currentPos = this.playerNode.getPosition(); 60 61 if (currentPos.x < minX) { 62 currentPos.x = minX; 63 } else if (currentPos.x > maxX) { 64 currentPos.x = maxX; 65 } 66 67 if (currentPos.y < minY) { 68 currentPos.y = minY; 69 } else if (currentPos.y > maxY) { 70 currentPos.y = maxY; 71 } 72 73 this.playerNode.setPosition(currentPos); 74 75 //

Direction calculation

76 var r = Math.atan2(this.dir.y, this.dir.x); 77 var degree = r * 180 / (Math.PI); 78 degree = 360 - degree + 90; 79 this.playerNode.rotation = degree; 80 }, 81 82 cbTouchStart(event) { 83 let pos = event.getLocation(); 84 85 //

Display node rocker assembly and installation position when clicked

86 this.node.active = true; 87 let rPos = this.sceneNode.convertToNodeSpaceAR(pos); //

The world coordinates into a scene node relative coordinates

88 this.node.setPosition(rPos); 89 90 //

Rocker node initialization position and the angle

91 this.joystick.setPosition(cc.v2(0, 0)); 92 this.dir = cc.v2(0, 0); 93 }, 94 95 cbTouchMove(event) { 96 var pos = event.getLocation(); 97 98 var jPos = this.node.convertToNodeSpaceAR(pos); //

The world coordinates into relative coordinates rocker component node

99 100 //

Gets rocker angle

101 let len = jPos.mag(); 102 this.dir.x = jPos.x / len; 103 this.dir.y = jPos.y / len; 104 105 //

Setting position of the rocker

106 if (len > this.Max_r) { 107 jPos.x = this.Max_r * jPos.x / len; 108 jPos.y = this.Max_r * jPos.y / len; 109 } 110 this.joystick.setPosition(jPos); 111 }, 112 113 cbTouchEnd(event) { 114 //

Rocker node initialization position and the angle

115 this.joystick.setPosition(cc.v2(0, 0)); 116 this.dir = cc.v2(0, 0); 117 this.node.active = false; 118 }, 119 120 cbTouchCancel(event) { 121 //

Rocker node initialization position and the angle

122 this.joystick.setPosition(cc.v2(0, 0)); 123 this.dir = cc.v2(0, 0); 124 this.node.active = false; 125 } 126 });

 

4. Finally, the script written mount on Rocker saved as Prefab node can be used:

 

Steps for usage:

1. created player characters and scenes, the Rocker component onto the scene, and the Canvas and mounted to a position corresponding to the player character, provided a good fit and the moving speed of the joystick can be used after the moving radius:

 

2. You can already see the players can smoothly control the movement:

 

At last:

I do not know little friends learned not, hurry to try it, what good suggestions in the comments below or can be private letter to tell me Oh!

 


 

Recommended reading:

Let Cai Xu Kun teach you achieve frame animation of the game (on)

Let Cai Xu Kun teach you achieve frame animation (in) the game

Culture and education you achieve a “battle aircraft” in the control logic fighter

 


 

I am a “Super in” determined to make people have a positive feedback every day!

Leave a Reply