cocos2djs开发之旅书籍笔记

常用API总结

(参考开发之旅书上用的一些API，详细参考书上代码)

1.格式化输出方法：对格式要求高，可能因为参数格式问题出错:

cc.log   //如cc.log("%d js",5);输出为5 js

推荐自己写一个类似Java中System.out.print()方法，如书中给的：
var trace = function(){
cc.log(Array.prototype.join.call(arguments,”,”));
}; //有了这个方法，之后就可以实现如trace(“hello”+”world”);的输出

this/varname.addChild:

var layer = new helloworldlayer（）；
this.addChild(layer);或
scene.addChild(layer);
//可添加一个图层到场景中并显示

cc.director.getWinsize();

var size =cc.director.getWinsize();
size即存有游戏的显示屏幕（世界坐标系）的宽和高

new cc.Sprite(res);
var bg =new cc.Sprite(res.helloworld_png);
//创建一个精灵，精灵以图helloworld呈现

size.width
size.height
取宽的大小，高的大小

cc.director.runScene(); //括号内加场景，即可执行场景里的内容

cc.director.runScene(new cc.TransitionSlideInT(2,new SecondScene()));
//两秒后滑动切换场景到ScondScene

类似的切换场景效果：
TransitionMoveInB:从下往上移进
TransitionRotoZoom:旧旋转变小消失，新旋转变大出现
TransitionJumpZoom:旧缩小再跳跃离开，新跳跃进入
TransitionShrinkGrow:旧变小，新逐渐变大
TransitionFlipX:旧横向旋转，新出现
TransitionFlipAngular:旧斜向旋转
TransitionFade:旧逐渐消失，新逐渐显示
TransitionTurnOffTiles:新场景直接出现在背后，旧场景马赛克方式逐渐消失
TransitionSplitCols:画面分三列分别滑进滑出
pushScene不销毁场景，把上个场景存起来
popScene当前场景销毁，回到上一个场景

前缀cc.director.
后缀：getWinsize窗口的设计尺寸
      getVisiblesize窗口实际尺寸
     getScheduler获取全局定时器
     pause/resume暂停/恢复场景

节点Node（如图层layer，精灵sprite均为节点）下实现每一帧做点小动作：
scheduleUpdate和update
如在自己构造的图层对象layer中的ctor（自编构造函数)加入this.scheduleUpdate();
在ctor函数下再加个update函数（官方原生函数），函数内容自编，scheduleUpdate通知当前节点在每帧重绘前调用update函数

1.动作:
cc.moveBy(1,cc.p(size.width,100));
直线移动一秒，且一秒后，宽移动一个屏宽的像素，高向上移动100像素。
cc.moveTo(1,cc.p(size.width,100));
直线移动一秒，且一秒后，移动到坐标为(size.width,100)
cc.scaleTo(1,2,2);
一秒后放大对象宽为原来两倍，高为原来两倍
cc.fadeOut(2); //两秒淡出
cc.fadeIn(2);  //两秒淡入
cc.blink(2,10);  //两秒闪烁10次
cc.color(100,0,0);   //设置颜色红色为100，绿色为0，蓝色为0
cc.tintTo(2,100,0,0);  //两秒内颜色变化为（100,0,0）
cc.sequence(action1,action2);   //顺序执行两个动作，一个动作结束就开始执行另一个动作, 串行执行，这整个语句可以赋值给另一个动作
cc.repeat(action,5);//重复执行action5次
cc.repeatForever(action);//无限重复执行action
cc.spawn(action1,action2);//同时执行多个动作，并行执行
action.reverse();// 代表action动作的反动作

示例：
var ball=new cc.Sprite(res.helloworld.png);
var action=cc.scaleTo(1,2,2);
一秒后放大对象宽为原来两倍，高为原来两倍
ball.runAction(action)；
球执行动作action

缓动方式
action.easing(cc.easeIn(2));//以二次方加速移动
action.easing(cc.BounceIn(2));//弹性加速
action.easing(cc.easeQuadraticAcitonIn/Out/InOut());二次曲线的速度变化形式移动
action.easing(cc.easeCubicAcitonIn/Out/InOut());三次曲线的速度变化形式移动
action.easing(cc.easeBackAcitonIn/Out/InOut());出去再返回

弹性和反弹
action.easing(cc.easeElasticIn/Out/InOut());
action.easing(cc.easeBounceIn/Out/InOut());

控制动作：
node.stopAction(action);//停止node的action动作
node.stopActionByTag(tag);//通过标签来判断node应停止的某些动作
node.stopAllAction();//停止node的所有动作
cc.director.pause();//游戏全暂停
cc.director.resume();//游戏全恢复动作
ball.pause();//球停止动作
ball.resume();//球恢复动作

监听动作开始和结束
cc.callFunc(callback,ball,"message");
在球动作执行完后执行callback函数，meassage可传入callback函数中，从而监听动作

背景音乐：
cc.audioEngine.playMusic("res/my.mp3",true);
播放背景音乐my.mp3，重复播放
cc.audioEngine.stopMusic();
停止背景音乐播放

