如果您想了解Cocos2d-js_____Sprite和SpriteBatchNode的知识，那么本篇文章将是您的不二之选。同时我们将深入剖析cocos2d-iphone–Cocos2d的CCSpri

如果您想了解Cocos2d-js_____Sprite 和 SpriteBatchNode的知识，那么本篇文章将是您的不二之选。同时我们将深入剖析cocos2d-iphone – Cocos2d的CCSpriteBatchNode抱怨不同的纹理ID、Cocos2d-js____22种特效、Cocos2d-JS____CocosDenshion引擎、Cocos2d-js_____cc.Loader的各个方面，并给出实际的案例分析，希望能帮助到您！

• Cocos2d-js_____Sprite 和 SpriteBatchNode
• cocos2d-iphone – Cocos2d的CCSpriteBatchNode抱怨不同的纹理ID
• Cocos2d-js____22种特效
• Cocos2d-JS____CocosDenshion引擎
• Cocos2d-js_____cc.Loader

Cocos2d-js_____Sprite 和 SpriteBatchNode

Sprite 和 SpriteBatchNode点击打开链接

v2.2 2.2版本中推荐的优化游戏方式是将SpriteBatchNode对象设置为Sprite对象的父节点。 虽然使用SpriteBatchNode对象仍然是一个非常好的优化游戏的方式，但是它仍然有一定的限制：

• Sprite对象的孩子只能是Sprite（否则，Cocos2d-x 会触发断言）
  • 当Sprite的父节点是SpriteBactchNode时，不能添加ParticleSystem作为Sprite的子节点。
  • 这将导致当SpriteBatchNode时，不能使用ParallaxNode
• 所有的Sprite对象必须共享相同的纹理ID (否则，Cocos2d-x 会触发断言)
• Sprite对象使用SpriteBatchNode的混合函数和着色器。

虽然 v3.0 仍然支持SpriteBatchNode（与之前的版本拥有相同的特效和限制），但是我们不鼓励使用它。相反，我们推荐直接使用Sprite，不需要再它作为子节点添加到SpriteBatchNode中。

但是，为了能让 v3.0 有更好的表现，你必须要确保你的Sprite对象满足以下条件：

• 贡献相同的纹理ID（把它们放在一个spritesheet中，就像使用SpriteBatchNode一样）
• 确保它们使用相同的着色器和混合函数（就像使用SpriteBatchNode一样）

如果这么做，Sprites将会像使用SpriteBatchNode一样的快...（在旧设备上大概慢了10%，在新设备上基本上察觉不出）

v2.2 和 v3.0 最大的区别在于：

Sprite对象可以有不同的纹理ID。
• Sprite对象可以有不同种类的Node作为子节点，包括ParticleSystem。
• Sprite对象可以有不同的混合函数和不同的着色器。

但是如果你这么做，渲染器可能无法对它所有的子节点进行批处理（性能较低）。但是游戏仍然可以正常运行，不会触发任何断言。

总结:

• 保持将所有的精灵放在一张大的 spritesheet 中。
• 使用相同的混合函数（使用默认）
• 使用相同的着色器（使用默认）
• 不要将精灵添加到SpriteBatchNode

只有当你需要一些额外的性能上提升（虽然很小），SpriteBatchNode才会是你最后的选择（你需要对它的限制条件很熟悉）。

cocos2d-iphone – Cocos2d的CCSpriteBatchNode抱怨不同的纹理ID

"CCSprite is not using the same texture id"

[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"atlas1.plist"];

CCSprite* sprite = [CCSprite spriteWithSpriteFrameName:@"something.png"];
CCSpriteBatchNode* bar = [CCSpriteBatchNode batchNodeWithFile:@"atlas1.png"];
[bar addChild: sprite]; // assert error here

CCSprite* sprite = [CCSprite spriteWithSpriteFrameName:@"something.png"];
CCSpriteBatchNode* bar = [CCSpriteBatchNode batchNodeWithFile:@"atlas1.png"];
[sprite setTexture:[bar texture]];
[bar addChild: sprite]; // assert error here

Cocos2d-js____22种特效

常见的22种特效点击打开链接

效果是一种特殊种类的行为。它不是修改常规的属性，比如透明度，位置，旋转或者变形，而是修改一种新的属性，网格属性。

网格属性就像是一个个交叉形成的一系列的矩形。

任何CCNode对象（Layer，Scene，Sprite等等）都具有这种特殊的属性，你可以通过移动他们的顶点来变换这些网格。

