cocos2d-x学习笔记(16)--spritesheet(精灵表单)

原创 2012年08月25日 15:08:45

cocos2d-x学习笔记(16)--spritesheet(精灵表单)

本文出自http://www.wenbanana.com稻草人博客,欢迎访问!

在讲这次的内容前,我们需要做一些“课前”准备工作;

首先是说说sprintf函数,定义如下:

int sprintf(char* buffer, const char* format[argument].......);

使用方法:

......

char str[20];

sprintf(str, "player%d.png", 1);

.............

这样图片player.png的名称就被复制到str字符串中,以后在调用图片资源时,就可以直接使用str。

然后是讲讲cocos2d-x中几个类的继承关系,避免以后大家混淆了使用:

这两个类非常地相似,但是功能上还是有些区别的:

CCAnimation是用于将一些的sprite对象载入其中,其实就是将一帧帧的图片放在一起,形成一个连贯的动作;

CCAnimate就是赋予sprite(人物角色)对象CCAnimation动作。

两者可以用下面一段代码来说明:

//animate action  
void ActionAnimate::onEnter()  
{  
    BasicActions::onEnter();  
  
    CCAnimation* animation = CCAnimation::animation();  
    char frameName[100] = {0};  
 
    for(int i = 1; i<=5; i++)  
    {  
        sprintf(frameName, "player%d.png", i);  
        animation->addFrameWithFileName(frameName);  
    }  
  
    CCActionInterval* action = CCAnimate::actionWithDuration(3,animation, false);  
    m_player->runAction(action);  
  
} 

最后一点,因为这次是要用到spritesheet的知识,所以事先向大家介绍一个图片编辑软件Zwoptex,flash版下载地址:http://zwopple.com/zwoptex/static/downloads/zwoptex-flashversion.zip

有了这个软件就可以很方便地创建.plist文件。

下面是说说使用方法:

(1)首先是将压缩包解压,然后打开文件夹些的Zwoptex.html网页文件,弹出如下界面:

(2)然后点击File选择import images,这里我使用的是在网上别人事先做好的spritesheet,http://dl.vmall.com/c0ceul037s,原文链接:

http://www.raywenderlich.com/1271/how-to-use-animations-and-sprite-sheets-in-cocos2d

将8张bear图片加载到工程中,一开始8张图片是叠在一起的,不过不要紧,接下来就是要展开它们。显示选Modify选项,选择Canvas width,选择512px,

接着在选Arrange选择By Name&Height。最终8张图片被展开:

(3)选File按钮,选择Export Texture,并命名为AnimBea,在选Export Coordinates到处.plist文件,并命名为AnimBear,注意两者要相同名称,后面会解释原因。

现在开始,就进入写代码阶段了:

step1:创建cocos2d-x工程,并命名为animation;

step2:这里我直接修改了HelloWorldScene.cpp中的init函数代码:

注明:下面的内容大部分参考了网上的一些文章,原文出处:

http://www.cnblogs.com/fengyun1989/archive/2012/05/08/2490561.htmlhttp://www.cnblogs.com/zilongshanren/archive/2011/04/11/2012770.html