音效：
var effect=cc.audioEngine.stopEffect("res/my.mp3",false);
cc.audioEngine.stopEffect(effect);
cc. audioEngine.stopALLEffects();
开启音效my.mp3不重复播放，注：音效可同时播多个

音量：
cc.audioEngine.setEffectsVolume(0);设置背景音乐音量
cc.audioEngine.setMusicVolume(0);设置音效音量

恢复音量的方式：
cc.audioEngine.setEffectsVolume(1);恢复背景音乐音量
cc.audioEngine.setMusicVolume(1);恢复音效音量
一、即时动作
1、放置
var placeAction = cc.place(x, y);
node.runAction(placeAction);
上述代码将node节点放置到指定位置的(x, y)位置上。
2、翻转
var flipXAction = cc.flipX(true);
var flipYAction = cc.flipY(true);
node.runAction(cc.sequence(
cc.delayTime(0.5), flipXAction, cc.delayTime(0.5), flipYAction));
上述代码实现了节点的上下、左右翻转。动作序列中的延时函数是为了方便我们观看效果。
3、显示和隐藏
var showAction = cc.show();
var hideAction = cc.hide();
node.runAction(cc.sequence(
cc.delayTime(0.5), hideAction, cc.delayTime(0.5), showAction));
上述代码实现了指定节点的隐藏和显示。
4、删除自己
var removeSelfAction = cc.removeSelf();
node.runAction(removeSelfAction);
上述代码将节点从场景中删除。
5、函数动作
5.1 无参函数
var callAction = cc.callFunc(callback, this);
node.runAction(callAction);
//下面定义的是回调函数
callback : function(){
cc.log("Hello Callback");
}
上述代码运行时会在控制台打印一条"Hello Callback"语句。
5.2 有参函数
var sayHello = function(){
cc.log("Hello world,I'm Jeff");
};
var data = {
name : "凌建风",
age  : 22,
doSth: sayHello
};
var callAction = cc.callFunc(callback, this, data);
node.runAction(callAction);
//下面是回调函数
callback : function(sender, data){
cc.log("Hello callback" + data);
node.runAction(cc.callFunc(data.doSth));
}
上述代码打印一条"Hello callback"+data的语句以及一条"Hello world,I'm Jeff"的语句。回调函数中的sender就是callFunc函数中的this，表示其调用的对象。
5.3 匿名函数
var callAction = cc.callFunc(function(){
cc.log("Hello callback");
});
node.runAction(callAction);
上述代码和无参函数效果类似，只是将函数体内置在了参数列表中，称为匿名函数。

二、持续动作
1、属性变化动作
属性变化动作分为To和By两种。顾名思义，To表示直接将属性变化为指定的值，指定值为”终点”，而By表示属性的变动幅度为指定的值，指定值为”变化量”。
1）move
1
2 var actionMoveTo = cc.moveTo(time, cc.p(x, y));
var actionMoveBy = cc.moveBy(time, ccp(x, y));
上述代码，第一行的意思是，在time秒内，将节点移动到(x, y)位置上；
第二行的意思是，在time秒内，将节点移动到坐标再加上(x, y)的位置上。
我们省略了最终runAction的代码，在下面也是如此。
2）jump
1
2 var actionJumpTo = cc.jumpTo(time, cc.p(x, y), height, count);
var actionJumpBy = cc.jumpBy(time, cc.p(x, y), height, count);
上述代码，第一行的意思是，在time秒内，节点要跳跃count次，每次跳跃的高度为height，停止跳跃之后的位置为(x, y)。
第二行中，参数的意义是一样的，不同的是，停止跳跃时的坐标为原坐标加上(x, y)的值。
3）bezier
1
2
3
4
5
6 var controlPointsTo = [
cc.p(x1, y1),//控制点1
cc.p(x2, y2),//控制点2
cc.p(x3, y3)//终点
];
var bezierTo = cc.bezierTo(time, controlPointsTo);
bezierTo和bezierBy的作用是操作节点作贝塞尔曲线运动，所谓贝塞尔曲线，如下图所示：

