二、基础资源：frame

一、概念

frame和cocos里的sprite很接近，是绘制的最小单元；

美术做好一张张的图片，用比如TexturePacker导出成.plist文件，cocos里有专门的接口来读取和绘制这个文件所切割的一个个图形单元，在cocos中，这样的最小单元称之为sprite；frame也是如此，.plist就是配置文件；

frame和sprite的不同在于对区域/锚点的理解；

我们设定一个图形资源，原始图片分辩率为256*256，非透明区域所占矩形为100*100，这个非透明区域的左下角距离整个图片的左下角的偏移为15*143，如下所示：

2-1

这些数据所绘制的图形，在没有任何偏移的情况下，非透明区域将被绘制在0,0点的偏左上些的位置，因为默认情况下，cocos的锚点是0.5,0.5，也就是整个图片的中心与坐标轴的0,0点重合，绘制效果如图：

2-2

在不主动设置锚点的情况下，frame和sprite绘制出来的效果一致，frame会套用sprite的默认效果，但是一旦主动设置锚点后，结果就不同了；

主动设置锚点的情况下，sprite所参照的是整个图片，即256*256作为整体；frame所参照的是非透明区域，即100*100这个区域；

那么主动设置0.5,0.5后，sprite所绘制出的结构和上面看到的一样，frame却不同，绘制出的效果是非透明区域的中心和坐标轴的0,0点重合，如下所示：

2-3

在frame的概念里，美术做好的一张图片，数据的意义是非透明区域的size以及这个区域的中心和整个图片中心的相对偏移，属性数据如下：

2-4

frame对区域/锚点的理解，设置锚点之后理所当然的会出现一个问题，美术所设置的偏移信息就丢失了，那么这个问题是怎么理解和处理的呢？我们先来看看美术制作图片资源时，会出现图片比有效区域大的原因：

1、方便放置；

• 根据.plist文件的特点，美术在做单张图片的时候，没有必要为每张图片都设置合适的大小，完全可以把原始资源全部定义为比如512*512的图片，把需要的内容放进去，留下大量的空白透明区域是没有关系的，合成正图时这部分空区域不会占用空间；
• 
  
• 这种情况下，美术并没有设置偏移信息，资源的位置是随意放置的，frame的设计是很合适的；

2、对位置；

• 在有些情况下，比如帧动画，美术是可以通过一些工具导出一系列的图片，这些图片中的非透明区域所在的位置是很有意义的，它们已经是一张张对好位置的图片，单纯的连续切换就能得到所需的动画效果；
• 
  
• 对于这种情况，不能去对frame设置锚点，功能层有对应的action概念去处理，需要设置锚点时，应该对action设置，而不是对一个个的frame设置；

二、工具

在工具中可以查看frame的数据，但是不能修改数据，因为这些数据在美术做好后就固定下来了，没有修改的意义，效果如图：

2-5

双击文件会打开该文件的查看/编辑窗口；

单击文件会打开下面的预览窗口（预览窗口可以切换为独立窗口）

关于预览窗口：

• 预览窗口目前可显示3类文件：frame、module、action；
• 
  
• 每类文件有自己的专属窗口，每类窗口只显示一个文件，通过单击不同的文件来替换显示；
• 
  
• 附属在下边栏时，一次只能看到一种文件，可切换；浮动出来后是分开的独立窗口，互不影响；
• 
  
• 部分添加资源的操作，可以通过先打开被添加文件的预览，双击预览窗内的对应资源来快速添加；
• 
  
• 预览窗有两栏文字提示：FileName显示预览文件的路径；DataName是当鼠标移到资源上后，显示该资源的名字；
• 
  
• 预览窗获得鼠标焦点时，可通过鼠标滚轮放大和缩小资源的显示格，资源的显示原则是资源左上角与显示格左上角重合（不论资源本身的偏移），当显示格足够大时，会出现红白相间的线框（以此提示用户该资源的实际大小与看到的大小一致，未出现则表示看到的比实际的要小）；当显示格不足以容纳该资源时，资源会被等比缩放到合适的大小保证被完整显示；
• 
  
• 预览action资源时，普通情况下资源停在第一帧显示，鼠标移到显示格内时，该动画会播放，循环动画会循环播放；非循环动画只播放一次，结束后停在最后一帧，鼠标移出时回到第一帧；