【Cocos2d-x3.0学习笔记 08】精灵来了

分类：Cocos2d-x作者：编程之家用户

1.大量绘制精灵

bool HelloWorld::init(){
	if(!Layer::init()){
		return false;
	}
	//创建一堆的精灵
	for(int i=0;i<20000;i++){
		Sprite* s = Sprite::create("sprite.png");
		s->setPosition(Point(CCRANDOM_0_1()*480,120+CCRANDOM_0_1()*300));
		this->addChild(s);
	}
}
查看调试信息
  • 第一行的数字表示顶点数量；
  • 第二行的数字表示渲染批次，意思就是，要执行多少次渲染；
  • 第三行左边的数字是帧率，右边的是每一帧所需的时间；

在cocos2d-x 2.0的时候，像这样创建这么多精灵的话应该已经卡掉了吧；

然后在3.0，cocos2d-x自己做了优化，会自动处理这样的情况，叫做Auto-batching;

2.3.0的新功能Auto-batching

要Auto-batching生效，需要满足的条件（好吧，看不懂啊）

  • 需要确保精灵对象拥有相同的TextureId（精灵表单spritesheet）
  • 确保他们都是用相同的材质和混合功能
  • 不再把精灵添加SpriteBatchNode

一般情况下，我们用同一张图片，并没有做特殊处理，就能满足Auto-batching的条件，不需要我们去做处理

3.Auto-batching的一些问题

bool HelloWorld::init(){
	if(!Layer::init()){
		return false;
	}
	//创建一堆的精灵
	for(int i=0;i<20000;i++){
		Sprite* s = Sprite::create("sprite.png");
		s->setPosition(Point(CCRANDOM_0_1()*480,120+CCRANDOM_0_1()*300));
		this->addChild(s);

		s = Sprite::create("sprite1.png");
		s->setPosition(Point(CCRANDOM_0_1()*480,120+CCRANDOM_0_1()*300));
		this->addChild(s);
	}
}
循环创建了两个不同的精灵，运行的结果和预期的不同，Auto-batching没有生效

Auto-batching的另外一个限制条件，对于不连续的渲染对象，是无法在一个渲染批次里进行渲染的。

怎样才算是“连续的对象”，最简单的解释就是：

  • 如果节点具有相同的globalZOrder值，则是连续的；
  • 否则，如果节点具有相同的localZOrder值，则是连续的；
  • 否则，如果节点具有相同的orderOfArrival值，则是连续的；
  • 连续的节点还必须使用相同的纹理，就是相同的图片咯。
bool HelloWorld::init(){
	if(!Layer::init()){
		return false;
	}
	//创建一堆的精灵
	for(int i=0;i<20000;i++){
		Sprite* s = Sprite::create("sprite.png");
		s->setPosition(Point(CCRANDOM_0_1()*480,120+CCRANDOM_0_1()*300));
		this->addChild(s);
		s->setGlobalZOrder(1);

		s = Sprite::create("sprite1.png");
		s->setPosition(Point(CCRANDOM_0_1()*480,120+CCRANDOM_0_1()*300));
		this->addChild(s);
		s->setGlobalZOrder(2);
	}
}

给每个精灵设置了globalZOrder属性，globalZOrder对排序有了影响，，使得所有的sprite精灵都是连续的，sprite1也是连续的

这就满足了Auto-batching的条件了。

影响精灵排序的优先级：globalZOrder优先于LocalZOrder，localZOrder优先于orderOfArrival


4.深入了解Auto-batching，嗯，我还看不懂，之后再回过来看


5.一次渲染，SpriteBatchNode的特别之处

SpriteBatchNode如果包含了子节点，那么所有的子节点在绘制的时候只会调用一次OpenGL的渲染。只有使用同一纹理的精灵才能添加到SpriteBatchNode上，如果精灵没有添加到SpriteBatchNode上，那么每一个精灵的绘制都会调用一次OpenGL的渲染（当然咯，满足Auto-batching条件的除外咯）。

bool HelloWorld::init(){
	if(!Layer::init()){
		return false;
	}
	//创建批次渲染对象，并添加到场景中
	SpriteBatchNode* batchNode = SpriteBatchNode::create("sprite.png");
	this->addChild(batchNode);

	//创建精灵，加入到批次渲染对象中
	for(int i=0;i<999;i++){
		Sprite* s = Sprite::cretae("sprite.png");
		s->setPosition(Point(CCRANDOM_0_1()*480,120+CCRANDOM_0_1()*200));

		batchNode->addChild(s);
	}
	return true;
}
这边是先将SpriteBatchNode加入到场景中，再将精灵加到SpriteBatchNode中；
当然，SpriteBatchNode也是有限制的，并需把精灵添加到SpriteBatchNode上，并且只允许添加精灵对象，其他的对象是不允许添加的。

