基本菜单UI的实现(精编版)

1、基本菜单 ui 的实现unity3d_2d游戏实例从零讲起（3 ）基本菜单ui的实现游戏除了基本的画面渲染，操作对象等等，还需要各种ui菜单来辅助玩家，或是引导，或是做游戏设置。比如，登录菜单，图片的显示，人物血条等等。游戏辐射 4 的 ui 界面为什么要有单独的ui 制作系统呢？ui 是任何一款游戏都不能或缺的部分，而且占了非常大的一个比重，他相比游戏对象（尤其是3d 游戏），更多的是文字与图片，就是为了让玩家更方便的进行游戏。这些文字与图片的显示多半不像3d 模型那样需要复杂的渲染过程，而且经常需要显示在视窗的最上层（也就是里摄像机最近的地 方），所以引擎有必要来提供一套好的ui 解决方案

2、。在 unity5.0版本发布之前，由于原生gui的各种问题 (虽然4.6 版本新的 ui 系统就已经发布但是bug 比较多，不完善 )，大家基本推崇的ui 工具是 ngui ，是一款很好用的ui 制作插件。但是在5.0版本之后，新的ugui系统已经在多个方面由于 ngui ，所以完全可以考虑使用ugui ，当然 ngui 还是值得一用的ui 插件，目前的话大家自行取舍。下面是从蛮牛社区找到的一个关于二者的对比。（可滑轮 +ctrl放大观看，或者右键在新窗口中打开图片）然而下面我首先要说的ui 制作方式却不同于以上二者，可以说是最笨的办法，也是我当时做游戏最开始的办法，为什么说这个笨的办法？因

3、为这里我想做一个对比，而且想从基本的 ui 实现原理给大家一个思路。一种笨却又简单的 ui 实现方式： ray这个例子大家可以试试，但是不建议之后也使用，要知道我们其实也可以使用原生的按钮，然而我和各位都应该知道， 这个太丑了，没有游戏会用这样的按钮。在游戏的开始菜单操作里面，我们无非是点击鼠标，然后被点击的按钮响应， 然后执行某个操作。 在平时我们浏览网页， 使用软件的时候，你的鼠标或手指触碰的地方会触发一个消息事件。 在这之前， 程序的定时器不断刷新来捕获回调事件， 程序需要判断你鼠标所在的位置，进而判断你是否点击到了按钮。那么用 ray实现其实是类似的道理，你在摄像机的这个位置发射一个

4、ray （射线），这个射线就像激光一样向前照射， 一旦它碰到任何刚体（在运动中和受力作用后，形状和大小 不变，而且内部各点的相对位置不变的物体，就是一个理想 的物理碰撞模型） ，就会反射回来。然后，你判断他是否碰撞到了你想让其碰撞的物体，并处理。听到这里，你肯定就理解了，那ui 无非就是把所有的按钮做成一张张图片放在摄像机最前面，然后在鼠标点击的位置 向前发射一个ray ，判断碰撞的是不是你要的按钮，是的话就做处理。尽管这种办法，很蠢，对于复杂的ui 界面也很难实现，但是原理与方式却是非常简单的，你只需要把图片做的好看一点，写几句代码就可以的。下图是我实现的一个例子的效果：1. 首先制作好所有

5、的图片素材2. 将图片都导入到新建的maingui文件夹中3. 将图片一个个拖到场景编辑窗口上，按照设计的位置摆放好.这里要注意几点:如果图片显示不正常就需要在文件浏览器里面点击图片 inspector属性界面点击texture type先点击editor gui and legacy gui然后点击下面的apply 之后再点击sprite(2dand ui)再点击apply就可以的如果觉得看起来显示不清就可以设置图片的最大尺寸，点击该窗口的 maxsize选择 1024或更高（一般1024就足够了）由于 ray的方式是发射射线， 所以位于前面的物体会将后面的物体挡住，所以要设置好优先级ord

6、erinlayer，比如退出确认界面就应该优先级高。在右边实体的属性列表设置，注意：设置z 值并没有用当然也可以通过设置坐标来改变显示的顺序，摄像机方向（一般是垂直与x0y面），改变 z 值即可。4. 由于 ray 只有在碰到带碰撞盒组件的物体才会产生碰撞消息，所以这里要对图片添加碰撞盒组件。在场景中点击图片在inspector栏 点 击 add component physics 2d box colider 2d。这是 2d碰撞盒的一种，还有圆形的，多边形的，可以在碰撞盒所在的范围进行碰撞检测并模仿真实的碰撞效果。（这里顺便解释一下什么是刚体rigidbody：刚体本身是一个理想化的受力模

