CocosCreator遊戲開發（五）實現技能按鈕

公羽翁發表於2020-09-04
遊戲開發

在上一篇中，已經順利的實現了通過搖桿控制元件來控制角色移動的例子

這一篇內容中，主要來實現通過搖桿來操作技能施法位置的功能

程式碼效果如下：

　　在最初的想法中，我是想將搖桿與技能施法範圍以及施法位置做成一個元件的，但是在之後的開發中，發現這樣其實是有點浪費的，技能的範圍以及距離其實只需要一個就足夠了，於是乎就調整了程式碼。

　　在實現功能的步驟上其實也是比較簡單的,其實本質就是實現一個搖桿的映象，在搖桿移動的時候，映象進行同步就可以了。

　　而本次案例依然用到了原先使用的Joystick元件，對Joystick的程式碼進行調整修改就可以實現了。

　　為了防止技能按鈕與移動按鈕的事件相沖突，所以我複製了一份程式碼出來。並重新進行了命名。

 

同時刪除了原有程式碼中的area部分，只留下了ring跟dot

 

至於程式碼部分的話，只需在_touchMoveEvent中新增以下程式碼，計算出dot在ring中的XY座標的比例。因為在移動的時候需要根據這個比例去對技能位置與技能範圍的比例進行更新

      let xbi=(this.dot.position.x-this.ring.position.x)/(this.ring.width/2);
        let ybi=(this.dot.position.y-this.ring.position.y)/(this.ring.height/2);
        JoystickEvent.getInstance().emit(JoystickEnum.JoystickEventType.TOUCH_MOVE, event, {speedType: speedType, moveDistance: p,xbi:xbi,ybi:ybi});

　　

之後在主場景何種增加技能範圍跟技能位置兩個控制元件並設定好大小

 

在主角的程式碼Role.js中新增技能範圍和技能位置兩個屬性並進行繫結

 

     skillsDot:{
            default:null,
            type:cc.Node,
            displayName: 'skillsDot',
        },
        skillsRing:{
            default:null,
            type:cc.Node,
            displayName: 'skillsRing',
        },

　　

 

 

 在onload事件中，註冊技能搖桿監聽事件

 

同時新增對應事件對應的程式碼

 onTouchStartSkills(event){
        //  var t=event;
        this.skillsDot.active=true;
        this.skillsRing.active=true;
        var skillsname=event.getCurrentTarget().name;
　　　　　　
        switch (skillsname) {
            case 'SkillsJoystick1':
                this.skillsDot.color=new cc.Color(255, 255, 255, 255);break;
            case 'SkillsJoystick2':
                this.skillsDot.color=new cc.Color(255, 0, 0, 255);break;
            case 'SkillsJoystick3':
                this.skillsDot.color=new cc.Color(255, 255, 0, 255);break;
            case 'SkillsJoystick4':
                this.skillsDot.color=new cc.Color(0, 255, 0, 255);break;
        }
    },
    onTouchMoveSkills(event,data){
        let posx1=data.xbi*(this.skillsRing.width/2)+this.skillsRing.position.x;
        let posy1=data.ybi*(this.skillsRing.height/2)+this.skillsRing.position.y;
        this.skillsDot.setPosition(cc.v2(posx1,posy1));
    },
    onTouchEndSkills(){
        this.skillsDot.active=false;
        this.skillsRing.active=false;
    },

整個執行順序是

1.當點選按鈕時，將技能範圍以及施法點顯示出來，同時獲取點選按鈕，根據點選按鈕的名字判斷點選了哪個按鈕，然後變更按鈕的顏色（後期根據屬性來判斷釋放什麼技能）

2.當移動按鈕時，根據dot在ring中的位置，然後按比例計算出skillsDot在skillsRing中的位置，接下來並更新位置

3.當按鈕結束時，隱藏控制元件，並釋放技能（在下一篇中會進行技能是否命中目標的判定）

至此就實現了，通過搖桿調整施法位置的功能了。

程式碼的地址在：連結：https://share.weiyun.com/uL0OTP1Y 密碼：iam5rs

這邊只是簡單的實現了功能，還是存在一些BUG的，接下來會在之後進行細節完善的。

我並不是真正的程式設計師，只是一名程式碼的搬運工。。。

相關文章