小生愛

实例1 : 创建时间监听器到管理器

实例2 : 快速添加事件监听器到管理器

实例3 : 键盘事件

实例4 : 鼠标事件

实例5 : 移除事件监听器

实例6 : 暂停恢复监听器

实例7 : 音乐

实例8 : 常用属性

实例9 : 文字标签 方法一

实例10 : 创建fnt文字标签 方法二

实例11 : 创建按钮精灵

实例12 : 创建精灵

实例13 : 创建层

实例14 : 切换场景 切换场景方法库>>

实例15 : Action系统动作

实例16 : 自定义精灵帧动画

实例17 : 运动中的速度效果 速度效果库>>

实例18 : 定时器

实例19 : 进度条

// coco2D 实例一 创建事件监听器_________________________________________________________________________ var Scene = cc.Scene.extend({ onEnter : function (){ // 初始化父类方法 this._super(); // 获得游戏屏幕尺寸 var size = cc.winSize; // 创建精灵的方法 var createSprite = function (img, x, y, zIndex){ var sprite = cc.Sprite.create(img); sprite.x = x; sprite.y = y; return sprite; }; // 创建精灵一 var sprite1 = createSprite(res.t1, size.width/2-80, size.height/2+80, 10); // 插入到场景 this.addChild(sprite1, 1); // 创建精灵二 var sprite2 = createSprite(res.t2, size.width/2-60, size.height/2+60, 20); // 插入到场景 this.addChild(sprite2, 2); // 创建精灵三 var sprite3 = createSprite(res.t3, 290, 300, 1); // 插入到场景 this.addChild(sprite3, 3); // 创建事件监听器方法 var listener1 = cc.EventListener.create({ // 创建事件监听器类型 // cc.EventListener.TOUCH_ONE_BY_ONE 单次触摸 event : cc.EventListener.TOUCH_ONE_BY_ONE, // 设置是否吞没事件,在 onTouchBegan 方法返回 true 时吞没 swallowTouches : true, // onTouchBegan : 鼠标按下时触发 // onTouchBegan 必须返回true时 onTouchMoved onTouchEnded才能执行 onTouchBegan: function (touch, event) { // 获取绑定事件的节点 var target = event.getCurrentTarget(); // getLocation : 获取手指坐标 // target.convertToNodeSpace : 获取当前点击相对按钮的位置坐标 var locationInNode = target.convertToNodeSpace(touch.getLocation()); // 获取精灵的宽高 var s = target.getContentSize(); // 创建一个矩形区域 var rect = cc.rect(0, 0, s.width, s.height); // rectContainsPoint : 判断点击的位置与点击的按钮是否相交 // 因为获取了当前点击相对按钮的位置 所以根据当前按钮的宽高绘制一个rect // 然后判断点击位置和该rect是否相交 if(cc.rectContainsPoint(rect, locationInNode)) { // 设置按钮的透明度 target.setOpacity(180); return true; } return false; }, // 鼠标移动时触发 onTouchMoved: function (touch, event) { // 获取绑定事件的节点 var target = event.getCurrentTarget(); // 获取鼠标鼠标移动的距离 var delta = touch.getDelta(); // 节点赋值 target.x += delta.x; target.y += delta.y; }, // 鼠标抬起时触发 onTouchEnded: function (touch, event) { // 获取绑定事件的节点 var target = event.getCurrentTarget(); // 设置透明度 target.opacity = 255; // 设置层级 target.setLocalZOrder(100); // 如果当前节点是按钮 if(target == sprite2){ sprite1.setLocalZOrder(0); sprite3.setLocalZOrder(0); }else if(target == sprite1){ sprite2.setLocalZOrder(0); sprite3.setLocalZOrder(0); }else{ sprite1.setLocalZOrder(0); sprite2.setLocalZOrder(0); } } }); // cc.eventManager : 事件管理器 通过addListener把事件监听器加入到管理器中 // 管理时间监听器 当想再次使用同一个事件监听器listener1时 需要clone()一个 cc.eventManager.addListener(listener1, sprite1); cc.eventManager.addListener(listener1.clone(), sprite2); cc.eventManager.addListener(listener1.clone(), sprite3); } }); // coco2D 实例二 创建事件监听器(不用clone版本)_________________________________________________________________________ var Scene = cc.Scene.extend({ onEnter : function (){ // 初始化父类方法 this._super(); // 获得游戏屏幕尺寸 var size = cc.winSize; // 创建精灵的方法 var createSprite = function (img, x, y, zIndex){ var sprite = cc.Sprite.create(img); sprite.x = x; sprite.y = y; return sprite; }; // 创建精灵一 var sprite1 = createSprite(res.t1, size.width/2-80, size.height/2+80, 10); // 插入到场景 this.addChild(sprite1, 1); // 创建精灵二 var sprite2 = createSprite(res.t2, size.width/2-60, size.height/2+60, 20); // 插入到场景 this.addChild(sprite2, 2); // 创建精灵三 var sprite3 = createSprite(res.t3, 290, 300, 1); // 插入到场景 this.addChild(sprite3, 3); // 封装创建时间监听器的方法 // 这样封装以后 不需要使用clone() var listener = function (){ // 创建事件监听器方法 var listener1 = cc.EventListener.create({ // 创建事件监听器类型 // cc.EventListener.TOUCH_ONE_BY_ONE 单次触摸 event : cc.EventListener.TOUCH_ONE_BY_ONE, // 设置是否吞没事件,在 onTouchBegan 方法返回 true 时吞没 swallowTouches : true, // onTouchBegan : 鼠标按下时触发 // onTouchBegan 必须返回true时 onTouchMoved onTouchEnded才能执行 onTouchBegan: function (touch, event) { // 获取绑定事件的节点 var target = event.getCurrentTarget(); // getLocation : 获取手指坐标 // target.convertToNodeSpace : 获取当前点击相对按钮的位置坐标 var locationInNode = target.convertToNodeSpace(touch.getLocation()); // 获取精灵的宽高 var s = target.getContentSize(); // 创建一个矩形区域 var rect = cc.rect(0, 0, s.width, s.height); // rectContainsPoint : 判断点击的位置与点击的按钮是否相交 // 因为获取了当前点击相对按钮的位置 所以根据当前按钮的宽高绘制一个rect // 然后判断点击位置和该rect是否相交 if(cc.rectContainsPoint(rect, locationInNode)) { // 设置按钮的透明度 target.setOpacity(180); return true; } return false; }, // 鼠标移动时触发 onTouchMoved: function (touch, event) { // 获取绑定事件的节点 var target = event.getCurrentTarget(); // 获取鼠标鼠标移动的距离 var delta = touch.getDelta(); // 节点赋值 target.x += delta.x; target.y += delta.y; }, // 鼠标抬起时触发 onTouchEnded: function (touch, event) { // 获取绑定事件的节点 var target = event.getCurrentTarget(); // 设置透明度 target.opacity = 255; // 设置层级 target.setLocalZOrder(100); // 如果当前节点是按钮 if(target == sprite2){ sprite1.setLocalZOrder(0); sprite3.setLocalZOrder(0); }else if(target == sprite1){ sprite2.setLocalZOrder(0); sprite3.setLocalZOrder(0); }else{ sprite1.setLocalZOrder(0); sprite2.setLocalZOrder(0); } } }); return listener1; } // cc.eventManager : 事件管理器 通过addListener把事件监听器加入到管理器中 // 管理时间监听器 当想再次使用同一个事件监听器listener1时 需要clone()一个 cc.eventManager.addListener(listener(), sprite1); cc.eventManager.addListener(listener(), sprite2); cc.eventManager.addListener(listener(), sprite3); } }); // coco2D 实例三 快速添加事件监听器到管理器_________________________________________________________________________ var Scene = cc.Scene.extend({ onEnter : function (){ // 初始化父类方法 this._super(); // 快速添加时间监听器的方式 cc.eventManager.addListener({ // 事件监听器类型 event: cc.EventListener.TOUCH_ONE_BY_ONE, // 点击事件 onTouchBegan : function (touch, event){ console.log('我被点击了!'); return true; } // this 是被点击的当前节点 // 这里默认指 scene // 可以指定其他节点 例如精灵 }, this); } }); // coco2D 实例四 键盘事件_________________________________________________________________________ var Scene = cc.Scene.extend({ onEnter : function (){ // 初始化父类方法 this._super(); // 快速添加事件监听器到管理器 cc.eventManager.addListener({ event : cc.EventListener.KEYBOARD, // 键盘按下事件 // keyCode 键值 onKeyPressed : function (keyCode, event){ console.log('按下键盘'); }, // 键盘弹起事件 // keyCode 键值 onKeyReleased : function (keyCode, event){ console.log('抬起键盘'); } }, this); } }); // coco2D 实例五 键盘事件_________________________________________________________________________ var Scene = cc.Scene.extend({ onEnter : function (){ // 初始化父类方法 this._super(); // 鼠标事件 cc.eventManager.addListener({ event : cc.EventListener.MOUSE, // 鼠标移动 onMouseMove : function (event){ // getLocationX getLocationY 获取鼠标的位置 var str = event.getLocationX() + '-' + event.getLocationY(); console.log(str); }, // 鼠标抬起 onMouseUp : function (event){ // getButton 获得按下哪个鼠标键 console.log(event.getButton(), '@'); }, // 按下鼠标 onMouseDown : function (event){ // getButton 获得按下哪个鼠标键 console.log(event.getButton(), '+'); }, // 鼠标滚动 onMouseScroll : function (event){ // getLocationX getLocationY 获取鼠标的位置 var str = event.getLocationX() + '-' + event.getLocationY(); console.log(str); } }, this); } }); // coco2D 实例六 移除事件监听器_________________________________________________________________________ var Scene = cc.Scene.extend({ onEnter : function (){ // 初始化父类方法 this._super(); // 获得游戏屏幕尺寸 var size = cc.winSize; // 创建精灵的方法 var createSprite = function (img, x, y, zIndex){ var sprite = cc.Sprite.create(img); sprite.x = x; sprite.y = y; return sprite; }; // 创建精灵一 var sprite1 = createSprite(res.t1, size.width/2-80, size.height/2+80, 10); // 插入到场景 this.addChild(sprite1, 1); // 创建精灵二 var sprite2 = createSprite(res.t2, size.width/2-60, size.height/2+60, 20); // 插入到场景 this.addChild(sprite2, 2); // 创建事件监听器方法 var listener1 = cc.EventListener.create({ // 创建事件监听器类型 // cc.EventListener.TOUCH_ONE_BY_ONE 单次触摸 event : cc.EventListener.TOUCH_ONE_BY_ONE, // 设置是否吞没事件,在 onTouchBegan 方法返回 true 时吞没 swallowTouches : true, // onTouchBegan : 鼠标按下时触发 // onTouchBegan 必须返回true时 onTouchMoved onTouchEnded才能执行 onTouchBegan: function (touch, event) { console.log('我被点击了'); } }); // cc.eventManager : 事件管理器 通过addListener把事件监听器加入到管理器中 // 管理时间监听器 当想再次使用同一个事件监听器listener1时 需要clone()一个 cc.eventManager.addListener(listener1, sprite1); cc.eventManager.addListener(listener1.clone(), sprite2); // 实验后该方法删除事件不好使 // cc.eventManager.removeListeners(listener1); // 删除事件监听器类型 // cc.eventManager.removeListeners(cc.EventListener.TOUCH_ONE_BY_ONE); // 删除某个精灵上的所有事件监听器 cc.eventManager.removeListeners(sprite1); cc.eventManager.removeListeners(sprite2); } }); // coco2D 实例七 暂停恢复监听器_________________________________________________________________________ var Scene = cc.Scene.extend({ onEnter : function (){ // 初始化父类方法 this._super(); // 创建事件监听器方法 var listener1 = cc.EventListener.create({ // 创建事件监听器类型 // cc.EventListener.TOUCH_ONE_BY_ONE 单次触摸 event : cc.EventListener.TOUCH_ONE_BY_ONE, // 设置是否吞没事件,在 onTouchBegan 方法返回 true 时吞没 swallowTouches : true, // onTouchBegan : 鼠标按下时触发 // onTouchBegan 必须返回true时 onTouchMoved onTouchEnded才能执行 onTouchBegan: function (touch, event) { console.log('我被点击了'); } }); // cc.eventManager : 事件管理器 通过addListener把事件监听器加入到管理器中 // 管理时间监听器 当想再次使用同一个事件监听器listener1时 需要clone()一个 cc.eventManager.addListener(listener1, this); // 暂停场景 精灵 层等对象的事件 // true : 表示是否递归调用子节点的暂停操作 cc.eventManager.pauseTarget(this, true); // 恢复场景 精灵 层等对象的事件 // true : 表示是否递归调用子节点的恢复操作 cc.eventManager.resumeTarget(this, true); } }); // coco2D 实例八 音乐_________________________________________________________________________ // playMusic var Scene = cc.Scene.extend({ isPlay : true, onEnter : function (){ var t = this; /** * 所有带Music的方法与带Effect的方法不要交互使用 */ // 初始化父类方法 this._super(); // playMusic(音乐, 是否循环) : 播放音乐 cc.audioEngine.playMusic(res.t4, false); // getMusicVolume : 只能获取playMusic播放的音量 // 必须在播放以后获取 var volume = cc.audioEngine.getMusicVolume(); var listener1 = cc.EventListener.create({ // 创建事件监听器类型 // cc.EventListener.TOUCH_ONE_BY_ONE 单次触摸 event : cc.EventListener.TOUCH_ONE_BY_ONE, // 设置是否吞没事件,在 onTouchBegan 方法返回 true 时吞没 // true : 多个精灵的时候 触发一次事件后 其它精灵不再触发 否则相反 swallowTouches : true, // onTouchBegan : 鼠标按下时触发 onTouchBegan: function (touch, event) { if(t.isPlay){ // pauseMusic : 暂停播放 cc.audioEngine.pauseMusic(); t.isPlay = false; }else if(!t.isPlay){ // resumeMusic : 恢复播放 cc.audioEngine.resumeMusic() // setMusicVolume : 设置音量 cc.audioEngine.setMusicVolume(0.2); t.isPlay = true; } } }); // cc.eventManager : 事件管理器 通过addListener把事件监听器加入到管理器中 // 管理时间监听器 当想再次使用同一个事件监听器listener1时 需要clone()一个 cc.eventManager.addListener(listener1, this); } }); // playEffect var Scene = cc.Scene.extend({ isPlay : true, onEnter : function (){ var t = this; /** * 所有带Music的方法与带Effect的方法不要交互使用 */ // 初始化父类方法 this._super(); // playEffect(音乐, 是否循环) : 播放音效 返回当前播放音效的ID // playEffect 与 playMusic的区别主要是playEffect可以无限制调用播放同一个音频N次 // 每次调用都会返回该音效的一个ID // playMusic 播放同一个音频的时候不能无限制调用不停播放 var id = cc.audioEngine.playEffect(res.t4, false); // getEffectsVolume : 只能获取playEffect播放的音量 // 必须在播放以后获取 var volume = cc.audioEngine.getEffectsVolume(); var listener1 = cc.EventListener.create({ // 创建事件监听器类型 // cc.EventListener.TOUCH_ONE_BY_ONE 单次触摸 event : cc.EventListener.TOUCH_ONE_BY_ONE, // 设置是否吞没事件,在 onTouchBegan 方法返回 true 时吞没 // true : 多个精灵的时候 触发一次事件后 其它精灵不再触发 否则相反 swallowTouches : true, // onTouchBegan : 鼠标按下时触发 onTouchBegan: function (touch, event) { if(t.isPlay){ // pauseEffect(id) : 根据某个音频的ID暂停播放 cc.audioEngine.pauseEffect(id); t.isPlay = false; }else if(!t.isPlay){ // resumeEffect(id) : 根据某个音频的ID恢复播放 cc.audioEngine.resumeEffect(id) // setEffectsVolume : 设置音量 cc.audioEngine.setEffectsVolume(0.2); t.isPlay = true; } } }); // cc.eventManager : 事件管理器 通过addListener把事件监听器加入到管理器中 // 管理时间监听器 当想再次使用同一个事件监听器listener1时 需要clone()一个 cc.eventManager.addListener(listener1, this); } }); // coco2D 实例九 属性_________________________________________________________________________ var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); var sprite = cc.Sprite.create(res.t3, cc.rect(0, 0, 100, 35)); // 设置坐标 sprite.x = 200; sprite.y = 200; // 沿中心轴旋转 sprite.rotation = 30; // 沿Y轴旋转 // sprite.rotationY = 30; // 沿X轴旋转 // sprite.rotationX = 30; // 设置精灵中心点 sprite.anchorX = 0; sprite.anchorY = 0; // 设置层级 sprite.zIndex = 1; // width height 放大2倍 sprite.scale = 2; // width 放大2倍 // sprite.scaleX = 1; // height 放大2倍 // sprite.scaleY = 2; // 透明度 255满 sprite.opacity = 100; // 设置精灵可不可见 true | false sprite.visible = true; this.addChild(sprite); } }); // coco2D 实例十 创建字体标签 方式一_________________________________________________________________________ var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); // 创建字体标签 // cc.LabelTTF.create(text, font-family, font-size) var lable = cc.LabelTTF.create('我的', '微软雅黑'); // 设置字体坐标 lable.x = 200; lable.y = 200; // 设置文本 lable.string = 'acb 想小'; // 设置笔触宽度 lable.lineWidth = 1; // 设置字体 lable.fontName = '宋体'; // 字体大小 lable.fontSize = '30'; // 填充颜色 lable.fillStyle = cc.color(255, 255, 255, 255); // 字体描边颜色 lable.strokeStyle = cc.color(60, 0, 0, 255); // 开启或关闭阴影 // enableShadow(x, y, 透明度, 模糊) lable.enableShadow(10, 20, 1, 4); // 模糊度 lable.shadowBlur = 5; // 透明度 lable.shadowOpacity = 1; this.addChild(lable); } }); // 创建fnt字体 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); // 根据fnt格式文件创建字体 // fnt格式创建字体只加载一次 // cc.LabelTTF.create 这种方式加载 每定义一个字体都要渲染一次 var label = cc.LabelBMFont.create("小生爱", res.t4); label.x = 200; label.y = 200; this.addChild(label); } }); // coco2D 实例十一 创建按钮精灵 方式一 _________________________________________________________________________ var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); // 设置文本字体 cc.MenuItemFont.setFontName('Arial'); // 创建按钮标签 // 只能在这个函数里直接写文本 不能用label标签 // MenuItemFont(按钮文本, 触发函数, 触发目标的按钮对象) var item = cc.MenuItemFont.create('小生爱', this.f, this); // 创建按钮精灵 var btn = cc.Menu.create(item); this.addChild(btn); }, f : function (t){ console.log('我是刚才被点击的按钮精灵'); } }); // 根据文字标签创建按钮精灵 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); // 创建文字标签 var label = cc.LabelTTF.create('小生爱', 'Microsoft YaHei', '26px'); // 根据文字标签创建按钮标签 // MenuItemLabel(文字标签, 触发函数, 触发目标的按钮对象) var item = cc.MenuItemLabel.create(label, this.f, this); // 创建按钮精灵 var btn = cc.Menu.create(item); this.addChild(btn); }, f : function (t){ console.log('我是刚才被点击的按钮精灵'); } }); // 根据精灵创建按钮精灵 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); // 创建精灵 var sprite1 = cc.Sprite.create(res.t1, cc.rect(0, 0, 100, 30)); var sprite2 = cc.Sprite.create(res.t2, cc.rect(0, 0, 100, 30)); var sprite3 = cc.Sprite.create(res.t3, cc.rect(0, 0, 100, 30)); // 创建按钮标签 // 最少要有2态 // cc.MenuItemSprite.create(初始状态, 点击状态, 不可用状态, 触发函数, 当前对象) var item = cc.MenuItemSprite.create(sprite1, sprite2, sprite3, this.f, this); // 创建按钮精灵 var btn = cc.Menu.create(item); this.addChild(btn); }, f : function (t){ console.log('我是刚才被点击的按钮精灵'); } }); // 根据图片创建按钮精灵 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); // 根据图片创建按钮标签 // cc.MenuItemImage.create(初始状态, 点击状态, 回调方法, 触发的对象) // 最少2态 var item = cc.MenuItemImage.create(res.t1, res.t2, this.f, this); // 创建按钮精灵 var btn = cc.Menu.create(item); this.addChild(btn); }, f : function (t){ console.log('我是刚才被点击的按钮精灵'); } }); // 根据文本按钮创建开关按钮 一 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); // 创建开关按钮标签 // cc.MenuItemToggle.create(cc.MenuItemFont.create, cc.MenuItemFont.create) var item = cc.MenuItemToggle.create(cc.MenuItemFont.create('开'), cc.MenuItemFont.create('关')); // 设置开关按钮的回调方法 item.setCallback(this.f, this); // 创建按钮精灵 var btn = cc.Menu.create(item); this.addChild(btn); }, f : function (t){ console.log('我是刚才被点击的按钮精灵'); } }); // 根据标签按钮创建开关按钮 二 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); // 创建文字标签 var label = cc.LabelTTF.create('点击1', 'Microsoft YaHei', '36'); var label2 = cc.LabelTTF.create('点击2', 'Microsoft YaHei', '36'); var label3 = cc.LabelTTF.create('点击3', 'Microsoft YaHei', '36'); // 根据文字标签创建按钮标签 // MenuItemLabel(文字标签, 触发函数, 触发目标的按钮对象) var item = cc.MenuItemLabel.create(label, this.f, this); var item2 = cc.MenuItemLabel.create(label2, this.f, this); var item3 = cc.MenuItemLabel.create(label3, this.f, this); // 创建开关按钮 // 开关按钮可以用N个按钮标签做参数 var item3 = cc.MenuItemToggle.create(item, item2, item3); // 创建按钮精灵 var btn = cc.Menu.create(item3); this.addChild(btn); }, f : function (t){ console.log('我是刚才被点击的按钮精灵'); } }); // coco2D 实例十二 创建精灵 _________________________________________________________________________ // 根据剪切图片创建精灵 方式一 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); // cc.Sprite.create : 创建精灵 // cc.rect(x, y, width, height) : 剪切图片 var sprite = cc.Sprite.create(res.t1, cc.rect(0, 0, 50, 30)); sprite.x = 200; sprite.y = 150; this.addChild(sprite); } }); // .split 方式创建精灵 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); // cc.spriteFrameCache.addSpriteFrames(.split, 图片) : 添加精灵帧 cc.spriteFrameCache.addSpriteFrames(res.t6, res.t7); // cc.spriteFrameCache.getSpriteFrame(其中一帧的图片名) : 获得精灵帧 var testSp = cc.Sprite.create(cc.spriteFrameCache.getSpriteFrame("comboBonus1.png")); testSp.x = 200; testSp.y = 150; this.addChild(testSp); } }); // 自定义精灵类 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); // 定义精灵类 var Sprite = cc.Sprite.extend({ ctor : function (){ this._super(); // 给该精灵添加图片 this.initWithFile(res.t1); } }); // 创建精灵对象 var sprite = new Sprite(); sprite.x = 200; sprite.y = 150; this.addChild(sprite); } }); // coco2D 实例十二 创建层 _________________________________________________________________________ // 创建带背景层 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); // 层类 var Layer = cc.LayerColor.extend({ ctor : function (){ // 调用父类的同名方法 this._super(); // 设置层的颜色 this.color = cc.color(60, 0, 0, 0.1); // 设置层的宽 高 this.width = 100; this.height = 100; } }); // 层的实例 var layer = new Layer(); this.addChild(layer); } }); // 不带背景层的类 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); // 层类 // cc.Layer.extend : 没有cc.color方法设置背景 var Layer = cc.Layer.extend({ ctor : function (){ // 调用父类的同名方法 this._super(); var sprite = cc.Sprite.create(res.t1); sprite.x = 200; sprite.y = 150; this.addChild(sprite); } }); // 层的实例 var layer = new Layer(); this.addChild(layer); } }); // 创建不带背景的层对象 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); // cc.Layer.create : 创建不带背景的层对象 var layer = cc.Layer.create(); var sprite = cc.Sprite.create(res.t1); sprite.x = 200; sprite.y = 150; layer.addChild(sprite); this.addChild(layer); } }); // 带背景的层对象 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); // 直接创建层对象 // cc.LayerColor.create(cc.color(r, g, b, a), width, height) var layer = cc.LayerColor.create(cc.color(255, 0, 0, 1), 100, 100); var sprite = cc.Sprite.create(res.t1, cc.rect(0, 0, 50, 50)); sprite.x = 200; sprite.y = 150; layer.addChild(sprite); this.addChild(layer); } }); // coco2D 实例十三 切换场景 _________________________________________________________________________ // 场景一 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); // 创建层 var layer = cc.LayerColor.create(cc.color(255, 0, 0, 60), 100, 100); // 创建button标签 // cc.MenuItemImage.create(初始, 按下, 回调函数, 传递当前对象) var button = cc.MenuItemImage.create(res.t1, res.t2, function (){ // 创建切换场景的动画 // 场景动画大全 请看本人的场景连接文档 // cc.TransitionJumpZoom.create(time, 新场景); var scene = cc.TransitionJumpZoom.create(1, new SceneLast()); // cc.director.runScene(场景) : 运行一个场景 cc.director.runScene(scene); }, this); // 创建 button 精灵 button = cc.Menu.create(button); button.x = 200; button.y = 150; layer.addChild(button); this.addChild(layer); } }); // 创建场景二 var SceneLast = cc.Scene.extend({ onEnter : function (){ this._super(); // 层的实例 var layer = cc.LayerColor.create(cc.color(0, 250, 0, 255), 100, 100); this.addChild(layer); } }); // coco2D 实例十四 Action _________________________________________________________________________ // MoveTo MoveBy var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); var sprite = cc.Sprite.create(res.Sushi_png); sprite.x = 200; sprite.y = 150; // cc.MoveTo.create(time, cc.p(x, y)) : 创建一个移动动作 // time : 移动的时间 // cc.p(x, y) : 创建一个{x:, y:}对象 var actionTo = cc.MoveTo.create(1, cc.p(500, 300)); // var actionTo = cc.MoveBy.create(1, cc.p(100, 100)); // 运行动作 sprite.runAction(actionTo); this.addChild(sprite); } }); // ScaleTo ScaleBy var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); var sprite = cc.Sprite.create(res.Sushi_png); sprite.x = 200; sprite.y = 150; // cc.ScaleTo && cc.ScaleBy 没看出区别 // cc.ScaleTo.create(time, scaleX, scaleY) : 创建一个缩放动作 // time : 移动的时间 // 2, 2 : width, height 缩放的比例 var actionTo = cc.ScaleTo.create(1, 0.25, 4.5); // var actionTo = cc.ScaleBy.create(1, 0.25, 4.5); // 运行动作 sprite.runAction(actionTo); this.addChild(sprite); } }); // RotateTo && RotateBy 创建旋转角度 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); var sprite = cc.Sprite.create(res.Sushi_png); sprite.x = 200; sprite.y = 150; // cc.RotateTo 旋转 这里旋转了180度 // cc.RotateTo.create(time, 旋转角度) : 创建一个旋转动作 // time : 移动的时间 // 540 : 旋转角度 // var actionTo = cc.RotateTo.create(1, 540); // cc.RotateBy 旋转 相对于前一个角度 这里选了540度 // cc.RotateBy.create(time, 旋转角度) : 创建一个旋转动作 // time : 移动的时间 // 540 : 旋转的角度 var actionTo = cc.RotateBy.create(1, 540); // 运行动作 sprite.runAction(actionTo); this.addChild(sprite); } }); // cc.JumpTo.create && cc.JumpBy.create var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); var sprite = cc.Sprite.create(res.Sushi_png); sprite.x = 200; sprite.y = 150; // 1. cc.JumpTo.create(time, cc.p(x, y), 每一跳的高度, 跳动的次数) : 创建跳动动作 // 2. cc.JumpTo.create(time, x, y, 每一跳的高度, 跳动的次数) : 创建跳动动作 // cc.JumpTo.create : 跳动到某一位置 // time : 时间 // cc.p(x, y) : 跳动到的距离{x:x轴距离, y:y轴距离} // 50 : 每一跳的高度 // 2 : 跳动的次数 // var actionTo = cc.JumpTo.create(1, cc.p(300, 0), 50, 2); // 1. cc.JumpBy.create(time, cc.p(x, y), 50, 2); // 2. cc.JumpBy.create(time, x, y, 50, 2); // cc.JumpBy.create : 跳动到某一相对位置 // time : 时间 // cc.p(x, y) : 跳动到的距离{x:x轴距离, y:y轴距离} // 50 : 每一跳的高度 // 2 : 跳动的次数 var actionTo = cc.JumpBy.create(1, cc.p(300, 0), 50, 4); // 运行动作 sprite.runAction(actionTo); this.addChild(sprite); } }); // cc.FadeIn.create : 创建一个渐变出现的动作 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); var sprite = cc.Sprite.create(res.t1); sprite.x = 200; sprite.y = 150; sprite.opacity = 0; // cc.FadeIn.create(0~1) : 创建一个渐变出现的动作 var action = cc.FadeIn.create(1); // 运行动作 sprite.runAction(action); this.addChild(sprite); } }); // cc.FadeTo.create var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); var sprite = cc.Sprite.create(res.t1); sprite.x = 200; sprite.y = 150; // cc.FadeTo.create : 创建一个渐变隐藏的动作 var action = cc.FadeTo.create(2, 0); // 运行动作 sprite.runAction(action); this.addChild(sprite); } }); // cc.Spawn.create 生成一个新的动作 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); var sprite = cc.Sprite.create(res.Sushi_png); sprite.x = 200; sprite.y = 150; // 跳跃动作 var actionTo = cc.JumpBy.create(1, cc.p(300, 0), 50, 4); // 旋转动作 var rotate = cc.RotateTo.create(1, 500); // cc.Spawn.create(动作1, 动作2, ...) : 生成一个新的动作 var dz = cc.Spawn.create(rotate, actionTo); // 运行动作 sprite.runAction(dz); this.addChild(sprite); } }); // cc.Sequence.create 生成一个按顺序执行的动作 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); var sprite = cc.Sprite.create(res.Sushi_png); sprite.x = 200; sprite.y = 150; // 跳跃动作 var actionTo = cc.JumpBy.create(1, cc.p(300, 0), 50, 4); // 旋转动作 var rotate = cc.RotateTo.create(1, 500); // cc.Sequence.create(动作1, 动作2, ...) : 按顺序执行动作 var dz = cc.Sequence.create(actionTo, rotate); // 运行动作 sprite.runAction(dz); this.addChild(sprite); } }); // cc.Repeat.create 重复执行动作 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); var sprite = cc.Sprite.create(res.Sushi_png); sprite.x = 200; sprite.y = 150; // 跳跃动作 var actionTo = cc.JumpBy.create(1, cc.p(300, 0), 50, 4); // 旋转动作 var rotate = cc.RotateBy.create(1, 500); // cc.Repeat.create(动作, 次数) : 重复执行动作 // var dz = cc.Repeat.create(rotate, 2); var dz = cc.Repeat.create(cc.Sequence.create(rotate, actionTo), 2); // 运行动作 sprite.runAction(dz); this.addChild(sprite); } }); // cc.RepeatForever.create 永久重复执行动作 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); var sprite = cc.Sprite.create(res.Sushi_png); sprite.x = 200; sprite.y = 150; // 跳跃动作 var actionTo = cc.JumpBy.create(1, cc.p(300, 0), 50, 4); // 旋转动作 var rotate = cc.RotateBy.create(1, 500); // cc.RepeatForever.create(动作) : 永久重复执行动作 // var dz = cc.RepeatForever.create(rotate); var dz = cc.RepeatForever.create(cc.Sequence.create(rotate, actionTo)); // 运行动作 sprite.runAction(dz); this.addChild(sprite); } }); // 复制动作 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); var sprite = cc.Sprite.create(res.Sushi_png); sprite.x = 200; sprite.y = 150; var sprite2 = cc.Sprite.create(res.Start_N_png); sprite2.x = 300; sprite2.y = 250; // 跳跃动作 var actionTo = cc.JumpBy.create(1, cc.p(300, 0), 50, 4); // 旋转动作 var rotate = cc.RotateBy.create(1, 500); // 永久重复执行动作 var dz = cc.RepeatForever.create(cc.Sequence.create(rotate, actionTo)); // 运行动作 sprite.runAction(dz); // 动作.clone() : 复制一个动作 sprite2.runAction(dz.clone()); this.addChild(sprite); this.addChild(sprite2); } }); // 创建回调动作 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); var sprite = cc.Sprite.create(res.Sushi_png); sprite.x = 200; sprite.y = 150; // 跳跃动作 var actionTo = cc.JumpBy.create(1, cc.p(300, 0), 50, 4); // 旋转动作 var rotate = cc.RotateBy.create(1, 500); // cc.CallFunc.create(fn, this) : 创建回调动作 动作执行完以后执行该回调动作 var fn = cc.CallFunc.create(function (t){ console.log(t); }, this); // 按顺序执行动作 var dz = cc.Sequence.create(rotate, actionTo, fn); // 运行动作 sprite.runAction(dz); this.addChild(sprite); } }); // cc.DelayTime.create 延迟执行动作 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); var sprite = cc.Sprite.create(res.Sushi_png); sprite.x = 200; sprite.y = 150; // 跳跃动作 var actionTo = cc.JumpBy.create(1, cc.p(300, 0), 50, 4); // 旋转动作 var rotate = cc.RotateBy.create(1, 500); // cc.CallFunc.create(fn, this) : 创建回调动作 var fn = cc.CallFunc.create(function (t){ console.log(t); }, this); // cc.DelayTime.create(time) : 创建延迟执行动作 var yc = cc.DelayTime.create(1); // 永久重复执行动作 var dz = cc.Sequence.create(yc, rotate, actionTo, fn); // 运行动作 sprite.runAction(dz); this.addChild(sprite); } }); // coco2D 实例十五 Animation Animate _________________________________________________________________________ // 自定义精灵动画 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); // 精灵帧数组 var arr = []; // cc.spriteFrameCache.addSpriteFrames(.split, 图片) : 添加精灵帧 cc.spriteFrameCache.addSpriteFrames(res.Sushi_plist, res.t8); // cc.spriteFrameCache.getSpriteFrame(其中一帧的图片名) : 获得精灵帧 // 获得N个精灵帧 var testSp = cc.spriteFrameCache.getSpriteFrame("sushi_1n_0.png"); var testSp2 = cc.spriteFrameCache.getSpriteFrame("sushi_1n_8.png"); var testSp3 = cc.spriteFrameCache.getSpriteFrame("sushi_1n_2.png"); // 创建精灵 testSp3 = cc.Sprite.create(testSp3); testSp3.x = 200; testSp3.y = 150; // 保存精灵帧 arr.push(testSp); arr.push(testSp2); this.addChild(testSp3); // 根据精灵帧数组创建动画 // Animation(精灵帧数组, 每帧动画间隔时间, 重复次数) : 创建动画 // Animate : 创建动作 var animation = cc.Animation.create(arr, 1, 2); var animate = cc.Animate.create(animation); // 用runAction运行 Animate创建的动画 testSp3.runAction(animate); } }); // Action + 精灵动画效果 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); // 精灵帧数组 var arr = []; // cc.spriteFrameCache.addSpriteFrames(.split, 图片) : 添加精灵帧 cc.spriteFrameCache.addSpriteFrames(res.Sushi_plist, res.t8); // cc.spriteFrameCache.getSpriteFrame(其中一帧的图片名) : 获得精灵帧 // 获得N个精灵帧 var testSp = cc.spriteFrameCache.getSpriteFrame("sushi_1n_0.png"); var testSp2 = cc.spriteFrameCache.getSpriteFrame("sushi_1n_8.png"); var testSp3 = cc.spriteFrameCache.getSpriteFrame("sushi_1n_2.png"); // 创建精灵 testSp3 = cc.Sprite.create(testSp3); testSp3.x = 200; testSp3.y = 150; this.addChild(testSp3); // 创建旋转动画 var actionTo = cc.RotateBy.create(3, 540); // 保存精灵帧 arr.push(testSp); arr.push(testSp2); // 根据精灵帧数组创建动画 // Animation(精灵帧数组, 每帧动画间隔时间, 重复次数) : 创建动画 // Animate : 创建动作 var animation = cc.Animation.create(arr, 1); var animate = cc.Animate.create(animation); // cc.Spawn.create : 创建同时运行的动作 // cc.RepeatForever.create : 创建重复执行的动作 testSp3.runAction(cc.RepeatForever.create( cc.Spawn.create(animate, actionTo) )); } }); // coco2D 实例十五 运动中速度效果 _________________________________________________________________________ // 运动中速度效果 var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); // 精灵帧数组 var arr = []; var sprite = cc.Sprite.create(res.Start_N_png); var action = cc.MoveTo.create(2, cc.p(250, 50)); sprite.x = 150; sprite.y = 250; this.addChild(sprite); // cc.EaseElasticInOut.create(动作) : 弹性缓冲 sprite.runAction(cc.EaseElasticInOut.create(action)); } }); // coco2D 实例十五 定时器 _________________________________________________________________________ var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); var func = function (){ console.log(1); }; // schedule(fn, time, repeat, delay) : 定时器 // fn 回调函数 // time 调用时间 // repeat 重复次数 // delay 第一次执行的延迟时间 不包含重复执行 this.schedule(func, 1, 10, 2); // unschedule(fn) : 取消定时器 this.unschedule(func); } }); // scheduleOnce var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); var func = function (){ console.log(1); }; // scheduleOnce(fn, delay) : 只调用一次fn this.scheduleOnce(func, 2); } }); // scheduleUpdate var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); // scheduleUpdate() : 每一帧都调用一次 调用函数默认update this.scheduleUpdate(); }, update : function (t){ console.log(1); } }); // unscheduleAllCallbacks unscheduleUpdate var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); // scheduleUpdate() : 每一帧都调用一次 调用函数默认update this.scheduleUpdate(); // 停止所有的定时器 this.unscheduleAllCallbacks(); // 停止update方法 // this.unscheduleUpdate(); }, update : function (t){ console.log(1); } }); // coco2D 实例十六 进度条 _________________________________________________________________________ var Scene = cc.Scene.extend({ onEnter : function (){ this._super(); // 创建一个进度条动作 var to1 = cc.ProgressTo.create(2, 100); var to2 = cc.ProgressTo.create(2, 100); // cc.ProgressTimer.create(精灵) : 根据精创建进度条对象 var left = cc.ProgressTimer.create(cc.Sprite.create(res.Sushi_png)); // setType : 设置条形或扇形进度条 // cc.ProgressTimer.TYPE_BAR : 条形进度条 left.setType(cc.ProgressTimer.TYPE_BAR); // setBarChangeRate(cc.p(1, 0)|cc.p(0, 1)) : 设置进度条的方向 水平 还是垂直 // cc.p(1, 0) : 水平 // cc.p(0, 1) : 垂直 left.setBarChangeRate(cc.p(1, 0)); // setMidpoint : 设置进度条从左->右 上->下 下->上 右->左 left.setMidpoint(cc.p(0, 0)); left.x = 200; left.y = 150; this.addChild(left); // 运行动作 left.runAction(to1); // cc.ProgressTimer.create(精灵) : 根据精灵创建进度条对象 var right = cc.ProgressTimer.create(cc.Sprite.create(res.Sushi_png)); // setType : 设置条形或扇形进度条 // cc.ProgressTimer.TYPE_RADIAL : 扇形进度条 right.setType(cc.ProgressTimer.TYPE_RADIAL); // setReverseDirection(true) : 反向旋转 right.setReverseDirection(true); right.x = 400; right.y = 150; this.addChild(right); // 重复运行动作 right.runAction(cc.RepeatForever.create(to2)); } });