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

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

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

代碼效果如下：

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

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

　　而本次案例依然用到了原先使用的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的，接下來會在之后進行細節完善的。

我並不是真正的程序員，只是一名代碼的搬運工。。。