简单来说，就是控制节点从起始坐标经过曲线运动到达终点坐标，其中控制点1和2用于控制曲线轨迹的形成。
而bezierBy与上述的移动、跳跃的By形式并无区别，在此省略，下面的讲解 中也一样省略。
4）scale
1
2 var actionScaleTo = cc.scaleTo(time, scale);
var actionScaleTo1 = cc.scaleTo(time, scaleX, scaleY);
上述代码表示将节点在time秒内缩放到原节点scale倍大小。scale大于1时图片放大，scale小于1时缩小。若有第三个参数，则第二个参数为X方向缩放倍数，第三个参数为Y轴方向缩放倍数。
而对于scaleBy来说，scale表示的是基于当前节点大小的缩放倍数。
另外，scaleBy是可逆的，而scaleTo是不可逆的。（使用reverse()逆转）。
5）rotate
1
2 var actionRotateTo = cc.rotateTo(time, deltaAngle);
var actionRotateTo = cc.rotateTo(time, deltaAngleX, deltaAngleY);
上述代码实现的是节点的旋转。
若无第三个参数，则节点在time秒内顺时针旋转deltaAngle度；
若有第三个参数，则节点在x方向上旋转deltaAngleX度，在y方向上旋转deltaAngleY度。
而rotateBy的旋转则以节点当前角度为准进行运动。
2、视觉特效动作
1）淡入淡出
1
2
3 var actionFadeIn = cc.fadeIn(time);
var actionFadeOut = cc.fadeOut(time);
var actionFadeTo = cc.fadeTo(time, opacity);
上述代码，第一行表示淡入，即在time秒内从当前透明度变为透明度255；
第二行表示淡出，即在time秒内从当前透明度变为透明度0；
第三行则表示在time秒内从当前透明度变为指定的透明度opacity。
以上效果均可以使用reverse()逆转。
2）颜色渐变
1
2 var actionTintTo = cc.tintTo(time, r, g, b);
var actionTintBy = cc.tintBy(time, r, g, b);
上述代码使用3个参数控制节点的RGB属性，从而达到使节点颜色渐变的效果。同样是在time秒内完成。
3）闪烁
1 var actionBlink = cc.blink(time, count);
上述代码表示，节点在time秒内，要闪烁count次。
4）摄像机
1 var orbit=cc.orbitCamera(time,radius,radiusD,zAngle,zAngleD,xAngle,xAngleD);
上述代码创建一个球面坐标轨迹进行旋转操作。
time表示旋转轨迹的时间；radius表示起始半径，radiusD表示半径差；
zAngle表示起始z角，zAngleD表示旋转z角的差；
xAngle表示起始x角，xAngleD表示旋转x角的差。
5）跟随
在另一个节点运行了一个action后，则可以使用follow使指定的对象跟随另一个节点运动。
1 object.runAction(cc.follow(node, cc.rect(x, y, width, height)));
上述代码表示object对象（一般为层），跟随node节点运动。
第二个rect参数如果不加上，则默认为(0, 0, 0, 0)，表示无边界的动作；若有非零的rect，则表示带边界的动作。
若要详细理解该方法，建议在视频附带的源码中额外添加可滚动的背景，这样可以方便理解，不会造成误解。
3、复合动作
1）延时动作
1 var actionDelayTime = cc.delayTime(time); //time为延时的秒数
延时动作多用于在动作序列sequence中，以方便观察其他动作。
2）重复动作
1
2
3
4 var actionRepeat = action.repeat(count);
var actionRepeat1 = cc.repeat(action, count);
var actionRepeatForever = action.repeatForever();
var actionRepeatForever1 = cc.repeatForever(action);
上述代码包含了重复固定次数以及无限重复的两种写法。其中action是已经定义好的动作，count表示该动作需要重复的次数。
3）序列动作
1 var sequence = cc.sequence(action1, action2, action3);
序列动作在之前大家也已经见过很多了，其效果是让多个指定的动作按照前后顺序逐一执行。其构造函数的参数个数没有限制。
4）并发动作
1 var actionSpawn = cc.spawn(action1, action2);
并发动作与序列动作相反，不是让动作按顺序执行，而是使它们在同一时刻同时进行。
5）逆转动作
1 var actionRev = action.reverse();
逆转动作即将指定action的动作倒过来执行一遍。需要注意的是有些动作是无法逆转的，而且针对web平台和native平台也有所区别，这就需要大家在实际操作中积累经验了。
4、变速动作
1）Speed
1 var speedAction = cc.speed(action, times);
speed方法的作用是让指定的动作action以指定的times倍速度执行。
2）ActionEase
动作缓冲基本格式如下：
1 var actionEase = action.easing(ActionEase);
其中action是要缓冲的动作，ActionEase是选择的缓冲模式。
所能使用的缓冲模式中，比较基本的有：
1
2
3
4
5
6 cc.easeBounceIn();//以弹性缓动效果开始
cc.easeBounceOut();//以弹性缓动效果结束
cc.easeBounceInOut();//以弹性缓动效果开始和结束
cc.easeBackIn();//加速度向右，反方向缓慢移动
cc.easeBackOut();//快速移动到结束，然后缓慢返回到结束
cc.easeBackInOut();//以EaseBackIn开始，以EaseBackOut结束
一、节点的属性
1、图形属性
1.1 旋转
1） 旋转的角度：{Number} rotation
2） 向x轴方向倾斜的角度：{Number} rotationX
3） 向y轴方向倾斜的角度：{Number} rotationY
图形的旋转均以顺时针方向进行。默认旋转角度为0
1.2 缩放
1） 缩放大小：{Number} scale
2） x轴方向缩放大小：{Number} scaleX
3） y轴方向缩放大小：{Number} scaleY
默认的缩放大小为1，大于1则节点放大，小于1则节点缩小。
1.3 倾斜
1） x轴倾斜角度：{Number} skewX
2） y轴倾斜角度：{Nubmer} skewY
倾斜与旋转的效果有些类似，但是实际上是不一样的。skewX表示X轴方向
上的倾斜角度，该角度是Y轴与其左边缘之间的夹角；skewY表示Y轴方向上的倾斜角度，该角度是X轴与其底边缘之间的夹角。
1.4 可见
1） 是否可见：{Bool} visible
visible为true，该节点可见；visible为false，该节点不可见。
1.5 透明度
1） 透明度：{Number} opacity
2） 是否级联透明度：{Bool} cascadeOpacity
透明度取值范围为：0-255，0时透明，255时不透明；级联透明度默认为false，表示是否将该节点的透明度传递给与其相关（有父子关系）的节点上。
1.6 颜色
1） 颜色：{cc.Color} color
2） 级联颜色：{Bool} cascadeColor
3） 颜色值是否跟着透明度进行改变：{Bool} opacityModifyRGB
此处级联与透明度的级联是一样的，而opacityModifyRGB表示透明度是否作用与颜色。

