Unity 2D入门基础教程

admin管理员组

文章数量:1530881

2024年5月3日发(作者：)

Unity2D入门基础教程

作者:ChristopherLaPolloXiaoke翻译

目录

一、开始

.........................................................................................

-2-

二、创建你的项目

.........................................................................

-2-

三、场景视图的2D模式

..............................................................

-3-

四、轻松制造精灵(Sprites)

...........................................................

-4-

五、Sprite资源

.............................................................................

-5-

切片精灵表(SlicingSpriteSheets)

....................................................

-9-

六、配置游戏视图

.......................................................................

-17-

七、精灵动画(AnimatingSprites)

...............................................

-27-

八、精灵封装(SpritePacking)-仅针对专业人员。

....................

-36-

九、SpritePacker的选项和问题

................................................

-39-

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

比如你可以将一张纹理赋予一个”面片”网格，然后用脚本控制它的动画调整

它的位移。如果你要使用物理引擎，那么还要将这个Obeject处理3D的，所以

你还要确保你的Object要有足够的深度以确保他们在其它轴向上不起冲突。或

者你选用一个第三方插件，如2DToolkit或者Orthello2DFramework，他们有着

强大的功能，但同样需要你去做一些约束工作。

当上面这些你仍然可以选用上面这些方法的时候，Unity4。3增加了原生的

2D开发环境，让我们一探究竟吧。

这个教程将带你探索Unity的2D工具，教程将引导你做一个主题为僵尸的

iOS游戏。教程重点在于一个新的资源类型-”Sprite”，你将学到所有关于Sprite

知识，在后续的教程里你将学会如何通过Unity的动画系统控制动画，以及用到

Untiy的2D物理引擎的支持。

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

注:本教程假定你有一些Unity的使用经验，知道一些基本知识，了解Unity

的界面，游戏对象和组件等操作，比如你知道”要添加一个”猫”到场景里需要从

Project拽到Hierarchy里”。

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

最后要注意，本教程是在OSX系统下操作的，然而如果你在Windows下也

不用担心，Unity在Windows上和OSX下大多数指令都是一样的，会有一些小的

差异(如使用Windows资源管理器取代Finder)，或者干脆直接用OSX系统。

-1-

一、开始

Unity在4。3中加入了原生的2D工具(专业版和免费版都带)，所以你要确

保你安装的最新版，可以从官网下载到。

你还需要一些美术资源为这个2D游戏，幸运的是Mike

Berg(weheartgames。com/)已经做了一些很酷的图片资源，可以从这里下

载解压使用:

cdn4。raywenderlich。

com/wp-content/uploads/2013/12/ZombieConga-Part1-Resources。zip

注:你可以在其他游戏里使用或修改本教程里提供的美术资源，音乐和音效，

但是你必须在游戏中包含一下信息:”Artwork/sounds:fromiOSGamesbyTutorials

book，availableatwww。raywenderlich。com”。

二、创建你的项目

打开Unity并选择”FileNewProject…”创建一个新的项目，在”Createnew

Project”里点击”Set…”标签，给新项目命名为”ZombieConga”，选择一个存储的位

置点”Save”。

然后在”Setupdefaultsfor”选择”2D”，再点击”CreateProject”:

上面这个对话框是Unity中遇到的第一个含有2D特性的设置。你可以随时

改变这个2D设置，如果你想更改这个设置，可以选择”EditProject

SettingsEditor”打开编辑器设置，在”DefaultBehaviorMode”中改模式为2D，如

下图:

-2-

“DefaultBehaviorMode”(默认行为模式)定义你项目在导入Assets时的默认

导入设置，当设置为3D模式时，Unity假设你将导入的文件创建为纹理类型

(如:PNG文件);当设置为2D时，Unity假定你想要的导入的资源为Sprite类型，

你将在教程里学到关于Sprite资源导入设置具体的解释。

三、场景视图的2D模式

下一个2D特征就是在场景视图里有个控制二维切换的按钮，点击2D按钮

可以激活2D模式，像下面这样:

这个按钮会将场景相机在透视视图和正交投影视图之间进行切换。它们有什

么差别呢?当观察透视视图时，远离相机的物体看起来更小，就像在现实世界中

眼睛看物体一样，然而当正交投影视图的时候，物体的大小并不受与相机的距离

影响。因此，在二维模式时，一个对象不管位置离相机远近，只要尺寸不变，它

看起来将没有变化的。

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

-3-

上一个图片也能看到当2D模式启用时，场景视图的Gizmo控制也是隐藏的，

你只能做视图的平移操作，Y轴指向上，X轴指向右。

重要

:

这个设置是不会影响到游戏播放时效果的，因为它只是帮助你组织场景里的对象，甚至后期

