切割Sprite Sheets
此前,我们已经将zombie.png这个文件导入到了project中,但它和其它文件有所不同。在该文件中,并非只有一个僵尸(zombie),而是含有多个。如下图所示:

这样的文件通常被称作sprite sheet,你可以利用Unity为其中每个单个图片创建独立Sprite asset。
在Project中打开zombie。如下面屏幕截图所示,Unity创建了一个单独的部分—一个包含整个图像的Sprite,但它并非是你所需要的。

庆幸的是Unity简单地解决了如何将该图像视为sprite sheet这一难题。在Project中,选择顶层僵尸(zombie)就可以打开Inspector窗口下的Import Settings。
设置Sprite Mode为“Multiple”(见下图)并点击Apply:

完成上述操作,就会创建一个Sprite Editor的新按钮,同时,也移除了Pivot属性,因为每个sprite都会在其他地方定义各自的轴心点(pivot point)。
请注意在Project中(如下图所示)右侧的小箭头不见了,这表明zombie texture asset不再有子部分。

在这种状态下,zombie texture是不可用的。如果你把它拖动至Hierarchy,就会出现一条提示,指示其没有Sprites。那是因为你需要利用Unity对sprite sheet进行切割。
在Project浏览器中选择zombie完成后,点击Inspector窗口下的Sprite Editor,就可以打开以下窗口:

你可以使用Sprite Editor来设定在图像中sprites的位置。点击窗口左上方Slice按钮,就可以定义sprites。如下图所示:

Unity能够自动搜索到sprites,但是你可以对其效果进行调整。首先开始如下图所示的默认设置,再点击Slice。

Unity利用texture下的幻灯片(transparency)识别到sprites,并将它们分别置于界限框中。这样,就会看到以下四个sprites:

在我的试验中,图片之间的间隔如果一定,Unity的自动切割(automatic slicing)功能就能发挥到极致。注意观察,Unity为什么刚开始只能搜索到笑脸,而在之后的图片中可以搜索到三个sprites。

因无法创建彼此独立的界限框,Unity没能搜索到全部sprites,

由于在每个sprite周围创建了界限框,Unity搜索到全部sprites。
以上图片不仅表明在sprite sheets中应精心布置图片位置,也恰当地解释了为何一定要设计好sprites的形态。
点击任意一个Unity识别后的sprites,编辑下列详细信息,包括名称(name),坐标(position),界限(bounds),以及轴心点(pivot point)。选定第二个sprite后的窗口,如下图所示:

你可以在窗口字符下修改设置,也可以直接在图片内调整界限(bounds)和轴心点(pivot point)。
通常修改完成后,就要点击Sprite Editor右上角的Apply或Revert分别进行保存或删除。
如果可以简便的对Unity进行微调,就不用进行之前麻烦的操作了。因为你根本用不到Unity搜索到的sprite。zombie.png内的图片排列在四个相同大小的长方形内,而Unity的独立选项就可以处理这样的情况。
点击Sprite Editor左上角的Slice,再次打开slice settings,但这次将Type设置为Grid。其他设置修改如下:

Pixel size字段可以让你设定电子表单元格的大小。X限定每个单元格的宽度(width);Y限定高度(height)。Unity会利用这些数值从图片的左上角开始均匀切割。赋值X=157和Y=102,如下图所示:

点击Slice, Unity就会出现以下四个sprites:

你仍然可以从电子表中选择独立单元格,就像使用Unity的自动切割(Automatic slicing)选项时一样,修改它们的设置,但对于这些sprites来说却是多此一举。
点击Sprite Editor右上角的Apply,执行更改。注意Unity如何更新Project浏览器,使得现在顶层的zombietexture asset包含四个子sprites,分别命名为zombie_0,zombie_1,等等,如下图所示:

为了看到在场景(scene)中添加Sprites的另一种方式,你可以用另一种方法创建zombie的GameObject。zombie texture已经被切割成多个Sprites,但你仍然可以按照制作敌人(enemy)或背景(background)objects的同样方法进行操作,即简单地把asset拖动至Hierarchy。
通过选择GameObjectCreateEmpty,创建一个empty GameObject。重新命名为zombie,并设置其坐标为(-2, 0, 0),如下图所示:

在Hierarchy内选择完zombie,通过点击Inspector窗口下的Add Component,添加组件Sprite Renderer,如下图所示:

点击Sprite Renderer下sprite字段右侧的小圆形/靶子图标,就可以打开Select Sprite对话框。该图标如下图所示:

弹出的对话框包含两个标签,Assets和Scene。可以分别显示出在project中和当前场景下的所有Sprites。
选择Assets标签,然后点击zombie_0,将其移至renderer,如下图所示:

在场景预览中,现在你可以看到一个僵尸在沙滩上玩耍,其下一位老妇人和她的猫咪埋藏在某处的沙滩里。多么惬意美妙的画面啊!

场景中已包含所有必要的sprites,现在该处理一些问题了。
原文链接:http://www.raywenderlich.com/61532/unity-2d-tutorial-getting-started
建议使用电驴(eMule)下载分享的资源。
说明:本教程来源互联网或网友分享或出版商宣传分享,仅为学习研究或媒体推广,wanshiok.com不保证资料的完整性。
|