查看項目所有章節

接著上一章，在man場景中創建一個 joystick 精靈，并在 joystick下創建一個 stick 精靈

將提前準備好的資源拖到精靈上

修改它們的大小，joystick修改為260*260，stick修改為100*100

并給joystick節點添加widget組件，并設置左下位置100，讓其固定在屏幕的左下角

在scripts文件夾中創建TypeScript腳本，腳本內容如下：

const { ccclass, property } = cc._decoratorvar State = cc.Enum({IDLE: 0,MOVE: 1 })@ccclass export default class NewClass extends cc.Component {@property(cc.Node)stick = null@propertymax_radius: number = 120@propertymin_radius: number = 60// LIFE-CYCLE CALLBACKS:// onLoad () {}@property({type: State})state = State.IDLEdir: numberradius: numberstart() {this.dir = -1this.radius = 0this._initTouchEvent()}_initTouchEvent() {cc.log('====_initTouchEvent====')this.node.on(cc.Node.EventType.TOUCH_START, this._touchStartEvent, this)this.node.on(cc.Node.EventType.TOUCH_MOVE, this._touchMoveEvent, this)// 觸摸在圓圈內離開或在圓圈外離開后，搖桿歸位，player速度為0this.node.on(cc.Node.EventType.TOUCH_END, this._touchEndEvent, this)this.node.on(cc.Node.EventType.TOUCH_CANCEL, this._touchEndEvent, this)}_touchStartEvent(e) {this.stick.setPosition(cc.v2(0, 0))this.dir = 0}_touchMoveEvent(e) {var w_pos = e.getLocation()var pos = this.node.convertToNodeSpaceAR(w_pos)var len = pos.mag()if (len > this.max_radius) {pos.x = (pos.x * this.max_radius) / lenpos.y = (pos.y * this.max_radius) / len}this.stick.setPosition(pos)if (len < this.min_radius) {return}this.dir = -1var r = Math.atan2(pos.y, pos.x)if (r >= (-8 * Math.PI) / 8 && r < (-7 * Math.PI) / 8) {this.dir = 2} else if (r >= (-7 * Math.PI) / 8 && r < (-5 * Math.PI) / 8) {this.dir = 6} else if (r >= (-5 * Math.PI) / 8 && r < (-3 * Math.PI) / 8) {this.dir = 1} else if (r >= (-3 * Math.PI) / 8 && r < (-1 * Math.PI) / 8) {this.dir = 7} else if (r >= (-1 * Math.PI) / 8 && r < (1 * Math.PI) / 8) {this.dir = 3} else if (r >= (1 * Math.PI) / 8 && r < (3 * Math.PI) / 8) {this.dir = 4} else if (r >= (3 * Math.PI) / 8 && r < (5 * Math.PI) / 8) {this.dir = 0} else if (r >= (5 * Math.PI) / 8 && r < (7 * Math.PI) / 8) {this.dir = 5} else if (r >= (7 * Math.PI) / 8 && r <= (8 * Math.PI) / 8) {this.dir = 2}//0 top//1 bottom//2 left//3 right//4 right-top//5 left-top//6 left-bottom//7 right-bottomcc.log('dir = ', this.dir)this.radius = rthis.state = State.MOVE}_touchEndEvent(e) {this.stick.setPosition(cc.v2(0, 0))this.dir = 0this.state = State.IDLE}// update (dt) {} }

此腳本的意思是監聽觸摸事件，通過觸摸位置設置stick的位置。同時根據stick節點在joystick節點中的位置，計算stick節點于joystick節點中間位置的角度，并判斷其方向

將joystick腳本拖到joystick的屬性檢查器中，會自動添加一個script的屬性節點

此時將sctick節點從層級管理器中拖到joystick腳本的Stick屬性上

運行查看效果：

總結

以上是生活随笔為你收集整理的【cocos creater】5.仿《弓箭传说》- 创建虚拟遥感的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。