红孩儿Cocos2d-x学习园地教学资料由 [红孩儿游戏编程教学组] 组织编写.版权所有,盗文必究!
如何使用拼合图播放一个序列帧动画
本节主讲:红孩儿
[注:本版使用Cocos2d-x 2.02版本]
我们知道,使用拼合图可以更节省内存,那如何使用拼合图播放一个序列帧动画呢?本节我们以HelloCpp为例来讲解一下。
第一步,我们要在将序列帧各帧图片合并成为拼合图。
我们使用“红孩儿纹理打包器1.1版本”来进行拼图制做,它具有使用方便,拼图率高的特点。
下载地址:http://download.csdn.net/detail/honghaier/4671677
我们以之前讲解的操作方法为例:
http://blog.csdn.net/honghaier/article/details/8117963
最后生成的文件为:
第二步,我们要将所用到的信息结构定义一下。
我们在HelloWorldScene.h中加入:
//二进制文件头信息
struct SPackFileHeader
{
int m_Version; //版本
char m_szBigTexName[64]; //大图名称
int m_nImageSize; //大图的大小
int m_nBlockNum; //图块数量
};
//二进制文件数据块
struct SPackNode
{
RECT m_Rect;//对应图块矩形
POINT m_OffsetPt;//中心点偏移
bool m_bRotated; //是否顺时针旋转度
};
这样我们就可以读取出拼图的相应纹理块了。
第三步,创建序列帧动画。
我们需要在HelloWorld的初始化中来创建这个序列帧动画:
bool HelloWorld::init()
{
//基类初始化
if ( !CCLayer::init() )
{
return false;
}
//取得可视区域的大小
CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
//取得左下角坐标
CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();
//创建拼图批次
CCSpriteBatchNode* pNewBatchNode = CCSpriteBatchNode::create("Big_0.png", 34 );
//读取二进制文件,将数据读取到容器中
this->addChild(pNewBatchNode,1);
//取得资源目录字符串
string szResPath(CCFileUtils::sharedFileUtils()->getResourceDirectory());
//结尾加上拼合图信息文件名称。
szResPath += "Big_0.blo";
//读取拼合图信息文件全路径名
FILE* hFile = fopen(szResPath.c_str(),"rb");
if(hFile)
{
//读取头信息
SPackFileHeader tFileHeader;
fread(&tFileHeader,sizeof(SPackFileHeader),1,hFile);
//读取每个纹理块信息
SPackNode tPackNode;
//创建精灵帧存放容器
CCArray* tSpriteFrameArray = CCArray::create();
//for循环进行读取相应数量的纹理块信息
for(int b = 0 ; b < tFileHeader.m_nBlockNum ; ++b)
{
fread(&tPackNode,sizeof(SPackNode),1,hFile);
//当前纹理块在图集纹理中的矩形位置。
CCRect tRect;
//创建精灵
if(tPackNode.m_bRotated)
{
//如果有旋转,宽高做一个调换。
tRect = CCRect(tPackNode.m_Rect.left,tPackNode.m_Rect.top,tPackNode.m_Rect.bottom-tPackNode.m_Rect.top,tPackNode.m_Rect.right-tPackNode.m_Rect.left);
}
else
{
tRect = CCRect(tPackNode.m_Rect.left,tPackNode.m_Rect.top,tPackNode.m_Rect.right-tPackNode.m_Rect.left,tPackNode.m_Rect.bottom-tPackNode.m_Rect.top);
}
//
CCPoint tOffset(0,0);
//设置纹理不进行抗锯齿模糊,像素精细
pNewBatchNode->getTexture()->setAliasTexParameters();
//设置从对应纹理块中读取出一个精灵帧
CCSpriteFrame* tpSpriteFrame = CCSpriteFrame::frameWithTexture(pNewBatchNode->getTexture(), tRect, tPackNode.m_bRotated, tOffset, tRect.size);
//将精灵帧放入容器。
tSpriteFrameArray->addObject(tpSpriteFrame);
}
从精灵帧容器创建一个序列帧动画。
CCAnimation* animation = CCAnimation::createWithSpriteFrames(tSpriteFrameArray,1.0f);
//设置每两帧间时间间隔为1秒。
animation->setDelayPerUnit(1.0f);
//设置动画结束后仍保留动画帧信息。
animation->setRestoreOriginalFrame(true);
//由这个动画信息创建一个序列帧动画。
CCAnimate* action = CCAnimate::create(animation);
//创建精灵。
CCSprite* pSprite = CCSprite::create();
//设置精灵位置。
pSprite->setPosition(ccp(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
//让演员演示这个动画。
pSprite->runAction(action);
this->addChild(pSprite, 0);
fclose(hFile);
}
return true;
}
运行后的效果如图示[自已用flash做的gif,大概表示个意思哈~]:
课后总结:
本节主要的关健是如何读取纹理块信息然后生成精灵帧和动画。
教学组介绍:
红孩儿游戏编程教学组:致力于游戏编程方面的教程编写,目前主要工作重心在Cocos2d-x方向,希望大家支持!
目前成员有:
红孩儿: 九年游戏程序开发经验,参与过多款游戏的开发并任职主程序。
Jivin: 在编程路上,以初学者身份慢慢爬行着。博客:http://blog.csdn.net/laijingyao881201
Jovi: 一年多的端游程序开发经验,初步接触cocos2dx引擎。正在开发一款引擎是cocos2dx的手游。
畏天命: 资深游戏策划,项目经理。参与设计多款iOS游戏是教程组内唯一的业余程序员
一年前开始接触C++及cocos2d-x
将讲解涉及cocos2d-x学习中容易遇到的初级问题,
适合零起点选手入门,博客: http://blog.csdn.net/jyzgo
同时也欢迎有精力有能力的朋友参与我们。
分享到:
相关推荐
很老的一个图片资源,能合成与拆分,但被各大论坛独占了,要钱,本人很不容易获得,所以免费放在这里,各位拿着吧。一定要谢谢我。哈哈
非常好用的序列图合成工具,自动裁剪,意见合成,可以设置水平,垂直,或多行。
一个用C#写的WinForm图片拼合程序,可以选择上下拼合和左右拼合
这是一个压缩包,包含了Opencv_Stitcher调用代码,PhotoShop脚本PhotoMerge插件和它相应的专利技术文档(含中英版),还包括了生成手动微调代码,所有的经过测试的拼合素材图片和拼合效果,最后附上我的全景拼合代码,...
ps图像拼合制作。ps图像拼合制作ps图像拼合制作
是一个多张单一图片拼合成一张整图,些工具主要适合2D游戏开发,对于资源为单张情况需要将整合为一张完整图这样方便管理,代码是自己因为工作需要写的,代码没有参考价值, 需要.NET 3.5 运行库, 在使用时请 一定...
从两侧向中间拼合的JavaScript图片切换效果.rar从两侧向中间拼合的JavaScript图片切换效果.rar从两侧向中间拼合的JavaScript图片切换效果.rar
一个老外编写的图像拼合小软件,与大家分享一下。 需要说明的是,该软件在使用时不支持中文路径~~
拼合透明度讲解
cad批量拼合图程序,可以把几张图拼到一起,Autocad2004可以用。
与其使用三个独立的图像,不如我们使用这种单个图像(”img_navsprites.gif”): 有了CSS,我们可以只显示我们需要的图像的一部分。 在下面的例子CSS指定显示 “img_navsprites.gif” 的图像的一部分: 实例 img....
拼合数据的python文件,将多行数据拼成1行。
CST CSS图片拼合定位工具
造景师是一款行业领先的虚拟现实制作工具,让您仅需花费2-5分钟即可轻松拼合一幅高质量的360度球形或柱形全景图,主要用于房产楼盘、旅游景点、宾馆酒店、校园风光等场景的三维虚拟漫游效果的网上展示,让观看者无需...
CSS图片拼合生成器主要源文件可用.pdf
先说下canvas绘图的基本方法,如下: const myCanvas = document.createElement('canvas');...//当图片加载完毕的时候在drawImage,否则可能图片还没有加载完毕 img.onload=()=>{ ctx.drawImage(img, 0, 0, 100, 50)
柱面全景图像拼合及漫游算法研究
这是一套图片拼合效果的,环境保护PPT模板,共22张。 幻灯片模板封面,少用了四张绿色自然风景图片作为背景,有绿色森林、草原、湿地、蓝天白云。 PowerPoint模板内容页面,同样使用了多张优美的自然风景图片进行...
这是一套图片拼合背景的,农业招商PPT模板,共22张。 幻灯片模板封面,使用了4张农业播种收割图片作为背景。与农业招商主题贴切。 PowerPoint模板内容页面,使用了麦田、茶园、向日葵等图片排版。搭配20张绿色扁平...
碎片图像无缝拼合技术的VC,对于图像拼接编程有参考价值