cocos creator 基础1，小白自学日常。

Posted 2020-11-10 dgod

<!--作为一个初学者，难免有遗漏和不妥之处，还请不吝赐教，不胜感激。错则改之，无则加勉。

接触ccc的第一天。我首先去看了下Cocos Creator 用户手册（http://docs.cocos.com/creator/manual/zh/），然后跟着做了一个摘星星的小游戏。

第一天就是简单的复制粘贴，简单了解了一下操作界面和运行原理。第二天我找了下前辈们的教程，找了一个基础加实战的教程（http://forum.cocos.com/t/topic/40659），这里对作者表示感谢。

作为小白，不希望在选择教程这些环节浪费时间，等以后深入了解之后，再对这些教程进行推荐比较靠谱。下面主要记录学习过程，与同是初学者的共勉，对各位前辈表示膜拜。-->

 

第一天，大概内容就是看跳动的小球制作教程，然后分析代码。<!--像一些初学者的心路历程会以标注为注释的形式记录。-->

首先贴出代码：<!--是分析代码过程之后的代码，里面会有一些代码是用来测试方法参数，或者一些瞎玩的，但是都会注释，留下关键代码，表示新手了解关键字的过程，如果我认为有用的测试过程会在解释关键字的过程中提到-->

 

 1 cc.Class({
 2     extends: cc.Component,
 3 
 4     properties: {
 5        jumpDuration: 1,
 6        jumpHight: 300
 7     },
 8 
 9     balljumpAction: function() {
10         //var jumpRight = cc.moveBy(this.jumpDuration,cc.p(this.jumpHight,0)).easing(cc.easeQuadraticActionIn());
11         //var jumpLeft = cc.moveBy(this.jumpDuration,cc.p(-this.jumpHight,0)).easing(cc.easeQuadraticActionOut());
12         //定义小球跳起来的动作。
13         //var jumpUp = cc.moveBy(this.jumpDuration,cc.p(0,this.jumpHight)).easing(cc.easeQuadraticActionOut());
14         //var jumpUp = cc.moveBy(this.jumpDuration,0,this.jumpHight).easing(cc.easeQuadraticActionOut());
15         var jumpUp = cc.moveBy(this.jumpDuration,cc.p(0,this.jumpHight)).easing(cc.easeQuadraticActionOut());
16         //var jumpUp = cc.moveTo(this.jumpDuration,cc.v2(0,this.jumpHight)).easing(cc.easeQuadraticActionOut());
17         //定义小球落下去的动作。
18         var jumpDown = cc.moveBy(this.jumpDuration,cc.p(0,-this.jumpHight)).easing(cc.easeQuadraticActionIn());
19        //var jumpDown = jumpUp.reverse().easing(cc.easeQuadraticActionIn());
20         //var jumpDown = cc.moveTo(this.jumpDuration,cc.p(0,-this.jumpHight)).easing(cc.easeQuadraticActionIn());
21         //return cc.moveBy(this.jumpDuration,cc.p(0,this.jumpHight)).easing(cc.easeQuadraticActionIn());
22         //return cc.sequence(jumpUp,jumpDown);
23         return cc.repeatForever(cc.sequence(jumpUp,jumpDown));
24         //返回小球重复跳起来落下去的动作。
25         // return cc.repeat(cc.sequence(jumpUp,jumpDown),2);
26     },
27 
28     onLoad () {
29         //this.node.runAction(cc.sequence(cc.moveBy(this.jumpDuration,cc.p(0,this.jumpHight)).easing(cc.easeQuadraticActionOut()),cc.moveBy(this.jumpDuration,cc.p(0,-this.jumpHight)).easing(cc.easeQuadraticActionIn())).repeatForever());
30         this.ballAction = this.balljumpAction();
31         //this.node.runAction(this.balljumpAction());
32         //在加载的执行动作。
33         this.node.runAction(this.ballAction);
34         //this.schedule(function(){this.node.stopAllActions();this.node.runAction(this.ballAction);},1);
35     },
36 
37     start () {
38 
39     },
40 
41 });

Code

 

下面我会大概讲下我对代码的理解，主要是关键字的用法。<!-- 虽然 官方api（http://docs.cocos.com/creator/api）里面都有,但是毕竟把自己的理解写下来，不说麻烦别人指出对不对，就是以后自己回头看自己当初的理解，有个记录作为学习思考反省的依据也是蛮有必要的。-->

首先整体看代码：一个小球对象，它有两个属性，jumpDuraction是小球跳动的时间，jumpHight是小球跳动的高度。然后定义一个balljumpAction的方法，返回小球跳动的行动。最后在onload代码块（Sence加载的时候自动执行）里面调用执行小球balljumpAction方法。在ccc界面操作就是把画布中的ball图片节点添加上以上代码的组件，在属性检测器中可以对小球的两个属性进行调整。<!--可能对一些对象解释说法不准确，毕竟新手，学习过程必须经历的，等什么时候不在自称小白，我再承受语言必须准确的责任-->