你会在创建

2D

游戏的同时创造

3D

游戏，你可能需要在这两种模式间根据需要切换，本教

程所有截图都是在场景视图的

2D

模式下。

为了更好的跟着教程学习，你可以调整Unity的布局和教程截图的的界面布

局一致，教程里Unity是用”Dark”皮肤运行于OSX系统下，Dark皮肤只在UnityPro

版本才能启用。我创建了8个打开的tab，调整他们如下面的样子，

如图你可以看到，左上角由Scene，Console和Animator视图组成，而Game，

Project和Animation视图在左下角组合为一个选项卡，右边两列是Hierarchy和

Inspector视图。

当然有时候我也会改变这种设置，视图的布局没有一个固定的要求，可以由

自己心情随意安排自己的工作布局。

四、轻松制造精灵(Sprites)

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

第一步:拽从Finder窗口拽文件到Scene视图，如下图:

-4-

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

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

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

如此简化的导入依靠Unity默认导入设置，虽然这常常不是最终需要的正确

效果，但足以说明Unity的新功能将使2D游戏开发异常简单!本教程后面涵盖了

所有你使用Unity2D开发游戏需要了解的知识。

五、Sprite资源

在Hierarchy视图里选择cat，然后看Inspector。你的Inspector视图位置可

能和下图不太一样，但不必担心这不重要，这里要注意的是为了让cat在场景中

显示，Unity附加了一个SpriteRenderer组件到GameObject。

Unity会为这个物体创建网格，Unity会基于图像的非透明部分创建网格，下

图里的僵尸的蓝色网格就是:

-5-

通过这样创建的纹理网格，可以有助于Unity提高场景运行时的fillrate，也

使得创建多边形碰撞盒更容易，教程后面将介绍如何创建使用碰撞盒。

注意

:

别让僵尸突然出现惊吓到你，我只是觉得它比可爱的小猫更有趣。

在本节教程中你将了解Sprite的渲染器组件属性，可以看到Sprite的名称。

下图里你可以看到”cat”对象在精灵渲染器里被分配的名字是”cat”。

确保Project视图是可见的，在Inspector视图里惦记Sprite编辑框能看到

Sprite资源将在Project视图里呈现高亮状态，如下图:

-6-

Project视图中cat精灵高亮

注:高亮边框会在几秒后消失，所以如果你不小心错过它，可以再次点击一次Sprite编辑框。

当然现在项目里只有一个资源，你不可能错过它。:]

正如上一个截图你所看到的，Unity会在Project视图里高亮显示cat项，还

有另外一个也叫cat的子项。两只猫都在Project视图里，很容易混淆啊，这是

怎么回事呢:

父级的cat是纹理资源。它将关联到你导入的原始美术资源文件，以

及控制着如何从这个纹理资源创建Sprites，你可以看到它有个文件内容的缩略

图。

子集的cat是Unity导入时创建的Sprite资源。现在只有一个子项，

因为Unity只从文件里创建了一个Sprite，教程后面将教你创建”slicingsprite”，

即从一个图片创建出多个Sprites。

注:Unity渲染Sprite对象实际上是由一个Texture2D生成的，图像信息实际是存储于图片文

件中，你也可以动态的创建自己需要的Texture2D对象来运行时生成Sprite，这个进阶的知

识本教程就先不讲了。

比如，你可以从Finder中拽一个图片到Scene视图(或者Hierarchy

视图，随你自己)中创建Sprites。但是更常见的是先添加资源到Project里在添加

它到场景中。

将下载到的文件添加到项目里:，，和。

Unity提供了五种方法让你将资源导入项目中:

从Finder窗口拖拽文件到Project视图。

到”AssetsImportNewAsset…”菜单，选择文件并点击Import。

在Project视图中右键选择”AssetsImportNewAsset…”菜单，选择文件并点

击Import。

在你的系统中直接添加文件或者创建子目录到项目的Assets目录，Unity会

自动刷新显示最新的资源内容。不过要注意，一定不要直接从文件系统里删除不

用的资源，要总是从Unity编辑器内部删除资源，因为Unity会存储有关项目的

资源metadate，直接从文件系统修改删除可能损坏项目结构。

当然你也可以直接将文件Hierarchy或者Scene视图，不过这样做是直接在

当前场景中创建一个GameObject。

-7-

从Project视图里拖拽enemy到Hierachy视图。和cat一样，同样会有两个

名字为enemy项出现在Project视图中，当现在这样只有一个子精灵的时候，你

选择拖拽哪个enemy到Hierarchy视图都是一样的。

在Hierarchy视图里选择enemy，设置Transform组件的位置为(2，0，0)，

