cocos2d-js的对象

作者: 写java的逗比叫z1 | 来源:发表于2017-08-28 21:20 被阅读0次

1. Scene 场景

创建一个Scene

var BallScene = cc.Scene.extend({ //继承cc.Scene类
    onEnter:function () {   // 重写onEnter函数
        this._super();      //调用父类的构造函数
        var layer = new SimpleActionLayer();    // 创建一个layer
        this.addChild(layer);        // 把layer加入到scene中
    }
});

2.节点 Node

节点即构成cocos2d世界的基本单位
节点封装了基本的操作和功能，例如缩放，坐标变化，缩放变化，透明度，可见性等。其他的显示类都继承节点，比如层（layer），精灵(Sptite）

3. 层 Layer

按层管理所有物体
新建一个层
var layer = new cc.Layer()
把层添加到场景中
scene.addChild(layer)
再把子节点添加到层上
layer.addChild(child)

把层扩展成各种功能的面板

LayerColor 纯色层
在scene中加入纯色层

var layerColor = new cc.LayerColor(cc.color(255,255,255),100,100)
this.addChild(layerColor)

LayerGradient 渐变层
在scene中加入渐变层

var layer = new cc.LayerGradient(cc.color(255,0,0),cc.color(0,0,255))
this.addChild(layer)

自定义一个层

var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    ctor:function () {
        this._super();
        
        var bg = new cc.Sprite(res.HelloWorld_png);
        var size = cc.director.getWinSize();
        bg.x = size.width / 2;
        bg.y = size.height / 2 ;
        this.addChild(bg, 1);

        return true;
    }
});

HelloWorldLayer继承了 cc.Layer ，做了很多东西，封装了这个层之后，再在其他Scene加载同样的层就可以简单写
var layer = new HelloWorldLayer():
this.addChild(layer)

4. 精灵Sprite

创建Sprite
var ball = new cc.Sprite("res/item_2.png");
新建Sprite时，在构造函数传入图片的路径即可.
可以再增加Sprite的坐标

var size = cc.director.getWinSize();
ball.x=size.width/2;
ball.y=size.height/2;

要加载图片，还要把资源传入到资源数组，也就是resource.js

var res = {
    HelloWorld_png : "res/HelloWorld.png",
    bg : "res/bg.jpg",
    item2 : "res/item_2.png",
    item3 : "res/item_3.png"
};

var g_resources = [];
for (var i in res) {
    g_resources.push(res[i]);
}

5. director

director负责场景的切换
cc.director.runScene(scene)
不同方式的场景切换
Slide滑动切换
cc.director.runScene(new cc.TransitionSlideInT(2,new SecondScene()))

runScene会销毁旧场景上的所有内容，在回到旧场景时，所有内容都要重新建立。如果频繁切换，可以使用pushSence和popSence

director还可以提供

getWinSize 窗口尺寸
getVisibleSize 窗口实际尺寸
getScheduler 全局定时器
pause/resume 暂停、恢复

6.动作

基本动作

        var action = cc.moveTo(2,cc.p(size.width,size.height/2)); // 移动
        var action = cc.moveBy(1,cc.p(size.width,100));
        var action = cc.scaleTo(1,2,3); //缩放  时间， 水平 ，垂直
        var action = cc.scaleTo(2,-2,2);
        var action = cc.fadeTo(2,0); // 时间，透明度
        var action = cc.fadeOut(2);  // 消失
        ball.opacity = 0;//透明度
        var action = cc.fadeIn(2); //淡入
        var action = cc.blink(2,10); //2秒闪烁10次
        var action = cc.tintTo(2,100,0,0); // 时间、R、G、B
        var action1 = cc.tintTo(0.3,100,0,0);
        var action2 = cc.tintTo(0.3,255,255,255);
        ball.runAction(cc.sequence(action1,action2));  // 多个动作挨个执行
        ball.runAction(action);

dalayTime --延迟一段时间
rotateTo/roTateBy -- 对节点做旋转
skewTo/skewBy -- 对节点做倾斜变化
jumpTo/jumpBy -- 让节点跳跃移动
bezierTo/bezierBy -- 让节点沿贝塞尔曲线运动

7.组合动作

顺序动作 sequence

        var action1 = cc.moveTo(2,cc.p(size.width/2,size.height/2)); //移动
        var action2 = cc.scaleTo(1,2,2); //放大
        var sequence1 = cc.sequence(action1,action2); //串联动作1和2
        var action3 = cc.scaleTo(1,1,1); // 缩小
        var sequence2 = cc.sequence(sequence1,action3); // 串联
        ball.runAction(sequence2);

最后一句和ball.runAction(action1,action2,action3);效果一样的

重复动作 repeat

        var action1 = cc.scaleTo(1,2,2);
        var action2 = cc.scaleTo(1,1,1);
        var sequence = cc.sequence(action1,action2); //按顺序执行
        var repeat = cc.repeat(sequence,5); // 重复5次
        ball.runAction(repeat);

无限重复 repeatForever
cc.repeatForever(action)
函数返回一个新的动作，只接受一个参数。另外，动作本身也有repeatForever方法，跟cc.repeatForever效果一致，如action.repeatForever()

        var action1 = cc.scaleTo(1,2,2);
        var action2 = cc.scaleTo(1,1,1);
        var sequence = cc.sequence(action1,action2); //按顺序执行
        var repeat = cc.repeatForever(sequence); // 无限重复
        ball.runAction(repeat);

