官方文档

关键词

图集软件教程图集资源描述文件网页开发工作流程收费软件资源管理器

图集

大家好，下边我们来介绍图集的概念。图集 atlas 也是一种资源，指的是由多张小图合成的一张大图，如果之前听说过网页开发的话，在网页开发领域有一个叫雪碧图的概念，那雪碧图 CSS sprite 是相同的概念。

这 12 张图片可以合成一个大图，我们通过一些专门的工具软件，可以把它制成图集资源，可以看到在这个图集里边把所有的小图合在一起，构成一张大的图片，这样可以提高加载的速度，图集首先要把它制作出来，我们已经有一些小的图片或者是图标，使用 texturepacker 就可以来生成图集资源。

一个图集资源包含两个东西，一个是描述文件，一个是大图。

这里边有一个大图，大图里边包含了 12 张小图，把 12 张小图拼在了一起。在这里边还有一个 plist 的文件，这个文件其实是一个 XML 文件，它在这里边描述了每一张小图的名字，每一张小图的名字以及每一张小图所在的位置以及其他的相关参数，一个大图，一个描述文件就称之为一个图集。

怎么样在游戏项目里边使用图集资源，需要都添加到资源管理器来操作。新建一个目录来存放图集资源，叫 atlas ，然后把资源拖进来，拖动的时候把两个文件都选中，一块拖进来，放到atlas 下边，这样的话已经导入进来

每一个图片是可以单独引用的，每个图片的 trimtype 需要把它设置一下，我们全选一下，然后把 trimtype 统一设置为none后应用。

图集它是一个整体，它是单个的资源，然后就可以来使用它，atlas player 脚本附加图片节点上。

以前我们使用的是 GIF player ，现在是 atlas player ，也就是用来播放一个 atlas 图集资源，播放的时候你需要指定一下 atlas，把atlas图集拖过来

这12 张图片从哪来，指定一个 atlas 对象，它的类型是 cc.spriteatlas 表示一个图集资源。在onLoad里边，把图集资源给取出来，把这图集资源里边的 12 帧图片取出来得到了一个数组。

那接下来就和以前是一样的了，以前是把 12 张图片分别都拖了进来，现在是只指定了一个 atlas 图集就可以了，因为图集里边就包含了这些 sprint frame 。我们从这个 sprite atlas 里边直接调用这个方法，就可以把每张图片给获取出来，那剩下的逻辑都是一样的。

@property([cc.SpriteAtlas])
atlas:cc.SpriteAtlas= null;
frames:cc.SpriteFrames[] = [];
sprite:cc.Sprite = null;//Sprite组件
index:number = 0;//当前显示第N张图片
interval:number = 0.1;//定时器的间隔
onLoad(){
  this.sprite = this.getComponent(cc.Sprite);
  //从图集中获取所有帧图片
  if(this.atlas != null)
    this.frames = this.atlas.getSpriteFrames();
}
start(){
  this.schedule(this.onTimer,this.interval);
}
onTimer(){
  if(this.frames.length ==0) return;
  this.sprite.spriteFrame = this.frames[this.index];
  //下一帧
this.index ++;
if(this.index >= this.frames.length)
  this.index=0;
}
//update(dt){}
onDestroy(){
  this.unschedule(this.onTimer);
}