2、其他属性
2.1 父子关系
1) 父亲：{cc.Node} parent
2) 孩子：{Array} children
3) 孩子数量：{Number} childrenCount
2.2 计时器
1） 计时器：{cc.Scheduler} scheduler
计时器控制节点定时完成指定的动作。
2.3 运行状态
1） 是否正在运行：{Bool} running
2.4 动作管理
1） 动作管理器：{cc.ActionManager} actionManager
动作管理器是控制节点动画的管理器。
2.5 渲染顺序
1） 节点渲染顺序：{Number} arrivalOrder
在zIndex的值相同的情况下，节点渲染顺序的值越大，该节点越晚被渲染。

2.控制

鼠标事件
cc.eventManager.addListener({
event:cc.EventListener.MOUSE,
onMouseDown:function(event){
},
onMouseMove:function(event){
},
onMouseUp:function(event){
},
},node);
监听函数接收两对象，一个为监听信息对象，一个为监听的结点。
‘mouse’ in cc.sys.capabilities;//做当前运行环境是否有鼠标事件的判断
监听对象中的event对象：
event.getLocation获取鼠标事件发生的全局坐标
event.getLocationX/getLocationY //x坐标或y坐标
event.getCurrentTarget获取当前处理鼠标事件的对象
event.getButton 获取鼠标点击键值：左键还是右键
event.getDelta:获取移动的偏移值
event.getDeltaX/getDeltaY

触摸事件

单点触摸
cc.eventManager.addListener({
event:cc.EventListener.TOUCH_ONE_BY_ONE,
onTouchBegan:function(touch,event){
},
onTouchMoved:function(touch,event){
},
onTouchEnded:function(touch,event){
},
onTouchCancelled:function(touch,event){
},
},node);
监听触摸开始，触摸移动，触摸结束，触摸取消（突然来电等）

多点触摸：
cc.eventManager.addListener({
event:cc.EventListener.TOUCH_ALL_AT_ONCE,
onTouchBegan:function(touches,event){
},
onTouchMoved:function(touches,event){
},
onTouchEnded:function(touches,event){
},
onTouchCancelled:function(touches,event){
},
},this);

键盘事件

每个键对应一个keyCode数字，如tab键对应为9
cc.eventManager.addListener({
event:cc.EventListener.KEYBOARD,
onKeyPressed:function(keyCode,event){
},
onKeyReleased:function(keyCode,event){
},
},node);