如下图:

enemy的初始位置。

现在场景视图里显得有点乱，在Hierachy视图里选择cat并设置它的位置为

(0，2，0)，如下图:

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

cat和enemy在Scene视图

最后，从Project视图拖拽background到Hierachy视图里，并设置位置为(0，

0，0)，如下图:

-8-

你可以稍晚些调整背景图像的质量，所以现在不用担心它现在不正确的样

子。(提示:Unity默认设置在导入时是不正确的)，Scene视图现在

会是这样子:

只显示背景的场景视图

现在看不到cat和欧巴桑没关系，它们只是被背景暂时挡住了。可以很容易

的调整出来，在调整他们层次之前，我们需要切一具尸体，嘿嘿，一具corpse

Sprites，像这样:

六、切片精灵表(SlicingSpriteSheets)

已经导入到项目了，你会发现这个文件和其它文件不同，它包

含了好多个图像，如下图:

这种文件通常被称为精灵表(spritesheet)，我们将为表里的每个图像创建单

独的Sprite。在Project视图里展开zombie，能看到像下面截图这样，Unity创建

了一个包含所有图像的Sprite。这不是我们想要的。

-9-

Unity提供了一个非常简单的解决方案，可以来处理这个需求，在Porject视

图选择zombie的顶层级后会看到Inspector中显示了它的ImportSettings，设置

Sprite模式到Multiple并点击Apply:

选择这个选项后在Sprite编辑器中会出现一个新的按钮，并且还移除了Pivot

属性，因为每个Sprite都将定义自己的轴点。

不知道什么是曲轴点(Pivotpoints)?SpritePivot定义了精灵在局部坐标系中

的原点，例如，Sprite的枢轴点在精灵的中心或者左上方，缩放它或者旋转它时，

精灵将围绕这个原点进行变换。

你可以通过Pivot组合框来指定精灵的枢轴点，我们来看自定义枢轴编辑器

(Custompivoteditor)。

轴的X和Y的值是0~1，所以0。5的时候是中央，但是你可以用小于0的

值或大于1的值来设定枢轴在精灵范围外。

在Project视图(如下图)里，zombie纹理资源图标右侧没有小箭头，也就是

说它不包含任何子物体。

-10-

在这种状态下zombie纹理是不可用的，如果你尝试将它拖到Hierarchy的时

候，Unity会提示它不包含精灵。这是因为我们还需要告诉Unity怎么切分使用

这个精灵表。在Project视图中选择zombie，并在Inspector中点击精灵编辑器

(SpriteEditor)打开如下窗口:

精灵编辑器允许定义包含的图像怎么样来做为一个精灵。单击窗口左上方来

开始定义精灵，如下图:

精灵编辑器的slice按钮

Unity能根据图片自动找到精灵，同样你也可以调整它自动处理的结果。这

里我们用它默认设置，点击Slice按钮。

-11-

默认切片选项

Unity是基于贴图的透明度来确定精灵切分范围的。你可以看到它找到的精

灵都会有一个线框表示。现在，我们看到Unity找到了4个精灵:

常规来讲当图片布置的很好(带有明确的空白分割空间)时Unity的自动切割

效果是最好的，像下图Unity只找到了笑脸精灵，其他精灵它并没有自动识别出

来:

错过的精灵

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

-12-

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

所以我们要细致的安排精灵表中的图像。在编辑器中点击Unity自动识别的

任意一个精灵都将显示精灵详情窗口，包含其名称，位置，边界和中心点，如下

图:

我们可以改变这里的值，也可以直接在图像中调整范围和中心点位置。

通常，做了更改后，要点击应用(Appley)或者还原(Revert)按钮来保存或者放

弃做的修改。

仔细观察你会发现，的图片是安排在四个同样大小的举行中，针

对于这种精灵表Unity有个单独的选项来处理它。

在SpriteEditor的左上角单击Slice再次打开切片设置窗口，这次选择类型为

Grid，切片设置将如下图:

-13-

Pixelsize字段允许指定网格单元格的大小。X定义每个单元格的宽度，Y为

高度。Unity会用这些值从图像的左上角来等分图像。

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

切片网格大小设置。

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

在切片网格中的zombie精灵。

这时你仍然可以单独选择网格中的精灵来微调单个精灵的设置，不过一般情

况下是没必要的。

在精灵编辑器左上角点击应用(Apply)提交更改。Unity会更新项目资源，你

可以在Project视图里看到zombie会包含子精灵，名字分别是zombie_0，

zombie_1等等，如下图:

-14-

现在你掌握了两种设置精灵的方式，这两种方式要活学活用，同样可以用于

背景的制作。

