之前Sprite Renderer精灵图2D动画流程在最后接入项目时给客户端和我都带来了巨大麻烦，个人开发和小团队项目尚且可用，但对我来说我觉得下个需求可能不会再启动这套流程了（有这功夫折腾不如花时间好好研究下SDK）。不过开发嘛，想从零开始做效果不踩坑就怪了，月末闲着没事儿整理整理笔记。

Sprite起源于街机，它们的出现跟早期机器硬件性能瓶颈有点关系。因为它们并不是渲染管线Frame Buffer中像素位图数据的部分，而是犹如“精灵”一样”飘”在缓冲数据之上，所以被命名为Sprite。

Unity的Sprite Renderer和Canvas底下的Image其实都是在渲染精灵图，两者甚至都可以用到Atlas，但要注意的是两者并不能同时处于一套制作流程之下。

比如，按照一般行业内的UI特效流程，我们是需要在Canvas之下建立UI Image来渲染精灵图的，如果我们在做资产的时候注意下object的Component，会发现有个Canvas Renderer，这其实Unity已经告诉我们它和Sprite Renderer是俩流程，憋乱串。（我试过当一个精灵图上已经存在Sprite Renderer时，再加一个Canvas Renderer，结果Unity直接闪退了……也不知道是不是只有我这儿机子机魂太过傲娇……）

那么问题来了，Canvas下的Image和Sprite Renderer我们该怎么取舍呢？找了半天资料，在一个名叫Rubén Torres Bonet的外国老哥那儿找到了答案（人2016年就给我们解释清楚这个问题了，向老哥致敬）

下面是原文链接。Unity Sprites: SpriteRenderer vs. CanvasRenderer (UI Image) | TheGamedev.Guru

文中说了，One of the key differences between sprites and images is that sprites support the automatic creation of meshes out of it, where UI images consist always of rectangles. The reason for creating meshes will be explained in the next section; we will see how important it is, as it has an important performance impact. 意思是sprite renderer与image生成的mesh不同；sprite可以自动沿着透明图形轮廓创建网格，而Image创建的就是俩三角面组成的矩形。这俩中做法跟性能密切相关，涉及渲染管线知识。文中也简单做了解释，当然如果想确切地了解其中的知识，还是看下冯乐乐大佬的《精要》。

这里简单说下管线流程（基于Rubén Torres Bonet老哥的简化流程说明）。

在绘制渲染纹理之前，Cpu需要向Gpu发送一个Dc（DrawCall）；Gpu获取需要绘制的信息（如vertex、index、uv等等）；通过vertex shader以及rasterization成为像素；每个像素在fragment shader（片元着色器）中进行转换，写入frame buffer（帧缓冲）；最后图像才会在显示器上显示。

如果我们有大量的精灵图使用image进行渲染，并且这些精灵图有大量的重合，那么这些可怕的半透明精灵除了渲染出我们可见的图像外，边缘大量的透明轮廓会进行多次绘制，并在帧缓冲区内一层一层一层绘制覆盖。对，就是OverDraw……

扯远了，对于资产制作环节来说，我们只要记得Sprite Renderer 与Canvas Renderer最好不要混用在一个prefab里就行。