cocos 创建一个js项目_cocos2d-js项目全过程

命令

新建项目： 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:节点

scheduleUpdate():通知当前节点

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

cc.sequence(action, callback);

第一个参数代表函数名，第二个参数代表函数最后被调用时的目标对象，第三个参数是附加的数据。

如果我们串联了多个动作，可以在每个动作之间都放置一个监听函数，

cc.sequence(action1, cc.callFunc(function1),action2, cc.callFunc(function2),action3);

播放声音

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.鼠标事件

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

}

第一个参数代表监听信息，第二个代表监听的节点，'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.单点触摸

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

}

touch参数封装了触摸事件专有的数据，onTouchEnded和onTouchCancelled可以等同处理。

touch参数有待查询API。

2.多点触摸

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){},