6.Texture简单介绍---纹理

使用相同的图片或者使用相同图片的一部分具有相同的纹理

bool HelloWorld::init(){
<span style="white-space:pre">	</span>if(!Layer::init()){
<span style="white-space:pre">		</span>return false;
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>//截取图片的一部分来创建精灵
<span style="white-space:pre">	</span>Sprite* s1 = Sprite::createWithSpriteFrame(SpriteFrame::create("sprite.png",Rect(0,60,50)));
<span style="white-space:pre">	</span>Spritr* s2 = Sprite::create("sprite.png");
<span style="white-space:pre">	</span>s1->setPosition(Point(100,200));
<span style="white-space:pre">	</span>s2->setPosition(Point(300,200));
<span style="white-space:pre">	</span>this->addChild(s1);
<span style="white-space:pre">	</span>this->addChild(s2);


<span style="white-space:pre">	</span>//获取两个精灵的纹理对象,通过控制台观察，发现两个精灵对象的值是一样的
<span style="white-space:pre">	</span>Texture2D* t1 = s1->getTexture();
<span style="white-space:pre">	</span>Texture2d* t2 = s2->getTexture();
<span style="white-space:pre">	</span>
<span style="white-space:pre">	</span>return true;
}

7.TexturePacker工具

当需创建多个精灵的时候，图片不一样，纹理就没有办法相同的，那就不能使用Auto-batching或者SpriteBatchNode了。

这个时候，我们就要将多个图片拼接的一个图片中了。

当一张图片中拥有多个精灵时。

bool HelloWorld::init(){
	if(!Layer::init()){
		return false;
	}
	//截取图片的一部分来创建精灵
	Sprite* s1 = Sprite::createWithSpriteFrame("sprites.png",50));//精灵一
	Spritr* s2 = Sprite::createWithSpriteFrame("sprites.png",Rect(30,30,50));//精灵二
	s1->setPosition(Point(100,200));
	s2->setPosition(Point(300,200));
	this->addChild(s1);
	this->addChild(s2);
	
	return true;
}
以上是手动计算精灵在图中的位置，不过相对来说是比较麻烦的

接下来，我们就要使用到工具了

TexturePacker图片打包工具：http://www.codeandweb.com/texturepacker

不过打开来相对是比较慢的，还有，好像官网是不允许下载旧版本的，要输入什么东西

TexturePacker一些选项的作用

  • Data Format：生成配置文件的格式类型，不同引擎支持不同的格式
  • Texture Format：生成的图片的格式
  • Image Format：图片色彩模式，木头使用的是RGBA4444
  • Dithering：抖动显示，如果我们选择的图片色彩模式比较低（颜色数较少）导致图片失真严重，可以通过抖动显示来缓解失真程度
  • Size constraints：图片打包都是按2的次方的
  • Allow rotation：是否允许图片旋转，旋转在某些时候可以缩小图片
  • Trim：是否允许把图片透明部分去掉

点击“Publish”按钮，导出打包后的文件"*.plist"和"*.png"

8.加载打包后的图片

既然用TexturePacker打包好了图片，我们当然就要使用它了

将两个文件复制到resources文件夹下

bool HelloWorld::init(){
	if(!Layer::init()){
		return false;
	}
	//将图片添加到精灵缓存池
	SpriteFrameCache* frameCache = SpriteFrameCache::getInstance();
	frameCache->addSpriteFramesWithFile("sprites.plist","sprites.png");

	//用小图片的名字即可创建精灵,即使是旋转了的图片，这样创建出来也是正常的
	Sprite* s = Sprite::createWithSpriteName("sprite1.png");
	s->setPosition(Point(100,200));
	This->addChild(s);
	
	return true;
}

创建精灵时使用的是打包前图片的名字，plist文件里记录了各个图片在大图片中的位置和大小

9.动画Animation