通过选择”GameObjectCreateEmpty”菜单我们来创建一个空GameObject，命

名为zombie并设置位置为(-2，0，0)如下图:

空zombieGameObject

在Hierarchy视图中选择zombie并用”AddComponent”添加一个Sprite

Renderer组件。如下图:

-15-

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

在出现的对话框中包含两个标签，Assets及Scene。这里将显示你项目所有

精灵资源和场景中的精灵资源。

选择Assets选项卡并选择zombie_0到精灵渲染器，如下图:

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

方，美极了。

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

-16-

七、配置游戏视图

ZombieConga这个游戏是为iPhone创建的，所以我们要将游戏视图尺寸设

定为1136x640大小。

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

依据编辑器目前Playersetting的不同设置，这个下拉菜单也将有不同的选项，

如果里面有1136x640这个分辨率项，直接选择它就可以了。如果没有，我们可

以单击下面的加号按钮，如图:

游戏视图尺寸选项

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

新游戏视图尺寸

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

-17-

注:你的视图可能和截图不太一样，因为Unity会根据屏幕空间来依照所选纵

横比来调整游戏视图的大小。不管它多大的窗口，你都应该在视图里看到和截图

一样的场景图像。

显然，现在这个样子是错误的，现在这里有三个不同的问题，我们需要依次

纠正它们:

场景视图的Camera设置不正确，背景不能完全填充到视图中。

场景中游戏对象的渲染顺序不正确，所以cat和enemy都埋在了沙土里。

图像效果不太好，这个基于现在的相机设置你有可能还看不出来，但是相信

我说的，质量不好就是不好，对不对?:)

首先我们来修正Camera。

修正相机Projection

在2D游戏中，通常希望相机使用正交视图而不是透视图。本教程的前面我

们已经提到Unity默认是使用透视视图的相机。我们在Hierarchy视图中选

择”MainCamera”，在相机组件中，将投影设置为正交投影。并调整调整它

Transform组件里的Position为(0，0，-10)。如下图:

-18-

你的Game视图现在像下图:

现在效果看上去与透视投影没什么区别，精灵不受距离相机的远近影响，那

怎么放大背景使其充满屏幕呢?我们推荐改变Camera的Size属性。

Camera的Size定义了视图的尺寸。它的值是从视图中心到视图顶部的距离。

换句话说这个值等于视图一半高度。视图的宽度基于视图的长宽比计算，如下图:

-19-

在本例中，我们需要将背景图片从上到下完全占满整个屏幕，并允许其水平

滚动。背景图像的高度是640px，我们取一半，即320px。不过这并不是完全正

确的。

在Project视图里选择background的父级查看ImportSettings。

在精灵渲染器(SpriteRenderer)的”像素到单位(PixelstoUnits)”默认值是100，

如下图:

在Unity中，”单位(Units)”并不一定对应到屏幕上的像素。通常物体的大小

都是相对于彼此的，可以假设单位为任何计量单位，如1unit=1米。对于精灵，

Unity以像素为单位来确定大小。

例如，准备将一个500px宽度的图像导成精灵。下表显示了将它用不同

的”PixelstoUnits”时所呈现出的精灵在X轴向上的差别。

不同”像素到单位(PixelstoUnits)”的对比图。

为640高，background精灵的”像素到单位(PixelstoUnits)”

比例为100，所以在Hierarchy视图中它将呈现为6。4个units高。正交相机的

Size属性值是屏幕高度的一半，所以我们要设置相机尺寸(Size)为3。2个单位，

如下图:

-20-

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

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

现在背景图像显示正常了，你就可以看到图像质量的问题了。下面两张图片

是图片对比:

当前设置的海滩

改变纹理设置后的海滩

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

置修正它。

纠正导入设置

-21-

在Project视图选择background的父级再次显示导入设置(ImportSettings)，

这次我们看底部的预览图。

这个预览窗口将显示纹理的尺寸，颜色信息和内存使用情况。正如下面截图

中所看到的当前纹理大小为1024×320像素，但实际为2048×640

像素，这就意味着Unity缩小了50%以适应1024×1024纹理尺寸。

背景纹理默认设置预览

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

设置:

导入设置默认选项卡

最大尺寸(MaxSize)定义生成纹理所允许的最大尺寸，它是一个正方形，默

认为1024px。同时图像深度默认为压缩的(Compressed)。

我们可以为不同目标平台设置不同的值(例如iOS，网上及Android上)，但本

例中我们只处理默认(Default)选项卡。

在默认(Default)选项卡中，改最大尺寸(MaxSize)到2040和点击应用(Apply)

按钮。导入设置现在应该是这样的:

-22-

马上你就会看到无论是场景视图还是游戏视图，画质都很好。这是因为背景

