给宝宝做一个cocos免费游戏

第一章背景和开发框架介绍

第二章 Node树和场景制作

第三章 UI、地图和关卡文本制作

第四章摇杆、按键和角色动画制作

第五章敌人和AI制作

第六章角色和敌人行为互动脚本制作

第七章游戏打包、发布和调试

COCOS摇杆、按键和角色spine动画制作

一、摇杆

沿用上一章的项目文件，我们新建一个“joystick.js”然后绑定到UI上。

注意：为了方便坐标转换，我们吧joystick节点拖动到joybg节点下面作为子节点

总体原理是，受触摸摇杆后，stick杆控制在圆形范围跟触点移动，松手后回到原点。这里涉及触摸事件知识，直接上代码：

onLoad () {
           if(this.stick){
               this.start_pos = cc.v2(this.stick.position);//直接定义一个开始位置            this.stick.on(cc.Node.EventType.TOUCH_START,function(e){
                   //开始触摸            }.bind(this),this);            this.stick.on(cc.Node.EventType.TOUCH_MOVE,function(e){
                   //拖动                var w_pos = e.getLocation();                var pos = this.node.getChildByName('joybg').convertToNodeSpaceAR(w_pos);//node中的绝对位置                var len = pos.mag();//两点之间长度 模                if (len > this.max_r) {
                   // 三角函数或者比例关系算坐标                    pos.x = pos.x * this.max_r / len;                    pos.y = pos.y * this.max_r / len;                }                this.stick.setPosition(pos);            }.bind(this),this);            this.stick.on(cc.Node.EventType.TOUCH_CANCEL,function(e){
                   //退出                this.stick.setPosition(this.start_pos);            }.bind(this),this);            this.stick.on(cc.Node.EventType.TOUCH_END,function(e){
                   //结束                this.stick.setPosition(this.start_pos);            }.bind(this),this);        }    },

切回到cocos creator点击预览（如使用vscode+chrom，则更新代码后也需要切换到cocos creator等界面刷新后再回来VSCODE点击F5执行调试）

二、角色动作制作

角色动作制作，有种方式cocos本身animation动画和spine-skeleton组件动画，这里暂使用cocos animation制作动画实现。对比起来，cocos原始动画比较消耗资源，spine、龙骨会优化点，后面有进阶的换肤、特效等需要用到spine再讲解。

（1）添加空节点命名为player。然后在player节点添加head/body/larm/lhand/rarm/rhand/lleg/lfoot/rleg/rfoot分别代表头、身体、四肢

（2）做角色皮肤（PS+textpacker）

略，textpacker打包后，点击生成精灵列表，然后得到plist和png图片，放到项目中

resources\texttrue\hero\hero-ccc文件夹接口。

（3）逐一绑定spriteframe，（1）到（3）请见下面截图：

2.添加animation组件和新建clip动画文件

可以在body节点（控制全身）添加animation组件，也可以直接在动画编辑界面点击：添加Animation组件

然后，新建Animation clip文件，拖动到body的Animation中。

3.添加属性和调整动作

在这里插入图片描述

选择head节点

不复杂，主要动作分解到每个node比较耗时。慢慢调整吧

4.保存动作

在这里插入图片描述

## 5.执行动作

playAnimation: function (anname) {
           var an = this.player.getComponent(cc.Animation);        var state = an.getAnimationState(anname);        cc.log(state);        if(state.isPlaying){
   }//是否正在播放 isPaused        var animState = an.play(anname);//返回状态 停止则重新伯 暂停则恢复  播放中则停止然后重新播        // 使动画播放速度加速 0-1-2        animState.speed = 1;        // 设置循环模式为 Normal        animState.wrapMode = cc.WrapMode.Normal;// 设置循环模式为 Loopcc.WrapMode.Loop;                // 设置动画循环次数为2次         animState.repeatCount = 2;        // 设置动画循环次数为无限次    animState.repeatCount = Infinity;        // an.playAdditive(anname);//同时播放多个，不影响其他的，可以制作复合的动画        // an.setCurrentTime(1,anname);//动画总体缩放为1s        // an.setCurrentTime(1);//所有动画缩减为1s    },

三、控制角色动作

在js中先绑定属性：

properties: {
           stick: {
    type: cc.Node, default: null },//bind sticknode        max_r: 80,        cmode:'1D' ,//控制类型：3D-xyz  2D-xy  1D-只有x左右变化        movespeed:0.2,        skill1:'',//读取技能名称和其他属性        skill2:'',        skill3:'',        skill4:'',    },

1.根据摇杆变化执行行走转向等动作

由于前面已经添加了joystick控制的效果。要实现stick控制角色执行动作，可以按照stkck的角度来执行响应的动作。

由于每一帧都在执行，我们再update方法中执行判断stick情况和做出响应的动作。

update (dt) {
           if(this.player){
              if(this.stick.x > 10){
                  this.turnright();               this.moveBy(this.movespeed);               //+speed            }           if(this.stick.x < -10){
                  this.turnleft();               this.moveBy(-this.movespeed);            }            if(this.stick.y > 20){
                   this.jumpBy(this.stick.y,this.stick.x);            }        }    },    playAnimation: function (anname) {
           var an = this.player.getChildByName('body').getComponent(cc.Animation);        var state = an.getAnimationState(anname);        cc.log(state);        if(state.isPlaying){
   }//是否正在播放 isPaused        var animState = an.play(anname);//返回状态 停止则重新伯 暂停则恢复  播放中则停止然后重新播        // 使动画播放速度加速 0-1-2        animState.speed = 1;        // 设置循环模式为 Normal        animState.wrapMode = cc.WrapMode.Normal;// 设置循环模式为 Loopcc.WrapMode.Loop;                // 设置动画循环次数为2次         animState.repeatCount = 2;        // 设置动画循环次数为无限次    animState.repeatCount = Infinity;        // an.playAdditive(anname);//同时播放多个，不影响其他的，可以制作复合的动画        // an.setCurrentTime(1,anname);//动画总体缩放为1s        // an.setCurrentTime(1);//所有动画缩减为1s    },    pauseAnimation:function(anname){
   var an = this.player.getComponent(cc.Animation);an.pause(anname);},    resumeAnimation:function(anname){
   var an = this.player.getComponent(cc.Animation);an.resume(anname);},    resumeAllAnimation:function(){
   var an = this.player.getComponent(cc.Animation);an.resume();},    stopAnimation:function(anname){
   var an = this.player.getComponent(cc.Animation);an.stop(anname);},    stopAllAnimation:function(){
   var an = this.player.getComponent(cc.Animation);an.stop();},    //animation事件        onAnimCompleted: function (num, string) {
           console.log('onAnimCompleted: param1[%s], param2[%s]', num, string);    },    //event of action    //1.cmode:1D     turnleft:function(e) {
    this.player.scaleX = -1 * Math.abs(this.player.scaleX);  },     turnright:function(e){
    this.player.scaleX =  1 * Math.abs(this.player.scaleX);  },     moveBy:function(dis){
           this.playAnimation('walk');             this.player.x += dis ;              },     jumpBy:function(h,dis){
            this.playAnimation('jump');         var dx = this.player.x + dis;//可以添加力度、角度计算dx         var  dy = this.player.y;         var jb = cc.jumpTo(0.5,dx,dy,h,1);//.easing(cc.easeBackIn); //时间，(落地坐标)，高度，距离，次数 easing曲线         this.player.runAction(jb);     }

2.按下按键释放技能动作

//event of buttons     actOfSkill:function(customerData){
            switch(customerData){
                case 'skill1':this.playAnimation(this.skill1);break;             case 'skill2':this.playAnimation(this.skill2);break;             case 'skill3':this.playAnimation(this.skill3);break;                 case 'skill4':this.playAnimation(this.skill4);break;                    }     },

总结

这一章先到这里，想要源代码的小伙伴，请到本人资源上面下载资料吧；后面继续推进

转载地址：http://hpcii.baihongyu.com/

你可能感兴趣的文章

JavaScript实现DOM树的深度优先遍历和广度优先遍历