1、迷你拼图,1,1玩法介绍,2,排列拼图碎片，拼出最后的图案!可以点住碎片的任意位置拖动。点击“重来”按钮，可以回到最初状态重新开始,2流畅的拖曳操作,有很多电脑游戏的原型来自于现实世界中的玩具，拼图游戏就是其中的一个代表。现在不仅有图案简单的拼图游戏，甚至还有一些画面会动的，以及允许自己制作喜欢图案的拼图游戏.无法预知最终图案的时候自不必说即使已经提前看过了提示的图案，在拼图完成后还是能感受到一种愉快的心情，这是为什么呢?大概是因为当我们将杂乱无章的东西恢复到原状后，产生了一种创造欲被满足的成就感吧。 本章中我们开发的游戏“迷你拼图”虽然是一款玩法比较简单的游戏，不过这并不意味着开发也非常简单
2、。相对于其他游戏通过操作键盘或移动鼠标来控制角色的运动方向，“迷你拼图”通过鼠标的拖曳直接移动拼图的碎片。该游戏的核心在于流畅的拖曳操作。,3,除了拖曳操作之外，也请读者借此机会思考一下诸如“当碎片移动到正确位置附近时会被吸附到正确位置”等对触屏游戏的开发也非常有用的Tips .在英文中拼图游戏叫作Jigsaw，这本来是“锯子”的意思，或许是因为拼图游戏最早是用锯子将木头切开制作而成的缘故吧。还有一种说法认为这个名字是由游戏失败的玩家脱口而出的tikusyo“(日语中骂人时的用语，写作“畜生”。)几经演变而来的。tikusyo tikuso jigsaw“迷你拼图”是一款即使不擅长拼图的玩家也
3、能过关的简单游戏。另外，据说猫头鹰是智慧的象征，真希望能沾沾光呢。,4,2流畅的拖曳操作,2.1脚本一览,点住碎片的任意位置拖动打乱拼图碎片游戏对象和组件之间的关系,5,2.2本章小节,3点住碎片的任意位置拖动,3.1关联文件PieceControl.cs3.2概要“迷你拼图”中通过鼠标拖曳就能移动拼图碎片，大部分玩家不需要什么说明就能够上手，大概是因为“拖曳移动”这个设计非常符合人类天生会“握住东西移动”的习惯吧。有时候设计流畅自然的操作就如同空气一样，甚至能够让玩家忘记其背后是程序在运作。当然，要实现这种设计往往并不简单。Unity中可以很容易判断出“某个对象受到了鼠标的点击”，不过如果要
4、实现自然流畅的操作，开发人员仍需要下些功夫。这里，为了让鼠标的拖曳更加接近“用手指按住移动”的效果，我们需要考虑一下如何才能点住碎片的任意位置进行拖动。,7,3.3透视变换和逆透视变换,鼠标的光标位于屏幕上时，其位置坐标位于二维坐标系内。而拼图碎片位于3D空间内，所以其位置坐标自然有三个维度。为了比较鼠标光标和拼图碎片的位置，必须将它们放人相同的坐标系。因此，我们使用逆透视变换的方法，将鼠标光标的坐标变换至三维坐标系。关于逆透视变换的详细说明，请参考10.2节。这里只需要记住必须进行坐标变换就可以了。其中用到的方法和第10章的“迷踪赛道”游戏中所用的方法是相同的。,8,3.4被点击处即为光标的
5、位置,通过逆透视变换将鼠标光标的坐标和拼图碎片的坐标统一到相同的坐标系后，我们就该尝试通过拖曳使拼图碎片移动了，只需要要在点击按键的瞬间，将鼠标光标的坐标复制到拼图碎片的坐标即可。动雄确实非常简单，不过它有个缺点:鼠标光标总是显示在拼图碎片的中心(图)。,9,在“迷你拼图”这个游戏中，拼图碎片被点击的位置并不影响游戏的玩法。不过，对于某些游戏而言，点击位置的不同可能会改变角色的朝向，或者使游戏对象以光标为中心摆动，这些情况下在何处点击就变得很重要了。而且，即使不影响游戏的核心玩法，点击的瞬间拼图碎片会突然移动一下这种体验也很糟糕。尽管有时候采用这种机制可能会更好，但是为了应对不同的要求，我们还
6、是需要掌握如何能点住碎片的任意处拖动。,10,在“迷你拼图”中，碎片的点击判断是通过Unity的网格碰撞器(mesh collider)实现的。网格碰撞器采用网格进行碰撞检测，点击拼图碎片的任何部位都将发生碰撞。对于玩家来说能够“点击碎片的哪个位置都可以”，这点反应到程序中就是“不用关心碎片的何处受到了点击”。点击的瞬间，鼠标光标不一定位于碎片的中心。两者的坐标存在一定的差距，我们将这种坐标的差距称为偏移(offset)。之前我们把光标的坐标原原本本地复制到碎片坐标时，因为两个坐标值相同所以差距为0这种坐标差的急剧变化正是导致拼图碎片突然移动的原因。知道了坐标偏移值的变化是问题所在之后，我们来
7、考虑如何固定这个偏移值。首先，要在鼠标点击拼图碎片的瞬间，也就是开始拖动的时候，计算出鼠标光标和碎片中心的坐标差，得到的值就是偏移值。偏移 = 碎片的位置 - 鼠标光标的位置,11,3.4被点击处即为光标的位置,拖动的过程中则与之相反，用鼠标光标的位置加上偏移就可以得到碎片的位置。碎片的位置=鼠标光标位置+偏移这样一来，鼠标光标距离碎片中心总是保持一定的距离，这样就保证了鼠标点击瞬间的位置就是碎片被拖曳的位置(图)。下面我们来看看实际的代码。,12,3.4被点击处即为光标的位置,(a)将鼠标光标位于屏幕上的位置，转换为拼图所处的3D空间中的坐标。如前所述，读者只需要知道这里进行了逆透视变换就行
8、了。具体的实现和第10章的游戏“迷踪赛道”中的逆透视变换的实现方法是一样的(参考10.2.4节)，读者如果感兴趣可以先阅读该部分内容。(b)计算偏移值，通过碎片中心坐标减去鼠标光标的坐标即可算出接下来请看拖曳处理的代码。,13,(c)和刚才相反，用鼠标光标的位置加上偏移值，得到拼图碎片的坐标。计算公式(c)是由前面代码中的计算公式(b)变形而来的。,14,3.4被点击处即为光标的位置,3.5测试拖曳碎片的中心,“迷你拼图，游戏中保留了将光标的坐标直接复制到拼图碎片的坐标这一操作模式。请在Unity中打开脚本PieceControl.cs，并在文件的开头处找到如下代码。将静态变量IS_ENABL
9、E_GRAB_OFFSET的值设为false后，不论点击碎片哪个位置，在拖动的过程中碎片中心和鼠标光标的位置总是重合的。也许有些玩家会喜欢这种模式，所以进行这种设置也未尝不可。请读者修改代码并体验这两种方式的区别。,15,3.6小结,具体拖曳拼图碎片的哪个位置移动其实和游戏的内容并无直接关系，不过游戏操作感的优劣在很大程度上会影响游戏的趣味性。内容再有趣的游戏，如果操作性太差也将变得毫无乐趣可言。特别是对于通过拖曳操作进行的游戏，这种操作过程中的拖曳体验正变得越来越重要。,16,4打乱拼图碎片,4.1关联文件PazzleChecker.cs,17,4.2概要,商店里售卖纸质拼图游戏时一般会将各
10、拼图碎片打乱顺序后放人包装盒中。虽然也有些是已经拼好的状态，不过玩家在开始游戏之前还是要将各碎片的顺序打乱。有很多事情都是“人类做起来很简单，计算机处理起来却很困难”。比如将拼图碎片全部打乱这件事就是一个例子。Unity提供了取得随机数的方法。不过单纯使用该方法似乎并不能达到打乱碎片顺序的目的。这里我们不妨来分析一下该如何随机打乱各拼图碎片的顺序。,18,最简单的随机打乱拼图碎片的方法是，直接将随机数代人各个碎片的坐标。只要控制好随机数的范围，就能让各个拼图碎片随机分布在画面上。（图）是将各碎片的坐标设置为随机数后的结果。如图所示，有很多拼图碎片重叠在了一起，有些地方还堆积了好几片。虽然这样也
11、未尝不可，不过可以的话最好还是将各碎片均匀分散开。如果很多碎片重叠在一起，就可能会导致下面的碎片被覆盖而无法看见。,19,4.3设置拼图碎片的坐标为随机数,4.4改进策略,首先我们整理一下让拼图碎片随机散开的要求。阅读过第一章“怪物”的读者请回想一下当时提到的需求分析。碎片之间彼此互不重叠碎片散开分布到整个画面上随机分散各个碎片需求基本上就是这样。如果拼图碎片的数量有所增加，可能还需要追加一项能够控制游戏的难易度”。接下来我们对实现方法进行讲解。首先请简单熟悉一下整体的流程。(1)将拼图碎片分配到网格中(2)打乱拼图碎片的排列顺序(3)在网格内通过随机坐标调整碎片的位置(4)将整个拼图随机旋转
12、一定角度建议读者在继续阅读之前先浏览一下插图。内容并不复杂，大体从图中就可以理解相关内容。下面我们依次对各个步骤进行说明。,20,首先，将所有的拼图碎片从左上角开始依次放入网格中(图).该网格的行数和列数相同，并且网格总数大于拼图碎片数量。“猫头鹰”拼图的碎片数量为8，网格的行数和列数各为3，共计9格，空出来的格子不用理会。根据碎片数量的不同，有时候剩余的格子会比较多，这种情况下可以调整网格的行数和列数。,21,4.4改进策略,所有网格块都为正方形，且都应当确保能够容纳下拼图碎片。另外，由于后续步骤中将在网格内移动拼图碎片，所以还需要在确保整体网格不溢出画面的前提下适当放大网格的尺寸.之所以像
13、这样把拼图碎片放置到网格中，是为了避免出现碎片之间彼此重叠的状况。接下来随机打乱各个碎片的排列位置(图),22,4.4改进策略,在第一个步骤中，我们将碎片从左上角开始依次放入了网格中。而第二步就是打乱各个碎片的排列顺序。利用随机数选出两个网格，然后交换其中的碎片，空白的网格也可以参与交换。做到这里，前面我们做出的需求分析中，“碎片之间彼此互不重叠”、“碎片分散于整个画面”和“随机分散各个碎片”就已经基本得到了实现。不过从程序实际运行效果来看，很容易发现拼图碎片被规则地排列在了网格上。我们得想办法让这种随机分散的效果更真实。在第三个步骤中，我们让拼图碎片在网格中随机移动(图)。最初的步骤中增加网
14、格尺寸的用意就在于为这里的碎片移动做准备。如果网格的尺寸太小，将无法移动碎片，反之如果太大，则会令碎片之间过于松散。请读者结合拼图碎片的大小和画面整体的尺寸，调整网格尺寸为最佳值。因为碎片被限制在了各个网格内，所以不会出现相邻碎片之间重叠的现象。这也是将碎片排列在网格上的原因。,23,4.4改进策略,最后，为了不让玩家看出碎片排列的规律性，稍微将拼图网格整体旋转一定的角度(图).虽然旋转了整体的网格，但是需要保持拼图碎片自身的角度不变。 下面，我们结合实际的代码梳理一下这个流程。,24,4.4改进策略,25,(a)将拼图碎片按顺序放入网格中。用数组piece_index存储各个网格中碎片的编号
15、。值 为-1时表示该网格为空。(b)随机选出两个网格，交换其中的碎片。 (b1)请注意在选取网格对象时，并非只是简单地生成2个随机数。这里的做法是，从第一个网格开始，依次为每个网格从其之后的网格中随机选择一个交换内容的对象。相对于两个要交换内容的网格对象都通过随机数来指定，这种做法能减少循环的次数，效率更高。,28,(c)确定了用于放置碎片的网格后，求出实际的XZ坐标。只要知道整体网格的中心坐标 和各个小网格的尺寸，这个计算过程应该很简单。(d)接下来，在网格内将拼图碎片随机移动一定的位置。这里我们不使用随机数，而使用 一组呈周期性变化的数值。(d1)更新“呈周期性变化的偏移值(位置坐标差)。
16、每次加上offset_add，结果值将在-offset_cycle/2.0f +offset_cycle/2.0f之间波动。最终的值是使用多组数据反复试验得出的，没有什么理论依据。(e)最后将网格整体进行旋转。和(d)的处理相类似，每次旋转的角度值将从一组呈周期 性变化的数值中获取。这是为了尽量避免在反复操作中使用和上次相同的数值。旋转的角度在(f)处被更新，以供下次使用。,29,4.4改进策略,在完成上述各步骤后，各拼图碎片是否如我们所期待的那样随机分散开了呢?让我们来验证一下(图)。通过点击“重来”按钮，可以对拼图碎片重新“洗牌”。该按钮原本是为玩家重新开始游戏而设置的，但是考虑到它对制作
17、移动碎片的程序也会起到一定的作用，于是就将其提前设置了出来。请读者多点击几次“重来”按钮。已经了解了其中缘由的人可能会隐隐约约地看到网格，但不知道的人是完全注意不到的。,30,4.4改进策略,4.5小结,实现“可控随机化”的核心思想在于，先确定好大致的原则，再向那些能够随机控制的参数代人随机数。另外，除了使用随机数之外，有时候像本例这样采用一组呈周期性变化的数值来进行“伪随机处理”也能达到不错的效果。,31,5游戏对象和组件的关系,2.5.1关联文件PazzleControl.csPieceControl.cs,32,5.2概要,这里暂时改变一下讨论的内容，对Unity中游戏对象(GameOb
18、ject)和组件(Component)的关系进行解说。大家应该都知道虚拟形象(avatar)吧。它是用户在网络上的分身，可以通过它和其他用户进行交流。用户可以按自己的喜好为一个基本的角色添加各种道具来设计其形象，这就是所谓的定制(customize)。很多用户都特别热衷于各种应用和游戏中的虚拟形象的定制功能。这里我们以虚拟形象为例来说明Unity中游戏对象和组件的关系。最后还将介绍在“迷你拼图”中使用到的组件。,33,5.3虚拟形象(游戏对象)和定制(组件),虚拟形象一般包含基础的角色形象和用于定制形象的各种道具。我们暂且将基础的角色形象称为素体。有些应用中会准备好几种素体，不过一般都是比较简
19、单的设计。用于定制的道具则有衣服、饰品和发型等，有些应用中道具甚至多达到百种以上。把各种道具添加到素体上从而创造出自己喜欢的角色，这就是虚拟形象的乐趣所在。Unity中游戏对象和组件的关系就如同虚拟形象中素体和道具之间的关系(图).,34,通过向素体追加各种道具，可以制作出与众不同的角色形象即便用的是同一个素体，从最终的外观来看也是截然不同的，有时甚至看不出是同一个素体。在Unity中，和虚拟形象的定制过程类似，开发人员会通过为游戏对象添加各种组件来设计游戏需要的东西。角色、地图以及摄像机等都是由基础的游戏对象衍生而来的。不过基础的游戏对象几乎不具备任何功能，因此通过添加诸如Rigidbody
20、和Collider之类的组件，把各种需要的功能整合在一起就非常重要了。这也就相当于向“游戏对象”这个素体添加各种叫作“组件”(component)的道具来完成定制(图)。,35,5.3虚拟形象(游戏对象)和定制(组件),在虚拟形象的各种道具中，有些是不能同时使用的。比如空气锤和折纸扇，两者都是需要手持的道具，无法同时持有(图)。这里请读者暂时不要纠结能不能两手同时持有这类问题。Unity中也有些组件是无法同时使用的比如SphereCollider和。BoxCollider。这两个分别是利用球形和箱型进行碰撞检测的组件。对一个游戏对象同时使用两种形状来执行碰撞检测是用，这个类必须继承于MonoB
21、ehaviour，并且类名和文件名必须一致。严格来说“Script类和Script组件”是不同的东西，不过这里只是为了了解一下大致的概念，所以姑且把它们看作了相同的东西。,36,5.3虚拟形象(游戏对象)和定制(组件),37,在脚本代码中常常可以看到this这个单词。如同它在英文中的本义，它表示类本身。在Script1.cs中使用就表示Script1这个类，在Script2.cs中使用则表示Script2类(图)。当然读作“Script1类”或者“Scriptl组件”都可以。通过GetComponent()方法可以从游戏对象中访问各个组件。中需填入组件的名字。如果是Rigidbody就写成Ge
22、tComponent()，如果是Scriptl就写作GetComponent()。反过来，通过this.gameObject可以从组件中访问游戏对象(图)。虽然多数情况下会省略this只写gameObject，但这里为了便于说明，我们加上了this.,38,5.3虚拟形象(游戏对象)和定制(组件),5.5GetComponent()的缩写,在Unity5中此番方法已经过时，如果个人有意愿了解或者使用Unity以下版本的可以在网上搜索自行学习一下。,39,5.6删除GameObject,很多Unity初学者都会把删除游戏对象的代码写作Destroy(this) ;，但事实上这样的写法并不能删除游
23、戏对象。正确的写法应该是Deotroy(this.gameObject);。读到这里，想必读者应该已经知道原因了(图)。Script.cs中使用的this指的是Script1，也就是组件本身，因此如果写作Destroy(this) ,就仅能删除Script1组件。要删除整个游戏对象，就必须将游戏对象作为参数传入Destroy方法，因此Destroy(this.gameObject)才是正确的写法。,40,41,5.7迷你拼图的应用实例,最后，我们来介绍在“迷你拼图”中使用到的组件。为了控制拼图碎片，“迷你拼图”中创建了名为Piece Control的类。另外，判断鼠标点击还需要用到Rigidb
24、ody组件(图)。虽然这里也可以使用Unity编辑器添加预设，不过为了简化工序，我们在游戏开始时通过脚本来添加组件。拼图由许多碎片构成，每个碎片都可以视作一个网格(mesh)。除拼图碎片外，用于放置拼图的底板也是一个网格，它们都拥有同一个父类对象。碎片的数量因游戏而异，有时候可能有大量的拼图碎片。如果手工将必要的组件逐个添加到网格中将非常麻烦。这时通过脚本来添加组件就很方便。,42,43,PazzleControl组件被添加到了拼图碎片的父类对象PazzleOwl上。这个组件首先会在其被添加到的游戏对象中查找碎片的游戏对象。在模型资源中，拼图碎片和底座都是被作为PazzleOwl的子类创建的。
25、另外，由于底座的网格名称中含有base字样，因此可以利用这一点将拼图碎片的游戏对象提取出来。如果子类的游戏对象是碎片，代码(a)行中将添加PieceControl组件。AddComponent()方法是用于添加组件的方法，中填入组件的名称。另外，在PieceControl类的开头有如下代码。前面说明游戏对象和组件的关系时提到了某些组件必须和其他组件一起使用的情况。RequireComponent正在那种情况下自动为组件添加必要的组件的方法。上面例子中的两句代码表明了对PieceControl组件而言，MeshCollider组件是必要的。这样设置以后，在为游戏对象添加PieceControl组件时，MeshCollider组件就会被一起添加进来。,44,5.7迷你拼图的应用实例,关于游戏对象和组件之间的关系，读者们多多少少应该能够理解了吧。刚开始不理解也不要紧，可以试着利用Unity的例子和入门教程开发一些小程序，在此过程中慢慢就会理解了。同样，如果能够理解游戏对象和组件的特性，就可以更灵活地使用它们。比如，在知道了可以添加两个以上的脚本到一个游戏对象中之后，往往就会产生这样的想法:与其把所有的功能都塞到一个脚本中，按照功能分成多个脚本后再添加不是更简单吗?因此，我们不要去机械地记忆代码的写法，而应该努力尝试理解代码的本质。这对于游戏开发来说是尤为重要的。,45,5.8小结,