图像用了较少的压缩。下图显示了Game视图:

用了正确设置的游戏视图

在Inspector预览图中我们能看到背景纹理现在占用0。6MB内存，远高于

之前的160KB:

增大纹理尺寸导致纹理内存占用增加了4倍(预览图的数字是四舍五入的)。

-23-

对于一些纹理，我们可能需要单独调整Format值以提高需要的色彩质量，

但是这会进一步增大内存占用。例如，如果你尝试改背景格式为16bits，你将看

到纹理内存占用增长到2。5MB，改成真色彩(Truecolor)将会占用3。8MB。

但是，你看下面这两个不同版本的背景效果，会发现用Compressed(压缩)

设置和Truecolor(真彩色)比起来差不多:

压缩纹理(Compressed)的背景

真彩色(Truecolor)的背景

由于压缩后的背景看起来很不错，同时节省很多内存占用，那么我们就选择

压缩格式。现在背景和相机设置看起来都没问题了，我们需要找到oldlady和

cat。

控制绘图顺序(ControllingDrawOrder)

因为cat和enemy被绘制在了背景后面，所以我们看不到它们。可以调整游

戏对象Z轴的位置，使对象靠近相机，我觉得这是一个非常好的方式，然而Unity

现在支持图层排序(SortingLayers)，更适合处理这个问题。

在Hierarchy视图选择cat，把精灵渲染器的层排序(SortingLayer)设置为

Default，如下图:

点击SortingLayer下拉框，你项目所有层都将呈现在这里，现在只有默认定

义的Default层。

-24-

可以看到有”AddSortingLayer…。“选项，点击+号，我们创建一个新的排序

图层，命名为cat，同样的再创建两个层，分别是Enemies和Zombie。现在看起

来如下图:

这些层将定义绘制顺序，Layer0，名字是Default，是在最远最后面的，Layer

1，名字是Cats，在它的前面。

现在，已经添加的每个游戏物体都是被设定为Default层。背景图像在这层

是没问题的，因为它在最后面，所以我们要更改其它精灵的层。

在Hierarchy视图选择cat的SortingLayer为Cats。你会在场景视图和游戏视

图里立刻看到cat出现了。

在新图层的cat

-25-

场景中能看见cat了

在Hierarchy视图中选择enemy的SortingLayer到Enemies层。这样以来，

你会看到老太太(oldlady)显现在猫的前面，猫会不会绊倒欧巴桑?管它呢…

最后，将zombie的层设定为Zombie，确保所有精灵都在背景之上渲染，现

在视图看起来像这样:

正确绘制顺序的游戏视图

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

在本例中我们不需要调整Order属性，因为我们没有在同一个层里放不同的

精灵。从我的测试结果来看，Unity在添加添加一个精灵到一个层的时候，将总

会把最新的精灵画在层内旧精灵的前面。

八、给精灵编程

现在沙滩上散落着一些精灵，它们没有任何动作。教程这部分我们将完成它

们的控制，我们会编写两段脚本，一个是僵尸的动画，另外一个是允许玩家控制

僵尸的移动，其余的等你学会了自己写吧…

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

JavaScript来写。

-26-

九、精灵动画(AnimatingSprites)

首先我们添加一个脚本来制作僵尸的动画。在Hierarchy视图选择zombie并

给它新建个脚本，命名为”ZombieAnimator”。下面动画演示了具体步骤:

在MonoDevelop中打开，一般情况下在Unity双击

ZombieAnimator文件就可以打开了。如下图:

Inspector视图中的SpriteAnimator脚本

Project

视图中的

SpriteAnimator

-27-

我们要让僵尸进行简单的行走动画，需要精灵动作表和一个循环速度。我们

定义两个公共变量到脚本中:

publicSprite[]sprites;

publicfloatframesPerSecond;

注:在C#中变量定义在所有大括号之外，标志着它是定义在类之内，所有函数之外。这不用

特别理解明白，通常将它放在类的顶部，即任何函数定义之前。

公共变量将在Unity的编辑器中暴露出来，所以你可以直接修改它们的值而

不用改变代码，哪怕是运行的时候!这个特性在实际使用中异常方便。

通过分配不同的精灵给SpriteRenderer组件来渲染动画。而不是在Update

中调用动画，我们要在脚本开始运行时给它缓存个实例变量。

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

privateSpriteRendererspriteRenderer;

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

spriteRenderer=rendererasSpriteRenderer;

脚本子类MonoBehaviour可以获得变量同名的渲染器。对于显示精灵的游戏

对象，渲染器将是SpriteRenderer。

注

:

可以在脚本里直接引用常见的对象，比较常见的如游戏对象的