bool HelloWorld::init()
{
	//////////////////////////////
	// 1. super init first
	if ( !CCLayer::init() )
	{
		return false;
	}

	/////////////////////////////
	// 2. add a menu item with "X" image, which is clicked to quit the program
	//    you may modify it.

	// add a "close" icon to exit the progress. it's an autorelease object
	CCMenuItemImage *pCloseItem = CCMenuItemImage::itemFromNormalImage(
										"CloseNormal.png",
										"CloseSelected.png",
										this,
										menu_selector(HelloWorld::menuCloseCallback) );
	pCloseItem->setPosition( ccp(CCDirector::sharedDirector()->getWinSize().width - 20, 20) );

	// create menu, it's an autorelease object
	CCMenu* pMenu = CCMenu::menuWithItems(pCloseItem, NULL);
	pMenu->setPosition( CCPointZero );
	this->addChild(pMenu, 1);


	/************************************************************************/
	/* add animation                                                                     */
	/************************************************************************/
	CCSize size = CCDirector::sharedDirector()->getWinSize();


	CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("AnimBear.plist");
	CCSpriteBatchNode* spriteSheet = CCSpriteBatchNode::batchNodeWithFile("AnimBear.png");
	addChild(spriteSheet);

	CCMutableArray<CCSpriteFrame*> *walkAnimFrames = new CCMutableArray<CCSpriteFrame*>;
	char str[20];
   for(int i = 1; i <= 8; i++)
	{
		sprintf(str, "bear%d.png", i);
		walkAnimFrames->addObject(CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName(str));
	}
	CCAnimation * animation = CCAnimation::animationWithFrames(walkAnimFrames, 0.1f);

	CCSprite* bear = CCSprite::spriteWithSpriteFrameName("bear1.png");
	//注意这里的bear1.png是在缓存中命名的图片名称,不是Resources文件夹下的bear1.png图片
	bear->setPosition(ccp(size.width / 2, size.height / 2));
	CCActionInterval* walkAction = CCRepeatForever::actionWithAction(CCAnimate::actionWithAnimation(animation, false));
	bear->runAction(walkAction);
	spriteSheet->addChild(bear);

	/**************end of adding code*********************/
	return true;
}

(1)缓冲sprite帧和纹理

CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile(AnimBear.plist);

首先,调用CCSpriteFrameCache的addSpriteFramesWithFile方法,然后把Zwoptex生成的plist文件当作参数传进去。这个方法做了以下几件事:

  • 寻找工程目录下面和输入的参数名字一样,但是后缀是.png的图片文件。然后把这个文件加入到共享的CCTextureCache中。(这我们这个例子中,就是加载AnimBear.png,由于XNA工程的AssetName的问题,两个一样名字的文件会发生冲突(这个与文件后缀无关),所以把AnimBear.png文件放在了下一级目录中。)
  • 解析plist文件,追踪所有的sprite在spritesheet中的位置,内部使用CCSpriteFrame对象来追踪这些信息。

(2) 创建一个精灵批处理结点

CCSpriteBatchNode* spriteSheet = CCSpriteBatchNode::batchNodeWithFile("AnimBear.png");

接下来,创建CCSpriteBatchNode对象,把spritesheet当作参数传进去。spritesheet在cocos2d中的工作原理如下:

  • 你创建一个CCSpriteBatchNode对象,通过传递一个包含所有sprite的spritesheet的名字作为参数,并把它加入到当前场景之中。
  • 接下来,你从spritesheet中创建的任何sprite,你应该把它当作CCSpriteBatchNode的一个孩子加进去。只要sprite包含在spritesheet中,那么就没问题,否则会出错。
  • CCSpriteBatchNode可以智能地遍历它的所有的孩子结点,并通过一次spriteBatch的呼叫来渲染这些孩子,而不是以前每个sprite都需要一个spriteBatch呼叫,这样渲染速度就会更快。

(3)收集帧列表

CCMutableArray<CCSpriteFrame*> *walkAnimFrames = new CCMutableArray<CCSpriteFrame*>;
char str[20];
for(int i = 1; i <= 8; i++)
{
sprintf(str, "bear%d.png", i);
walkAnimFrames->addObject(CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName(str));
}

为了创建一系列的动画帧,我们简单地遍历我们的图片名字(它们是按照Bear1.png-->Bear8.png的方式命名的),然后使用共享的CCSpriteFrameCache来获得每一个动画帧。记住,它们已经在缓存里了,因为我们前面调用了addSpriteFramesWithFile方法。

(4)创建动画对象

CCAnimation * animation = CCAnimation::animationWithFrames(walkAnimFrames, 0.1f);

接下来,我们通过传入sprite帧列表来创建一个CCAnimation对象,并且指定动画播放的速度。我们使用0.1来指定每个动画帧之间的时间间隔。

(5)创建sprite并且让它运行动画

