Super於的虛擬搖桿組件，拿來就用，讓你一勞永逸！
- 2019 年 10 月 4 日
- 筆記
最近在研究虛擬搖桿實現方式的時候，發現網上的教程的實現方式可移植性並不是特別好，於是我決定自己實現一個虛擬搖桿組件，保存到自己的組件庫，方便以後用到的時候直接使用（關注公眾號後台回復「虛擬搖桿組件」可獲取該組件），下面正文開始。
實現思路：
為了實現高度可移植，定義了兩個節點屬性，用於綁定場景和玩家角色，另外添加 PlayerNodeSpeed 屬性和 MaxR 屬性用於控制玩家移動速度和搖桿節點的移動範圍。
實現過程：
1.首先創建一個空節點 Rocker，下面掛載上虛擬搖桿的背景 rockerBg 和搖桿節點 joystick：
2.然後給創建好節點添加合適的虛擬搖桿資源，沒有資源的小夥伴可以關注公眾號後台回復「虛擬搖桿」獲取多套美術資源：
3.之後編寫腳本如下，程式碼中已經儘可能詳細做好了備註，如果仍有不清楚的小夥伴可以後台私信我，看到後我會及時回復的：
// Rocker.js cc.Class({ extends: cc.Component, properties: { sceneNode: { // 場景節點 type: cc.Node, default: null, }, playerNode: { // player節點 type: cc.Node, default: null, }, playerNodeSpeed: 100, // player移動速度 Max_r: 100, // 搖桿移動半徑，根據自己美術資源進行調整 }, onLoad() { // 隱藏搖桿組件節點 this.node.active = false; // 獲取搖桿節點並初始化搖桿節點位置及角度 this.joystick = this.node.getChildByName('joystick') this.joystick.setPosition(cc.v2(0, 0)); this.dir = cc.v2(0, 0); // 註冊父節點的 touch 監聽事件 this.sceneNode.on(cc.Node.EventType.TOUCH_START, this.cbTouchStart, this); this.sceneNode.on(cc.Node.EventType.TOUCH_MOVE, this.cbTouchMove, this); this.sceneNode.on(cc.Node.EventType.TOUCH_END, this.cbTouchEnd, this); this.sceneNode.on(cc.Node.EventType.TOUCH_CANCEL, this.cbTouchCancel, this); }, update(dt) { if (this.dir.mag() < 0.5) { return; } let vx = this.dir.x * this.playerNodeSpeed; let vy = this.dir.y * this.playerNodeSpeed; let sx = vx * dt; let sy = vy * dt; //移動 this.playerNode.x += sx; this.playerNode.y += sy; let windowsSize = cc.winSize; let minX = -windowsSize.width / 2 + this.playerNode.width / 2; // 最小X坐標 let maxX = Math.abs(minX); // 最大X坐標 let minY = -windowsSize.height / 2 + this.playerNode.height / 2; // 最小Y坐標 let maxY = Math.abs(minY); // 最大Y坐標 let currentPos = this.playerNode.getPosition(); if (currentPos.x < minX) { currentPos.x = minX; } else if (currentPos.x > maxX) { currentPos.x = maxX; } if (currentPos.y < minY) { currentPos.y = minY; } else if (currentPos.y > maxY) { currentPos.y = maxY; } this.playerNode.setPosition(currentPos); //方向計算 var r = Math.atan2(this.dir.y, this.dir.x); var degree = r * 180 / (Math.PI); degree = 360 - degree + 90; this.playerNode.rotation = degree; }, cbTouchStart(event) { let pos = event.getLocation(); // 點擊時顯示搖桿組件節點並設置位置 this.node.active = true; let rPos = this.sceneNode.convertToNodeSpaceAR(pos); // 將世界坐標轉化為場景節點的相對坐標 this.node.setPosition(rPos); // 初始化搖桿節點位置及角度 this.joystick.setPosition(cc.v2(0, 0)); this.dir = cc.v2(0, 0); }, cbTouchMove(event) { var pos = event.getLocation(); var jPos = this.node.convertToNodeSpaceAR(pos); // 將世界坐標轉化為搖桿組件節點的相對坐標 // 獲取搖桿的角度 let len = jPos.mag(); this.dir.x = jPos.x / len; this.dir.y = jPos.y / len; // 設置搖桿的位置 if (len > this.Max_r) { jPos.x = this.Max_r * jPos.x / len; jPos.y = this.Max_r * jPos.y / len; } this.joystick.setPosition(jPos); }, cbTouchEnd(event) { // 初始化搖桿節點位置及角度 this.joystick.setPosition(cc.v2(0, 0)); this.dir = cc.v2(0, 0); this.node.active = false; }, cbTouchCancel(event) { // 初始化搖桿節點位置及角度 this.joystick.setPosition(cc.v2(0, 0)); this.dir = cc.v2(0, 0); this.node.active = false; } });
4.最後將寫好的腳本掛載到 Rocker 節點上保存為 Prefab 就可以使用了：
使用步驟：
1.創建好場景和玩家角色後，將 Rocker 組件拖到場景中，並將 Canvas 和 玩家角色掛載到對應的位置，設置好合適的移動速度和搖桿移動半徑後就可以使用了：
2.可以看到已經可以流暢的控制玩家移動了：
最後：
不知道小夥伴們學會了沒有，趕快來試試看吧，請關注我的公眾號「遊戲開發小白變怪獸」 回復【虛擬搖桿組件】獲取遊戲源碼！有什麼好的建議都可以在下面評論或者私信告訴我哦！
我是「Super於」，立志做一個每天都有正回饋的人！