Animate* HelloWorld::createAnimate1(){
	//将15张动作的图片放到resources文件夹中
	int sNum = 15;//动作图片的数量
	SpriteFrame* frame = NULL;//每个图片为一个SpriteFrame对象
	Vector<SpriteFrame*> frameVec;

	//用一个列表保存所有SpriteFrame对象
	for(int i=1;i<=sNum;i++){
		frame = SpriteFrame::create(StringUtils::format("run%d.png",i),130,130));
		frameVec.pushBack(frame);
	}
	//使用SpriteFrame列表创建动画对象
	Animation* animation = Animation::createWithSpriteFrames(frameVec);
	animation->setLoops(-1);//循环次数，-1表示无限循环
	animation->setDelayPerUnit(0.1f);//设置每一帧播放延迟

	//将动画包装成一个动作
	Animate* action = Animate::create(animation);
	return action;
}

bool HelloWorld::init(){
	if(!Layer::init()){
		return false;
	}
	Sprite* sprite = Sprite::create("run1.png");
	sprite->setPosition(Point(200,200));
	sprite->runAction(createAnimate1);//直接执行就可以了
}
在没有打包图片的时候，需要指定图片的大小，接下来我们就用打包后的图片来创建动画 
Animate* HelloWorld::createAnimate1(){
	//加载图片帧到缓存池
	SpriteFrameCache* frameCache = SpriteFrameCache::getInstance();
	frameCache.addSpriteFramesWithFile("boys.plist","boys.png");

	//将15张动作的图片放到resources文件夹中
	int sNum = 15;//动作图片的数量
	SpriteFrame* frame = NULL;//每个图片为一个SpriteFrame对象
	Vector<SpriteFrame*> frameVec;

	//用一个列表保存所有SpriteFrame对象
	for(int i=1;i<=sNum;i++){
		frame = frameCache->getSpriteFrameByName(StringUtils::format("run%d.png",i));
		frameVec.pushBack(frame);
	}
	//使用SpriteFrame列表创建动画对象
	Animation* animation = Animation::createWithSpriteFrames(frameVec);
	animation->setLoops(-1);//循环次数，-1表示无限循环
	animation->setDelayPerUnit(0.1f);//设置每一帧播放延迟

	//将动画包装成一个动作
	Animate* action = Animate::create(animation);
	return action;
}

10.创建动画的辅助类

AnimationUtil

头文件

#ifndef _ANIMATION_UTIL_H_
#define _ANIMATION_UTIL_H_
#include "cocos2d.h"
class AnimationUtil{
	static cocos2d::Animation* createWithStringFrameName(const char* name,float delay,int iLoops);
	static cocos2d::Animation* createWithStringFrameNameAndNum(const char* name,int num,int iLoops);
};