重力感应器事件：
cc.inputManager.setAccelerometerInterval(interval)({
event:cc. inputManager. setAccelerometerEnabled(true),
cc.eventManager.addListener({
event:cc.EventListener.ACCELERATION,
callback:function(accelerometerInfo,event){
}
},this);

游戏进入后台/恢复显示事件
cc.eventManager.addCustomListener(cc.game,EVENT_HIDE,function(){
});
cc.eventManager.addCustomListener(cc.game,EVENT_SHOW,function(){
});

3.定时器
定时器scheduleUpdate（让游戏运行过程中每帧都执行update方法）：
var ScheduleUpdateLayer = cc.Layer.extend({
ctor:function(){
this._super();
this.scheduleUpdate();
},
update:function(){
//do something
}
});
JS原生定时器：setTimeOut
SetIterval
scheduleOnce定时器：
node.scheduleOnce(callback,2);
两秒后执行自己编写的函数callback，只能依赖节点触发

schedule：
node.schedule(callback,3,REPEAT_FOREVER,2);
每间隔3秒触发一次callback函数，重复无数次，且第一次触发前的延迟时间为2秒

取消定时器：
node.unscheduleUpdate(callback);
取消定时器scheduleUpdate触发的callback函数
node.unschedule(callback);
取消定时器schedule触发的callback函数

恢复暂停定时器：
node.pause
暂停定时器
node.resume
恢复定时器

全屏显示
function ChangeToFullScreen(){
// //判断是否为全屏，如果全屏，则退出全屏，否则以全屏显示
// if(cc.screen.fullScreen()){
// //退出全屏
// cc.screen.exitFullScreen();
// }else{
//全屏显示
cc.screen.requestFullScreen();
// }
}
游戏界面
cc.LabelTTF的相关api
1、 创建
var text = new cc.LabelTTF(“这是一段文字” [, 文字的配置, 大小] );
EG:
var text = new cc.LabelTTF(“哈哈，文字哦~”, “Arial”,24); // 创建了一段Arail，大小为24的字体

2、 改变文字内容
text.setString(“更改的内容啊~”);

3、 设置颜色
label.setColor(cc.color(255, 0, 0, 255)); // 将字体改为红色

4、 设置文字大小
label.setFontSize(100); //设置为100号字体

5、 文字对齐
label.textAlign = cc.TEXT_ALIGNMENT_CENTER;// 居中
cc.TEXT_ALIGNMENT_LEFT; // 居左
cc.TEXT_ALIGNMENT_RIGHT; // 居右

PS:
单行的文字，是无法看出textAlign的效果的说~。
用”\n”换行试试~

6、 文字显示范围
label.setDimensions(width, height); // 文字显示的范围

7、 忽略anchor的设置
label.ignoreAnchor = true; // 设置后，label的起始点在左下角

8、 文字定义：
var text = new cc.LabelTTF(“文字”, def);

def 是这样定义:
var def = new cc.FontDefinition(); // 声明文字定义
def.fontName = “宋体,微软雅黑”; // 字体
def.fontSize = 24; // 字号大小
def.textAlign = cc.TEXT_ALIGNMENT_CENTER; // 文字对齐
def.fillStyle = cc.color(“#ffffff”); // 字体(内部)颜色

def.strokeEnabled = true; // 开启文字描边效果
def.strokeStyle = cc.color(“#ffeeee”); // 描边的颜色
def.lineWidth = 3; // 字体的宽度

defadowEnabled = true; // 开启阴影效果
def.shadowOffsetX = 12; // 阴影X轴效果
def.shadowOffsetY = 12; // 阴影Y轴效果

手工制作API（即用代码制作，不过一般采用cocos studio制作游戏界面）

一、按钮
1.MenuItemSprite
new cc.MenuItemSprite(spriteNormal,spriteSelected,spriteDisable,clickHandler,target);
五个参数依次为正常态效果，按下时效果，禁用时效果，点击的回调函数，回调函数作用的对象。
也可缺少禁用时的效果和回调函数的目标对象
实例参考代码：
var MenuItemSpriteLayer = cc.Layer.extend({

ctor: function () {
    this._super();

    var spriteNormal = new cc.Sprite("res/startgame.png");
    var spriteSelected = new cc.Sprite("res/startgame2.png");
    var spriteDisable = new cc.Sprite("res/startgame3.png");

// var menuSprite = new cc.MenuItemSprite(spriteNormal, spriteSelected, spriteDisable, this.startGame.bind(this));
var menuSprite = new cc.MenuItemSprite(spriteNormal, spriteSelected, spriteDisable, this.startGame);
var menu = new cc.Menu(menuSprite);
this.addChild(menu);
menuSprite.setEnabled(false);
},

startGame: function () {
    trace("this is MenuItemSpriteLayer?", this instanceof MenuItemSpriteLayer);
}

});

2.MenuItemImage：省去几个新建精灵的操作，使加载图片更便利
用法：
new cc.MenuItemImage(
ImageNormalUrl, ImageSelectedUrl,ImageDisableUrl,clickHandler,target);
实例参考代码：
var MenuItemImageLayer = cc.Layer.extend({

ctor: function () {
    this._super();

    var menuImage = new cc.MenuItemImage("res/startgame.png", "res/startgame2.png", "res/startgame3.png", this.startGame, this);
    var menu = new cc.Menu(menuImage);
    this.addChild(menu);
},

startGame: function () {
    trace("menuImage clicked");
}

});

3.MenuItemFont：制作文字按钮
new cc.MenuItemImage(text,clickHander,target);
参数依次为文本内容，点击的回调函数，回调函数作用的对象。
实例参考代码：
var MenuItemFontLayer = cc.Layer.extend({

ctor: function () {
    this._super();

    var menuFont = new cc.MenuItemFont("START GAME", this.startGame, this);
    menuFont.fontSize = 32;
    menuFont.fontName = "Arial";
    var menu = new cc.Menu(menuFont);
    this.addChild(menu);
},

startGame: function () {
    trace("start game button clicked");
}

});

4.MenuItemLabel:可使用更酷炫的字体
new cc.MenuItemLabel(ttf/bmfont,clickHander,target);
实例参考代码：
var MenuItemLabelLayer = cc.Layer.extend({

ctor: function () {
    this._super();

// 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);

    var menu = new cc.Menu(item);
    this.addChild(menu);
},

startGame: function () {
    trace("start game button clicked");
}

});

制作开关按钮：
实例参考代码：
var MenuItemToggleLayer = cc.Layer.extend({

ctor: function () {
    this._super();

    cc.MenuItemFont.setFontName("Arial");
    cc.MenuItemFont.setFontSize(32);
    var on = new cc.MenuItemFont("ON");
    var off = new cc.MenuItemFont("OFF");
    var item = new cc.MenuItemToggle(off, on, this.toggleMusic, this);

    var menu = new cc.Menu(item);
    this.addChild(menu);
},

toggleMusic: function () {
    if(this.musicOff){
        trace("music on");
        this.musicOff = false;
    }else{
        trace("music off");
        this.musicOff = true;
    }
}

});

菜单：
var MenuLayer = cc.Layer.extend({

ctor: function () {
    this._super();

    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);
    this.addChild(menu);

// menu.alignItemsVertically();
// menu.alignItemsHorizontally();
menu.alignItemsHorizontallyWithPadding(20);
// menu.alignItemsInRows(4,2);
// menu.alignItemsInColumns(2,2,2);
},

clickHandler: function () {
}

});

文本：
var TTFLayer = cc.Layer.extend({
ctor: function () {
this._super();

    var winSize = cc.director.getWinSize();
    var aboutText = new cc.LabelTTF("About the game ...", "Arial", 20, cc.size(350, 200), cc.TEXT_ALIGNMENT_LEFT, cc.VERTICAL_TEXT_ALIGNMENT_TOP);
    aboutText.x = winSize.width/2;
    aboutText.y = winSize.height/2;
    this.addChild(aboutText);
}

});

可视化编辑
用cocos studio进行动画编辑，UI编辑，场景编辑，数据编辑
监听UI元素
两个接口可实现查找UI文件中对象的功能：ccui.helper.seekWidgetByName, ccui.helper.seekWidgetByTag
如：
var root = ccs.uiReader.widgetFromJsonFile(“res/FirstUI_1/FirstUI_1.json”);
this.addChild(root);
var button = ccui.helper.seekWidgetByTag(root, 30);
var checkbox = ccui.helper.seekWidgetByName(root, “CheckBox_1”);
this.textField = ccui.helper.seekWidgetByTag(root, 36);

实现具体对象代码：
var UIEditorLayer = cc.Layer.extend({

ctor: function () {
    this._super();
    var root = ccs.uiReader.widgetFromJsonFile("res/FirstUI_1/FirstUI_1.json");
    this.addChild(root);

    var button = ccui.helper.seekWidgetByTag(root, 30);
    if("touches" in cc.sys.capabilities){
        button.addTouchEventListener(this.buttonTouched, this);
    }else{
        button.addClickEventListener(this.buttonClicked.bind(this));
    }

    var checkbox = ccui.helper.seekWidgetByName(root, "CheckBox_1");
    checkbox.addEventListener(this.selectedStateEvent, this);

    this.textField = ccui.helper.seekWidgetByTag(root, 36);
    this.textField.addEventListener(this.textFieldEvent, this);

    if(!cc.sys.isNative){
        this.textField.setString("");
    }
},

buttonTouched: function (sender, type) {
    switch (type) {
        case ccui.Widget.TOUCH_BEGAN:
            trace("Touch Down");
            break;

        case ccui.Widget.TOUCH_MOVED:
            trace("Touch Move");
            break;

        case ccui.Widget.TOUCH_ENDED:
            trace("Touch Up");
            break;

        case ccui.Widget.TOUCH_CANCELED:
            trace("Touch Cancelled");
            break;
    }
},

buttonClicked: function (sender) {
    trace("buttonClicked");
    trace("textField input: " + this.textField.getString());
},

selectedStateEvent: function (sender, type) {
    switch (type) {
        case ccui.CheckBox.EVENT_SELECTED:
            trace("Selected");
            break;
        case ccui.CheckBox.EVENT_UNSELECTED:
            trace("Unselected");
            break;
    }
},

textFieldEvent: function (sender, type) {
    switch (type) {
        case ccui.TextField. EVENT_ATTACH_WITH_IME:
            trace("attach with IME");
            break;
        case ccui.TextField. EVENT_DETACH_WITH_IME:
            trace("detach with IME");
            break;
        case ccui.TextField. EVENT_INSERT_TEXT:
            trace("insert words");
            break;
        case ccui.TextField. EVENT_DELETE_BACKWARD:
            trace("delete word");
            break;
    }
}

});

附加：
//添加遮罩
// var clipnode = this.cliper(res.about);
// clipnode.attr({
// x:GC.w/2,
// y:GC.h*3/4
// })
// var sprite = new cc.Sprite(res.soundoff);
// clipnode.addChild(sprite);
// this.addChild(clipnode);
}
// cliper: function(framename){
// //创建遮罩
// var sten = new cc.Sprite(framename);
// var clipnode = new cc.ClippingNode();
// clipnode.attr({
// stencil:sten,//遮罩所用图片
// anchorX:0.5,
// anchorY:0.5,
// alphaThreshold:0.8//设置裁剪透明值阀值
// })
// return clipnode;
// }
})

