如何在Cocos2d里面使用动画和spritesheet_百度知道
如何在Cocos2d里面使用动画和spritesheet
提问者采纳
你可以把许许多多的sprite放进去。 简而言之--使用spritesheet会更快;@synthesize walkAction = _walkAction，但是后缀是，把这个文件取名为”AnimBear.hiphotos，它们并不是我们最终需要的： // Add inside the HelloWorld interfaceCCSprite *_bear.hiphotos，你可以把它看作是一张巨大的图片，有些熊的图片比其它宽一些，那么当场景中有许多sprite的时候;@property (nonatomic。 接下来.png的图片文件！ 现在： 你创建一个CCSpriteBatchNode对象.baidu！） 当你解压之后。这个方法做了以下几件事. 点击Export部分的”Save，你从spritesheet中创建的任何上面下载，否则你的plist文件就不能正确在cocos2d里面使用！下面就跟着我，等下我们就不用回过头来再改代码了! }return ]:@"。 注意.hiphotos。我们需要将他们摊开放在spritesheet上面://e。但是，这样看起来熊就在永远的移动，让我们保存spritesheet图片和定义.com/zhidao/wh%3D450%2C600/sign=6d0c85ef51fbb2fb347ec92/daaf90edf379ffedab，让我们在HelloWorldScene，当你在代码之间需要使用这个sprite的时候，这样渲染速度就会更快 让我们首先创建一个工程骨架--使用cocos2d工程模板创建一个新的项目并取名为/zhidao/wh%3D600%2C800/sign=8ca99d9d91cad1c8d0eefb31/4a36acaf2edda3ccc03e01203f92ae，如果你能让这只熊动起来，因为我们前面调用了addSpriteFramesWithFile方法;[self addChild，选择File\New，然后你将会看到一个空白窗口; ++i) {[walkAnimFrames addObject.png“并保存到你的resources文件夹下面:@"，在cocos2d里面。或击点击Resources文件夹;Bear8： // At the top，调用CCSpriteFrameCache的addSpriteFramesWithFile方法，然后在Layout部分点击“Apply”来重新排序它们，Zwoptex在默认情况下会把图片周围的透明区域剪裁掉;bear%d。 对于这些图片，然后点增加，让我们把熊放在屏幕中间。把下面的一些代码片断按顺序增加到你的init的Add the stuff from below注释后面.baidu。 因此？<img class="ikqb_img" src="http，把这些图片加到工程里面！如果你使用spritesheet来获取sprite，我们简单地遍历我们的图片名字（它们是按照Bear1://a，否则会出错;=8，然后作如下改动;@synthesize moveAction = _moveAction.plist文件.jpg" esrc="http，这些描述信息里面包含了图片在spritesheet中的位置，你可能会在一起比较老的代码里面看见它。还好://e, retain) CCAction *moveAction，创建CCSpriteBatchNode对象.com/zhidao/wh%3D450%2C600/sign=75f0c7bca706f3aa0dd4ea/4a36acaf2edda3ccc03e01203f92ae://e，命名为”AnimBear，然后使用共享的CCSpriteFrameCache来获得每一个动画帧.png"。spritesheet在cocos2d中的工作原理如下.plist"。然后点击”Save，然后循环播放所有的动画帧，它可以帮助我们自动生成这一切，还有另一种更加高效的方式来创建动画--那就是使用spritesheet，如果是单个的sprite的话。因此、大小和名字等信息，并把它加入到当前场景之中，默认的画布（512×512）太小了:spriteSheet]，但是，而不是以前每个sprite都需要一个OpenGL call，在那个文件中做以下修改，尤其是当你有很多的sprite的时候.h里面增加一些属性吧://e。 1) 缓冲sprite帧和纹理 [[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile，那么就会有N次OpenGL ES call。 3) 收集帧列表 NSMutableArray *walkAnimFrames = [NSMutableArray array]。你将会看到它仅仅是一个包含两个section的属性文件--两个部分分别为frames和metadata.hiphotos.baidu。然后，还有一个plist文件.com/zhidao/wh%3D450%2C600/sign=c381f309e4c85ad9c31603e/a5c27d1ed21b0ef4039d15ecd9c451da81cb3e0e：CCSpriteBatchNode以前叫做CCSpriteSheet。; 首先，追踪所有的sprite在spritesheet中的位置.bear = BOOL _ i <，然后把Zwoptex生成的plist文件当作参数传进去。 2) 创建一个精灵批处理结点 CCSpriteBatchNode *spriteSheet = [CCSpriteBatchNodebatchNodeWithFile，看看Zwoptex到底为我们做了些什么事://e;} 为了获得动画效果.png".baidu。 你会看到，那么就没问题。它有一个免费的Flash版本和一个收费的安装版:@"，不是吗，然后创建一个plist指定每一个sprite在spritesheet里面的位置和大小;CCAction *_walkAction。 我们马上要完成了--但是，选择”Add\Existing Files，下载一些由我的老婆制作的熊行走的图片。 这时:[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByN]，将会一个步骤一个步骤给大家讲解.jpg" /> 但是.jpg" esrc="http，我们并不是马上需要所有的这些属性，因为Robert Payne已经开发出了一个非常好用的工具。然后，就是加载AnimBear.baidu。但是，我们有5个步骤需要做，我们把它们先定义在这里！ 简单的动画 首先，就可以很方面地使用plist文件中的这些信息来获取sprite，并通过一次OpenGL ES call来渲染这些孩子, retain) CCSprite *bear。只要sprite包含在spritesheet中： 现在，让我们回到XCode，你会发现和原图尺寸不一样了--这是因为，因此在Layout部分点击“Apply”来排序，并把它们拖到这个窗口里面。 好了;// Replace the init method with the following-(id) init {if((self = [super init])) {// Add the stuff from below，如果这些sprite共享一个spritesheet，这非常容易解决--在工具栏上选择”Untrim“？因为cocos2d对它进行了优化。 就这么多！打开HelloWorldScene。所以。 更新！ Zwoptex To Victory.png“，当你把它们连续地放映，叫做Zwoptex。接下。在frames部分.baidu。然后把这个文件加入到共享的CCTextureCache中://a。 现在，我们在Canvas部分把画布改成512×1024。打开你先前下载的熊的图片;self，你的窗口可能和下图类似, under @implementation@synthesize bear = _/zhidao/pic/item/a5c27d1ed21b0ef4039d15ecd9c451da81cb3e0e：当我们在Zwoptex里面点击保存的时候，然后基于这些单个的图片来创建动画.com/zhidao/wh%3D600%2C800/sign=ab543f83a58b87d8d1ed21b0ef4039d15ecd9c451da81cb3e0e.hiphotos，不足以把所有的熊图片装下，包含了一系列的对spritesheet中每个图片的描述信息！谢谢Muhammad在评论部分给我指出来了.plist文件://a！（使用spritesheet还可以减少游戏占用的内存大小! 如果你还没有这个工具，你当然可以手工用图片编辑器来创建.png和AnimBear.hiphotos，那样将会是一个非常傻比的行为，因为对于动画来说.jpg" target="_blank" title="点击查看大图" class="ikqb_img_alink"><img class="ikqb_img" src="http，看看那些图片---它们仅仅是一张张单个的熊在行走的动画帧. 接下来
来自团队：
其他类似问题
为您推荐：
cocos2d的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁Posts - 107,
Articles - 0,
Comments - 1674
22:45 by 吴秦, ... 阅读,
SpriteSheet精灵动画引擎
本文介绍Flash中SpriteSheet精灵序列图与其它渲染方式的性能对比、SpriteSheet的原理及注意实现，最后实现了一个精灵序列图的渲染引擎。本文的SpriteSheet引擎及demo可以在github上下载：
动画渲染性能对比
Flash中动画制作方式有多种，如矢量动画、位图帧动画、精灵序列图等等。针对不同的制作方式，对同一个角色动画进行如下测试：一个角色在屏幕上显示5个实例，对应呼吸、施法、行走、受伤、普攻状态。
测试运行的环境：
l  Release version of Flash Player 12.0.159.1
l  AMD Phenom(tm) II X4 830 Processor(2800 Mhz)
l  Microsoft Windows 7 专业版 (32位)
得出测试结果如下表所示，为了节约大小资源中所用位图均为png8。
表1：不同动画渲染效率对比（具体测试数据与所使用资源有关）
内存（KB）
文件大小（KB）
<font style="font-size: 12pt" color="#
<font style="font-size: 12pt" color="#m
<font style="font-size: 12pt" color="#
矢量+cacheAsBitmap
<font style="font-size: 12pt" color="#
<font style="font-size: 12pt" color="#.2m
<font style="font-size: 12pt" color="#
<font style="font-size: 12pt" color="#
<font style="font-size: 12pt" color="#.8m
<font style="font-size: 12pt" color="#4
位图+导出类
<font style="font-size: 12pt" color="#
<font style="font-size: 12pt" color="#m
<font style="font-size: 12pt" color="#7
SpriteSheet精灵序列图
<font style="font-size: 12pt" color="#ff png + 31 json/xml
从上表可以得出，精灵序列图消耗CPU最少，并且文件大小适中，但内存消耗较大。对于游戏来说，CPU销毁越小，帧频可以越大，游戏越流畅。
图1：精灵序列图动画效果及帧频、内存信息
可以看出使用精灵序列图帧频和内存都非常稳定，内存没有频繁的gc，gc非常消耗cpu会造成游戏卡顿现象。反观其它渲染方式，会发现内存不稳定，这对游戏性能是一个风险。
图2：矢量动画
图3：矢量+cacheAsBitmap动画
图4：位图动画
图5：位图+导出类
下面详细介绍下精灵序列图的原理及注意事项。
精灵序列图
SpriteSheet精灵序列图是一种大的网格式位图，其中每一格都对应着一个动画截屏，每一动画截屏对应动画的一帧。精灵序列图通常采用PNG格式，这样可以使用Alpha通道。
图6：角色受伤动画序列图
除了大位图之后，还必须有一个对应的数据描述文件，常用的格式有json、json-array、xml。数据描述文件，用来指定每帧动画在大图中的位置（偏移位置、宽、高等等），如json格式如下：
JSON格式描述数据：
{&frames&: {
&呼吸0000&:
              &frame&: {&x&:0,&y&:0,&w&:110,&h&:110},
              &rotated&: false,
              &trimmed&: false,
              &spriteSourceSize&: {&x&:0,&y&:0,&w&:110,&h&:110},
              &sourceSize&: {&w&:110,&h&:110}
&呼吸0001&:
              &frame&: {&x&:110,&y&:0,&w&:110,&h&:110},
              &rotated&: false,
              &trimmed&: false,
              &spriteSourceSize&: {&x&:0,&y&:0,&w&:110,&h&:110},
              &sourceSize&: {&w&:110,&h&:110}
              &app&: &Adobe Flash CS6&,
              &version&: &12.0.0.481&,
              &image&: &jsonformat.png&,
              &format&: &RGB8&,
              &size&: {&w&:1024,&h&:1024},
              &scale&: &1&
Key-&呼吸0000&：表示帧的名字/对应图片文件名（json-array格式中，使用filename字段表示）;
frame: 图片在大图中的偏移位置(左上角为原点)和大小(未旋转前)  需要注意这里的图片大小是图片未旋转前的大小;
rotated:  是否旋转(顺时针方向);
trimmed: 是否有去掉周围多余的透明部分;
spriteSourceSize: x,y表示图片未去掉周围透明部分的偏移量,这是如果需要还原图片原先的大小要用的;
sourceSize: 图片的原始大小,包含透明部分;
精灵序列图使用位块图像传输（bit-blitting，blit = Bit-Block Image Transfer）技术，它涉及到使用位图来渲染最终的显示效果。 将需要显示的效果，像素会绘制到一个已添加到舞台上的位图中。为了表现动画效果，会在一个循环中更新位图的像素。关键步骤如下：
1)     加载动画中需要的Sprite Sheet位图数据（.png文件）
2)     在displayList中添加一个BitmapData目标位图数据(画布)
3)     向画布复制或者擦除游戏（copyPixel vs draw）
4)     根据游戏显示层次顺序将Sprite Sheet复制到画布
5)     在游戏循环中重复第3、4步
copyPixel的效率比draw高，所以一般情况下，使用copyPixel复制图像到画布。
在所有动画渲染方式中，精灵序列图对帧频的影响是最小的。因为精灵序列图会预先被缓存到BitmapData实例中，这就可以使渲染速度变得更快。一定要随时注意内存的占用，仔细把控，详尽规划。精灵序列图之所以效率高，是由于位图序列都缓存在内存中从而可被快速调取。但这样也可能会导致巨大的内存开销。
注意：一张图片占用多少内存只取决于图像的尺寸，而与图像文件的类型和图像压缩无关。
位图所占内存（字节）= 位图宽度 x 位图高度 x 4
假设一帧的图片的大小为200x400像素，占用内存312.5KB。如果一个动画18帧，则占用内存约5.5M。如果一个角色包含4个方向或4个动作的动画，则占用内存约22M。同屏在线10个角色，则占用内存约220M。
SpriteSheet工具
现在Flash cs6已经集成了将动画导出为SpriteSheet，如下图所示：
图7：Flash cs6导出SpriteSheet设置
TexturePacker也可以打包图片为SpriteSheet格式。
精灵序列图引擎
前面介绍了精灵序列图的原理及注意事项，下面实现一个精灵序列图动画的引擎，支持Flash Cs6/TexturePacker导出的JSON、JSON-Array、Starling（XML）3种数据格式。
图8：精灵序列图引擎类图
SpriteSheet类
图9：SpriteSheet类
SpriteSheet继承自flash.display.Sprite，包含一个bitmap成员用作画布。使用定时器Timer来驱动动画循环。
SpriteSheet使用类似Movieclip，提供play()、stop()、gotoAndPlay()、gotoAndStop()接口，并支持鼠标事件。
mAnimation成员（Animation实例）用于描述SpriteSheet当前表示的动作，如游戏中一个角色包含呼吸、行走、施法、受伤动作。
mTextureAltas成员（TexureAtlas实例）用于维护整个精灵序列图数据，并负责将特定帧位图复制到画布显示。
TexureAtlas类
TexureAtlas类保存了整个精灵序列图数据，并根据SpriteSheet的当前动作，生成构成动画的所有帧在精灵序列图中的偏移和大小。
Animation类
Animation动画信息类。
l  seqName表示动画序列名(e.g. &walk&)
l  delay表示帧间隔
l  loop表示动画是否循环播放
l  arFrames:Vector.&SpriteFrame&;// 帧信息数据
SpriteFrame类
SpriteFrame类表示图片在大图中的偏移位置(左上角为原点)和大小(未旋转前)等等信息，根据数据描述文件生成。
图10：SpriteFra示意
JsonFormat、JsonArrayFormat、XmlFormat类
SpriteSheet序列图数据解析类，分别解析对应格式的描述数据。
SpriteSheet使用非常简单，与原生Movieclip差异不大。下面的例子分别加载JSON、JSON-Array、XML格式的数据及对应的PNG资源，然后创建SpriteSheet实例。
           import com.as3game.asset.AssetM
           import com.as3game.spritesheet.SpriteS
           import com.as3game.spritesheet.vos.DataF
           import flash.display.BitmapD
           import flash.display.S
           import flash.events.MouseE
           import flash.filters.ColorMatrixF
           import flash.text.TextF
          
           /**
            * ...
            * @author Tylerzhu
            */
           public class TestSpriteSheet extends Sprite
           {
                      
                       public function TestSpriteSheet()
                       {
                                  SWFProfiler.init(stage, this);
                                  AssetManager.getInstance().getGroupAssets(&spritesheets-json&, [&data/json/jsonformat.json&, &data/json/jsonformat.png&], onAnimLoaded);
                                  AssetManager.getInstance().getGroupAssets(&spritesheets-xml&, [&data/xml/xmlformat.xml&, &data/xml/xmlformat.png&], onAnimLoadedXML);
                                  AssetManager.getInstance().getGroupAssets(&spritesheets-jsonarray&, [&data/json-array/jsonarrayformat.json&, &data/json-array/jsonarrayformat.png&], onAnimLoadedJsonArray);
                       }
                      
                      
                       private function onAnimLoaded():void
                       {
                                  var bitmapData:BitmapData = AssetManager.getInstance().bulkLoader.getBitmapData(&data/json/jsonformat.png&);
                                  var sheets:* = AssetManager.getInstance().getContent(&data/json/jsonformat.json&);
                                  var sp:SpriteSheet = new SpriteSheet(bitmapData, sheets, DataFormat.FORMAT_JSON);
                                  sp.setAction(&呼吸&, 14);
                                  sp.play();
                                  addChild(sp);
                       }
                      
                       private function onAnimLoadedXML():void
                       {
                                  var bitmapData:BitmapData = AssetManager.getInstance().bulkLoader.getBitmapData(&data/xml/xmlformat.png&);
                                  var sheets:* = AssetManager.getInstance().getContent(&data/xml/xmlformat.xml&);
                                  var sp:SpriteSheet = new SpriteSheet(bitmapData, sheets, DataFormat.FORMAT_XML);
                                  sp.setAction(&呼吸&, 15);
                                  sp.play();
                                  sp.y = 150;
                                  addChild(sp);
                       }
                      
                       private function onAnimLoadedJsonArray():void
                       {
                                  var bitmapData:BitmapData = AssetManager.getInstance().bulkLoader.getBitmapData(&data/json-array/jsonarrayformat.png&);
                                  var sheets:* = AssetManager.getInstance().getContent(&data/json-array/jsonarrayformat.json&);
                                  var sp:SpriteSheet = new SpriteSheet(bitmapData, sheets, DataFormat.FORMAT_JSON_ARRAY);
                                  sp.setAction(&呼吸&, 15);
                                  sp.play();
                                  sp.y = 300;
                                  addChild(sp);
                       }
           }
