
前言
最近准备给自己的游戏加一些动画效果来增强游戏的表现,可是搜了一下网上相关的教程,发现有2个很大的问题:
- 排版和逻辑混乱:往往我需要找很久才能从里面获取一点能用的信息
- 内容大而全:其实很多时候我们只是需要学会怎么使用,不求甚解,只需知其然,勿需知其所以然,可以节约更多的时间
所以这篇文章不准备讲太多的周边知识,只是希望帮助大家在最短时间内可以学会使用cocos2d 播放帧动画的方法。
cocos2d播放帧动画一共有3种方法,其中前面2种方法有2点弊端:
- 内存损耗大
- 使用不方便
所以我们直接使用第3种方法来播放帧动画。
第一步:安装Texture Packer
Texture Packer是生成我们帧动画所需的素材的软件,它使用起来非常方便,而且免费版本就可以满足我们的日常需求。
安装过程非常简单,这里就不做详细的介绍了。
第二步:生成图片素材和plist文件
首先我们打开Texture Packer,如下图:

我们直接点击Use TexturePacker Essential,选择免费版,就会进入下面的界面:

此处它会询问我们创建的项目类型,根据你所使用的途径,选择适合你的类型,我们这里以cocos2d举例,所以选择cocos2d,选择之后我们会进入到下面的界面

有两种方式添加我们需要做出素材的原图片:
- Add sprites:一张张将你的原图片添加到软件中来
- Add smart folder:将整个文件夹中的图片添加到软件中来
图片添加成功后,我们可以看到软件自动帮我们生成的成品素材,如下图:

到这一步其实我们就可以导出成品了,但是这里有一个选项需要单独拿出来说明一下——Pixel format

这个选项决定了最后图片输出时图片每个像素点的保存方式,简单来说这个选项的作用就是,当你觉得输出的图片容量过大,那么就调整整个选项,来减少图片的容量,看上图最下面的红框处,软件很贴心显示出了保存后的容量大小。

最后我们点击Publish sprite sheet按键就可以选择将成品输出了。输出成功你会得到两个文件,图片素材和plist文件,如下图:

第三步:编写代码
代码逻辑很简单,分为以下4步:
1、将plist文件和图片加入到缓存中
2、创建播放帧动画的对象
3、创建Animation对象
4、将Animation转化为Animate并播放
下面我们直接上代码,里面注释写的很清楚了。

网友评论