cocos2d学习笔记第二章 贴图集的制作及使用

1. 贴图集的工具一般用两种 Texture Packer和Zwoptex


2. 因为做图集只是开发中的一个小步骤, 因此用哪个工具都可以, 当前只介绍一种Zwoptex 可以自己去他们的网站下载。


3.打开Zwoptex工具后,点左上角的import将上章中我们创建的场景需要使用到的图都导入进来。

导入后他们都重叠在一起,你可以点上面的Layout,他将会自动排列,原则是在保证他们不能重叠。

并且左边的画布的尺寸越小越好, 因为我们将来要把他Load到内存中,如下图所示:

cocos2d学习笔记第二章 贴图集的制作及使用


当前我将画布的尺寸调到了256X512 而我的所有图片都刚好可以排下, 这种效果最好。

声明:这些资源全部是在网上下载的, 并非我版权所有, 我只是学习测试用,并不会用在任何有商业用途,图做的的很好。


4. 图片添加并排版本都做好后, 点菜单上的File -> Save 保存一下原文件。

然后点击上面的Publish 图标, 将会生成两个文件。xxx.plist xxx.png

我将其更名为:resource1.plist 和 resource1.png

这就是我们想要的东西了, 接下来我们将他们加到我们的工程中的resource目录下。


5. 接下来我们要使用这两个文件来实现图片的获取

因为是我们的checkpoints_layer1场景中用图片,因此我们要在该场景加载时,将他们加载到内存中

checkpoints_layer1.m 的init函数中加如下代码:


//如此就将该贴图集加载进来了

CCSpriteFrameCache *frameCache = [CCSpriteFrameCache sharedSpriteFrameCache];
[frameCache addSpriteFramesWithFile:@"resource1.plist"];


//使用贴图集其中的一张图片生成一个sprite对象,并将其显示在我们的场景背景图中

CCSprite *sprite = [[CCSprite alloc] initWithSpriteFrameName:@"madagascar1_128X128.png"];
[self addChild:sprite z:0 tag:2];
sprite.anchorPoint = CGPointMake(0.5, 0.5);
sprite.position = CGPointMake(20, 150);
[sprite release];


//这里的z:0 这个也是0 和之前加载背图的一样 ,如果将之改为1 没有任何变化

//因为本来这张图就在背景图前面, 面如果将加载北景图的地方改为z:1,那我们当前的图就看到了。

//会被挡在后面了, 谁在前面谁显示的。

//因为后续有些内衣背景图片来自www.300day.com ,感谢你们支持。


6.编译运行

你会看到,我们的精灵图片显示在了背景图之上了。