有两种类型的网格：平铺的网格和非平铺的网格。他们两者的区别是平铺的网格由单个的网格组成，而非平铺的网格是由顶点组成。

如下是一个涟漪3D动作，就是用了Grid3D（非平铺网格）：

如下是一个渐变动作，用了TiledGrid3D（平铺网格）：

二、那么我们如何用他们呢？

和其他的动作一样，它也是用runAction函数来执行，比如：

// 创建一个精灵
CCSprite* grossini = CCSprite::create("grossini.png");
grossini->runAction(ccliquid::create(4,20,ccg(10,153)">10),153)">5));

Liquid：像一些其他的网格动作一样可以接收一些参数。你可以通过调整网格的大小来调整效果的质量。但是也暗示着将会有更少的FPS。

这种效果是间隔刷新的动作，你能够把它跟其他动作等同处理。例如：

如下就是一系列现有的Grid3D动作（非网格化）：

如下是一系列现有的TiledGrid3D动作（网格化的）：

CCShaky3D

作用：创建一个3d晃动的特效

参数1：晃动的范围

参数2：是否有z轴晃动

参数3： 网格大小

参数4：特效持续的时间

CCActionInterval * shaky3D= CCShaky3D::create(15,false,ccg(15,10),4);

sp->runAction(shaky3D);

CCShakyTiles3D

作用：创建一个3d瓷砖晃动的特效

// 参数1：晃动的范围

// 参数2：是否有z轴晃动

// 参数3： 网格大小

// 参数4：特效持续的时间

CCActionInterval * shakyTiles3D = CCShakyTiles3D::create(15,true,4);

sp->runAction(shakyTiles3D);

ccwaves

创建一个波动特效

参数1：波动的速率

参数2：振幅

参数3:水平波动

参数4：垂直波动

参数5：网格大小

参数6：特效持续时间

CCActionInterval * waves = ccwaves::create(10,20,ccg(16,12),4);

sp->runAction(waves);

ccwaves3D

// 创建一个3D波动特效

// 参数1：波动的速率

// 参数2：振幅

// 参数3：网格大小

// 参数4：特效持续时间

CCActionInterval * waves3d= ccwaves3D::create(10,4);

sp->runAction(waves3d);

ccwavesTiles3D

// 创建一个3D瓷砖波动特效

// 参数1：波动的速率

// 参数2：振幅

// 参数3：网格大小

// 参数4：特效持续时间

CCActionInterval * wavesTiles3D = ccwavesTiles3D::create(10,4);

sp->runAction(wavesTiles3D);

CCFlipX3D

作用：x轴3D反转特效

参数：特效持续的时间

CCActionInterval *flipX3D= CCFlipX3D::create(4);

sp->runAction(flipX3D);

CCFlipY3D

// 作用：Y轴3D反转特效

// 参数：特效持续的时间

CCActionInterval * flipY3D = CCFlipY3D::create(4);

sp->runAction(flipY3D);

cclens3D

作用： 凸镜特效

参数1：凸镜中心点

参数2：凸镜半径

参数3：网格大小

参数4：网格持续时间

CCActionInterval * lens3D= cclens3D::create(CCPointMake(size.width/2,size.height/2),240,4);

sp->runAction(lens3D);

CCRipple3D

作用：水波特效

参数1：起始位子

参数2：半径

参数3：速率

参数4：振幅

参数5：网格大小

参数6：特效持续的时间

