Unity 2D入门基础教程

本是古典何须时尚 2022-09-26 03:48 360阅读 0赞

http://www.tuicool.com/articles/Rzau6rQ

#### 目 录 ####

1.  [开始:][Link 1]
2.  [创建你的项目][Link 2]
3.  [场景视图的2D模式][2D]
4.  [轻松制造精灵(Sprites)][Sprites]
5.  [Sprite 资源][Sprite]
6.  [切片精灵表(Slicing Sprite Sheets)][Slicing Sprite Sheets]
7.  [配置游戏视图][Link 3]
8.  [精灵动画(Animating Sprites)][Animating Sprites]
9.  [精灵封装(Sprite Packing)-仅针对专业人员.][Sprite Packing_-_.]
10. [Sprite Packer的选项和问题][Sprite Packer]

原文:http://www.raywenderlich.com/61532/unity-2d-tutorial-getting-started,   
作者:Christopher LaPollo,   
由Xiaoke翻译,   
转载请注明来自http://www.1vr.cn

如果用以前版本的Unity做2D游戏，虽然能做，但是要费很多周折。

比如你可以将一张纹理赋予一个”面片”网格,然后用脚本控制它的动画调整它的位移.如果你要使用物理引擎,那么还要将这个Obeject处理3D的,所以你还要确保你的Object要有足够的深度以确保他们在其它轴向上不起冲突.或者你选用一个第三方插件,如2D Toolkit或者Orthello 2D Framework,他们有着强大的功能,但同样需要你去做一些约束工作。

当上面这些你仍然可以选用上面这些方法的时候,Unity4.3增加了原生的2D开发环境,让我们一探究竟吧。

![overview\_pic][overview_pic]

这个教程将带你探索Unity的2D工具,教程将引导你做一个主题为僵尸的iOS游戏。教程重点在于一个新的资源类型-”Sprite”,你将学到所有关于Sprite知识,在后续的教程里你将学会如何通过Unity的动画系统控制动画,以及用到Untiy的2D物理引擎的支持。

上面是个教程概述,下面让我们一步一步来吧。

注:本教程假定你有一些Unity的使用经验,知道一些基本知识,了解Unity的界面,游戏对象和组件等操作,比如你知道”要添加一个”猫”到场景里需要从Project拽到Hierarchy里”。

如果你看不懂上面这个,那么你需要一个教程入门再来看现在这个2D教程。

最后要注意,本教程是在OS X系统下操作的,然而如果你在Windows下也不用担心,Unity在Windows上和OS X下大多数指令都是一样的,会有一些小的差异(如使用Windows资源管理器取代Finder),或者干脆直接用OS X 系统。

## 开始: ##

Unity在4.3中加入了原生的2D工具(专业版和免费版都带),所以你要确保你安装的最新版,可以从官网下载到.

你还需要一些美术资源为这个2D游戏,幸运的是Mike Berg(http://weheartgames.com/)已经做了一些很酷的图片资源,可以从这里下载解压使用:http://cdn4.raywenderlich.com/wp-content/uploads/2013/12/ZombieConga-Part1-Resources.zip

注:你可以在其他游戏里使用或修改本教程里提供的美术资源,音乐和音效,但是你必须在游戏中包含一下信息:”Artwork/sounds: from iOS Games by Tutorials book, available at http://www.raywenderlich.com”.

## 创建你的项目 ##

打开Unity并选择”File\\New Project…”创建一个新的项目,在”Create new Project”里点击”Set…”标签,给新项目命名为”ZombieConga”,选择一个存储的位置点”Save”。

然后在”Set up defaults for” 选择”2D”,再点击”Create Project”:

![new\_2d\_unity\_project-300x204][new_2d_unity_project-300x204]

上面这个对话框是Unity中遇到的第一个含有2D特性的设置.你可以随时改变这个2D设置,如果你想更改这个设置,可以选择”Edit\\Project Settings\\Editor”打开编辑器设置,在”Default Behavior Mode”中改模式为2D,如下图:

![editor\_settings\_default\_behavior-241x300][editor_settings_default_behavior-241x300]

“Default Behavior Mode”(默认行为模式)定义你项目在导入Assets时的默认导入设置,当设置为3D模式时,Unity假设你将导入的文件创建为纹理类型(如:PNG文件);当设置为2D时,Unity假定你想要的导入的资源为Sprite类型,你将在教程里学到关于Sprite资源导入设置具体的解释.

## 场景视图的2D模式 ##

下一个2D特征就是在场景视图里有个控制二维切换的按钮,点击2D按钮可以激活2D模式,像下面这样:

![2d\_mode\_in\_scene\_ctrl\_bar-300x35][2d_mode_in_scene_ctrl_bar-300x35]

这个按钮会将场景相机在透视视图和正交投影视图之间进行切换.它们有什么差别呢?当观察透视视图时,远离相机的物体看起来更小,就像在现实世界中眼睛看物体一样,然而当正交投影视图的时候,物体的大小并不受与相机的距离影响。因此,在二维模式时,一个对象不管位置离相机远近,只要尺寸不变,它看起来将没有变化的。

下面的配图可以清晰的看到2D和3D模式视窗的区别。

![scene\_projection\_comparison-228x300][scene_projection_comparison-228x300]

上一个图片也能看到当2D模式启用时,场景视图的Gizmo控制也是隐藏的,你只能做视图的平移操作,Y轴指向上,X轴指向右。

重要:这个设置是不会影响到游戏播放时效果的,因为它只是帮助你组织场景里的对象,甚至后期你会在创建2D游戏的同时创造3D游戏,你可能需要在这两种模式间根据需要切换,本教程所有截图都是在场景视图的2D模式下。

为了更好的跟着教程学习,你可以调整Unity的布局和教程截图的的界面布局一致,教程里Unity是用”Dark”皮肤运行于OS X系统下,Dark皮肤只在Unity Pro版本才能启用.我创建了8个打开的tab,调整他们如下面的样子,

如图你可以看到,左上角由Scene,Console和Animator视图组成,而Game,Project和Animation视图在左下角组合为一个选项卡,右边两列是Hierarchy和Inspector视图。

当然有时候我也会改变这种设置,视图的布局没有一个固定的要求,可以由自己心情随意安排自己的工作布局。

## 轻松制造精灵(Sprites) ##

用Unity新功能来创建一个精灵有多容易?试试下面的方法。

第一步:拽从Finder窗口拽cat.png文件到Scene视图,如下图:

![simple\_sprite\_add-300x156][simple_sprite_add-300x156]

第二步:空闲时写给Unity的开发者写封感谢信,哈哈.

如果没有创建成功精灵,从第一步开始重试一次。

注:想知道为什么上面动画有两个猫的图片?别担心,我后面会告诉你.

如此简化的导入依靠Unity默认导入设置,虽然这常常不是最终需要的正确效果,但足以说明Unity的新功能将使2D游戏开发异常简单!本教程后面涵盖了所有你使用Unity 2D开发游戏需要了解的知识.

## Sprite 资源 ##

在Hierarchy视图里选择cat,然后看Inspector.你的Inspector视图位置可能和下图不太一样,但不必担心这不重要,这里要注意的是为了让cat在场景中显示,Unity附加了一个Sprite Renderer组件到GameObject。

![cat\_in\_inspector-264x500-158x300][cat_in_inspector-264x500-158x300]

Unity会为这个物体创建网格,Unity会基于图像的非透明部分创建网格,下图里的僵尸的蓝色网格就是:

![sprite\_mesh][sprite_mesh]

通过这样创建的纹理网格,可以有助于Unity提高场景运行时的fill rate,也使得创建多边形碰撞盒更容易,教程后面将介绍如何创建使用碰撞盒.

注意:别让僵尸突然出现惊吓到你,我只是觉得它比可爱的小猫更有趣.

在本节教程中你将了解Sprite的渲染器组件属性,可以看到Sprite的名称.下图里你可以看到”cat”对象在精灵渲染器里被分配的名字是”cat”.

![sprite\_field\_in\_inspector][sprite_field_in_inspector]

确保Project视图是可见的,在Inspector视图里惦记Sprite编辑框能看到Sprite资源将在Project视图里呈现高亮状态,如下图:

![highlighted\_cat-300x118][highlighted_cat-300x118]

Project视图中cat精灵高亮

注:高亮边框会在几秒后消失,所以如果你不小心错过它,可以再次点击一次Sprite编辑框.当然现在项目里只有一个资源,你不可能错过它.:\]

