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 來設置，達到類似發光物體的效果。