Unity周边——使用SpriteIlluminator和TexturePacker实现2D动态光照和制作图集

开始

先放上效果图：

在Unity（本例中Unity版本为2017.3.1）中实现该功能一共用到了以下工具：

1、SpriteIlluminator：为Sprite添加3D效果并导出法线贴图。本例中使用的版本为1.4.1

2、TexturePacker：打包图集，并导出为Unity所用的格式。本例中使用的版本为4.6.3

*以上两个工具出自同一家公司Code And Web，可以从官网https://www.codeandweb.com上下载。

*注意，如果你使用的是免费版，可能出现某些功能无法使用的情况，比如免费版下SpriteIlluminator的导出法线图的功能就不可使用。请自行破解或购买许可证。

3、TexturePackerImporter：Unity插件，自动处理SpritePacker导出的数据。可以从AssetStore获得。

准备好以上工具后，还需要准备一套序列帧动画素材，这里有一套来自于TexturePackerImporter的资源。

序列帧素材下载

素材预览如下：

另外，由于本篇的重点不在深入研究SpriteIlluminator和TexturePacker，所以下面将以尽量少的篇幅来简单介绍下这两个工具的使用。

使用SpriteIlluminator为序列帧添加3D效果

从上面的预览可以看出，这套素材就是一套普通的2D序列帧。这一节我们先使用SpriteIlluminator为其创建一套法线贴图。

1、打开SpriteIlluminator，将序列帧（或者整个文件夹）拖到软件编辑区，图片将以缩略图的形式出现在左边"Sprites"一栏。

2、在Sprites栏按下ctrl+A选中全部图片，这些图片将自动排列在编辑区。编辑区圆形图标表示的是光源。Sprites栏下面有一栏"Global light"，它提供了对光源的一些设置。为方便预览，可以把"Auto-rotate light"选上。

3、在右侧"Effects"一栏中点击Bevel（斜面），会弹出相关的设置面板，编辑区会即时地给出预览，已经能看出动态光照的效果了。这里使用默认值，点击"Apply"应用设置。

4、点击工具栏上"Export normals"，根据需要选择路径（不作设置则在原图相同目录下生成）、法线图后缀等设置后点击OK以导出法线图。

5、再次打开素材目录，SpriteIlluminator已经为每一副序列帧生成了相应的法线图了。

在Unity中导入TexturePackerImporter插件

打开Unity，我这里使用的版本是2017.3.0，下载的TexturePackerImporter版本是4.6.1。出于演示目的，新建一个2D工程，并导入TexturePackerImporter插件。在Project面板下新建目录"Atlas"用来存放图集（当然，名字可以换作其他的）。

使用TexturePacker将序列帧制作成图集

1、打开TexturePacker，在右侧"Settings"下，点击"Choose Data Format"，并选中"Unity - Texture2D sprite sheet"以便生成Unity所用的数据格式，最后点击Convert保存应用。

2、与SpriteIlluminator类似，将所有序列帧以及生成的法线图（或者整个文件夹）拖入到编辑区，TexturePacker会自动进行图集的制作，在编辑区可以实时预览到。

3、这时候还需要一些设置，在Settings下，点击Advanced settings进入高级设置。

4、主要有三个地方需要设置。一是将Layout一栏中的"Size constraints"设置为"POT(Power of 2)"这样会将图集的尺寸限制为2的n次幂；二是将Normal maps一栏中的"Pack with same layout"勾选，以将序列帧和法线图以相同的布局制成图集；最后将Data一栏中的"Data file"路径设置为我们前面新建的Unity工程中的"Atlas"目录，并起个名字。

5、完成后点击"Publish sprite sheet"，TexturePacker将会自动将数据存在刚才设置的目录中。

在Unity中的工作

在TexturePacker保存数据至Unity工程时，TexturePackerImporter会自动在Altas目录下生成了4个文件，分别是：

• Sprites.tpsheet：图集数据文件，记录了子图在图集中的位置、尺寸等信息。

• Sprites.png：素材图集，点击小箭头可以展开浏览其中包含的子图。已经由TexturePackerImporter自动切片出子图。

• Sprites：材质文件，默认shader是Standard，可以根据需要更换shader。

• Sprites_n.png：法线图集。

接下来制作动画文件。

2、点击Play按钮，即可预览动画效果，此时并没有看见光照效果。原因是我们并没有对物体添加材质，场景中也没有可用的光源。

3、在场景中添加一个光源，调整合适的位置、朝向等，我这里使用的是方向光。最后将刚才的材质拖放到游戏物体上。再次运行，可以看见文章开始的动态光照的效果了。

获取图集中的子图

对于打包好的图集，有以下三种典型的应用场景：

• 放在Assets目录下，作为静态资源。

• 放在Resources目录下，使用Resources来动态加载。

• 打包成AssetBundle，通过WWW来动态加载。

##放在Assets目录下作为静态资源

这种方式最直接，也最简单。在Project面板下，插件已经自动将Sprites.png切片成精灵，直接拖放到需要的地方即可。

放在Resources目录下

在从Resources目录下加载一张Texture2D并获得Sprite的方法可以使用类似下面的方式：

		Texture2D texture2D = Resources.Load (path);
		Sprite sprite = Sprite.Create (texture2D, rect, pivot);

这种方式不需要提前在Unity中对一张图片进行切片，而是使用代码、通过传入Sprite在图片中的尺寸、坐标来进行程序上的切片。

我们固然可以使用这一方法，在Sprites.tpsheet中保存了每一个Sprite的尺寸信息和坐标信息，我们可以编写代码来解析这些信息，并利用这些信息来动态生成Sptire。

这种方法不推荐，我们可以采取更好的方式。

前面说过TexturePackerImporter插件在我们从TexturePacker发布文件到Unity工程时，会自动从Sprite.tpsheet读取数据并对Sprite.png进行切片。在此之后，Sprite.tpsheet已经没有用处了（除非你想自己解析）。我们可以仅将Sprites.png放入Resources目录下，并通过如下代码来获取Sprites图集下所有的子图：

		Sprite[] sprites= Resources.LoadAll<Sprite> ("Sprites");	

如果想要通过子图的名字来索引子图，可以将此sprites转换成名字索引的字典，这里不在赘述。

打包成AssetBundle

打包成AssetBundle这种应用场景类似于放在Resources目录下，不同之处在于，我们需要通过如下方式来获取所有子图。

		Sprite[] sprites = assetBundle.LoadAssetWithSubAssets<Sprite> ("Sprites");