正如上一个截图你所看到的,Unity会在Project视图里高亮显示cat项,还有另外一个也叫cat的子项.两只猫都在Project视图里,很容易混淆啊,这是怎么回事呢:

父级的cat是纹理资源.它将关联到你导入的原始美术资源文件cat.png,以及控制着如何从这个纹理资源创建Sprites,你可以看到它有个文件内容的缩略图.

子集的cat是Unity导入cat.png时创建的Sprite资源.现在只有一个子项,因为Unity只从文件里创建了一个Sprite,教程后面将教你创建”slicing sprite”,即从一个图片创建出多个Sprites.

注:Unity渲染Sprite对象实际上是由一个Texture2D生成的,图像信息实际是存储于图片文件中,你也可以动态的创建自己需要的Texture2D对象来运行时生成Sprite,这个进阶的知识本教程就先不讲了.

比如cat.png,你可以从Finder中拽一个图片到Scene视图(或者Hierarchy视图,随你自己)中创建Sprites.但是更常见的是先添加资源到Project里在添加它到场景中.

将下载到的文件添加到项目里:background.png, enemy.png, 和 zombie.png.Unity提供了五种方法让你将资源导入项目中:   
从Finder窗口拖拽文件到Project视图.   
到”Assets\\Import New Asset…”菜单,选择文件并点击Import.   
在Project视图中右键选择”Assets\\Import New Asset…”菜单,选择文件并点击Import.   
在你的系统中直接添加文件或者创建子目录到项目的Assets目录,Unity会自动刷新显示最新的资源内容.不过要注意,一定不要直接从文件系统里删除不用的资源,要总是从Unity编辑器内部删除资源,因为Unity会存储有关项目的资源metadate,直接从文件系统修改删除可能损坏项目结构.

当然你也可以直接将文件Hierarchy或者Scene视图,不过这样做是直接在当前场景中创建一个GameObject.

从Project视图里拖拽enemy到Hierachy视图.和cat一样,同样会有两个名字为enemy项出现在Project视图中,当现在这样只有一个子精灵的时候,你选择拖拽哪个enemy到Hierarchy视图都是一样的.   
在Hierarchy视图里选择enemy,设置Transform组件的位置为(2,0,0),如下图:

![enemy\_initial\_position][enemy_initial_position]

enemy的初始位置.

现在场景视图里显得有点乱,在Hierachy视图里选择cat并设置它的位置为(0,2,0),如下图:

![cat\_initial\_position][cat_initial_position]

你的场景现在会像下图这样:

![cat\_and\_enemy\_scene-300x149][cat_and_enemy_scene-300x149]

cat和enemy在Scene视图

最后,从Project视图拖拽background到Hierachy视图里,并设置位置为(0,0,0),如下图:

![background\_initial\_position][background_initial_position]