Transform

，场景的

main

Camera

。

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

intindex=(int)(nceLevelLoad*framesPerSecond);

index=index%;

=sprites[index];

关卡载入到当前的时间秒数(更多信息请查阅文档的Time类)和每秒渲染的

帧数相乘。如果动画帧是存储在一个无限长的数组里，得出的数就是数组中成员

的索引数。

但是你知道数组成员不会是无限数量的，当动画帧数组播放一遍后你需要循

环回到开始，通过执行模数(%)操作，即做两个数字之间的整除取余。换句话说

你将得到0~数组总成员数之间的索引来控制动画帧的播放。写完上面脚本后保

存，然后切换回Unity。在Hierarchy视图选择zombie会看到ZombieAnimator

脚本组件将显示刚才写的两个公共变量。

-28-

精灵数组字段里面没有内容，我们需要按照如下顺序添加精灵库到数组

里:zombie_0，zombie_1，zombie_2，zombie_3，zombie_2，zombie_1，我

最喜欢的做法是在Hierarchy视图里选择zombie，在Inspector视图右上角点击锁

头图标，这样zombie的Inspector面板将会一直保持显示状态，即使你选择其它

对象，它依旧会显示。

在Project视图中展开zombie纹理，单击zombie_0以选中它，然后按住shift

键再点击zombie_3来选择4个僵尸精灵。

拖拽鼠标，可以看到一个绿色的加号的光标，拽到精灵数组那里，这时可以

看到所选项都加到了精灵数组里。现在ZombieAnimator脚本组件看起来应该是

这样的:

然后只选择zombie_2以同样的方式追加到数组里，再追加个zombie_1，这

时精灵数组将包含正确顺序的六个元素，就像这样:

-29-

精灵数组与六个元素

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

Inspector视图解锁

最后，设置FramesPerSecond到10，像下面这样:

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

注

:

你可以在运行时根据自己心情调整

FramesPerSecond

来找到一个合适的速度，但

Unity

停止播放后会重置这个调整的值，因此你要停下时一定要记录一下这个值在赋到

FramesPer

Second

上。

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

来。

十、控制精灵运动

-30-

在Hierarchy视图中选择zombie并添加一个新C#脚本，命名

为”ZombieController”，你可能要一个年老的迈着沉重步伐的僵尸，也或者要一个

比较年轻有活力的僵尸，可以通过移动速度来调整它们的姿态，便于我们微调，

我们将它写为公共变量。

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

publicfloatmoveSpeed;

moveSpeed将存储一个units数，这个单位不是像素，而是僵尸每秒移动的

速度。因为现在精灵是一个单位为100个像素，所以这个值可能需要相当小。

正如下面的动画，要做当用户点击鼠标后，僵尸沿着直线走到鼠标的那个点

(或这用户是按住鼠标同时拖拽鼠标来改变僵尸新的位置)。

平时很可能不会在每一帧都得到输入事件，所以当僵尸目的方向改变时我们

需要存储僵尸的目的地方向。要做到这一点，我们要计算出指向僵尸行走方向的

normalized向量(长度为1的向量)。

添加如下变量到ZombieController中:

privateVector3moveDirection;

-31-

虽然我们现在在做一个2D游戏，但是Unity仍旧使用的是3D坐标系，因此

要改变对象位置的Vector3.虽然这里僵尸不会改变z轴的位置，我们可以用

Vector2类型，但是我避免后面要在Vector2和Vector3两种类型转换的麻烦，我

还是用Vector3了。

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

//1

Vector3currentPosition=on;

//2

if(ton("Fire1"))

{

//3

Vector3moveToward=

ToWorldPoint(osition);

//4

moveDirection=moveToward-currentPosition;

moveDirection.z=0;

ize();

}

下面说明一下刚才这段代码的用途:

我们要获得僵尸当前位置，所以将位置付给局部变量，然后判断鼠标左键

(Fire1)是否被按下，用场景的mainCamera，转换鼠标目前位置为世界坐标系，

因为ScreenToWorldPoint不会影响到Z轴的值，所以这里我们直接用鼠标的位置

来取得moveToward，计算移动的方向是用目标位置减去僵尸目前的位置，因为

你不想改变僵尸Z轴的位置，所以我们设置moveDirection的z值为0，并用

Normalize将moveDirection变为长度为1的”单位长度(unitlength)”。Unitlength

的向量用起来是很方便的，可以通过一个标量值，如moveSpeed乘以这个向量

来让向量指向一个方向，而保持长度。后面会用到这个。

注:用Input来访问输入数据是比较通用的方法，一个项目默认定义了各种输入名称，比如