同时执行 spawn

        var action1 = cc.moveTo(2,cc.p(size.width/2,size.height/2)); //移动
        var action2 = cc.scaleTo(2,2,2); //放大
        var spawn = cc.spawn(action1,action2); //移动同时放大
        ball.runAction(spawn);

反向 reverseTime/reverse

reverseTime （不好用）

        var action1 = cc.moveTo(2,cc.p(size.width/2,size.height/2)); //移动
        var reverseTime = cc.reverseTime(action1);
        ball.runAction(reverseTime);

reverse （只支持xxxBy，由动作来调用）

        var action = cc.moveBy(2,cc.p(size.width/2,0));
        var reverse = action.reverse();
        var sequence = cc.sequence(action,reverse);
        ball.runAction(sequence);

8.easing

action.easing(easeObject)
easeObject是一个Object，存储某种缓动方式的信息

        var action=cc.moveBy(2,0,-(size.height-ball.height/2)); // 动作，移动到下方
        action.easing(cc.easeIn(2)); // 二次方加速移动
        var back = action.clone().reverse(); // 复制一次动作
        back.easing(cc.easeBounceIn()); //弹性加速
        ball.runAction(cc.sequence(action,back)); //顺序执行

其他类型的缓动方式

        var actionX=cc.moveBy(2,size.width,0); // 动作，移动到下方
        var action=cc.moveBy(2,0,-size.height); // 动作
        action.easing(cc.easeQuadraticActionIn()); // 二次方加速移动
        // action.easing(cc.easeCubicActionOut()); // 三次方减速移动
        // action.easing(cc.easeBackOut()); // 出去返回减速移动
        // action.easing(cc.easeElasticIn()); // 弹性加速减速移动
        // action.easing(cc.easeBounceInOut()); // 反弹加速减速移动
        // action.easing(cc.easeCircleActionInOut()); //圆？？？
        // action.easing(cc.easeExponentialInOut()); //指数加速减速移动
        // action.easing(cc.easeQuinticActionIn()); //五次方加速减速移动
        // action.easing(cc.easeSineInOut()); //正弦加速减速移动
        ball.runAction(cc.spawn(action,actionX)); //同时执行

9.控制动作

停止动作

node.stopAction(action);
node.stopActionByTag(tag);
node.stopAllAction(action);

var ControlActionLayer = cc.Layer.extend({
    ctor:function () {
        this._super();

        var size = cc.director.getWinSize();
        var ball = new cc.Sprite("res/item_2.png");
        ball.x = 0;
        ball.y = size.height/2;
        this.addChild(ball,1)

        var action = cc.moveBy(3,cc.p(size.width/2,0));
        ball.runAction(action);

        setTimeout(function () {
            ball.stopAction(action);   //停止动作
        },2000);

        return true;
    }
});

暂停/恢复动作

var ControlActionLayer = cc.Layer.extend({
    ctor:function () {
        this._super();

        var size = cc.director.getWinSize();
        var ball = new cc.Sprite("res/item_2.png");
        ball.x = 0;
        ball.y = size.height/2;
        this.addChild(ball,1)

        var action = cc.moveBy(3,cc.p(size.width/2,0));
        ball.runAction(action);

        setTimeout(function () {
            ball.pause();   // 暂停
        },2000);

        setTimeout(function () {
            ball.resume();   // 恢复
        },3000);

        return true;
    }
});

10.监听动作

使用CallFunc动作配合sequence监听动作
cc.callFunc(function , target, extra parameters...)
callFunc接受1个或多个参数，第一个参数是某个函数，第二个参数是该函数最后被调用时的目标对象，类似原声JS的apply(target,function)，第三个参数以后是额外附加的数据，在调用function时传递过去。

var ControlActionLayer = cc.Layer.extend({
    ctor:function () {
        this._super();

        var size = cc.director.getWinSize();
        var ball = new cc.Sprite("res/item_2.png");
        ball.x = 0;
        ball.y = size.height/2;
        this.addChild(ball,1)

        var action = cc.moveBy(1,cc.p(size.width/2,0));
        var callback = cc.callFunc(this.callback,this,"message");
        var sequence = cc.sequence(action,callback);
        ball.runAction(sequence);

        return true;
    },

    callback:function(nodeExecutingAction,data) {
//                              小球运行的节点          callFunc的额外数据
        console.log(nodeExecutingAction instanceof cc.Sprite,data);
    }
});

如果串联多个动作，就可以在每个动作之间都安置一下监听函数
cc.sequence(action1,cc.callFunc(function1),action2,cc.callFunc(function2),action3);

11.播放声音

背景音乐

cc.audioEngine.playMusic("res/goodtime.mp3",true);  // 播放,第二个参数表示是否重复播放
cc.audioEngine.stopMusic(); // 停止

音效

var effect = cc.audioEngine.playEffect("res/goodtime.mp3",false);
cc.audioEngine.stopEffect(effect); //停止音效
cc.audioEngine.stopAllEffect(); // 停止所有音效

音量

cc.audioEngine.setEffectsVolume(0);
cc.audioEngine.setMusicVolume(0);

设置背景音乐和音效的音量，范围0-1,0表示静音

参考资料 Cocos2d-JS开发之旅郑高强著电子工业出版社

cocos2d-js的对象

1. Scene 场景

2.节点 Node

3. 层 Layer

4. 精灵Sprite

5. director

6.动作

7.组合动作

8.easing

9.控制动作

10.监听动作

11.播放声音

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读