你可以稍晚些调整背景图像的质量,所以现在不用担心它现在不正确的样子.(提示:Unity默认设置在导入background.png时是不正确的(,Scene视图现在会是这样子:

![scene\_with\_just\_bg-300x146][scene_with_just_bg-300x146]

只显示背景的场景视图

现在看不到cat和欧巴桑没关系,它们只是被背景暂时挡住了.可以很容易的调整出来,在调整他们层次之前,我们需要切一具尸体,嘿嘿,一具corpse Sprites,像这样:

## 切片精灵表(Slicing Sprite Sheets) ##

已经导入zombie.png到项目了,你会发现这个文件和其它文件不同,它包含了好多个图像,如下图:

![zombie-300x48][]

这种文件通常被称为精灵表(sprite sheet),我们将为表里的每个图像创建单独的Sprite.在Project视图里展开zombie,能看到像下面截图这样,Unity创建了一个包含所有图像的Sprite.这不是我们想要的.

![zombie\_as\_single\_sprite-300x171][zombie_as_single_sprite-300x171]

Unity提供了一个非常简单的解决方案,可以来处理这个需求,在Porject视图选择zombie的顶层级后会看到Inspector中显示了它的Import Settings,设置Sprite模式到Multiple并点击Apply:

![zombie\_import\_settings][zombie_import_settings]

选择这个选项后在Sprite编辑器中会出现一个新的按钮,并且还移除了Pivot属性,因为每个Sprite都将定义自己的轴点.

不知道什么是曲轴点(Pivot points)?Sprite Pivot定义了精灵在局部坐标系中的原点,例如,Sprite的枢轴点在精灵的中心或者左上方,缩放它或者旋转它时,精灵将围绕这个原点进行变换.

你可以通过Pivot组合框来指定精灵的枢轴点,我们来看自定义枢轴编辑器(Custom pivot editor).

轴的X和Y的值是0~1,所以0.5的时候是中央,但是你可以用小于0的值或大于1的值来设定枢轴在精灵范围外.

在Project视图(如下图)里,zombie纹理资源图标右侧没有小箭头,也就是说它不包含任何子物体.

![zombie\_before\_slice-300x171][zombie_before_slice-300x171]

在这种状态下zombie纹理是不可用的,如果你尝试将它拖到Hierarchy的时候,Unity会提示它不包含精灵.这是因为我们还需要告诉Unity怎么切分使用这个精灵表.在Project视图中选择zombie,并在Inspector中点击精灵编辑器(Sprite Editor)打开如下窗口:

![sprite\_editor-300x200][sprite_editor-300x200]

精灵编辑器允许定义包含的图像怎么样来做为一个精灵.单击窗口左上方来开始定义精灵,如下图:

![slice\_button][slice_button]

精灵编辑器的slice按钮

Unity能根据图片自动找到精灵,同样你也可以调整它自动处理的结果.这里我们用它默认设置,点击Slice按钮.

![default\_slice\_options-300x177][default_slice_options-300x177]

默认切片选项

Unity是基于贴图的透明度来确定精灵切分范围的.你可以看到它找到的精灵都会有一个线框表示.现在,我们看到Unity找到了4个精灵:

![auto\_sliced\_sprites-300x73][auto_sliced_sprites-300x73]

常规来讲当图片布置的很好(带有明确的空白分割空间)时Unity的自动切割效果是最好的,像下图Unity只找到了笑脸精灵,其他精灵它并没有自动识别出来:

![example\_of\_broken\_auto\_slice-300x277][example_of_broken_auto_slice-300x277]

错过的精灵

因为两个Box重叠相交所以Unity不能找到所有精灵.

![example\_of\_working\_auto\_slice-300x277][example_of_working_auto_slice-300x277]

Unity能找到三个精灵,因为每个精灵都有明显的边界间隙.

所以我们要细致的安排精灵表中的图像.在编辑器中点击Unity自动识别的任意一个精灵都将显示精灵详情窗口,包含其名称,位置,边界和中心点,如下图:

![sprite\_selected\_in\_editor-300x200][sprite_selected_in_editor-300x200]

我们可以改变这里的值,也可以直接在图像中调整范围和中心点位置.   
通常,做了更改后,要点击应用(Appley)或者还原(Revert)按钮来保存或者放弃做的修改.

仔细观察你会发现,zombie.png的图片是安排在四个同样大小的举行中,针对于这种精灵表Unity有个单独的选项来处理它.   
在Sprite Editor的左上角单击Slice再次打开切片设置窗口,这次选择类型为Grid,切片设置将如下图:

![sprite\_editor\_grid\_defaults-300x183][sprite_editor_grid_defaults-300x183]

Pixel size字段允许指定网格单元格的大小.X定义每个单元格的宽度,Y为高度.Unity会用这些值从图像的左上角来等分图像.

我们将X设定为157,Y设定为102,如下图:

![sprite\_editor\_grid\_settings-300x109][sprite_editor_grid_settings-300x109]

切片网格大小设置.

点击Slice按钮,Unity会找到下面四个精灵:

![zombie\_grid-300x60][zombie_grid-300x60]

在切片网格中的zombie精灵.

这时你仍然可以单独选择网格中的精灵来微调单个精灵的设置,不过一般情况下是没必要的.

在精灵编辑器左上角点击应用(Apply)提交更改.Unity会更新项目资源,你可以在Project视图里看到zombie会包含子精灵,名字分别是zombie\_0, zombie\_1等等,如下图:

![sliced\_zombie\_in\_project-300x135][sliced_zombie_in_project-300x135]

现在你掌握了两种设置精灵的方式,这两种方式要活学活用,同样可以用于背景的制作.

通过选择”GameObject\\CreateEmpty”菜单我们来创建一个空GameObject,命名为zombie并设置位置为(-2,0,0)如下图:

![empty\_zombie\_gameobject][empty_zombie_gameobject]

空zombie GameObject

在Hierarchy视图中选择zombie并用”Add Component”添加一个Sprite Renderer组件.如下图:

![add\_script\_steps-135x300][add_script_steps-135x300]

点击精灵渲染器组件右边的小圆圈打开精灵渲染器的精灵选项卡,如下图:

![sprite\_field\_editor][sprite_field_editor]

在出现的对话框中包含两个标签,Assets及Scene.这里将显示你项目所有精灵资源和场景中的精灵资源.

选择Assets选项卡并选择zombie\_0到精灵渲染器,如下图:

![sprite\_selection\_dialog-293x300][sprite_selection_dialog-293x300]

在场景视图中你能看到海滩上有个悠闲的僵尸,还有一个老妇人和猫在它下方,美极了.

![zombie\_on\_beach-300x158][zombie_on_beach-300x158]

现在所有必要的精灵都在场景里了,我们来配置游戏视图.

## 配置游戏视图 ##

Zombie Conga这个游戏是为iPhone创建的,所以我们要将游戏视图尺寸设定为1136 x 640大小.

用Game视图左上角的下拉菜单来改变纵横比或固定分辨率,如下图:

![game\_view\_ctrl\_bar-300x22][game_view_ctrl_bar-300x22]

依据编辑器目前Playersetting的不同设置,这个下拉菜单也将有不同的选项,如果里面有1136 x 640这个分辨率项,直接选择它就可以了.如果没有,我们可以单击下面的加号按钮,如图:

![game\_view\_size\_options][game_view_size_options]

游戏视图尺寸选项

创建一个新的固定分辨率尺寸设定宽高为1136 和 640,如下图:

![new\_game\_view\_size][new_game_view_size]

新游戏视图尺寸

点击确定,然后同样在下拉菜单中选择你设定的新分辨率.

![game\_view\_bad\_camera-300x185][game_view_bad_camera-300x185]

注:你的视图可能和截图不太一样,因为Unity会根据屏幕空间来依照所选纵横比来调整游戏视图的大小.不管它多大的窗口,你都应该在视图里看到和截图一样的场景图像.

显然,现在这个样子是错误的,现在这里有三个不同的问题,我们需要依次纠正它们:   
场景视图的Camera设置不正确,背景不能完全填充到视图中.   
场景中游戏对象的渲染顺序不正确,所以cat和enemy都埋在了沙土里.   
图像效果不太好,这个基于现在的相机设置你有可能还看不出来,但是相信我说的,质量不好就是不好,对不对? :)

首先我们来修正Camera.

修正相机Projection

在2D游戏中,通常希望相机使用正交视图而不是透视图.本教程的前面我们已经提到Unity默认是使用透视视图的相机.我们在Hierarchy视图中选择”Main Camera”,在相机组件中,将投影设置为正交投影.并调整调整它Transform组件里的Position为(0,0,-10).如下图:

![camera\_ortho\_settings][camera_ortho_settings]

你的Game视图现在像下图:

![ortho\_game\_view\_bad\_size-300x188][ortho_game_view_bad_size-300x188]

现在效果看上去与透视投影没什么区别,精灵不受距离相机的远近影响,那怎么放大背景使其充满屏幕呢?我们推荐改变Camera的Size属性.

Camera的Size定义了视图的尺寸.它的值是从视图中心到视图顶部的距离.换句话说这个值等于视图一半高度.视图的宽度基于视图的长宽比计算,如下图:

![annotated\_ortho\_view-300x188][annotated_ortho_view-300x188]

在本例中,我们需要将背景图片从上到下完全占满整个屏幕,并允许其水平滚动.背景图像的高度是640px,我们取一半,即320px.不过这并不是完全正确的.   
在Project视图里选择background的父级查看Import Settings.   
在精灵渲染器(Sprite Renderer)的”像素到单位(Pixels to Units)”默认值是100,如下图:

![pixels\_to\_units][pixels_to_units]

在Unity中,”单位(Units)”并不一定对应到屏幕上的像素.通常物体的大小都是相对于彼此的,可以假设单位为任何计量单位,如1 unit=1米.对于精灵,Unity以像素为单位来确定大小.

例如,准备将一个500px宽度的图像导成精灵.下表显示了将它用不同的”Pixels to Units”时所呈现出的精灵在X轴向上的差别.

![pixes\_to\_units\_table-300x128][pixes_to_units_table-300x128]

不同”像素到单位(Pixels to Units)”的对比图.

background.png为640高,background精灵的”像素到单位(Pixels to Units)”比例为100,所以在Hierarchy视图中它将呈现为6.4个units高.正交相机的Size属性值是屏幕高度的一半,所以我们要设置相机尺寸(Size)为3.2个单位,如下图:

![ortho\_size\_fixed][ortho_size_fixed]

现在背景已经正确的充满了Game视图中,如下图:

![game\_view\_good\_camera-300x188][game_view_good_camera-300x188]

正确的相机设置下的Game视图

现在背景图像显示正常了,你就可以看到图像质量的问题了.下面两张图片是图片对比:

![bg\_compressed\_bad-300x59][bg_compressed_bad-300x59]

当前设置的海滩

![bg\_compressed\_good\_annotated-300x59][bg_compressed_good_annotated-300x59]

改变纹理设置后的海滩

上面这个问题是由于背景纹理在导入时压缩导致.我们可以通过改变导入设置修正它.

纠正导入设置

在Project视图选择background的父级再次显示导入设置(Import Settings),这次我们看底部的预览图.   
这个预览窗口将显示纹理的尺寸,颜色信息和内存使用情况.正如下面截图中所看到的当前纹理大小为1024×320像素,但background.png实际为2048×640像素,这就意味着Unity缩小了50%以适应1024×1024纹理尺寸.

![bg\_preview\_with\_default\_settings-300x206][bg_preview_with_default_settings-300x206]

背景纹理默认设置预览

为了解决这个质量问题,在导入设置的底部选择如图所示的最大尺寸和格式设置:

![import\_settings\_default\_tab-300x67][import_settings_default_tab-300x67]

导入设置默认选项卡

最大尺寸(Max Size)定义生成纹理所允许的最大尺寸,它是一个正方形,默认为1024px.同时图像深度默认为压缩的(Compressed).

我们可以为不同目标平台设置不同的值(例如iOS,网上及Android上),但本例中我们只处理默认(Default)选项卡.

在默认(Default)选项卡中,改最大尺寸(Max Size)到2040和点击应用(Apply)按钮.导入设置现在应该是这样的:

![background\_import\_settings\_a-300x268][background_import_settings_a-300x268]

马上你就会看到无论是场景视图还是游戏视图,画质都很好.这是因为背景图像用了较少的压缩.下图显示了Game视图:

![game\_view\_with\_correct\_settings-300x185][game_view_with_correct_settings-300x185]

用了正确设置的游戏视图

在Inspector预览图中我们能看到背景纹理现在占用0.6MB内存,远高于之前的160KB:

![annotated\_bg\_preview-300x207][annotated_bg_preview-300x207]

增大纹理尺寸导致纹理内存占用增加了4倍(预览图的数字是四舍五入的).   
对于一些纹理,我们可能需要单独调整Format值以提高需要的色彩质量,但是这会进一步增大内存占用.例如,如果你尝试改背景格式为16bits,你将看到纹理内存占用增长到2.5MB,改成真色彩(Truecolor)将会占用3.8MB.   
但是,你看下面这两个不同版本的背景效果,会发现用Compressed(压缩)设置和Truecolor(真彩色)比起来差不多:

![bg\_compressed\_good-300x59][bg_compressed_good-300x59]

压缩纹理(Compressed)的背景

![bg\_truecolor-300x59][bg_truecolor-300x59]

真彩色(Truecolor)的背景

由于压缩后的背景看起来很不错,同时节省很多内存占用,那么我们就选择压缩格式.现在背景和相机设置看起来都没问题了,我们需要找到 old lady和cat.

控制绘图顺序(Controlling Draw Order)

因为cat和enemy被绘制在了背景后面,所以我们看不到它们.可以调整游戏对象Z轴的位置,使对象靠近相机,我觉得这是一个非常好的方式,然而Unity现在支持图层排序(Sorting Layers),更适合处理这个问题.

在Hierarchy视图选择cat,把精灵渲染器的层排序(Sorting Layer)设置为Default,如下图:

![default\_sorting\_layer][default_sorting_layer]

点击Sorting Layer下拉框,你项目所有层都将呈现在这里,现在只有默认定义的Default层.

![tags\_and\_layers\_editor][tags_and_layers_editor]

可以看到有”Add Sorting Layer…. “选项,点击+号,我们创建一个新的排序图层,命名为cat,同样的再创建两个层,分别是Enemies和Zombie.现在看起来如下图:

![sorting\_layers\_defined][sorting_layers_defined]

这些层将定义绘制顺序,Layer 0,名字是Default,是在最远最后面的,Layer 1,名字是Cats,在它的前面.   
现在,已经添加的每个游戏物体都是被设定为Default层.背景图像在这层是没问题的,因为它在最后面,所以我们要更改其它精灵的层.   
在Hierarchy视图选择cat的Sorting Layer为Cats.你会在场景视图和游戏视图里立刻看到cat出现了.

![cat\_sorting\_layer][cat_sorting_layer]

在新图层的cat

![game\_view\_with\_cat\_visible-300x182][game_view_with_cat_visible-300x182]

场景中能看见cat了

在Hierarchy视图中选择enemy的Sorting Layer到Enemies层.这样以来,你会看到老太太(old lady)显现在猫的前面,猫会不会绊倒欧巴桑?管它呢…

最后,将zombie的层设定为Zombie,确保所有精灵都在背景之上渲染,现在视图看起来像这样:

![game\_view\_with\_good\_draw\_order-300x182][game_view_with_good_draw_order-300x182]

正确绘制顺序的游戏视图

注:精灵渲染器同样有个名为Order的属性,使用它可以调整相同排序层中精灵间顺序.

在本例中我们不需要调整Order属性,因为我们没有在同一个层里放不同的精灵.从我的测试结果来看,Unity在添加添加一个精灵到一个层的时候,将总会把最新的精灵画在层内旧精灵的前面.

给精灵编程

现在沙滩上散落着一些精灵,它们没有任何动作.教程这部分我们将完成它们的控制,我们会编写两段脚本,一个是僵尸的动画,另外一个是允许玩家控制僵尸的移动,其余的等你学会了自己写吧…

注:我们用C\#(发音为”see-sharp”)写脚本,它很容易,如果你喜欢,也可以用JavaScript来写.

## 精灵动画(Animating Sprites) ##

首先我们添加一个脚本来制作僵尸的动画.在Hierarchy视图选择zombie并给它新建个脚本,命名为”ZombieAnimator”.下面动画演示了具体步骤:

![add\_script\_steps-135x300 (1)][add_script_steps-135x300 _1]

在MonoDevelop中打开ZombieAnimator.cs,一般情况下在Unity双击ZombieAnimator文件就可以打开了.如下图:

![spriteanimator\_in\_inspector][spriteanimator_in_inspector]

Inspector视图中的SpriteAnimator脚本

![spriteanimator\_in\_project-300x78][spriteanimator_in_project-300x78]

Project视图中的SpriteAnimator

我们要让僵尸进行简单的行走动画,需要精灵动作表和一个循环速度.我们定义两个公共变量到脚本中:

public Sprite[] sprites;
    public float framesPerSecond;

注:在C\#中变量定义在所有大括号之外,标志着它是定义在类之内,所有函数之外.这不用特别理解明白,通常将它放在类的顶部,即任何函数定义之前.

公共变量将在Unity的编辑器中暴露出来,所以你可以直接修改它们的值而不用改变代码,哪怕是运行的时候!这个特性在实际使用中异常方便.

通过分配不同的精灵给SpriteRenderer组件来渲染动画.而不是在Update中调用动画,我们要在脚本开始运行时给它缓存个实例变量.

我们添加一个私有变量到ZombieAnimator:

private SpriteRenderer spriteRenderer;

私有变量是不会暴露在Unity编辑器中的,我们在Start中初始这个变量:

spriteRenderer = renderer as SpriteRenderer;

脚本子类MonoBehaviour可以获得变量同名的渲染器.对于显示精灵的游戏对象,渲染器将是SpriteRenderer.

注:可以在脚本里直接引用常见的对象,比较常见的如游戏对象的Transform,场景的main Camera.

我们添加如下代码在Update中:

int index = (int)(Time.timeSinceLevelLoad * framesPerSecond);
    index = index % sprites.Length;
    spriteRenderer.sprite = sprites[ index ];

关卡载入到当前的时间秒数 (更多信息请查阅文档的Time类)和每秒渲染的帧数相乘.如果动画帧是存储在一个无限长的数组里,得出的数就是数组中成员的索引数.

但是你知道数组成员不会是无限数量的,当动画帧数组播放一遍后你需要循环回到开始,通过执行模数(%)操作,即做两个数字之间的整除取余.换句话说你将得到0~数组总成员数之间的索引来控制动画帧的播放.写完上面脚本后保存,然后切换回Unity.在Hierarchy视图选择zombie会看到Zombie Animator脚本组件将显示刚才写的两个公共变量.

![public\_variables][public_variables]

精灵数组字段里面没有内容,我们需要按照如下顺序添加精灵库到数组里:zombie\_0, zombie\_1, zombie\_2, zombie\_3, zombie\_2, zombie\_1,我最喜欢的做法是在Hierarchy视图里选择zombie,在Inspector视图右上角点击锁头图标,这样zombie的Inspector面板将会一直保持显示状态,即使你选择其它对象,它依旧会显示.

![inspector\_locked][inspector_locked]

在Project视图中展开zombie纹理,单击zombie\_0以选中它,然后按住shift键再点击zombie\_3来选择4个僵尸精灵.

![sprites\_array\_plus\_icon][sprites_array_plus_icon]

拖拽鼠标,可以看到一个绿色的加号的光标,拽到精灵数组那里,这时可以看到所选项都加到了精灵数组里.现在Zombie Animator脚本组件看起来应该是这样的:

![sprites\_array\_partial][sprites_array_partial]

然后只选择zombie\_2以同样的方式追加到数组里,再追加个zombie\_1,这时精灵数组将包含正确顺序的六个元素,就像这样:

![sprites\_array\_full][sprites_array_full]

精灵数组与六个元素

再次点击锁按钮解锁,如图:

![inspector\_unlocked][inspector_unlocked]

Inspector视图解锁

最后,设置Frames Per Second到10,像下面这样:

![zombie\_frames\_per\_second][zombie_frames_per_second]

运行一下游戏,你会看到可怕的僵尸…

注:你可以在运行时根据自己心情调整 Frames Per Second来找到一个合适的速度,但Unity停止播放后会重置这个调整的值,因此你要停下时一定要记录一下这个值在赋到 Frames Per Second上.

现在僵尸已经复活了,下一节我们要创建一个简单的控制器脚本让它行走起来.

控制精灵运动

在Hierarchy视图中选择zombie并添加一个新C\#脚本,命名为”ZombieController”,你可能要一个年老的迈着沉重步伐的僵尸,也或者要一个比较年轻有活力的僵尸,可以通过移动速度来调整它们的姿态,便于我们微调,我们将它写为公共变量.

打开ZombieController.cs脚本并添加如下代码:

public float moveSpeed;

moveSpeed将存储一个units数,这个单位不是像素,而是僵尸每秒移动的速度.因为现在精灵是一个单位为100个像素,所以这个值可能需要相当小.

正如下面的动画,要做当用户点击鼠标后,僵尸沿着直线走到鼠标的那个点(或这用户是按住鼠标同时拖拽鼠标来改变僵尸新的位置).

![zombie\_pacing-300x85][zombie_pacing-300x85]

![zombie\_circles-300x271][zombie_circles-300x271]

平时很可能不会在每一帧都得到输入事件,所以当僵尸目的方向改变时我们需要存储僵尸的目的地方向.要做到这一点,我们要计算出指向僵尸行走方向的normalized向量(长度为1的向量).

添加如下变量到ZombieController中:

private Vector3 moveDirection;

虽然我们现在在做一个2D游戏,但是Unity仍旧使用的是3D坐标系,因此要改变对象位置的Vector3.虽然这里僵尸不会改变z轴的位置,我们可以用Vector2类型,但是我避免后面要在Vector2和Vector3两种类型转换的麻烦,我还是用Vector3了.

添加以下代码以便有输入时间时更新moveDirection:

// 1
    Vector3 currentPosition = transform.position;
    // 2
    if( Input.GetButton("Fire1") ) {
    // 3
    Vector3 moveToward = Camera.main.ScreenToWorldPoint( Input.mousePosition );
    // 4
    moveDirection = moveToward - currentPosition;
    moveDirection.z = 0;
    moveDirection.Normalize();
    }

下面说明一下刚才这段代码的用途:   
我们要获得僵尸当前位置,所以将位置付给局部变量,然后判断鼠标左键(Fire1)是否被按下,用场景的main Camera,转换鼠标目前位置为世界坐标系,因为ScreenToWorldPoint不会影响到Z轴的值,所以这里我们直接用鼠标的位置来取得moveToward,计算移动的方向是用目标位置减去僵尸目前的位置,,因为你不想改变僵尸Z轴的位置,所以我们设置moveDirection的z值为0,并用Normalize将moveDirection变为长度为1的”单位长度(unit length)”.Unit length的向量用起来是很方便的,可以通过一个标量值,如moveSpeed乘以这个向量来让向量指向一个方向,而保持长度.后面会用到这个.

注:用Input来访问输入数据是比较通用的方法,一个项目默认定义了各种输入名称,比如Horizontal, Vertical, 和 Jump, Horizontal是检测操纵杆x轴的位置以及键盘左右箭头按钮状态.如果你需要获得水平方向的输入数据,可以直接用Horizontal来获取,而不用关心具体是怎么获取来的.

Fire1默认定义的是虚拟键之一,它注册的是一个操纵杆或鼠标的按钮0,而左control键是用Input.GetButton返回的布尔值获得的.代码将在鼠标按下的每一帧时更新moveDirection(不只是当初按下的那一阵).没错,这也意味着你可以通过键盘的左CTRL键来控制僵尸方向,只是还要用鼠标来掌舵.   
在Edit\\Project Settings\\Input能看到关于InputManager设置.

下面我们添加下面的代码来做僵尸跟随鼠标走路的效果:

Vector3 target = moveDirection * moveSpeed + currentPosition;
    transform.position = Vector3.Lerp( currentPosition, target, Time.deltaTime );

第一行是用来计算以moveSpeed速度单位让僵尸从当前位置移动到目标位置,也就是僵尸将按照当前位置朝向鼠标目标位置方向移动过去.   
第二行使用Vector3.Lerp来计算当前位置与目标位置之前路径上僵尸的新位置,线性插值(Lerp)是为取两个值之间内插值的最便利方法.Lerp第三个参数取值范围是0~1,这意味着0时将返回你现在的位置点,值为1时将返回目标点,0.5时将返回它们的中点.我们这里用Time.deltaTime来作为第三个参数值,因为它是一秒钟的一小部分,很可能会小于1,会让你得到沿着起点到终点路径上的一些点,正因为Time.deltaTime任何时候都将接近于1,因此你可以得到一个不错的平滑运动.

保存这个脚本并切换回Unity.

运行游戏,点击某个地方让僵尸走过去,因为没有设定ZombieController的moveSpeed,所以它还不会走动,不用停止游戏,我们在Inspector面板中选择zombie找到Zombie Controller脚本组件改变移动速度为2,再次在沙滩上点击鼠标,你会看到僵尸走过去了.

![zombie\_brains][zombie_brains]

在Inspector更改移动速度知道你觉得满意.根据你调整的移动速度,你可能还需要调整Zombie Animator脚本中的Frames Per Second来让僵尸动画与行走速度相匹配.   
当你觉得满意的时候你记住现在设定的数值,然后停止游戏的运行,重新设定这些值好让下次运行时移动速度和动画是正确的.

这个时候,你有可能发现下面这些问题:   
1.当游戏开始运行时,你会发现僵尸的腿在动,可它确实静止在那里的.   
2.僵尸愉快的向右走出了屏幕.   
3.他走路的时候并不看路.

在看完这个教程时你会解决它跑出屏幕的问题,所以现在暂时忽略这个问题.此外,如果它跑到了屏幕外面,只需再次点击沙滩,他有可能就会回来的.

再次回到MonoDevelop打开ZombieController.cs.   
这个脚本用moveDirection来移动僵尸,但是只有当有输入事件的时候它才开始移动,为了让场景开始的时候它就前进,我们需要初始moveDirection指向它的右方.   
在Start中添加下面这行:

moveDirection = Vector3.right;

这个点是在x轴的正方向上,换句话说它指向朝右的方向.

保存ZombieController.cs并回到Unity中再次播放游戏.   
现在僵尸自己就跑了,接下来我们要让他看路走.   
回到ZombieController.cs,添加一个公共变量在ZombieController中做为僵尸的扭率:

public float turnSpeed;

我们将用turnSpeed来控制僵尸定位自己方向的响应速度.   
Unity内部是使用四元数表示旋转.如果你想了解四元数,可以看此链接:http://en.wikipedia.org/wiki/Quaternion,不过也许你看了后会觉得头脑发昏,但值得宽慰的是在Unity做2D游戏不用完全了解四元数是什么.   
因为用 Quaternion.Euler 方法可以从一个欧拉角获得四元数.大多数人都习惯欧拉角,它包含单独的x,y,z的旋转角度.虽然它们因为如万向轴死锁(gimbal lock)等问题在3D创作中使用不太理想,但对于2D游戏来说,欧拉角是蛮好用的,我们可能只需要绕z轴旋转.

注:欲了解更多关于四元数,可以看我们这个教程OpenGL ES Transformations with Gestures(http://www.raywenderlich.com/50398/opengl-es-transformations-gestures)”.

最后我们在Update脚本里添加下面的代码:

float targetAngle = Mathf.Atan2(moveDirection.y, moveDirection.x) * Mathf.Rad2Deg;
    transform.rotation =
    Quaternion.Slerp( transform.rotation,
    Quaternion.Euler( 0, 0, targetAngle ),
    turnSpeed * Time.deltaTime );

我们来看一下这个代码,首先我们用Mathf.Atan2来找到x轴与moveDirection之间的角度.Mathf.Atan2将返回角度的弧度,所以要乘以Mathf.Rad2Deg来转换为角度.   
然后用Quaternion.Slerp来转向您所计算的目标角度.   
Quaternion.Slerp执行的是指定两个角度的球面线性插值.类似于前面我们用到的Vector3.Lerp,只是它是计算新的旋转,而不是计算新的位置.

此前,调用Vector3.Lerp,并用moveSpeed调整僵尸移动的距离,同时用turnSpeed做僵尸的面向角度处理.

以上就是ZombieController.cs脚本,保存它并回到Unity.   
在Hierarchy视图选择zombie.设定Turn Speed到5,如下图:

![turn\_speed\_set][turn_speed_set]

运行游戏并点击周围的海滩,僵尸将始终朝向你鼠标点击的位置.

![dizzy\_zombie][dizzy_zombie]

上面这些就是这个教程教你做Zombie Conga游戏的所有内容.通过”File\\Save Scene as…. ”并命名为”CongaScene”保存场景.

下一节我们要讲一些只在Unity专业版(付费版本)才提供的功能,这些对于Zombie Conga游戏不是必要的,但你可能想了解更复杂项目的制作,就需要用到它-Sprite Packing.

## 精灵封装(Sprite Packing)-仅针对专业人员. ##

注:本节介绍的功能,只适用于Unity Pro中.你仍然可以在Unity free版本中直接使用一个纹理图集,可它需要你用不同的工具来创建生成纹理图集的图片文件.你同样可以在运行时将一些精灵压缩为图集切片,但是它会令你组织和使用资源变成很不直观的,因此我们这里不介绍这种方法.

![game\_view\_stats\_button-300x15][game_view_stats_button-300x15]

播放游戏,并点击游戏视图顶部控制栏的Stats按钮查看渲染状态信息,如下图:

![stats\_no\_batching-300x203][stats_no_batching-300x203]

请注意,现在场景中因为没有进行配料(batching)优化,所以Draw calls看起来很多.

当然,Draw calls现在是正常的,因为现在场景里渲染了四个精灵,每一个精灵都用了一个独自的材质球.虽然现在只有四个draw calls,但真正的游戏中随着场景中对象和效果的增加,这个draw calls数也会增加,太多的draw calls会降低游戏性能,所以我们要仔细的组织精灵纹理,幸运的是有个基本的方法来帮助我们优化draw calls,就是将零散的精灵图片转换成精灵纹理图集.纹理图集(texture atlases)是由若干个小纹理组成的大纹理贴图,用于优化渲染时GPU的调用,这不是新技术,以前要我们用第三方工具或者手工创建它,而现在Unity可以帮我们自动创建它.

注:在Unity4.3.2版中的Sprite Packing仍处于开发者预览模式.

为了将精灵合并到图集里,首先需要修改其导入设置.   
在Project视图中找到cat.png并打开Import Settings,这里注意名为Packing的标签属性. Packing标签用来定义精灵加入到纹理图集后的名称,可以是任何你想要的字符串.   
在Packing标签中输入它的名字”toons”:

![packing\_tag\_set][packing_tag_set]

然后点击应用按钮保存设置,用同样的方法将enemy和zombie也命名一下.   
然后从”Window\\Sprite Packer”菜单中打开”Sprite Packer”,如果是4.3.2版本,有可能是” Window\\Sprite Packer (Developer Preview)”这样的菜单,那么将会显示下面这样的错误提示:

![sprite\_packer\_disabled\_error-300x35][sprite_packer_disabled_error-300x35]

正如你所见默认是禁用Sprite packing的,我们到”Edit\\Project Settings\\Editor”中把Sprite Packer的模式选为”Always Enabled”,像下图这样:

![editor\_settings\_sprite\_packer-246x300][editor_settings_sprite_packer-246x300]

当选择”Always Enabled”后,你可以在build时候看到一个”only packing your Sprites for builds”选项.

再次从”Window\\Sprite Packer”菜单打开Sprite Packer窗口,如下图:

![sprite\_packer\_empty-300x252][sprite_packer_empty-300x252]

黄色的文字是提醒你用的是一个功能的预览版.以后正式版就不会看到这个提醒文字了.

在这个窗口的左上方点击Pack按钮,你会看到精灵都排列在窗口里了,如下图:

![sprite\_packer\_toons\_atlas-300x252][sprite_packer_toons_atlas-300x252]

再次运行游戏到游戏视图查看运行状态信息,你将看到现在只用了两个draw calls,比原来省了两个.

![stats\_with\_batching-300x206][stats_with_batching-300x206]

这样做的好处是显而易见的,精灵共享使用了材质球,优化了性能,同时做这个优化如此简单,何乐不为.

## Sprite Packer的选项和问题 ##

Sprite Packer窗口顶部包含一个控制栏,如下图:

![sprite\_packer\_ctrl\_bar-300x22][sprite_packer_ctrl_bar-300x22]

1:视图中看到的是目前的图集.第一个下拉菜单是你使用过的Packing标签名称.可以选择它查看它的内容.   
2:如果Sprite Packer帮你整合图集超过一张图,你需要通过第二个下拉菜单切换其它图集.   
3:默认精灵在图集中的分配方法是按照DefaultPackerPolicy进行的,可以通过调整DefaultPackerPolicy来自定义分配方法,不过这个高级功能本教程就不介绍了.

有时候Unity会将我们本来要整合到一个图集拆分创建成多个地图集,并把名字加了序号.造成这个问题的原因是精灵纹理压缩格式不同.

例如:zombie.png我们设置的是16位颜色(16 bits),而enemy.png和cat.png是用的压缩格式(Compressed),那么Unity整合图集时,将会创建出两个图集,名称分别是”toons (Group 1)”和”toons (Group 2)”:

![sprite\_packer\_atlas\_groups-300x251][sprite_packer_atlas_groups-300x251]

尽管这三个精灵有相同的Packing标签,但Unity仍旧创建了多个图集.为了确保图集最优化,我们要确保准备整合到同一个图集中的精灵的压缩格式相同.

正常情况下,将尽可能的减少精灵图集的总数,除非精灵太多,一张图集存不下,Unity会再次自动拆分图集,我们要用Packing标签合理安排精灵归属,尽可能做到精灵图集的最优化.

好了,本教程到此结束,可以从这里下载到完成的项目源码:(http://cdn5.raywenderlich.com/wp-content/uploads/2014/01/ZombieConga-Part1-complete.zip),官方出的中文字幕版2D工具视频教程:http://v.youku.com/v\_show/id\_XNjQxNDk0MTg4.html

[Link 1]: http://www.tairan.com/archives/#0
[Link 2]: http://www.tairan.com/archives/#1
[2D]: http://www.tairan.com/archives/#2
[Sprites]: http://www.tairan.com/archives/#3
[Sprite]: http://www.tairan.com/archives/#4
[Slicing Sprite Sheets]: http://www.tairan.com/archives/#5
[Link 3]: http://www.tairan.com/archives/#6
[Animating Sprites]: http://www.tairan.com/archives/#7
[Sprite Packing_-_.]: http://www.tairan.com/archives/#8
[Sprite Packer]: http://www.tairan.com/archives/#9
[overview_pic]: http://img0.tuicool.com/6RBv6j.png!web
[new_2d_unity_project-300x204]: http://img2.tuicool.com/aUbYFn3.png!web
[editor_settings_default_behavior-241x300]: http://img1.tuicool.com/Mjum6j7.png!web
[2d_mode_in_scene_ctrl_bar-300x35]: http://img0.tuicool.com/bANvim.png!web
[scene_projection_comparison-228x300]: http://img2.tuicool.com/iIzuInJ.png!web
[simple_sprite_add-300x156]: http://img0.tuicool.com/fMBRjaa.gif
[cat_in_inspector-264x500-158x300]: http://img0.tuicool.com/MniUNn.png!web
[sprite_mesh]: http://img1.tuicool.com/MJVFvy.png!web
[sprite_field_in_inspector]: http://img1.tuicool.com/femIje.png!web
[highlighted_cat-300x118]: http://img0.tuicool.com/3yQj22.png!web
[enemy_initial_position]: http://img1.tuicool.com/eQbU73.png!web
[cat_initial_position]: http://img0.tuicool.com/VbqAzy.png!web
[cat_and_enemy_scene-300x149]: http://img0.tuicool.com/juQbma3.png!web
[background_initial_position]: http://img2.tuicool.com/YR3IJn.png!web
[scene_with_just_bg-300x146]: http://img0.tuicool.com/6zeMfq.png!web
[zombie-300x48]: http://img0.tuicool.com/uuyyUn.png!web
[zombie_as_single_sprite-300x171]: http://img0.tuicool.com/fuqmQf.png!web
[zombie_import_settings]: http://img1.tuicool.com/UjaAriF.png!web
[zombie_before_slice-300x171]: http://img1.tuicool.com/eIBVfa.png!web
[sprite_editor-300x200]: http://img1.tuicool.com/FbERzy.png!web
[slice_button]: http://img1.tuicool.com/jEzeUn2.png!web
[default_slice_options-300x177]: http://img2.tuicool.com/UVF77rU.png!web
[auto_sliced_sprites-300x73]: http://img2.tuicool.com/aYz6r2.png!web
[example_of_broken_auto_slice-300x277]: http://img1.tuicool.com/RFnUBj.png!web
[example_of_working_auto_slice-300x277]: http://img2.tuicool.com/Zn6rEb.png!web
[sprite_selected_in_editor-300x200]: http://img0.tuicool.com/yENnmq.png!web
[sprite_editor_grid_defaults-300x183]: http://img2.tuicool.com/67N3Yf.png!web
[sprite_editor_grid_settings-300x109]: http://img2.tuicool.com/FbQzEz.png!web
[zombie_grid-300x60]: http://img0.tuicool.com/zy2YFn.png!web
[sliced_zombie_in_project-300x135]: http://img0.tuicool.com/267Fbe.png!web
[empty_zombie_gameobject]: http://img2.tuicool.com/vIJBfeM.png!web
[add_script_steps-135x300]: http://img2.tuicool.com/qem2em.gif
[sprite_field_editor]: http://img2.tuicool.com/Bj2q6fB.png!web
[sprite_selection_dialog-293x300]: http://img1.tuicool.com/VvMJfq.png!web
[zombie_on_beach-300x158]: http://img0.tuicool.com/aamyiu.png!web
[game_view_ctrl_bar-300x22]: http://img1.tuicool.com/JbIZBj.png!web
[game_view_size_options]: http://img2.tuicool.com/2YVfMn.png!web
[new_game_view_size]: http://img0.tuicool.com/qmmEra.png!web
[game_view_bad_camera-300x185]: http://img0.tuicool.com/ZnaAbi.png!web
[camera_ortho_settings]: http://img1.tuicool.com/fayAR3.png!web
[ortho_game_view_bad_size-300x188]: http://img1.tuicool.com/bE3UZn.png!web
[annotated_ortho_view-300x188]: http://img1.tuicool.com/iaYnMf.png!web
[pixels_to_units]: http://img1.tuicool.com/mqE3Ab.png!web
[pixes_to_units_table-300x128]: http://img0.tuicool.com/vuuu2e.png!web
[ortho_size_fixed]: http://img0.tuicool.com/jauiUv.png!web
[game_view_good_camera-300x188]: http://img2.tuicool.com/VjuaIf.png!web
[bg_compressed_bad-300x59]: http://img1.tuicool.com/E7naYb.png!web
[bg_compressed_good_annotated-300x59]: http://img0.tuicool.com/ee6rUr.png!web
[bg_preview_with_default_settings-300x206]: http://img2.tuicool.com/fQf6zq.png!web
[import_settings_default_tab-300x67]: http://img1.tuicool.com/aEBZZr.png!web
[background_import_settings_a-300x268]: http://img2.tuicool.com/bQjQrm.png!web
[game_view_with_correct_settings-300x185]: http://img0.tuicool.com/rym2iy.png!web
[annotated_bg_preview-300x207]: http://img0.tuicool.com/ZbEbIj.png!web
[bg_compressed_good-300x59]: http://img1.tuicool.com/QviuQr.png!web
[bg_truecolor-300x59]: http://img2.tuicool.com/ziYvey.png!web
[default_sorting_layer]: http://img2.tuicool.com/6NR7fu.png!web
[tags_and_layers_editor]: http://img1.tuicool.com/IFfiYz.png!web
[sorting_layers_defined]: http://img0.tuicool.com/v6n6va.png!web
[cat_sorting_layer]: http://img2.tuicool.com/eeuMr2.png!web
[game_view_with_cat_visible-300x182]: http://img1.tuicool.com/zqU7Rb.png!web
[game_view_with_good_draw_order-300x182]: http://img1.tuicool.com/RFva6r.png!web
[add_script_steps-135x300 _1]: http://img1.tuicool.com/3IVVBvE.gif
[spriteanimator_in_inspector]: http://img2.tuicool.com/zYR7fi.png!web
[spriteanimator_in_project-300x78]: http://img2.tuicool.com/A3U3aen.png!web
[public_variables]: http://img0.tuicool.com/jqUV3yR.png!web
[inspector_locked]: http://img0.tuicool.com/YZJzqa.png!web
[sprites_array_plus_icon]: http://img2.tuicool.com/3qqm63.png!web
[sprites_array_partial]: http://img2.tuicool.com/BVzuMz.png!web
[sprites_array_full]: http://img1.tuicool.com/Yv2Qba.png!web
[inspector_unlocked]: http://img0.tuicool.com/aIfqMj.png!web
[zombie_frames_per_second]: http://img2.tuicool.com/BZr6Rr.png!web
[zombie_pacing-300x85]: http://img1.tuicool.com/aMfMvq.gif
[zombie_circles-300x271]: http://img1.tuicool.com/3eMvAvv.gif
[zombie_brains]: http://img1.tuicool.com/ZvyQfy.gif
[turn_speed_set]: http://img0.tuicool.com/QVZJJr.png!web
[dizzy_zombie]: http://img0.tuicool.com/ny63Qj.gif
[game_view_stats_button-300x15]: http://img0.tuicool.com/eY7rQn.png!web
[stats_no_batching-300x203]: http://img2.tuicool.com/Fr6buyB.png!web
[packing_tag_set]: http://img0.tuicool.com/AzERR3v.png!web
[sprite_packer_disabled_error-300x35]: http://img2.tuicool.com/IRb2qa.png!web
[editor_settings_sprite_packer-246x300]: http://img0.tuicool.com/7zueI3a.png!web
[sprite_packer_empty-300x252]: http://img1.tuicool.com/Iz2uyi.png!web
[sprite_packer_toons_atlas-300x252]: http://img1.tuicool.com/bI3ARv.png!web
[stats_with_batching-300x206]: http://img2.tuicool.com/VFvuEf.png!web
[sprite_packer_ctrl_bar-300x22]: http://img0.tuicool.com/2emqAj.png!web
[sprite_packer_atlas_groups-300x251]: http://img1.tuicool.com/FBfiie.gif