Horizontal，Vertical，和Jump，Horizontal是检测操纵杆x轴的位置以及键盘左右箭头按

钮状态。如果你需要获得水平方向的输入数据，可以直接用Horizontal来获取，而不用关

心具体是怎么获取来的。

Fire1默认定义的是虚拟键之一，它注册的是一个操纵杆或鼠标的按钮0，而

左control键是用Input。GetButton返回的布尔值获得的。代码将在鼠标按下的

每一帧时更新moveDirection(不只是当初按下的那一阵)。没错，这也意味着你可

以通过键盘的左CTRL键来控制僵尸方向，只是还要用鼠标来掌舵。

在EditProjectSettingsInput能看到关于InputManager设置。

-32-

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

Vector3target=moveDirection*moveSpeed+currentPosition;

on=(currentPosition，target，

ime);

第一行是用来计算以moveSpeed速度单位让僵尸从当前位置移动到目标位

置，也就是僵尸将按照当前位置朝向鼠标目标位置方向移动过去。

第二行使用来计算当前位置与目标位置之前路径上僵尸的新位

置，线性插值(Lerp)是为取两个值之间内插值的最便利方法。Lerp第三个参数取

值范围是0~1，这意味着0时将返回你现在的位置点，值为1时将返回目标点，

0。5时将返回它们的中点。我们这里用ime来作为第三个参数值，

因为它是一秒钟的一小部分，很可能会小于1，会让你得到沿着起点到终点路径

上的一些点，正因为ime任何时候都将接近于1，因此你可以得到一

个不错的平滑运动。

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

运行游戏，点击某个地方让僵尸走过去，因为没有设定ZombieController的

moveSpeed，所以它还不会走动，不用停止游戏，我们在Inspector面板中选择

zombie找到ZombieController脚本组件改变移动速度为2，再次在沙滩上点击鼠

标，你会看到僵尸走过去了。

在Inspector更改移动速度知道你觉得满意。根据你调整的移动速度，你可

能还需要调整ZombieAnimator脚本中的FramesPerSecond来让僵尸动画与行走

速度相匹配。

当你觉得满意的时候你记住现在设定的数值，然后停止游戏的运行，重新设

定这些值好让下次运行时移动速度和动画是正确的。

-33-

这个时候，你有可能发现下面这些问题:

1

、当游戏开始运行时，你会发现僵尸的腿在动，可它确实静止在那里的。

2

、僵尸愉快的向右走出了屏幕。

3

、他走路的时候并不看路。

在看完这个教程时你会解决它跑出屏幕的问题，所以现在暂时忽略这个问

题。此外，如果它跑到了屏幕外面，只需再次点击沙滩，他有可能就会回来的。

再次回到MonoDevelop打开。

这个脚本用moveDirection来移动僵尸，但是只有当有输入事件的时候它才

开始移动，为了让场景开始的时候它就前进，我们需要初始moveDirection指向

它的右方。

在Start中添加下面这行:

moveDirection=;

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

保存并回到Unity中再次播放游戏。

现在僵尸自己就跑了，接下来我们要让他看路走。

回到，添加一个公共变量在ZombieController中做为僵

尸的扭率:

publicfloatturnSpeed;

我们将用turnSpeed来控制僵尸定位自己方向的响应速度。

Unity内部是使用四元数表示旋转。如果你想了解四元数，可以看此链

接:/wiki/Quaternion，不过也许你看了后会觉得头脑发昏，

但值得宽慰的是在Unity做2D游戏不用完全了解四元数是什么。

因为用方法可以从一个欧拉角获得四元数。大多数人都习

惯欧拉角，它包含单独的x，y，z的旋转角度。虽然它们因为如万向轴死锁(gimbal

lock)等问题在3D创作中使用不太理想，但对于2D游戏来说，欧拉角是蛮好用

的，我们可能只需要绕z轴旋转。

注:欲了解更多关于四元数，可以看我们这个教程OpenGLESTransformations

withGestures:

/50398/opengl-es-transformations-gestures

-34-

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

floattargetAngle=2(moveDirection.y，moveDirection.x)

*2Deg;

on=

(on，

(0，0，targetAngle)，

turnSpeed*ime);

我们来看一下这个代码，首先我们用2来找到x轴与

moveDirection之间的角度。2将返回角度的弧度，所以要乘以

2Deg来转换为角度。

然后用来转向您所计算的目标角度。

执行的是指定两个角度的球面线性插值。类似于前面我们

用到的，只是它是计算新的旋转，而不是计算新的位置。

此前，调用，并用moveSpeed调整僵尸移动的距离，同时用

turnSpeed做僵尸的面向角度处理。

以上就是脚本，保存它并回到Unity。

