cocos2d-js引擎学习笔记

cocos2d-js3.0实用语法

     /*初始化继承类*/
       var Enemy = cc.Sprite.extend({
            hp: 0,
            fileName: "enemy.png",
            ctor: function (arg) {
                this._super(arg.pic);
                this.hp = arg.hp;
            }
        });
        var enemy1 = new Enemy(100);

     /*动作*/
        var anAction = cc.sequence(
            cc.moveBy(2,cc.p(100,50)).easing(cc.easeIn(0.3)).repeat(5).speed(1.7),
            cc.rotateBy(2,110)
        ).repeatForever();

        enemy1.runAction(anAction);

        this.sprite.runAction(
            cc.sequence(
                cc.rotateTo(2, 0),
                cc.scaleTo(2, 1, 1)
            )
        );
        helloLabel.runAction(
            cc.spawn(
                cc.moveBy(2.5, cc.p(0, size.height - 40)),
                cc.tintTo(2.5,255,125,0)
            )
        );

     /*menuItem和winSize*/
        var size = cc.winSize;

        var closeItem = new cc.MenuItemImage(
            res.CloseNormal_png,
            res.CloseSelected_png,
            function () {
                cc.log("Menu is clicked!");
            }, this);
        closeItem.attr({
            x: size.width - 20,
            y: 20,
            anchorX: 0.5,
            anchorY: 0.5
        });

        var menu = new cc.Menu(closeItem);
        menu.x = 0;
        menu.y = 0;
        this.addChild(menu, 1);

Scale9Sprite

在用Scale9Sprite.create的时候出现Uncaught TypeError: Cannot call method 'create' of undefined这个错误，

后来发现在默认情况下，project.json里的modules只自带cocos2d模块，通过检查frameworks/cocos2d-html5/moduleConfig.json，可以看到cocos2d模块里并没有CCScale9Sprite.js这个类。

它在GUI里，所以可以在modules里添加"GUI"这个模块，或者可以像我这样，在moduleConfig.json里写一个myNeedfulClass这样的模块，里面添加CCScale9Sprite.js这个类，这样只要在modules里添加"myNeedfulClass"就行。有个好处就是可以不用加载GUI里其他的类。测试代码如下

        var tmp = cc.Sprite.create(res.Block9);  
        var theSize = tmp.getContentSize();
        var fullRect = cc.rect(0,0,theSize.width,theSize.height);
        var insetRect = cc.rect(32,32,theSize.width-64,theSize.height-64);
        var scale9sprite = cc.Scale9Sprite.create(res.Block9,fullRect,insetRect);
        scale9sprite.setContentSize(theSize.width*3,theSize.height*2);
        scale9sprite.x  = size.width/2;
        scale9sprite.y = size.height/2;
        this.addChild(scale9sprite);

原先图片：

经过上述代码处理后的图片：

效果是A,B,C,D四个角大小不变，top,bottom俩条边横向拉伸，left,right俩条边纵向拉伸，中间的center既横向又纵向拉伸。

用在适配的地方比较多,譬如一个BUTTON精灵。

下面是九宫格精灵用作按钮的代码。

        var size = cc.director.getWinSize();

        var tmp = cc.Sprite.create(res.Block9);
        var theSize = tmp.getContentSize();
        var fullRect = cc.rect(0,0,theSize.width,theSize.height);
        var insetRect = cc.rect(32,32,theSize.width-64,theSize.height-64);
        var scale9sprite = cc.Scale9Sprite.create(res.Block9,fullRect,insetRect);
        scale9sprite.setContentSize(theSize.width*2,theSize.height*2);
        var scale9sprite1 = cc.Scale9Sprite.create(res.Block9,fullRect,insetRect);
        scale9sprite1.setContentSize(theSize.width*2,theSize.height*2);
        var scale9sprite2 = cc.Scale9Sprite.create(res.Block9,fullRect,insetRect);
        scale9sprite2.setContentSize(theSize.width*2,theSize.height*2);

        var spriteNormal = cc.Sprite.create(res.Block9);
        var spriteSelected = cc.Sprite.create(res.Block9);
        var spriteDisabled = cc.Sprite.create(res.Block9);
        var item = cc.MenuItemSprite.create(scale9sprite, scale9sprite1, scale9sprite2, this.onMenuCallback3, this);
        var menu = cc.Menu.create(item);
        item.x = 100;
        item.y = 100;
        menu.setPosition(0,0);
        this.addChild(menu);

 ClippingNode

设置模板的时候，模板一定要为有透明度为0的图，譬如PNG，否则没什么意义

