cocos2d-js引擎学习笔记

cocos2d-js3.0实用语法

 1      /*初始化继承类*/

 2        var Enemy = cc.Sprite.extend({

 3             hp: 0,

 4             fileName: "enemy.png",

 5             ctor: function (arg) {

 6                 this._super(arg.pic);

 7                 this.hp = arg.hp;

 8             }

 9         });

10         var enemy1 = new Enemy(100);

11 

12      /*动作*/

13         var anAction = cc.sequence(

14             cc.moveBy(2,cc.p(100,50)).easing(cc.easeIn(0.3)).repeat(5).speed(1.7),

15             cc.rotateBy(2,110)

16         ).repeatForever();

17 

18         enemy1.runAction(anAction);

19 

20         this.sprite.runAction(

21             cc.sequence(

22                 cc.rotateTo(2, 0),

23                 cc.scaleTo(2, 1, 1)

24             )

25         );

26         helloLabel.runAction(

27             cc.spawn(

28                 cc.moveBy(2.5, cc.p(0, size.height - 40)),

29                 cc.tintTo(2.5,255,125,0)

30             )

31         );

32 

33      /*menuItem和winSize*/

34         var size = cc.winSize;

35 

36         var closeItem = new cc.MenuItemImage(

37             res.CloseNormal_png,

38             res.CloseSelected_png,

39             function () {

40                 cc.log("Menu is clicked!");

41             }, this);

42         closeItem.attr({

43             x: size.width - 20,

44             y: 20,

45             anchorX: 0.5,

46             anchorY: 0.5

47         });

48 

49         var menu = new cc.Menu(closeItem);

50         menu.x = 0;

51         menu.y = 0;

52         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 来设置，达到类似发光物体的效果。