Var Scene = cc.Scene.extend({

onEnter:function(){
    //进入场景做的事
}
OnExit:function(){
    //退出场景做的事
}

}

//创建全局对象，下为全局屏幕大小变量
var GC = GC || {};
GC.winSize = cc.size(800,480);
GC.h = GC.winSize.height;
GC.w = GC.winSize.width;
GC.w_2 = GC.winSize.width / 2 ;
GC.h_2 = GC.winSize.height / 2;

“modules” : [“cocos2d”, “extensions”]//用到ccui等方法时加上, “extensions”
//全局函数
function CreateButton1(res,func,obj,x,y){

return menu;

}

//添加重力感应器
var gravityLayer = cc.Layer.extend({

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

    var bg = new cc.Sprite(res.Background_png);
    bg.x = size.width/2;
    bg.y = size.height/2;
    this.addChild(bg, 0, 0);

    var ball = new cc.Sprite(res.Ball_png);
    ball.x = size.width/2;
    ball.y = size.height/2;
    this.addChild(ball, 10, 2);

    return true;
},
onEnter: function () {
    this._super();
    cc.log("HelloWorld onEnter");
    var ball = this.getChildByTag(2);


    cc.inputManager.setAccelerometerEnabled(true);

    cc.eventManager.addListener({
        event: cc.EventListener.ACCELERATION,
        callback: function(acc, event){
            var size = cc.director.getWinSize();
            var s = ball.getContentSize();
            var p0 = ball.getPosition();


            var p1x =  p0.x + acc.x * SPEED ;
            if ((p1x - s.width/2) <0) {
                p1x = s.width/2;
            }
            if ((p1x + s.width / 2) > size.width) {
                p1x = size.width - s.width / 2;
            }


            var p1y =  p0.y + acc.y * SPEED ;
            if ((p1y - s.height/2) < 0) {
                p1y = s.height/2;
            }
            if ((p1y + s.height/2) > size.height) {
                p1y = size.height - s.height/2;
            }
            ball.runAction(cc.place(cc.p( p1x, p1y)));
        }
    }, ball);
},
onExit: function () {
    this._super();
    cc.log("HelloWorld onExit");
    cc.eventManager.removeListeners(cc.EventListener.ACCELERATION);
}

});
//判断声音开关的函数
function SoundJudge(){
if(MUSIC_ON){
cc.audioEngine.stopMusic();
cc.log(“bgmucis off”);
MUSIC_ON = false;
return res.soundon;
}
else{
cc.audioEngine.playMusic(res.bgmusic,true);
cc.log(“bgmucis on”);
MUSIC_ON = true;
return res.soundoff;
}
}