闪亮标题案例

闪亮标题制作代码

        var size = cc.director.getWinSize();

        var clip = cc.ClippingNode.create();                      //创建模板
        var gameTitle = cc.Sprite.create(res.s_GameTitle);
        clip.setStencil(gameTitle);                               //创建标题模板
        clip.setAlphaThreshold(0);                                //给模板设置透明度阈值，这里为了达到标题外没有光晕的效果，模板透明度一定要为0，否则会把所有的光晕加进来，模板就不起作用了

        clip.addChild(gameTitle, 1);                             //先添加标题,会完全显示出来,因为跟模板一样大小
        var spark = cc.Sprite.create(res.s_Spark);
        spark.setPosition(-size.width,0);
        clip.addChild(spark,2);                                  //闪亮图片，会被裁减

        var moveAction = cc.MoveBy.create(0.6, cc.p(size.width*2, 0));    //闪亮图片做的动作
        var seq = cc.Sequence.create(moveAction, moveAction.reverse());
        var repeatAction = cc.RepeatForever.create(seq);
        spark.runAction(repeatAction);                           //进行左右移动的重复动作

        clip.setPosition(cc.p(size.width / 2, size.height / 2));  //clippingNode添加到layer上
        this.addChild(clip,4);

 子弹打靶案例

代码

    ctor:function () {
        this._super();
        var size = cc.director.getWinSize();

        var clip = cc.ClippingNode.create();                  //创建clip节点
        var holes = cc.Node.create();                         //创建模板节点
        clip.setStencil(holes);                               //设置clip节点的模板为holes
        clip.setAlphaThreshold(0);                            //给模板的透明度阈值，因为只要取模板中有像素的部分来裁剪，所以要设置0，否则模板的裁剪效果为整个模板图，包括透明部分。
        clip.setInverted(true);                               //设置反转，显示模板以外的地方。

        var ba = cc.Sprite.create(res.s_ba);                  //靶
        ba.scale =2;
        clip.addChild(ba, 1);                                 //靶加载clip节点上
        clip.setPosition(cc.p(size.width / 4, 100));          //clippingNode添加到layer上
        this.addChild(clip);

        var baSize = ba.getContentSize();                     //确定ba在layer中的boundingBox
        var baRect = cc.rect(clip.x-baSize.width/2*ba.scale,clip.y-baSize.height/2*ba.scale,baSize.width*ba.scale,baSize.height*ba.scale);   //因为contentSize不会随scale的变化而变化，所以需要*ba.scale。

        if ('mouse' in cc.sys.capabilities )
            cc.eventManager.addListener({
                event: cc.EventListener.MOUSE,
                onMouseDown: function (event) {
                    if(cc.rectContainsPoint(baRect,event.getLocation())){
                        event.getCurrentTarget().fire(event.getLocation(),holes,clip);   //参数：1.鼠标点击位置 2.模板节点 3.clip节点
                    }
                }
            }, this);


    },
    fire:function(position,nodes,clippingNode){
        var dian = cc.pSub(position,clippingNode.getPosition());  //因为洞和洞的修饰都是add在clip节点上的，所以坐标要进行换算。

        var hole = cc.Sprite.create(res.s_moban);     //洞，加在模板节点里
        hole.setPosition(dian);
        nodes.addChild(hole);

        var xiushi = cc.Sprite.create(res.s_xiushi);  //洞的修饰，加在clip节点上
        xiushi.setPosition(dian);
        clippingNode.addChild(xiushi,2);
    }

 骨骼动画

        var size = cc.director.getWinSize();
        ccs.armatureDataManager.addArmatureFileInfo(CocoStudio_index);


        var armature = ccs.Armature.create("DemoPlayer");
        armature.getAnimation().playWithIndex(1);
        armature.attr({
            anchorX:0.5,
            anchorY:0.5,
            scale:0.2,
            x:size.width/2,
            y:size.height/2
        });
        this.addChild(armature);

//以下资源都要添加到g_resources里
var CocoStudio_index = "res/DemoPlayer/DemoPlayer.ExportJson";
var ab = "res/DemoPlayer/DemoPlayer0.plist";
var ac = "res/DemoPlayer/DemoPlayer0.png";
var ad = "res/DemoPlayer/Comet.plist";

 setBlendFunc

这个方法其实是跟opengl绘制有关，默认是src:cc.SRC_ALPHA，dst:cc.ONE_MINUS_SRC_ALPHA，意思是如果上层图片的透明度为1，则不显示下层图片。

为了提亮某张图片，可以用dst=cc.ONE 来设置，达到类似发光物体的效果。