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