#endif
cpp 
#include "AnimationUtil.h"
USING_NS_CC;
//根据名字来创建
Animation* AnimationUtil::createWithStringFrameName(const char* name,int iLoops){
<span style="white-space:pre">	</span>SpriteFrameCache* frameCache = SpriteFrameCache::getInstance();
<span style="white-space:pre">	</span>Vector<SpriteFrame*> frameVec;
<span style="white-space:pre">	</span>SpriteFrame* frame = NULL;
<span style="white-space:pre">	</span>int index = 1;
<span style="white-space:pre">	</span>do{
<span style="white-space:pre">		</span>frame = frameCache->getSpriteFrameByName(StringUtils::format("%s%d.png",name,index++));
<span style="white-space:pre">		</span>if(frame == NULL){
<span style="white-space:pre">			</span>break;
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>frameVec.pushBack(frame);
<span style="white-space:pre">	</span>}while(true);


<span style="white-space:pre">	</span>Animation* animation = Animation::createWithSpriteFrames(frameVec);
<span style="white-space:pre">	</span>animation->setLoops(iLoops);
<span style="white-space:pre">	</span>animation->setRestoreOriginalFrame(true);
<span style="white-space:pre">	</span>animation->setDelayPerUnit(delay);


<span style="white-space:pre">	</span>return animation;
}
//根据名字和数量来创建
Animation* AnimationUtil::createWithStringFrameNameAndNum(const char* name,int iLoops){
<span style="white-space:pre">	</span>SpriteFrameCache* frameCache = SpriteFrameCache::getInstance();
<span style="white-space:pre">	</span>Vector<SpriteFrame*> frameVec;
<span style="white-space:pre">	</span>SpriteFrame* frame = NULL;
<span style="white-space:pre">	</span>int index = 1;
<span style="white-space:pre">	</span>for(int i = 1;i<=num;i++){
<span style="white-space:pre">		</span>frame = frameCache->getSpriteFrameByName(StringUtils::format("%s%d.png",index++));
<span style="white-space:pre">		</span>if(frame == NULL){
<span style="white-space:pre">			</span>break;
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>frameVec.pushBack(frame);
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>Animation* animation = Animation::createWithSpriteFrames(frameVec);
<span style="white-space:pre">	</span>animation->setLoops(iLoops);
<span style="white-space:pre">	</span>animation->setRestoreOriginalFrame(true);
<span style="white-space:pre">	</span>animation->setDelayPerUnit(delay);


<span style="white-space:pre">	</span>return animation;
}
使用方法 
SpriteFrameCache* frameCache = SpriteFrameCache::getInstance();
frameCache->addSpriteFramesWithFile("runs.plist","runs.png");

Animation* action = AnimationUtil::createWithStringFrameName("run",0.1f,-1);
sprite->runAction(Animate::create(action));

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

如何使用CCRenderTexture创建动态纹理 Cocos2d-x 2 1 4
    本文实践自 RayWenderlich、Ali Hafizji 的文章《How To Create Dynamic Textures with CCRenderTexture in Cocos2D 2.X》，文中使用Cocos2D，我在这里使用Cocos2D-x 2.1.4进行学习和移植。在这篇文章，将会学习到如何创建实时纹理、如何用Gimp创建无缝拼接纹
Cocos-code-ide使用入门学习
Cocos-code-ide使用入门学习地点：杭州滨江邮箱：appdevzw@163.com微信公众号：HopToad 欢迎转载，转载标注出处：http://blog.csdn.netotbaron/article/details/424343991.  软件准备 下载地址：http://cn.cocos2d-x.org/download 2.  简介2.1         引用C
Cocos2D-x-3.0 编译(Win7)
第一次開始用手游引擎挺激动！！！进入正题。下载资源1：从Cocos2D-x官网上下载，进入网页http://www.cocos2d-x.org/download，点击Cocos2d-x以下的Download  v3.0，保存到自定义的文件夹2：从python官网上下载。进入网页https://www.python.org/downloads/，我当前下载的是3.4.0（当前最新
Cocos2d-x 2 0 在Windows平台下的使用
    Cocos2d-x是一款强大的基于OpenGLES的跨平台游戏开发引擎，易学易用，支持多种智能移动平台。官网地址：http://cocos2d-x.org/当前版本：2.0    有很多的学习资料，在这里我只做为自己的笔记记录下来，错误之处还请指出。在VisualStudio2008平台的编译：1.下载当前稳
quick-cocos2d-x实例之挑战记忆极限设计文档
1.  来源 QuickV3sample项目中的2048样例游戏，以及最近《最强大脑》娱乐节目。将2048改造成一款挑战玩家对数字记忆的小游戏。邮箱：appdevzw@163.com微信公众号：HopToadAPK下载地址：http://download.csdn.net/detailotbaron/8446223源码下载地址：http://download.csdn.net/
Cocos2d-x 3 X CMake MinGW版本编译运行
   Cocos2d-x3.x已经支持使用CMake来进行构建了，这里尝试以QtCreatorIDE来进行CMake构建。Cocos2d-x3.X地址：https://github.com/cocos2d/cocos2d-x1.打开QtCreator，菜单栏→"打开文件或项目..."，打开cocos2d-x目录下的CMakeLists.txt文件；2.弹出CMake向导，如下图所示：设置
vs 2013 编译cocos2d-x-3.9
 下载地址：链接:https://pan.baidu.com/s/1IkQsMU6NoERAAQLcCUMcXQ提取码:p1pb下载完成后，解压进入build目录使用vs2013打开工程设置平台工具集，打开设置界面设置： 点击开始编译等待编译结束编译成功在build文件下会出现一个新文件夹Debug.win32，里面就是编译
cocos2d-x游戏开发系列教程-超级玛丽01-前言
分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！http://www.captainbed.net前言上次用象棋演示了cocos2dx的基本用法，但是对cocos2dx并没有作深入的讨论，这次以超级马里奥的源代码为线索，我们一起来学习超级马里奥的实
Cocos2d-x CCControlPotentiometer之圆形音量button及特效
1. 圆形音量button事实上作者的本意应该是叫做“电位计button”。可是我觉得它和我们的圆形音量button非常像，所以就这么叫它吧~先看效果：好了，不多解释，本篇到此为止。（旁白： 噗。就这样结束了？）啊才怪~我们来看看代码：[cpp] viewplaincopyprint?CCContro
Cocos2d-x入门教程二简单的静态显示对象
原文链接：http://www.cnblogs.com/physwf/archive/2013/04/26/3043912.html为了进一步深入学习贯彻Cocos2d，我们将自己写一个场景类，但我们不会走的太远，凡是都要循序渐进，哪怕只前进一点点，那也至少是前进了，总比贪多嚼不烂一头雾水的好。在上一节中我们建
cocos2d-x中CCScale9Sprite的另一种实现
2019独角兽企业重金招聘Python工程师标准>>>cocos2d2.0之后加入了一种九宫格的实现，主要作用是用来拉伸图片，这样的好处在于保留图片四个角不变形的同时，对图片中间部分进行拉伸，来满足一些控件的自适应（PS: 比如包括按钮，对话框，最直观的形象就是ios里的短信气泡了），这就要求图
Cocos2d-x v2.2.2版本+Win7+VS2010环境搭建
原文链接：http://www.cnblogs.com/linji/p/3599478.html1.环境和工具准备Win7VS2010/2012，至于2008v2版本之后似乎就不支持了。 2.安装pythonv.2.0版本之前是用vs模板创建工程的，到vs2.2之后就改用python创建了。到python官网下载版本2.7.5的，然后
Ubuntu14.04+eclipse下cocos2d-x3.0正式版环境的搭建
环境:ubuntu14.04adt-bundle-linux-x86_64android-ndk-r9d-linux-x86_64cocos2d-x-3.0正式版apache-ant1.9.3python2.7(ubuntu自带)加入环境变量exportANDROID_SDK_ROOT=/home/yangming/adt-bundle-linux/sdkexportPATH=${PATH}:/$ANDROID_SDK_ROOTools/export
分别基于WIN32 API界面编程和Cocos2d-x实现的两个版本FlappyBird游戏
1开发背景游戏程序设计涉及了学科中的各个方面，鉴于目的在于学习与进步，本游戏《FlappyBird》采用了两个不同的开发方式来开发本款游戏，一类直接采用win32底层API来实现，另一类采用当前火热的cocos2d-x游戏引擎来开发本游戏。2需求分析2.1数据分析本项目要开发的是一款游
Cocos2d-x 开发小记二：控件
原文链接：http://www.cnblogs.com/linji/p/3599912.html//纯色色块控件（锚点默认左下角）CCLayerColor*ccc=CCLayerColor::create(ccc4(255,0,0,128),200,100);//渐变色块控件CCLayerGradient*ccc=CCLayerGradient::create(ccc4(255,0,0,
Cocos2d-x 开发小记一：基本动作
原文链接：http://www.cnblogs.com/linji/p/3599488.html//载入一张图片CCSprite*leftDoor=CCSprite::create("loading/door.png");leftDoor->setAnchorPoint(ccp(1,0.5));//设置锚点为右边中心点leftDoor->setPosition(ccp(240,160));/
买Cocos2d-x视频课程送纸质图书
为了答谢广大学员对智捷课堂以及关老师的支持，现购买51CTO学院关老师的Cocos2d-x课程之一可以送智捷课堂编写图书一本（专题可以送3本）。一、Cocos2d-x课程列表：1、Cocos2d-x入门与提高视频教程__Part22、Cocos2d-x数据持久化与网络通信__Part33、Cocos2d-x架构设计与性能优化内存优
‎Cocos2d-x 学习笔记(11.10) Spawn
Spawn让多个action同时执行。Spawn有多种不同的create方法，最终都调用了createWithTwoActions(FiniteTimeAction*action1,FiniteTimeAction*action2)方法。createWithTwoActions调用initWithTwoActions方法：对两个action变量初始化：_one=action1;_two=action2;如果两个a
quick-cocos2d-x-develop资源打包环境安装
需要环境：php,luajit.昨天在cygwin上安装php和luajit环境，这真特么是一个坑。建议不要用虚拟环境安装打包环境，否则可能会出现各种莫名问题。折腾了一下午，最终将环境转向linux。其中，luajit的安装脚本已经在quick-cocos2d-x-develop/bin/中，直接luajit_install.sh即可。我的lin
Cocos2d-x 3.0心得01－图片载入与混合模式
v3.0相对v2.2来说，最引人注意的。应该是对触摸层级的优化。和lambda回调函数的引入（嗯嗯，不枉我改了那么多类名。话说，每次cocos2dx大更新。总要改掉一堆类名函数名）。这些特性应该有不少人研究了，所以今天说点跟图片有关的东西。v3.0在载入图片方面也有了非常大改变，仅仅只是
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot