命令
新建项目： cocos new -l js projectname
运行项目：cocos run -p web
项目打包：cocos compile -p web -m release
字典
Scene:场景，pushScene,加载或切换场景但不销毁上一个场景。popScene,销毁当前场景，回到上一个场景。
Director:导演，cc.director.runScene,这个函数用来加载或切换场景。cc.director.getWinSize():获取窗口尺寸。cc.director.getVisibleSize(),获取窗口实际尺寸。cc.director.getScheduler(),获取全局定时器。pause/resume:暂停，恢复场景。
Node:节点
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: 宋体; font-size: 9pt; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">scheduleUpdate():通知当前节点</pre>
Layer:层
Sprite:精灵
cc:cc是一个JS对象，把各种cocos2d-js的原生类都封装到这个命名空间里，extend()函数接受一个对象作为参数。
addChild():增加子节点。
removeChild():移除子节点。
ctor:类的构造函数
_super():继承父类方法，调用父类同名函数。
anchor:锚点，anchorX和anchorY默认值都是0.5，锚点坐标原点位于左下角。
bind():bind方法返回一个新的function,这个function执行的时候this将固定指向bind的第一个参数。
其他
CCTransition.js记录了所有切换效果，第一个参数代表切换时间，单位S。
第四章
基本动作
moveTo和moveBy
moveTo(2,cc.p(100,100)):2代表2秒，后两个参数代表终点坐标。
moveBy()
缩放scaleTo和scaleBy
cc.scaleTo(1,2,4);1代表1秒，2代表横向比例，4代表纵向比例。缩放比例为负数是可以让精灵做水平/垂直翻转。scaleBy是在当前缩放比例基础上再乘以一个比例，而scaleTo是从原图尺寸缩放。
淡入淡出fadeTo,fadeIn,fadeOut
fadeIn(2),fadeOut(2),2代表消失/出现时间。fadeTo(2.255)改变透明度，2代表时间，0-255代表透明度，255代表完全不透明。
闪烁blink
cc.blink(2,10)让精灵2秒钟闪烁10次。
改变颜色通道tintTo
cc.tintTo(2,100,0,0),时间，红通道，绿通道，蓝通道，就是让原来RGB颜色的数值乘以括号内的数值再除以255。
组合动作
1.顺序cc.sequence(action1,action2,…);
2.重复cc.repeat(action,times);第一个参数代表动作，第二个代表重复次数。
3.无限重复cc.repeatForover(action),让某个动作无线重复。
4.同时执行cc.spawn(action1,action2,…);
5.反向：cc.reverse(action);返回一个新动作。cc.reverseTime(action);只能处理有限长度的动作。
运动轨迹
action.easing(easeObject);easing方法，用来设置该动作执行过程中采用哪种缓动方式。参数在CCActionEase.js里。
控制动作
1.开始/停止动作
node.runAction(action);
node.stopActionByTag(tag);tag是预先设置给action的标记，例如action.tag = 123;
node.stopAllAction(action);
2.暂停/恢复动作
node.pause();
node.resume();
全局暂停：
cc.director.pause();
cc.director.resume();
监听动作开始与结束：
var callback = cc.callFunc(function,target,data);
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">cc.sequence(action, callback);</pre>
第一个参数代表函数名，第二个参数代表函数最后被调用时的目标对象，第三个参数是附加的数据。
如果我们串联了多个动作，可以在每个动作之间都放置一个监听函数，
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">cc.sequence(action1, cc.callFunc(function1),action2, cc.callFunc(function2),action3);</pre>
播放声音
1.背景音乐
cc.audioEngine.playMusic("res/sounds/bg.mp3",true);第二个参数代表是否重复播放。
cc.audioEngine.stopMusic();停止播放
cc.audioEngine.setMusicVolume(0);静音，参数为1时恢复音量。
2.音效
cc.audioEngine.playEffect("res/sounds/bg.mp3",true);第二个参数代表是否重复播放。
cc.audioEngine.stopEffect(effect);停止播放
cc.audioEngine.stopAllEffects();关闭全部音效
cc.audioEngine.setEffectsVolume(0);静音，参数为1时恢复音量。
事件绑定
1.鼠标事件
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">if( 'mouse' in cc.sys.capabilities ) {
cc.eventManager.addListener({
event: cc.EventListener.MOUSE,
onMouseDown: function(event){
var pos = event.getLocation();
var target = event.getCurrentTarget();
if(event.getButton() === cc.EventMouse.BUTTON_RIGHT)
trace("onRightMouseDown at: " + pos.x + " " + pos.y );
else if(event.getButton() === cc.EventMouse.BUTTON_LEFT)
trace("onLeftMouseDown at: " + pos.x + " " + pos.y );
},
onMouseMove: function(event){
var pos = event.getLocation(), target = event.getCurrentTarget();
trace("onMouseMove at: " + pos.x + " " + pos.y );
},
onMouseUp: function(event){
var pos = event.getLocation(), target = event.getCurrentTarget();
trace("onMouseUp at: " + pos.x + " " + pos.y );
}
}, this);
} else {
trace("MOUSE Not supported");
}</pre>
第一个参数代表监听信息，第二个代表监听的节点，'mouse' in cc.sys.capabilities ，判断运行环境。
event对象的方法：
1.event.getLocation();获取鼠标事件发生的坐标。
2.event.getLocationX();event.getLocationY();X/Y坐标。
3.event.getCurrentTarget();获取触发事件的对象，就是node，
4.event.getButton();判断鼠标左右键。
5.event.getDelta();获取鼠标移动偏移值。
6.event.getDeltaX();event.getDeltaY();获取鼠标偏移的X值或Y值。
2.触摸事件
1.单点触摸
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">if( 'touches' in cc.sys.capabilities ) {
cc.eventManager.addListener({
event: cc.EventListener.TOUCH_ONE_BY_ONE,
swallowTouches: true,
onTouchBegan: function(touch,event){},
onTouchMoved: function(touch,event){}, onTouchEnded: function(touch,event){}, onTouchCancelled: function(touch,event){} }, this);
} else {
trace("TOUCH-ONE-BY-ONE test is not supported on desktop");
}</pre>
touch参数封装了触摸事件专有的数据，onTouchEnded和onTouchCancelled可以等同处理。
touch参数有待查询API。
2.多点触摸
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">if( 'touches' in cc.sys.capabilities ) {
cc.eventManager.addListener({
event: cc.EventListener.TOUCH_ONE_BY_ONE,
swallowTouches: true,
onTouchBegan: function(event){},
onTouchMoved: function(event){},
onTouchEnded: function(event){},
onTouchCancelled: this.onTouchCancelled
}, this);
} else {
trace("TOUCH-ONE-BY-ONE test is not supported on desktop");
}</pre>
touches参数是一个数组，每个数组元素
3.键盘事件
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">if( 'keyboard' in cc.sys.capabilities ) {
cc.eventManager.addListener({
event: cc.EventListener.KEYBOARD,
onKeyReleased: function(keyCode, event) {
if (keyCode == cc.KEY.back) {
cc.log("return button clicked. keycode:" + keyCode);
cc.director.end();
}
else if (keyCode == cc.KEY.menu) {
cc.log("menu button clicked. keycode:" + keyCode);
}
}
}, this);
} else {
cc.log("KEYBOARD Not supported");
}</pre>
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">keyCode是一个数字，API在CCCommon.js里，</pre>
4.重力感应事件
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">if( 'accelerometer' in cc.sys.capabilities ) {
cc.inputManager.setAccelerometerInterval(1/30);
cc.inputManager.setAccelerometerEnabled(true);
cc.eventManager.addListener({
event: cc.EventListener.ACCELERATION,
callback: function(accelerometerInfo, event){
var target = event.getCurrentTarget();
cc.log('Accel x: '+ accelerometerInfo.x + ' y:' + accelerometerInfo.y + ' z:' + accelerometerInfo.z + ' time:' + accelerometerInfo.timestamp );
var w = winSize.width;
var h = winSize.height;
var x = w * accelerometerInfo.x + w/2;
var y = h * accelerometerInfo.y + h/2;
x = x*0.2 + target.prevX*0.8; //使小球慢慢移动到目标位置
y = y*0.2 + target.prevY*0.8;
target.prevX = x;
target.prevY = y;
target.sprite.x = x;
target.sprite.y = y ;
}
}, this);
var sprite = this.sprite = new cc.Sprite("res/item_2.png");
this.addChild( sprite );
sprite.x = winSize.width/2;
sprite.y = winSize.height/2;
this.prevX = 0;
this.prevY = 0;
} else {
cc.log("ACCELEROMETER not supported");
}</pre>
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">setAccelerometerInterval函数设置重力感应频率。</pre>
5.进入后台，恢复显示事件
进入后台
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: 宋体; font-size: 9pt; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">cc.eventManager.addCustomListener(cc.game.EVENT_HIDE,function(){</pre>
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: 宋体; font-size: 9pt; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">//游戏进入后台</pre>
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: 宋体; font-size: 9pt; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">});</pre>
恢复显示
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: 宋体; font-size: 9pt; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">cc.eventManager.addCustomListener(cc.game.EVENT_SHOW,function(){</pre>
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: 宋体; font-size: 9pt; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">//游戏恢复显示</pre>
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: 宋体; font-size: 9pt; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">});</pre>
第六章 定时器
1.scheduleOnce取代setTimeout
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">node.scheduleOnce(callback,delay);scheduleOnce只能依赖节点触发</pre>
2.schedule取代setInterval
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">node.schedule(callback,interval,repeat,delay);</pre>
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">interval是每次触发的间隔，以秒为单位，repeat是重复次数，delay是第一次触发前的延迟时间，以秒为单位。如果希望无限循环，省略后两个参数即可，也可以把repeat设置为cc.REPEAT_FOREVER。</pre>
3.取消定时器
取消scheduleUpdate使用node.unscheduleUpdate();
取消scheduleOnce和schedule使用node.unschedule(callback);
4.暂停/恢复定时器
node.pause();//暂停定时器
node.resume();//恢复计时器
5.定时器的误差
由于schedule的实现基于帧频，当帧频降低时，误差会越来越大，所以schedule只能用于动画控制,不能用于逻辑处理。
6.解决误差
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">ctor: function () {
this._super();
var startTime = Date.now();
var count = 0;
this.schedule2(function(){
var timePass = Date.now() - startTime;
count++;
var delta = timePass - (count*100);
trace("time pass", timePass, "total delta", delta, "count", count);
}, 0.1);
this.scheduleUpdate();
},
schedule2: function (callback, interval) {
var then = Date.now();
interval = interval*1000;
this.schedule(function(){
var now = Date.now();
var delta = now - then;
if(delta > interval){
then = now - (delta % interval);
callback.call(this);
}
}.bind(this), 0);
},
update: function () {
for (var i = 0; i < 10000000; i++) {
b = 1/0.22222;
}
}</pre>
第七章 游戏界面
1.原生组件--按钮
cocos2d-js中共有4种按钮MenuItemSprite、MenuItemImage、MenuItemFont、MenuItemLabel，
1.MenuItemSprite具有按钮的最基本功能，即点击后的回调，用法：
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var menuSprite = new cc.MenuItemSprite(spriteNormal, spriteSelected, spriteDisable, clickHandler,target);</pre>
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">spriteNormal表示正常态的效果，spriteSelected表示按下时的效果，spriteDisable表示禁用时的效果，clickHandler是点击的回调函数，target是作用于clickHandler的target对象。spriteDisable和target可以缺省。</pre>
禁用按钮：menuSprite.setEnabled(false);false代表禁用，true代表可以使用。
2.MenuItemImage继承自MenuItemSprite，区别是不用新建spirit，可以在参数中直接写图片路径。
var menuImage = new cc.MenuItemImage("res/startgame.png", "res/startgame2.png", "res/startgame3.png", this.startGame, this);
3.MenuItemFont用于制作文字按钮
var menuFont = new cc.MenuItemFont(text, clickHandle, target);
4.MenuItemLabel可以使用TTF文字或位图文字
//TTF文字
var label = new cc.LabelTTF("START GAME", "Arial", 32);
var item = new cc.MenuItemLabel(label, this.startGame, this);
//位图文字
var label = new cc.LabelBMFont("START GAME", "res/font.fnt");
var item = new cc.MenuItemLabel(label, this.startGame, this);
5.开关按钮
var on = new cc.MenuItemFont("ON");
var off = new cc.MenuItemFont("OFF");
var item = new cc.MenuItemToggle(off, on, callback, target);
2.原生组件--菜单
cc.MenuItemFont.setFontName("Arial");
cc.MenuItemFont.setFontSize(24);
var one = new cc.MenuItemFont("one", this.clickHandler);
var two = new cc.MenuItemFont("two", this.clickHandler);
var three = new cc.MenuItemFont("three", this.clickHandler);
var four = new cc.MenuItemFont("four", this.clickHandler);
var five = new cc.MenuItemFont("five", this.clickHandler);
var six = new cc.MenuItemFont("six", this.clickHandler);
var menu = new cc.Menu(one, two, three, four, five, six);
menu.alignItemsVertically();//纵向排列
menu.alignItemsHorizontally();//横向排列
menu.alignItemsHorizontallyWithPadding(20);//横向间距
menu.alignItemsVerticallyWithPadding(20);//纵向间距
2.原生组件--文本
new cc.LabelTTF(text, font, fontSize, labelsize, halign, valign);
LabelTTF.color= cc.color(255,0,0);
第八章 实战
遮罩节点
利用遮罩我们可以让指定范围内的内容显示，超出范围的内容隐藏。首先我们需要添加内容到遮罩节点上，然后再给遮罩节点指定一个裁剪的模板。
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: 宋体; font-size: 9pt; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">>绘制节点</pre>
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: 宋体; font-size: 9pt; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var stencil = new cc.DrawNode();
stencil.drawRect(cc.p(this.mapPanel.x,this.mapPanel.y), cc.p(this.mapPanel.x+Constant.CANDY_WIDTH******Constant.MAP_SIZE,this.mapPanel.y+Constant.CANDY_WIDTH******Constant.MAP_SIZE),cc**.color(0,0,0), 1, cc.color(0,0,0));</pre>
本地存储
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: 宋体; font-size: 9pt; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">cc.sys.localStorage.setItem(key,value);</pre>
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: 宋体; font-size: 9pt; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">cc.sys.localStorage.getItem(key);</pre>
第九章 打包上传
cocos compile-p web-m release
如何压缩项目的体积？
打开项目目录中的frameworks/cocos-2d-html5/moduleConfig.json,可以看到全部预定义的模块选项，我们把project.json中的modules改为我们使用到的模块，然后再打包上传。
第十章 简单的性能优化
1.雪碧图
下载安装TextturePacker,设置游戏引擎和图片比例(scale)，然后点击publish导出，导出的spiritsheet将生成2个文件：plist和png。
把spiritsheet加载到游戏里，
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: 宋体; font-size: 9pt; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">cc.spriteFrameCache.addSpriteFrames("res/candy.plist");</pre>
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: 宋体; font-size: 9pt; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">var ball = new cc.Sprite("#1.png");</pre>
使用小图时调用“#精灵帧名字”，精灵帧名字就是原来小图的文件名。
2.spriite批处理
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">SpriteBatchNode的用法和普通精灵类似：</pre>
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: 宋体; font-size: 9pt; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">var batchNode = new cc.SpriteBatchNode("res/candy.png");</pre>
3.缓存池
把重复使用的精灵回收到缓存池中，在下次创建精灵时重复使用，可以节约硬件消耗。使用步骤：
1.建立一个可回收的类，该类中必须有reuse和unuse方法，从cc.pool中取出实例的时候调用reuse方法把该实例重新初始化，而该实例从舞台删除放回到cc.pool的时候调用unuse方法。其中reuse方法可以接受若干参数，跟getFromPool对应。
2.判断cc.pool中是否有某个类的实例：
[html] view plaincopy
<embed id="ZeroClipboardMovie_1" src="https://csdnimg.cn/public/highlighter/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="16" height="16" name="ZeroClipboardMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=16&height=16" wmode="transparent" style="box-sizing: border-box; outline: 0px; word-break: break-all;">
<embed id="ZeroClipboardMovie_3" src="https://csdnimg.cn/public/highlighter/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="16" height="16" name="ZeroClipboardMovie_3" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=3&width=16&height=16" wmode="transparent" style="box-sizing: border-box; outline: 0px; word-break: break-all;">
- cc.pool.hasObject(TargetClass)
[html] view plaincopy
<embed id="ZeroClipboardMovie_2" src="https://csdnimg.cn/public/highlighter/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="17" height="16" name="ZeroClipboardMovie_2" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=2&width=17&height=16" wmode="transparent" style="box-sizing: border-box; outline: 0px; word-break: break-all;">
<embed id="ZeroClipboardMovie_4" src="https://csdnimg.cn/public/highlighter/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="17" height="16" name="ZeroClipboardMovie_4" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=4&width=17&height=16" wmode="transparent" style="box-sizing: border-box; outline: 0px; word-break: break-all;">
- cc.pool.hasObject(TargetClass)
如果有，则使用cc.pool.getFromPool(TargetClass, args)获取实例，在getFromPool中会调用实例reuse方法，传递的就是args，所以args参数的数目要跟reuse方法对应。如果没有，则需要使用new方法创建新的TargetClass实例。
3.当时用完某个类的实例时，把该实例放入cc.pool中：
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">cc.pool.putInPool(TargetClass);</pre>
代码示例：
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">if(cc.pool.hasObject(ReuseSprite)){
ball = cc.pool.getFromPool(ReuseSprite, param);
} else {
ball = new ReuseSprite("#" + (parseInt(Math.random() * 5) + 1) + ".png");
}</pre>
4.位图缓存
Layer的bake方法可以后续每帧的重绘只需要把这个位图绘制到画布上即可，不需要遍历全部子节点。如果要解除位图缓存，可以调用unbake方法。代码示例：
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">layer.bake();layer.unbake();</pre>
第十一章 动画效果
帧动画：Animation类
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: 宋体; font-size: 9pt; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">var animation = new cc.Animation(frames,delay,loops);</pre>
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: 宋体; font-size: 9pt; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">for (var i = 0; i < N; i++) {
animation.addSpriteFrameWithFile(files[i]);</pre><pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: 宋体; font-size: 9pt; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;"> //animation.addSpriteFrame(cc.spriteFrameCache.get****SpriteFrame("file.png");****);</pre>
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: 宋体; font-size: 9pt; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">}</pre>
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: 宋体; font-size: 9pt; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">//files是一个数组，包含每一帧的图片
animation.setDelayPerUnit(1/14);</pre><pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: 宋体; font-size: 9pt; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">animation.setLoops(5);</pre>
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: 宋体; font-size: 9pt; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">var action = cc.animate(animation);
action.repeatForever();//使用无限循环后，原来的loops设置就会失效
sprite.runAction(action);</pre>
第十二章 动态背景
视差滚动背景
在cocos2d-js中，使用ParallaxNode类实现视差滚动背景，ParallaxNode继承了node,使用方式跟node类似，我们可以通过ParallaxNode的addChild方法，添加多个远近不同的背景层，并设置每个背景层的移动速度比例。缺点：不能循环滚动。代码示例：
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var bg = new cc.ParallaxNode();
var bg1 = new cc.Sprite("res/bgLayer.jpg");
var bg2 = new cc.Sprite("res/bgLayer2.png");
var bg3 = new cc.Sprite("res/bgLayer3.png");
var bg4 = new cc.Sprite("res/bgLayer4.png");
bg.addChild(bg1, 1, cc.p(0.1, 0), cc.p(bg1.width/2, bg1.height/2));
bg.addChild(bg2, 2, cc.p(0.3, 0), cc.p(bg2.width/2, bg2.height/2));
bg.addChild(bg3, 3, cc.p(0.5, 0), cc.p(bg3.width/2, bg3.height/2));
bg.addChild(bg4, 4, cc.p(1, 0), cc.p(bg4.width/2, bg4.height/2));
var action = cc.moveBy(1, -200, 0);
bg.runAction(cc.sequence(action, action.clone().reverse()).repeatForever());
this.addChild(bg);</pre>
无限循环滚动背景
第一步：让背景图动起来。
第二步：让背景层重复加载一遍。
第三步：在update函数中判断背景层移动的情况，当背景层移动了一个图片长度的时候，让背景层位置重置一下，如此反复成循环。代码示例：
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">var UnlimitedParallaxLayer = cc.Layer.extend({
_bg1:null, _bg2:null, _bg3:null, _bg4:null, speed:5, ctor:function () { this._super(); this.scheduleUpdate(); var buildParallaxBackground = function(texture){ var layer = new cc.Layer(); var bg1 = new cc.Sprite(texture); bg1.x = bg1.width/2; bg1.y = bg1.height/2; layer.addChild(bg1); var bg2 = new cc.Sprite(texture); bg2.x = bg2.width/2 + bg2.width; bg2.y = bg2.height/2; layer.addChild(bg2); return layer; }; //sky this._bg1 = buildParallaxBackground("res/bgLayer.jpg"); this.addChild(this._bg1); //hill this._bg2 = buildParallaxBackground("res/bgLayer2.png"); this.addChild(this._bg2); //buildings this._bg3 = buildParallaxBackground("res/bgLayer3.png"); this.addChild(this._bg3); //trees this._bg4 = buildParallaxBackground("res/bgLayer4.png"); this.addChild(this._bg4); return true; }, update:function(dt) { var winSize = cc.director.getWinSize(); this._bg1.x -= Math.ceil(this.speed * 0.1); if (this._bg1.x < -parseInt(winSize.width)) this._bg1.x = 0; this._bg2.x -= Math.ceil(this.speed * 0.3); if (this._bg2.x < -parseInt(winSize.width)) this._bg2.x = 0; this._bg3.x -= Math.ceil(this.speed * 0.5); if (this._bg3.x < -parseInt(winSize.width)) this._bg3.x = 0; this._bg4.x -= Math.ceil(this.speed * 1); if (this._bg4.x < -parseInt(winSize.width)) this._bg4.x = 0; }});</pre>
第十三章 位图文字
制作位图字体
第一步：使用BMfont制作位图字体。
第二步：挑选字符，选择字体（options>font settings），设置3项属性（font或add font file,size,bold）。
第三步：选择导出格式（options>font settings），设置Bit depth:32,preset:white text……,Font descriptor:Text.
第四步：导出位图字体文件（options> save bitmap font as）,保存后生成1个fnt文件和一个png文件。
将图片保存为位图字体
第一步：Edit>open image manger>image>import image,在ID框中输入字符的ASCⅡ。相应的ASCⅡ码可以度娘一下。
第二步：设置导出选项，presets>custom,RGB都设成one，A设成gkyph.
第三步：options > save bitmap font as,导出字体文件。
代码示例：
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">var bmFont1 = new cc.LabelBMFont("I am Kenko.", "res/font.fnt", 500, cc.TEXT_ALIGNMENT_CENTER);
bmFont1.color = cc.color(255, 0, 0);
this.addChild(bmFont1);</pre><pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">LabelBMFont类的5个参数</pre>
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">1.str,需要显示的字符串。2.fntFile，fnt文件的url，3.width，整个label的宽度。4.alignment,对齐方式cc.TEXT_ALIGNMENT_CENTER、cc.TEXT_ALIGNMENT_LEFT、</pre>
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">cc.TEXT_ALIGNMENT_RIGHT。5.imageoffset,每个字符的偏移值。</pre>
第十四章 粒子系统
新建一个粒子系统类：
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">var particleSystem = new cc.ParticleSystem(100);
this.addChild(particleSystem);
particleSystem.texture = cc.textureCache.addImage("res/star.png");</pre>//属性
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">var size = cc.director.getWinSize();
particleSystem.x = size.width / 2;
particleSystem.y = size.height / 2;</pre><pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">particleSystem.positionType = free;//粒子位置类型，有自由模式(free),相对模式（relative）,打组模式(grouped)三种。</pre>
particleSystem.posVar = cc.p(0, 0);//发射器位置的变化范围
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">sourcePosition;//发射器原始坐标位置
particleSystem.duration = cc.ParticleSystem.DURATION_INFINITY;//发射器生存时间
particleSystem.emitterMode = cc.ParticleSystem.MODE_RADIUS;//发射器模式，有重力模式(MODE_GRAVITY)和半径模式(MODE_RADIUS)两种</pre><pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">/*重力模式用于模拟重力，参数如下：</pre>
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">gravity重力X，radiaAccel:粒子径向加速度，radiaAccelVar:粒子径向（平行重力方向）加速度变化范围，speed:速度，speedVar:速度变化范围，tangentialAccel:粒子切向（垂直重力方向）加速度，tangentialAccelVar:粒子切向（垂直重力方向）加速度变化范围。*/</pre>
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">//半径模式可以使粒子做环形旋转，也可以创造出螺旋效果，参数如下：
particleSystem.startRadius = 0;
particleSystem.startRadiusVar = 30;
particleSystem.endRadius = 240;
particleSystem.endRadiusVar = 30;particleSystem.rotatePerS = 180;
particleSystem.rotatePerSVar = 0;</pre><pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">//半径模式结束
particleSystem.angle = 90;//角度属性，粒子角度
particleSystem.angleVar = 0;//粒子角度变化范围particleSystem.life = 10;//生命属性，生存时间
particleSystem.lifeVar = 0;//生命时间变化范围particleSystem.startSpin = 0;//自旋属性，粒子开始的自旋角度
particleSystem.startSpinVar = 0;//粒子开始的自旋角度变化范围
particleSystem.endSpin = 0;//粒子结束的自旋角度
particleSystem.endSpinVar = 0;//粒子结束的自旋角度变化范围particleSystem.startColor = cc.color(128, 128, 128, 255);//颜色属性，粒子初始颜色
particleSystem.startColorVar = cc.color(128, 128, 128, 255);//颜色属性，粒子初始颜色变化范围
particleSystem.endColor = cc.color(128, 128, 128, 50);//粒子结束颜色
particleSystem.endColorVar = cc.color(26, 26, 26, 50);//粒子结束颜色变化范围particleSystem.startSize = 32;//大小属性，粒子初始大小
particleSystem.startSizeVar = 0;//粒子初始大小变化范围
particleSystem.endSize = cc.ParticleSystem.START_SIZE_EQUAL_TO_END_SIZE;//粒子结束大小，-1表示和初始大小一样</pre><pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">particleSystem.endSizeVar = 0;//粒子结束大小变化范围</pre>
particleSystem.emissionRate = particleSystem.totalParticles / particleSystem.life;//每秒喷发的粒子数，totalParticles场景中最大粒子数
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">particleSystem.isAutoRemoveOnFinish = true;//粒子数结束的时候是否自动删除</pre>
cocos2d封装好的效果
1.烟花
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">var particleSystem = new cc.ParticleFireworks();
particleSystem.texture = cc.textureCache.addImage("res/firework.png");</pre>2.火焰
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">var particleSystem = new cc.ParticleFire();
particleSystem.texture = cc.textureCache.addImage("res/fire.png");</pre>3.太阳
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">var particleSystem = new cc.ParticleSun();
particleSystem.texture = cc.textureCache.addImage("res/fire.png");</pre>4.银河
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">var particleSystem = new cc.ParticleGalaxy();
particleSystem.texture = cc.textureCache.addImage("res/fire.png");</pre>5.花
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">var particleSystem = new cc.ParticleFlower();
particleSystem.texture = cc.textureCache.addImage("res/firework.png");</pre>6.雪
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">var particleSystem = new cc.ParticleSnow();
particleSystem.texture = cc.textureCache.addImage("res/snow.png");</pre>7.雨
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">var particleSystem = new cc.ParticleRain();
particleSystem.texture = cc.textureCache.addImage("res/snow.png");</pre>8.流星
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">var particleSystem = new cc.ParticleMeteor();
particleSystem.texture = cc.textureCache.addImage("res/fire.png");</pre>9.烟
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">var particleSystem = new cc.ParticleSmoke();
particleSystem.texture = cc.textureCache.addImage("res/fire.png");</pre>10.螺旋
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">var particleSystem = new cc.ParticleSpiral();
particleSystem.texture = cc.textureCache.addImage("res/fire.png");</pre><pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">11.爆炸</pre>
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">var particleSystem = new cc.ParticleExplosion();
particleSystem.texture = cc.textureCache.addImage("res/firework.png");</pre>
粒子系统可视化编辑器
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">ParticleEditor在线编辑地址：http://onebyonedesign.com/flash/particleeditor/</pre>
导出效果时，必须勾选Include .PLIST file选项，单后点Export particle,导出文件里只有.png和.plist文件有用。在代码中加载：
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: 宋体; font-size: 9pt; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">var particleSystem = new cc.ParticleSystem("res/particle.plist");
this.addChild(particleSystem);
particleSystem.duration = 3;</pre>
停止和销毁
停止：
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: 宋体; font-size: 9pt; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">ParticleSystem.stop****System();</pre>
this.removeChild(ParticleSystem);
自动销毁：
ParticleSystem.setAutoRemoveOnFinish****(true);
第十九章 事件机制
阻止事件传递
cocos2d事件触发顺序：子节点优先于父节点，上层节点优先于下层节点。
阻止事件冒泡，让同一个事件的后续监听器都失效：event.stopPropagation();
自定义事件
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">cc.eventManager.addCustomListener("myEvent", function (event){}）;//添加自定义事件监听</pre>
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">cc.eventManager.dispatchCustomEvent("myEvent", data);//派发事件data是该event携带的数据，我们可以自定义数据，在监听函数中用event.getUserData()方法获取。</pre>
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(240, 240, 240); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">cc.eventManager.removeCustomListeners("eventName");//取消订阅</pre>
第二十章 屏幕尺寸适配
<pre style="box-sizing: border-box; outline: 0px; padding: 0px; margin: 0px 0px 24px; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: 宋体; font-size: 9pt; line-height: 22px; color: rgb(0, 0, 0); word-break: break-all;">cc.view.setDesignResolutionSize(720, 1280, cc.ResolutionPolicy.SHOW_ALL);//根据屏幕尺寸等比例缩放。</pre>
网友评论