在Hierarchy视图选择zombie。设定TurnSpeed到5，如下图:

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

-35-

上面这些就是这个教程教你做ZombieConga游戏的所有内容。通

过”FileSaveSceneas…。”并命名为”CongaScene”保存场景。

下一节我们要讲一些只在Unity专业版(付费版本)才提供的功能，这些对于

ZombieConga游戏不是必要的，但你可能想了解更复杂项目的制作，就需要用到

它-SpritePacking。

十一、精灵封装(SpritePacking)-仅针对专业

人员。

注:本节介绍的功能，只适用于UnityPro中。你仍然可以在Unityfree版本

中直接使用一个纹理图集，可它需要你用不同的工具来创建生成纹理图集的图片

文件。你同样可以在运行时将一些精灵压缩为图集切片，但是它会令你组织和

使用资源变成很不直观的，因此我们这里不介绍这种方法。

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

下图:

请注意，现在场景中因为没有进行配料(batching)优化，所以Drawcalls看起

来很多。

当然，Drawcalls现在是正常的，因为现在场景里渲染了四个精灵，每一个

精灵都用了一个独自的材质球。虽然现在只有四个drawcalls，但真正的游戏中

随着场景中对象和效果的增加，这个drawcalls数也会增加，太多的drawcalls

会降低游戏性能，所以我们要仔细的组织精灵纹理，幸运的是有个基本的方法来

帮助我们优化drawcalls，就是将零散的精灵图片转换成精灵纹理图集。纹理图

集(textureatlases)是由若干个小纹理组成的大纹理贴图，用于优化渲染时GPU的

调用，这不是新技术，以前要我们用第三方工具或者手工创建它，而现在Unity

可以帮我们自动创建它。

-36-

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

为了将精灵合并到图集里，首先需要修改其导入设置。

在Project视图中找到并打开ImportSettings，这里注意名为Packing

的标签属性。Packing标签用来定义精灵加入到纹理图集后的名称，可以是任何

你想要的字符串。

在Packing标签中输入它的名字”toons”:

然后点击应用按钮保存设置，用同样的方法将enemy和zombie也命名一下。

然后从”WindowSpritePacker”菜单中打开”SpritePacker”，如果是4。3。2

版本，有可能是”WindowSpritePacker(DeveloperPreview)”这样的菜单，那么将

会显示下面这样的错误提示:

正如你所见默认是禁用Spritepacking的，我们到”EditProjectSettingsEditor”

中把SpritePacker的模式选为”AlwaysEnabled”，像下图这样:

-37-

当选择”AlwaysEnabled”后，你可以在build时候看到一个”onlypackingyour

Spritesforbuilds”选项。

再次从”WindowSpritePacker”菜单打开SpritePacker窗口，如下图:

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

提醒文字了。

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

下图:

-38-

再次运行游戏到游戏视图查看运行状态信息，你将看到现在只用了两个

drawcalls，比原来省了两个。

这样做的好处是显而易见的，精灵共享使用了材质球，优化了性能，同时做

这个优化如此简单，何乐不为。

十二、SpritePacker的选项和问题

SpritePacker窗口顶部包含一个控制栏，如下图:

1:视图中看到的是目前的图集。第一个下拉菜单是你使用过的Packing标签

名称。可以选择它查看它的内容。

2:如果SpritePacker帮你整合图集超过一张图，你需要通过第二个下拉菜单

切换其它图集。

-39-

3:默认精灵在图集中的分配方法是按照DefaultPackerPolicy进行的，可以通

过调整DefaultPackerPolicy来自定义分配方法，不过这个高级功能本教程就不介

绍了。

有时候Unity会将我们本来要整合到一个图集拆分创建成多个地图集，并把

名字加了序号。造成这个问题的原因是精灵纹理压缩格式不同。

例如:我们设置的是16位颜色(16bits)，而和

是用的压缩格式(Compressed)，那么Unity整合图集时，将会创建出两个图集，

名称分别是”toons(Group1)”和”toons(Group2)”:

尽管这三个精灵有相同的Packing标签，但Unity仍旧创建了多个图集。为

了确保图集最优化，我们要确保准备整合到同一个图集中的精灵的压缩格式相

同。

正常情况下，将尽可能的减少精灵图集的总数，除非精灵太多，一张图集存

不下，Unity会再次自动拆分图集，我们要用Packing标签合理安排精灵归属，尽

可能做到精灵图集的最优化。

好了，本教程到此结束，可以从这里下载到完成的项目源码:

/wp-content/uploads/2014/01/ZombieConga-Pa

官方出的中文字幕版2D工具视频教程:

/v_show/id_

-40-

本文标签： 精灵视图游戏僵尸纹理