CCSprite* bear = CCSprite::spriteWithSpriteFrameName("bear1.png");
//注意这里的bear1.png是在缓存中命名的图片名称,不是Resources文件夹下的bear1.png图片
bear->setPosition(ccp(size.width / 2, size.height / 2));
CCActionInterval* walkAction = CCRepeatForever::actionWithAction(CCAnimate::actionWithAnimation(animation, false));
bear->runAction(walkAction);
spriteSheet->addChild(bear);

我们首先通过spriteframe来创建一个sprite,并把它放在屏幕中间。然后,生成CCAnimationAction,并复制给wlakAction,最后让熊来运行这个action

  最后,我们把熊加个场景中--把它当作spritesheet的孩子加到spritesheet中去。注意,如果在这里我们没有把它加到spritsheet中,而是加到当前层里面的话。那么我们将得不到spritesheet为我们带来的性能提升!!!

step3:编译运行程序,可以看到一只熊在屏幕中央不停地走动;



源代码下载地址:http://download.csdn.net/download/wen294299195/4525830

Cocos2d-x3.2 Sprite精灵类的创建与设置

//3.0版本以后,sharedXXX方法改成了getInstance方法 //Director::getInstance()->getVisibleSize() ? ...
  • imxiangzi
  • imxiangzi
  • 2016年02月02日 10:25
  • 1255

cocos2d-x 精灵的创建和基本使用

在cocos2d-x中,精灵可以说是一个最重要的组成元素,它代表游戏中一个最小的可见单位。同时也是CCNode一个最为灵活的子类,因为它可以通过装载一个平面纹理,从而具有丰富的表现力。       ...
  • decajes
  • decajes
  • 2014年05月12日 17:26
  • 3359

Cocos2d-JS中创建Sprite精灵类

精灵类是cc.Sprite,它的类图如下图所示。cc.Sprite类直接继承了cc.Node类,具有cc.Node基本特征。 创建Sprite精灵对象 创建精灵对象可以使用构造函数...
  • alex8046
  • alex8046
  • 2015年04月29日 18:10
  • 2295

cocos2d-x学习笔记(16)--spritesheet(精灵表单).rar

  • 2012年08月25日 22:53
  • 558KB
  • 下载

Cocos2D-X2.2.3学习笔记8(处理精灵单击、双击和三连击事件)

  • 2014年05月20日 16:01
  • 599KB
  • 下载

Cocos2D-X开发学习笔记-渲染框架之精灵类的使用示例

  • 2013年07月23日 22:47
  • 786KB
  • 下载

cocos2d里面使用精灵表单(spritesheet)的好处

免责声明:本博客的所有原创文章,均有time_anime精心写作,供学习交流使用,切勿进行商业传播。同时,转载请不要移除本声明! SpriteSheet精灵表单:每个游戏开发者都应该知道...
  • time_anime
  • time_anime
  • 2012年07月17日 21:10
  • 1856

cocos2d-x初探学习笔记(21)--精灵类

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 在游戏中还有一个比较重要的元素,那就是精...
  • bill_man
  • bill_man
  • 2012年02月07日 21:38
  • 14128

cocos2d-x学习笔记(五)仿真树叶飘落效果的实现(精灵旋转、翻转、钟摆运动等综合运用)

ufolr原创,转载请注明: 转载自ufolr的博客 原文连接:http://blog.csdn.net/ufolr/article/details/7624851      ...
  • ufolr
  • ufolr
  • 2012年07月22日 23:19
  • 12231

Cocos2d-x学习笔记(八)实例——精灵Action

【关于精灵Action】 精灵的动作分为瞬时动作和延时动作,瞬时动作中间不产生任何动画效果,而延时动作则会产生很多的动画效果。动画效果主要还是要靠延时动作类CCActionInterval的子类来实...
  • ll_gg_tt
  • ll_gg_tt
  • 2013年08月16日 09:25
  • 736
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:cocos2d-x学习笔记(16)--spritesheet(精灵表单)
举报原因:
原因补充:

(最多只允许输入30个字)