常用的API(对开发之旅书上的一些具体步骤的总结)

1、常用API总结：（参考开发之旅书上用的一些API，详细参考书上代码）1.格式化输出方法：对格式要求高，可能因为参数格式问题出错:cc.log /如cc.log("%d js",5);输出为5 js推荐自己写一个类似Java中System.out.print()方法，如书中给的：var trace = function() cc.log(Atotype.join.call(arguments,","); /有了这个方法，之后就可以实现如trace("hello"+"world");的输出this/va

2、rname.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.widthsize.height取

3、宽的大小，高的大小cc.director.runScene(); /括号内加场景，即可执行场景里的内容cc.director.runScene(new cc.TransitionSlideInT(2,new SecondScene();/两秒后滑动切换场景到ScondScene类似的切换场景效果：TransitionMoveInB:从下往上移进TransitionRotoZoom:旧旋转变小消失，新旋转变大出现TransitionJumpZoom:旧缩小再跳跃离开，新跳跃进入TransitionShrinkGrow:旧变小，新逐渐变大TransitionFlipX:旧横向旋转，新出现Trans

4、itionFlipAngular:旧斜向旋转TransitionFade:旧逐渐消失，新逐渐显示TransitionTurnOffTiles:新场景直接出现在背后，旧场景马赛克方式逐渐消失TransitionSplitCols:画面分三列分别滑进滑出pushScene不销毁场景，把上个场景存起来popScene当前场景销毁，回到上一个场景前缀cc.director.后缀：getWinsize窗口的设计尺寸 getVisiblesize窗口实际尺寸 getScheduler获取全局定时器 pause/resume暂停/恢复场景节点Node（如图层layer，精灵sprite均为节点）下实现每一帧

5、做点小动作：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.scaleT

6、o(1,2,2);一秒后放大对象宽为原来两倍，高为原来两倍cc.fadeOut(2); /两秒淡出cc.fadeIn(2); /两秒淡入cc.blink(2,10); /两秒闪烁10次cc.color(100,0,0); /设置颜色红色为100，绿色为0，蓝色为0cc.tintTo(2,100,0,0); /两秒内颜色变化为（100,0,0）cc.sequence(action1,action2); /顺序执行两个动作，一个动作结束就开始执行另一个动作, 串行执行，这整个语句可以赋值给另一个动作cc.repeat(action,5);/重复执行action5次cc.repeatForever(

7、action);/无限重复执行actioncc.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);/弹性加速act

8、ion.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的a

9、ction动作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.audioE

10、ngine.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);设置

11、背景音乐音量cc.audioEngine.setMusicVolume(0);设置音效音量恢复音量的方式：cc.audioEngine.setEffectsVolume(1);恢复背景音乐音量cc.audioEngine.setMusicVolume(1);恢复音效音量一、即时动作1、放置12var placeAction = cc.place(x, y);node.runAction(placeAction);上述代码将node节点放置到指定位置的(x, y)位置上。2、翻转1234var flipXAction = cc

12、.flipX(true);var flipYAction = cc.flipY(true);node.runAction(cc.sequence(cc.delayTime(0.5), flipXAction, cc.delayTime(0.5), flipYAction);上述代码实现了节点的上下、左右翻转。动作序列中的延时函数是为了方便我们观看效果。3、显示和隐藏1234var showAction = cc.show();var hideAction = cc.hide(

13、);node.runAction(cc.sequence(cc.delayTime(0.5), hideAction, cc.delayTime(0.5), showAction);上述代码实现了指定节点的隐藏和显示。4、删除自己12var removeSelfAction = cc.removeSelf();node.runAction(removeSelfAction);上述代码将节点从场景中删除。5、函数动作5.1 无参函数123456var callAction = cc.callFunc(cal

14、lback, this);node.runAction(callAction);/下面定义的是回调函数callback : function()cc.log("Hello Callback");上述代码运行时会在控制台打印一条"Hello Callback"语句。5.2 有参函数123456789101112131415var sayHello = function()cc.log("Hello world,I'm Jeff");var&

15、#160;data = name : "凌建风",age  : 22,doSth: sayHello;var callAction = cc.callFunc(callback, this, data);node.runAction(callAction);/下面是回调函数callback : function(sender, data)cc.log("Hello callback"&#

16、160;+ data);node.runAction(cc.callFunc(data.doSth);上述代码打印一条"Hello callback"+data的语句以及一条"Hello world,I'm Jeff"的语句。回调函数中的sender就是callFunc函数中的this，表示其调用的对象。5.3 匿名函数1234var callAction = cc.callFunc(function()cc.log("Hello callback"););node.runAc

17、tion(callAction);上述代码和无参函数效果类似，只是将函数体内置在了参数列表中，称为匿名函数。二、持续动作1、属性变化动作属性变化动作分为To和By两种。顾名思义，To表示直接将属性变化为指定的值，指定值为"终点"，而By表示属性的变动幅度为指定的值，指定值为"变化量"。1）move12var actionMoveTo = cc.moveTo(time, cc.p(x, y);var actionMoveBy = cc.moveBy(time, ccp

18、(x, y);上述代码，第一行的意思是，在time秒内，将节点移动到(x, y)位置上；第二行的意思是，在time秒内，将节点移动到坐标再加上(x, y)的位置上。我们省略了最终runAction的代码，在下面也是如此。2）jump12var actionJumpTo = cc.jumpTo(time, cc.p(x, y), height, count);var actionJumpBy = cc.jumpBy(time, cc.p(x, y), hei

19、ght, count);上述代码，第一行的意思是，在time秒内，节点要跳跃count次，每次跳跃的高度为height，停止跳跃之后的位置为(x, y)。第二行中，参数的意义是一样的，不同的是，停止跳跃时的坐标为原坐标加上(x, y)的值。3）bezier123456var controlPointsTo = cc.p(x1, y1),/控制点1cc.p(x2, y2),/控制点2cc.p(x3, y3)/终点;var bezierTo = cc.bezierTo(time, cont

20、rolPointsTo);bezierTo和bezierBy的作用是操作节点作贝塞尔曲线运动，所谓贝塞尔曲线，如下图所示：简单来说，就是控制节点从起始坐标经过曲线运动到达终点坐标，其中控制点1和2用于控制曲线轨迹的形成。而bezierBy与上述的移动、跳跃的By形式并无区别，在此省略，下面的讲解中也一样省略。4）scale12var actionScaleTo = cc.scaleTo(time, scale);var actionScaleTo1 = cc.scaleTo(time, scaleX, s

21、caleY);上述代码表示将节点在time秒内缩放到原节点scale倍大小。scale大于1时图片放大，scale小于1时缩小。若有第三个参数，则第二个参数为X方向缩放倍数，第三个参数为Y轴方向缩放倍数。而对于scaleBy来说，scale表示的是基于当前节点大小的缩放倍数。另外，scaleBy是可逆的，而scaleTo是不可逆的。（使用reverse()逆转）。5）rotate12var actionRotateTo = cc.rotateTo(time, deltaAngle);var actionRotateTo = 

22、cc.rotateTo(time, deltaAngleX, deltaAngleY);上述代码实现的是节点的旋转。若无第三个参数，则节点在time秒内顺时针旋转deltaAngle度；若有第三个参数，则节点在x方向上旋转deltaAngleX度，在y方向上旋转deltaAngleY度。而rotateBy的旋转则以节点当前角度为准进行运动。2、视觉特效动作1）淡入淡出123var actionFadeIn = cc.fadeIn(time);var actionFadeOut = cc.fadeOut(time);

23、var actionFadeTo = cc.fadeTo(time, opacity);上述代码，第一行表示淡入，即在time秒内从当前透明度变为透明度255；第二行表示淡出，即在time秒内从当前透明度变为透明度0；第三行则表示在time秒内从当前透明度变为指定的透明度opacity。以上效果均可以使用reverse()逆转。2）颜色渐变12var actionTintTo = cc.tintTo(time, r, g, b);var actionTintBy = 

24、;cc.tintBy(time, r, g, b);上述代码使用3个参数控制节点的RGB属性，从而达到使节点颜色渐变的效果。同样是在time秒内完成。3）闪烁1var actionBlink = cc.blink(time, count);上述代码表示，节点在time秒内，要闪烁count次。4）摄像机1var orbit=cc.orbitCamera(time,radius,radiusD,zAngle,zAngleD,xAngle,xAngleD);上述代码创建一个球面坐标轨迹进行旋转操作。time表示旋转轨迹

25、的时间；radius表示起始半径，radiusD表示半径差；zAngle表示起始z角，zAngleD表示旋转z角的差；xAngle表示起始x角，xAngleD表示旋转x角的差。5）跟随在另一个节点运行了一个action后，则可以使用follow使指定的对象跟随另一个节点运动。1object.runAction(cc.follow(node, cc.rect(x, y, width, height);上述代码表示object对象（一般为层），跟随node节点运动。第二个rect参数如果不加上，则默认为(0, 0, 0, 0)，表示无边界的动作；若有非零的r

26、ect，则表示带边界的动作。若要详细理解该方法，建议在视频附带的源码中额外添加可滚动的背景，这样可以方便理解，不会造成误解。3、复合动作1）延时动作1var actionDelayTime = cc.delayTime(time); /time为延时的秒数延时动作多用于在动作序列sequence中，以方便观察其他动作。2）重复动作1234var actionRepeat = action.repeat(count);var actionRepeat1 = cc.repeat(action,

27、60;count);var actionRepeatForever = action.repeatForever();var actionRepeatForever1 = cc.repeatForever(action);上述代码包含了重复固定次数以及无限重复的两种写法。其中action是已经定义好的动作，count表示该动作需要重复的次数。3）序列动作1var sequence = cc.sequence(action1, action2, action3);序列动作在之前大家也已经

28、见过很多了，其效果是让多个指定的动作按照前后顺序逐一执行。其构造函数的参数个数没有限制。4）并发动作1var actionSpawn = cc.spawn(action1, action2);并发动作与序列动作相反，不是让动作按顺序执行，而是使它们在同一时刻同时进行。5）逆转动作1var actionRev = action.reverse();逆转动作即将指定action的动作倒过来执行一遍。需要注意的是有些动作是无法逆转的，而且针对web平台和native平台也有所区别，这就需要大家在实际操作中积累经验了。4、变速动作1

29、）Speed1var speedAction = cc.speed(action, times);speed方法的作用是让指定的动作action以指定的times倍速度执行。2）ActionEase动作缓冲基本格式如下：1var actionEase = action.easing(ActionEase);其中action是要缓冲的动作，ActionEase是选择的缓冲模式。所能使用的缓冲模式中，比较基本的有：123456cc.easeBounceIn();/以弹性缓动效果开始cc.easeBounceOut();/以弹性缓

30、动效果结束cc.easeBounceInOut();/以弹性缓动效果开始和结束cc.easeBackIn();/加速度向右，反方向缓慢移动cc.easeBackOut();/快速移动到结束，然后缓慢返回到结束cc.easeBackInOut();/以EaseBackIn开始，以EaseBackOut结束一、节点的属性1、图形属性1.1 旋转1） 旋转的角度：Number rotation 2） 向x轴方向倾斜的角度：Number rotationX3） 向y轴方向倾斜的角度：Number rotationY图形的旋转均以顺时针方向进行。默认旋转角度为01.2 缩放1） 缩放大小：Nu

31、mber scale2） x轴方向缩放大小：Number scaleX3） y轴方向缩放大小：Number scaleY默认的缩放大小为1，大于1则节点放大，小于1则节点缩小。1.3 倾斜1） x轴倾斜角度：Number skewX2） y轴倾斜角度：Nubmer skewY倾斜与旋转的效果有些类似，但是实际上是不一样的。skewX表示X轴方向上的倾斜角度，该角度是Y轴与其左边缘之间的夹角；skewY表示Y轴方向上的倾斜角度，该角度是X轴与其底边缘之间的夹角。1.4 可见1） 是否可见：Bool visiblevisible为true，该节点可见；visible为false，该节点不可见。1.

32、5 透明度1） 透明度：Number opacity2） 是否级联透明度：Bool cascadeOpacity透明度取值范围为：0-255，0时透明，255时不透明；级联透明度默认为false，表示是否将该节点的透明度传递给与其相关（有父子关系）的节点上。1.6 颜色1） 颜色：cc.Color color2） 级联颜色：Bool cascadeColor3） 颜色值是否跟着透明度进行改变：Bool opacityModifyRGB此处级联与透明度的级联是一样的，而opacityModifyRGB表示透明度是否作用与颜色。2、其他属性2.1 父子关系1)  父亲：cc.Node p

33、arent2)  孩子：Array children3)  孩子数量：Number childrenCount2.2 计时器1） 计时器：cc.Scheduler scheduler计时器控制节点定时完成指定的动作。2.3 运行状态1） 是否正在运行：Bool running2.4 动作管理1） 动作管理器：cc.ActionManager actionManager动作管理器是控制节点动画的管理器。2.5 渲染顺序1） 节点渲染顺序：Number arrivalOrder在zIndex的值相同的情况下，节点渲染顺序的值越大，该节点越晚被渲染。2.控制鼠标事件cc.even

34、tManager.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/getLoca

35、tionY /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:functio

36、n(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

37、:function(touches,event) ,this);键盘事件每个键对应一个keyCode数字，如tab键对应为9cc.eventManager.addListener( event:cc.EventListener.KEYBOARD, onKeyPressed:function(keyCode,event) , onKeyReleased:function(keyCode,event) ,node);重力感应器事件：cc.inputManager.setAccelerometerInterval(interval)( event:cc. inputManager. setAccel

38、erometerEnabled(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.定时器定时器schedule

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

40、_FOREVER,2);每间隔3秒触发一次callback函数，重复无数次，且第一次触发前的延迟时间为2秒 取消定时器：node.unscheduleUpdate(callback);取消定时器scheduleUpdate触发的callback函数node.unschedule(callback); 取消定时器schedule触发的callback函数恢复暂停定时器：node.pause暂停定时器node.resume恢复定时器全屏显示function ChangeToFullScreen()/ /判断是否为全屏，如果全屏，则退出全屏，否则以全屏显示/ if(cc.screen.fullScr

41、een()/ /退出全屏/ cc.screen.exitFullScreen();/ else /全屏显示 cc.screen.requestFullScreen();/ 游戏界面cc.LabelTTF的相关api1、  创建var text = new cc.LabelTTF(“这是一段文字” , 文字的配置, 大小 );EG:var text = new cc.LabelTTF(“哈哈，文字哦”, "Arial",24); / 创建了一段Arail，大小为24的字体 2、  改变文字内容text.setString(“更改的内容啊”);&#

42、160;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”换

43、行试试 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

44、 = 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.shado

45、wOffsetY = 12; / 阴影Y轴效果手工制作API（即用代码制作，不过一般采用cocos studio制作游戏界面）一、按钮1.MenuItemSpritenew cc.MenuItemSprite(spriteNormal,spriteSelected,spriteDisable,clickHandler,target);五个参数依次为正常态效果，按下时效果，禁用时效果，点击的回调函数，回调函数作用的对象。也可缺少禁用时的效果和回调函数的目标对象实例参考代码：var MenuItemSpriteLayer = cc.Layer.extend( ctor: function () t

46、his._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, t

47、his.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 instance

48、of 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&

49、quot;, "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);参数依次为文本内容，点击的回调函数，

50、回调函数作用的对象。实例参考代码：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); , startGam

51、e: 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);/

52、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

53、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 i

54、tem = 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.ext

55、end( 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&quo

56、t;, 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.alignIte