7、型，受力不改变形状与大小。在游戏中， 一个刚体组件就表示这个物体会受到力的作用，比如重力， 阻力等，这些可以有玩家去自由调控）5. 编码，有以下几点注意： gameobject exitgame=null;/代表退出游戏按钮 由于要获取到 ray碰到的实体， 所以这里先定义一个实体成员变量用以存储场景中的按钮实体。我们可以给场景中的实体命名，并用exitgame=gameobject.find ("退出界面 "); 的方式来获取该实体。这是判断是否点击按钮并做处理的代码，写在update里面csharp view plain copyif (input.getmousebu

8、ttondown(0) /如果点击了鼠标左键rayray=camera.main.screenpointtoray(input.mousepo sition);/ 定义射线对象类对象if(physics.raycast(ray,outhit)raycasthithit; /实例化击中name=hit.collider.gameo;/通过 hit 到的物体来获取该物体的名字果击中返回这个实体，就执行下面的操作debug.log(name); switch(name)/关于，退出等按钮case" 返回 ":/如about.transform.position

9、=newvector3(0,11,-2);break;因为这个点击的功能是一直存在的，所以把他拖到一个常驻在场景里的实体（最好是一个主按钮，或者新建一个空的名为 clickscript 的空实体。）关于 ray方式想说的：大家看到ray方式第一反应应该是第一人称射击游戏，没错fps等三维游戏的瞄准与射击基本上就是这个思路，向准星的方向发射一条射线，然后沿着射 线发射子弹。这里使用这种方式却是不是很恰当，但是却很 直观。在最开始接触unity的时候，特别是什么也不懂的时候，可以用这个方式做一些简单ui 。然而，一旦 ui 变得复杂，我们想实现更多的效果，这就显得有点力不从心了。比如，一般按钮都有

10、点击，按下，离开多个状态，不同状态不同效果，你说怎么实现？如果实现比较酷炫的界面移动（比如ppt里的各种动画） ，难道你要写个算法来让其做空间位移么？如果想让ui 能够按一定比例跟随角色呢？不同分辨率的设备怎么自适应呢？而且，这里使用还有诸多限制与问题，比如必须是刚体，ray的使用效率怎么样，需要设置坐标优先级等等，所以，这确实不是一个好的方式。下面，就介绍新5.0以后比较流行的ui 制作方式 ugui同样也是制作这个界面，但是我们换一种方式，而且效果更好，更方便。（之后如果出现图片显示不正常的情况可以参考上面的第三部的相关注意事项）1. 制作好素材，将图片都导入到新建的 maingui 文件

11、夹中，点击菜单栏的file new scence新建一个 scence场景。2. 点击菜单栏的 gameobject 标签 ui image建立之后我们就能看到在左边的场景实体列表（hierarchy） 新生成了三个实体canvas ：画布，相当于一个呈现界面ui 素材的容器。canvas下的子实体image ：每个 ui 控件都是由美工设计的图片构成，这个就image是放自己设计的图片的实体eventsystem：监听 ui 相关的事件实体， 用来支持点击触碰等。这时我们可以看到一个白框，这个白框就是我们游戏看到的范围。3. 先制作背景将实现制作好的背景素材拖到image实体的 image(

12、script)的 source image属性上，这时我们看到图片已经放到了屏 幕上(新建的 canvas可能比较大， 看不到全局的情况滑轮缩小视窗 )但是会发现显示不正常，这时候点击下面的按钮setnative size ，并修改一下位移值posxposy都为 0。我们希望我们的背景一直是充满屏幕的而不是随着分辨率的变化而变化，所以我们要做一些工作，这在原来的gui 系统是一个比较麻烦的事情，需要自己写脚本来满足自适应。 但是 ugui系统已经很好的解决了这个问题，现在新的版本新建的 canvas都有一个属性栏叫做canvasscaler，点击ui scale mode选择 scale wi

13、th screen size。然后填上你需要机型的分辨率，一般都是1920*1080，注意，如果你的图片素材尺寸较小，可以选择小一点的分辨率，只要满足16:9就可以的。另外，部分unity系统的版本可能不支持canvasscaler（ unity 5.0的 b9 ），可以在canvas实体 inspector窗口点 击 add component layout reference resolution， 然后进行同样的操作。点击一下开始游戏，在game窗口设置分辨率（上一篇unity博客有介绍） 改变窗口大小， 发现图片始终充满屏幕。我们发现，在image的 inspector窗口做上有一个锚点的设置，这样可以比较方便的让我们的图片中心定位在某些位置。同时调节x,y坐标就可以放在任意位置。4. 制作按钮我们在canvas的实体窗口位置右键创建ui button ， 然后我们可以在inspector窗口看到同样的界面，我们仍然可以像刚才一样把按钮素材拖到image的 sourceimage上面点击setnative size，如果觉得图片的尺寸不合适可以在上面的scale设置图片的缩放比例。我们可以运行一下程序看一下效果，按钮有点击的效果，鼠标放在上面的效果。这个功能归