// //ccui方法加按钮
// var menuItem = new ccui.Button();
// menuItem.setTouchEnabled(true); //设置可触摸
// menuItem.setPressedActionEnabled(true);
// menuItem.loadTextures(res.soundon,res.soundon,”“);
// menuItem.x = 100;
// menuItem.y = GC.h-100;
// var menu=this;
// menuItem.addClickEventListener(this.menu,this); //点击按钮触发事件
// //menuItem.addTouchEventListener(this.menu,this); //按下抬起都会触发事件
// //判断触摸或鼠标事件
// if(‘touches’ in cc.sys.capabilities){
// cc.eventManager.addListener({
// //手机触摸屏
// event: cc.EventListener.TOUCH_ONE_BY_ONE,
// swallowTouches: true,
// onTouchEnded: function (touch, event) {
// var target = event.getCurrentTarget();
// cc.log(“touch ended”);
// if(target == menuItem){
// //让MainLayer对象暂停响应事件
// cc.audioEngine.playEffect(res.effect1);
// menu.addChild(new MenuItemLayer(),-1,”menuitemlayer”);
// menubutton.runAction(ACTION); //菜单按钮变灰
// cc.eventManager.pauseTarget(menu.getParent(), true);
// return true;
// }
// }
// }, menuItem);
// }
// else{
// if(‘mouse’ in cc.sys.capabilities){
// cc.eventManager.addListener({
// //鼠标事件
// event:cc.EventListener.MOUSE,
// onMouseUp:function(event) {
// cc.audioEngine.playEffect(res.effect1);
// menu.addChild(new MenuItemLayer(),-1,”menuitemlayer”);
// menubutton.runAction(ACTION); //菜单按钮变灰
// cc.eventManager.pauseTarget(menu.getParent(), true); //暂停MainLayer响应事件
// return true;
// }
// }, menuItem);
// }
// }
// this.addChild(menuItem,2,”menu”);
// var menubutton=this.getChildByName(“menu”);

Button.enabled = false; // 设置按钮不接受响应

Var Jy = {} //创建自定义对象
Jy.x = 1;
Jy.pic ={};

//修改加载界面
更改触摸设备加载界面,修改以下文件即可
.\frameworks\cocos2d-html5\cocos2d\core\scenes\CCLoaderScene.js
更改网页上最先开始的加载界面，修改以下文件：
.\res\loading.js
更改触摸设备加载界面的图标，修改以下文件中的cc._loaderImage:
.\frameworks\cocos2d-html5\Base64Images.js
将jpeg格式图片在http://tool.css-js.com/base64.html中编辑获得图片的base64码，作为cc._loaderImage字符串的值即可。
Cocos code ide新版如何修改监听端口：
新建项目的时候有个config文件，修改里面的consolePort

附：用Python建立最简单的web服务器
利用Python自带的包可以建立简单的web服务器。在DOS里cd到准备做服务器根目录的路径下，输入命令：
• python -m Web服务器模块 [端口号，默认8000]
例如：
• python -m SimpleHTTPServer 8080
然后就可以在浏览器中输入
• http://localhost:端口号/路径
来访问服务器资源。
例如：
• http://localhost:8080/index.htm（当然index.htm文件得自己创建）
其他机器也可以通过服务器的IP地址来访问。
这里的“Web服务器模块”有如下三种：
• BaseHTTPServer: 提供基本的Web服务和处理器类，分别是HTTPServer和BaseHTTPRequestHandler。
• SimpleHTTPServer: 包含执行GET和HEAD请求的SimpleHTTPRequestHandler类。
• CGIHTTPServer: 包含处理POST请求和执行CGIHTTPRequestHandler类。

