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

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

接触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

下面我会大概讲下我对代码的理解，主要是关键字的用法。

首先整体看代码：一个小球对象，它有两个属性，jumpDuraction是小球跳动的时间，jumpHight是小球跳动的高度。然后定义一个balljumpAction的方法，返回小球跳动的行动。最后在onload代码块（Sence加载的时候自动执行）里面调用执行小球balljumpAction方法。在ccc界面操作就是把画布中的ball图片节点添加上以上代码的组件，在属性检测器中可以对小球的两个属性进行调整。

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

moveBy 移动指定的距离。

function cc.moveBy(duration: number, deltaPos: number | cc.Vec2, deltaY?: number): cc.ActionInterval

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

类似的有一个moveTo 移动到指定位置。

和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就是缓动运动，为动作增加不同运动的动态。

repeatForever 永远重复一个动作。

function cc.repeatForever(action: cc.FiniteTimeAction): cc.ActionInterval

类似的有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 时间间隔动作。

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

猜你喜欢