CCActionInterval * ripple3D= CCRipple3D::create(CCPointMake(size.width/2,4,160,4);

sp->runAction(ripple3D);

ccliquid

作用：液体特效

参数1：速率

参数2：振幅

参数3：网格大小

参数4：特效持续时间

CCActionInterval * liquid = ccliquid::create(4,4);

sp->runAction(liquid);

CCTwirl

作用：扭曲旋转特效

参数1：扭曲旋转中心点

参数2：扭曲旋转的次数

参数3：振幅

参数4：网格大小

参数5：特效持续时间

CCActionInterval * twirl = CCTwirl::create(CCPointMake(size.width/2,2,2.5f,ccg(12,8),3);

sp->runAction(twirl);

CCShuffleTiles

作用：瓷砖的洗牌特效

参数1：随机数

参数2：网格大小

参数3：特效持续的时间

CCActionInterval *shuffleTiles = CCShuffleTiles::create(16,2);

sp->runAction(shuffleTiles);

CCShatteredTiles3D

作用：破碎的3D瓷砖特效

参数1：范围

参数2：是否开启z轴

参数3：网格大小

参数4：特效持续的时间

CCActionInterval * shatteredTiles3D= CCShatteredTiles3D::create(25,4);

sp->runAction(shatteredTiles3D);

CCFadeOutTRTiles

作用：部落格效果 ， 从左下角到右下角

参数1：网格大小

参数2：特效持续的时间

CCActionInterval * fadeOutTRTiles = CCFadeOutTRTiles::create(ccg(16,3);

sp->runAction(fadeOutTRTiles);

CCFadeOutBLTiles

// 作用：部落格效果 ， 从右下角到左下角

// 参数1：网格大小

// 参数2：特效持续的时间

CCActionInterval * fadeOutBLTiles = CCFadeOutBLTiles::create(ccg(16,3);

sp->runAction(fadeOutBLTiles);

CCFadeOutUpTiles

作用：折叠效果 从下到上

// 参数1：网格大小

// 参数2：特效持续的时间

CCActionInterval * fadeOutUpTiles = CCFadeOutUpTiles::create(ccg(16,3);

sp->runAction(fadeOutUpTiles);

CCFadeOutDownTiles

// 作用：折叠效果 从上到下

// 参数1：网格大小

// 参数2：特效持续的时间

CCActionInterval * fadeOutDownTiles = CCFadeOutDownTiles::create(ccg(16,3);

sp->runAction(fadeOutDownTiles);

CCTurnOffTiles

作用：方块消失特效

// 参数1：网格大小

// 参数2：特效持续的时间

CCActionInterval * turnOffTiles = CCTurnOffTiles::create(ccg(16,3);

sp->runAction(turnOffTiles);

CCJumpTiles3D

作用：跳动的方格特效

参数1：跳动的次数

参数2：网格的大小

参数3：特效持续的时间

CCActionInterval * jumpTiles3D = CCJumpTiles3D::create(1,30,2);

sp->runAction(jumpTiles3D);

CCSplitRows

作用：分多行消失特效

参数1：行数

参数2：特效持续的时间

CCActionInterval *splitRows= CCSplitRows::create(20,2);

sp->runAction(splitRows);

CCSplitCols

// 作用：分多列消失特效

// 参数1：列数

// 参数2：特效持续的时间

CCActionInterval * splitCols = CCSplitCols::create(20,2);

sp->runAction(splitCols);

CCPageTurn3D

作用：3D翻页特效

参数1：网格大小

参数2：特效持续的时间

CCActionInterval * pageTurn3D = CCPageTurn3D::create(ccg(15,3);

sp->runAction(pageTurn3D);

return true;

}

Cocos2d-JS____CocosDenshion引擎

点击打开链接

Cocos2d-JS提供了一个音频CocosDenshion引擎。具体使用的API是cc.AudioEngine。cc.AudioEngine有几个常用的函数：

playMusic(url,loop)。播放背景音乐，参数url是播放文件的路径，参数loop控制是否循环播放，缺省情况下false。

stopMusic()。停止播放背景音乐。

pauseMusic()。暂停播放背景音乐。

resumeMusic ()。继续播放背景音乐。

isMusicPlaying()。判断背景音乐是否在播放。

playEffect (url,loop)。播放音效，参数同playMusic函数。

pauseEffect(audioID)。暂停播放音效，参数audioID是playEffect函数返回ID。

pauseAllEffects ()。暂停所有播放音效。

resumeEffect (audioID)。继续播放音效，参数audioID是playEffect函数返回ID。

resumeAllEffects ()。继续播放所有音效。

stopEffect(audioID)。停止播放音效，参数audioID是playEffect函数返回ID。

stopAllEffects ()。停止所有播放音效。

音频文件的预处理

无论是播放背景音乐还是音效在播放之前进行预处理是有必要的。如果不进预处理，则会发现在第一次播放这个音频文件时候感觉很“卡”，用户体验不好。Cocos2d-JS中提供了资源文件的预处理功能。

通过模板生成的Cocos2d-JS工程中有一个main.js，它的内容如下：

其中cc.LoaderScene.preload函数可以预处理一些资源，其中g_resources是资源文件集合变量，它是在resource.js文件中定义的，resource.js文件的内容如下：

上述代码第③行定义了资源集合变量g_resources，其中的第④行的for循环是将背景音乐资源文件添加到g_resources资源集合变量中。注意为了防止硬编码，我们需要在res变量中添加资源别名的声明见代码第①行和第②行。

通过的上述设置游戏应用在运行的时候加载所有资源文件，包括图片、声音、属性列表文件（plist）、字体文件（fnt）、瓦片地图文件（tmx）等。

播放背景音乐

背景音乐的播放与停止实例代码如下：

其中cc.audioEngine是cc.AudioEngine类创建的对象。

背景音乐的播放代码放置到什么地方比较适合呢？例如：在Setting场景中，主要代码如下：

关于播放背景音乐，理论上我们是可以将播放代码cc.audioEngine.playMusic(res.bgMusicSynth_mp3,true)放置到三个位置（代码中的①、②、③）。下面我们分别分析一下它们还有什么不同。

1、代码放到第①行

代码放到第①行（即在ctor构造函数），如果前面场景中没有调用背景音乐停止语句，则可以正常播放背景音乐。但是如果前面场景层HelloWorldLayer onExit函数有调用背景音乐停止语句，那么会出现背景音乐播放几秒钟后停止。

为了解释这个现象，我们可以参考一下多场景切换生命周期的相关内容。使用pushScene函数从实现HelloWorld场景进入Setting场景，生命周期函数调用顺序如下图所示。

生命周期事件顺序

从图中可见，HelloWorldLayer onExit调用是在SettingLayer init(ctor构造函数)之后，这样当我们在SettingLayer init中开始播放背景音乐后，过一会调用HelloWorldLayer onExit停止背景音乐播放，这样问题就出现了。

注意 无论播放和停止的是否是同一个文件，都会出现个问题。

2、代码放到第②行

代码放到第②行（即在SettingLayer onEnter函数），如果前面场景中没有调用背景音乐停止语句，则可以正常播放背景音乐。如果前面的场景层HelloWorldLayer onExit函数有背景音乐停止语句，也会出现背景音乐播放几秒钟后停止。原因与代码放到第①行情况一样。

3、代码放到第③行

我们推荐代码放到第③行代码位置，因为onEnterTransitionDidFinish函数是在进入层而且过渡动画结束时候调用，代码放到这里不用考虑中前面场景是否有调用背景音乐停止语句。而且用户也不会先听到声音，后出现界面现象。

综上所述，是否能够成功播放背景音乐，前面场景是否有调用背景音乐停止语句有关，也与当前场景中播放代码在哪个函数里有关。如果前面场景没有调用背景音乐停止语句，问题也就简单了，我们可以将播放代码放置在代码①、②、③任何一处。但是如果前面场景调用背景音乐停止语句，在onEnterTransitionDidFinish函数播放背景音乐会更好一些。

停止播放背景音乐

停止背景音乐播放代码放置到什么地方比较适合呢？例如：在HelloWorld场景中，主要代码如下：

Cocos2d-js_____cc.Loader

概述

原来的cc.Loader被改造为一个单例cc.loader，采用了插件机制设计，让loader做更纯粹的事。

各种资源类型的loader可以在外部注册进来，而不是直接将所有的代码杂揉在cc.Loader中，更好的方便管理以及用户自定义loader的创建。

cc.loader中包含了一些网络资源获取的基本api，例如加载js、加载image等。

API描述

（注：以下描述中，全路径的意思为 "资源的根路径" + "资源路径"，
例如设置图片资源根路径(cc.loader.resPath)为"res"，图片资源路径为"a.png"，
那么全路径为"res/a.png"，非全路径为"a.png"。）

resPath

资源的根路径（音频资源除外）。

audioPath

音频资源的根路径。

getXMLHttpRequest

获取XMLHttpRequest对象。

loadJs

加载js文件。

参数：
url     资源路径（注意，必须是全路径）
cb      回调函数

返回值： 无

• 用法1：

• 用法2：

load

加载资源的入口api。相当于原来的cc.Loader.preload。

var res = ["res/a.png","res/a.plist","audio/b.mp3"]; var testTarget = { name : "the name is testTarget",trigger : function(){...},cb : function(err){...} }; var option = { trigger : testTarget.trigger,triggerTarget : testTarget,cbTarget : testTarget } //用法1： cc.loader.load(res,option,function(err){ if(err) return console.log("load Failed"); console.log(this.name);//the name is testTarget }); //用法2： cc.loader.load(res,function(err){ if(err) return console.log("load Failed"); }); //用法3： option.cb = testTarget.cb; cc.loader.load(res,option); //用法4： cc.loader.load(res);

今天的关于Cocos2d-js_____Sprite 和 SpriteBatchNode的分享已经结束，谢谢您的关注，如果想了解更多关于cocos2d-iphone – Cocos2d的CCSpriteBatchNode抱怨不同的纹理ID、Cocos2d-js____22种特效、Cocos2d-JS____CocosDenshion引擎、Cocos2d-js_____cc.Loader的相关知识，请在本站进行查询。