cocos2d-js + pomelo 的开发环境搭建
cocos2d-js 是整合了 cocos2d-html5 和 cocos2d-jsb，可以方便的开发部署到各种设备环境中

pomelo-cocos2d-js 则是对 pomelo-client-websocket 和 pomelo-cocos2d-jsb 的整合
本文以cocos code ide为开发环境说明如何搭建 pomelo 与 cocos2d-js 的开发环境
1：下载 cocos code ide
cocos code ide
2：下载 cocos2d-js 配置cocos code ide

cocos code ide

cocos_code_ide环境配置
3：新建 cocos javascript project

这个时候，可以点击 build runtime 按钮，看是否能够成功编译

可以选择 win32 runtime（本文演示的是win32） 或者 android runtime

4：下载 pomelo-cocos2d-js

在项目根路径下面执行
git clone https://github.com/Netease/pomelo-cocos2d-js.git –recursive
5：cocos2d-html5 环境搭建

修改index.html

require('boot');

6：cocos2d-jsb 环境搭建

修改main.js
cc.game.onStart = function() {
if (cc.sys.isNative === true) {
require(‘pomelo-cocos2d-js/index.js’);
}

cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.EXACT_FIT);
cc.view.resizeWithBrowserSize(true);
// load resources
cc.LoaderScene.preload(g_resources, function() {
    cc.director.runScene(new HelloWorldScene());
}, this);

};
cc.game.run();
7：测试chat
修改app.js，添加
var pomeloChat = function() {
var pomelo = window.pomelo;

var route = 'gate.gateHandler.queryEntry';
var uid = "uid";
var rid = "rid";
var username = "username";

pomelo.init({
    host: "127.0.0.1",
    port: 3014,
    log: true
}, function() {
    pomelo.request(route, {
        uid: uid
    }, function(data) {
        pomelo.disconnect();
        pomelo.init({
            host: data.host,
            port: data.port,
            log: true
        }, function() {
            var route = "connector.entryHandler.enter";
            pomelo.request(route, {
                username: username,
                rid: rid
            }, function(data) {
                cc.log(JSON.stringify(data));
                chatSend();
            });
        });
    });
});

function chatSend() {
    var route = "chat.chatHandler.send";
    var target = "*";
    var msg = "msg"
        pomelo.request(route, {
            rid: rid,
            content: msg,
            from: username,
            target: target
        }, function(data) {
            cc.log(JSON.stringify(data));
        });
}

}
然后在 HelloWorldLayer 的 ctor 里面添加
pomeloChat();
8：本地把chatofpomelo-websocket跑起来
9：分别在jsb环境和html5环境测试
cc.sys.isMobile 判断是不是触屏设备
‘mouse’ in cc.sys.capabilities 判断支不支持鼠标事件
‘touches’ in cc.sys.capabilities
‘keyboard’ in cc.sys.capabilities
触摸事件–单指触摸：

if (cc.sys.isMobile) {
var listener = cc.EventListener.create({
event:cc.EventListener.TOUCH_ONE_BY_ONE,
swallowTouches:true,
onTouchBegan:function(touch,event){
var target = event.getCurrentTarget();
// var delta = touch.getLocation();
// cc.log(“x=”+delta.x + ” ” + “y=” + delta.y);

                target.onTouchBegainCallBack();
                target.onTouchMovedCallBack();
                return true;
            },
            onTouchMoved:function(touch,event){
                var target = event.getCurrentTarget();

// var delta = touch.getLocation();
// cc.log(“x=”+delta.x + ” ” + “y=” + delta.y);

            },
            onTouchEnded:function(touch,event){
                var target = event.getCurrentTarget();
                target.onTouchEndCallBack(event);

// var delta = touch.getLocation();
// cc.log(“x=”+delta.x + ” ” + “y=” + delta.y);
}
});
cc.eventManager.addListener(listener, this);
}

鼠标事件：
if (‘mouse’ in cc.sys.capabilities) {

        cc.eventManager.addListener({
            event:cc.EventListener.MOUSE,
            onMouseDown:function(event){

// cc.log(“onMouseDown”);
var pos = event.getLocation();
if(event.getButton() === cc.EventMouse.BUTTON_RIGHT){
cc.log(“onRightMouseDown at:” + pos.x +” ” + pos.y);
}else if(event.getButton() === cc.EventMouse.BUTTON_LEFT){
cc.log(“onLeftMouseDown at:” + pos.x +” ” + pos.y);
var target = event.getCurrentTarget();
target.onTouchBegainCallBack();
target.onTouchMovedCallBack();
}
},
onMouseMove:function(event){
// cc.log(“onMouseMove”);
},
onMouseUp:function(event){
var target = event.getCurrentTarget();
target.onTouchEndCallBack(event);
// cc.log(“onMouseUp”);
}
}, this);
键盘事件：
listener = cc.EventListener.create({
event:cc.EventListener.KEYBOARD,
onKeyPressed:function(keyCode,event){

                if (keyCode === 38 || keyCode === 87) {
                    var target = event.getCurrentTarget();
                    target.onTouchBegainCallBack();
                    target.onTouchMovedCallBack();
                }
            },
            onKeyReleased:function(keyCode,event){

            }
        });
            cc.eventManager.addListener(listener, this);