依此列出阅读代码中遇到的关键字，参考官方api后，进行理解。

moveBy 移动指定的距离。

function cc.moveBy(duration: number, deltaPos: number | cc.Vec2, deltaY?: number): cc.ActionInterval       <!-- 这个是vbc里面的提示，鼠标移上去就有-->

方法有三个参数，第一个参数 duration: number 是指的持续的时间，类型为数字。第二个参数 deltaPos: number | cc.Vec2 是指 x轴增量 类型为数字，或者一个Vec2对象。（Vec2对象,在api里面可以查到,表示2D的向量和坐标，这里可以理解为拥有x，y两个属性的对象，moveBY能够使用这两个属性值作为自己的移动的距离依据，因为包括x和y，所以moveBy的第三个参数就不需要了，我也测试过在第二个参数是Vec2的同时，也给第三个参数一个值，虽然不会报错，但是对结果不会起任何作用），第三个参数deltaY?: number是指的Y轴的增量，类型为数字。（不是很明白这个？的意思，应该是可以不赋值的意思）

类似的有一个moveTo 移动到指定位置。<!-- (function cc.moveTo(duration: number, position: number | cc.Vec2, y?: number): cc.ActionInterval 方法的参数都一样，但是我直接把moveBy换成moveTo发现跳得更高，落得更低.那么是为什么呢？我在代码16行和19行做了一个测试，开始的确发现只是跳得更高和落得更低其他没区别。然后我去属性检测器看这个ball的节点的坐标到底是多少。然后我发现Position是指的相对应父节点的坐标，我把ball节点移出Canvas的分支，再测试就能看到小球以整个屏幕为基础的左下的两点运动，刚好是符合移动到传入Vec2的坐标值为目标的运动。在MoveTo和MoveBy中Vec2的作用不同，一个作为有方向，长度的向量，一个是有x，y的坐标。所以在api里面解释Vec2是表示2D的向量和坐标。)-->

和Moveby同样的参数，区别在于传入的Vec2对象是作为一个坐标。movetTo将为移动到这个坐标位置。

 

p 通过该简便函数创建Vec2对象。

function cc.p(x?: any, y?: number): cc.Vec2 传入两个数字参数获得一个Vec2对象。类似的有v2(function cc.v2(x?: any, y?: number): cc.Vec2 ）。  <! -- cc.p(1,2)       cc.v2(1,2)  第一个参数可以是数字或者尺寸的对象  -->

 

easing 缓动运动。

(method) cc.ActionInterval.easing(easeObj: any): cc.ActionInterval

方法，可以实现easeObj（缓动对象）。缓动对象就是 小球跳跃用到的，easeQuadraticActionOut 按照二进制缓慢退出动作。easeQuadraticActionIn 按照二进制缓慢进入动作。<!-- 还有按照是四进制缓退缓入，五进制，弹性曲线，正弦函数，指数函数，圆型曲线缓动入退，按贝塞尔曲线，按弹跳动作缓动退出进入等等-->

 

ActionInterval 时间间隔动作。

MoveBy，MoveTo返回的对象。表示一段时间的动作。这个动作可以通过调用不同的方法实现不同的操作。easing就是缓动运动，为动作增加不同运动的动态。<!-- 同理，还有返回动作持续了多久的方法，复制自己，重复动作，返回动作完成状态，获取动作不同阶段的节点，当前，现在，原始的节点，reverse是返回一个相反的动作，代码19行，我用这个相反动作方法实现小球落下 -->

 

repeatForever 永远重复一个动作。

function cc.repeatForever(action: cc.FiniteTimeAction): cc.ActionInterval   <!--ActionInterval 时间间隔动作 继承于FiniteTimeAction 有限时间动作类，ActionInstant 即时动作也继承于FinteTimeAction，暂时看见这俩 -->

类似的有repeat （function cc.repeat(action: cc.FiniteTimeAction, times: number): cc.ActionInterval）给定一个数值（times）让动作重复指定次数。<--代码25行-->

 

sequence 顺序执行动作，传入的动作会按照顺序依此执行。

function cc.sequence(actionOrActionArray: cc.FiniteTimeAction | cc.FiniteTimeAction[], ...tempArray: cc.FiniteTimeAction[]): cc.ActionInterval 

传入一系列的FiniteTimeAction 有限时间动作类，然后返回一个按照顺序执行的 ActionInterval 时间间隔动作。<!--有种拼接字符串的感觉-->

 

<!--所以用到的关键字顺便看到的类似的或者有关系的都大概罗列了一下，刚开始可能有点慢，如果光看一遍api，感觉也达不到学习的目的。后面肯定会变得快起来。但是api有中文解释看着是贼爽就是了。代码里面还有一些什么schedule，stopAllAction什么的，就是我看到了忍不住想试试。有用的测试我会说在多少行。这就是全部了，谢谢观看。-->