利用UGUI制作的包裹系统

本帖最后由 xiaofengjun 于 2015-4-24 03:23 编辑 这里给大家分享我制作的包裹系统,完全利用UGUI实现，无插件，简单的效果图如下    这个包裹系统，我主要实现了其中的一些基本功能（未与数据关联），主要有以下几部分： 1.包裹界面的搭建。 2.包裹的界面的基本操作，如拖拽，打开，关闭。 3.物品的拖拽及在包裹界面的正确放置（必须放置于物品格子内）。 4.物品拖拽经过目标格子时，目标格子的高亮显示。 5.某物品拖拽并放置于已经有物品的格子时，两个物品原位置的交换。 6.物品信息的提示界面（仅仅界面，未与实际物品关联）。 7.包裹中物品位置的初始化及重新排列。 以上几部分，相信玩过游戏的都是很熟悉了，但是由我们来实现以上功能，是否简单呢。希望大家能和我一样有耐性，也尝试做一个自己熟悉的实例（从玩过的游戏中找吧），也希望大家有耐心看完我的实例制作过程，我会把整个项目献上的。 制作过程如下： 1.素材准备，我准备的素材如图（我的PS水平不是很好，将就能用）   对照一下开篇的效果图，是不是很简单啊，就这些已经足够搭建一个简单的包裹系统了。 2.所有的素材导入unity后，全部做成Sprite。这是因为UGUI中的Image要求的图就是Sprite（虽然可以用Raw Image）。 3.搭建包裹，这个应该是很简单的。只是要注意一下锚点，枢轴点的位置，只要不发生错位就好，我的搭配如图：   4.样子搭起来后，接着就是包裹的基本功能了，首先是包裹的打开与关闭，这个简单，只要拿到Inventory的实例(如上图)，利用SetActive()方法即可实现包裹的显示与隐藏。这里我特别添加了一个界面管理器（图中的UI_Manger）,让它持有Inventory的实例，里面有一个公共的SetInventoryActive()方法来实现包裹的显示与隐藏。看到上图中的绿色包包，它就是游戏中的包包按钮了，点击它，包裹就可以打开或关闭。 包裹的拖拽功能，这里不需要伤脑筋，因为Unity提供的UGUI demo中就有，稍加修改就能用。我把这个脚本附加在UI_Title上，完美实现拖拽。 5.先做简单的，接着做信息提示界面。这就是一个背景图，前景文本搭起来的，很简单。但是它的显示与隐藏，我同样交给了UI_Manger来控制，即UI_Manger持有它的引用，以提供给其它对象引用。 6.物品的拖拽，这是一个比较复杂的功能，我们需要实现这几个接口IBeginDragHandler, IDragHandler, IEndDragHandler。因为Unity的Event Trigger能够自动检测到你的拖拽操作，所以你需要做的就是当在物品上执行拖拽操作时，你要做什么，比如让物品跟随鼠标一起移动，物品移动到包包中的格子区域释放时，要把物品对齐好格子，又或者在空白区域释放时，物品要复位，又或者在另一物品上释放时两物品交换位置等。这就是你对物品拖拽操作所要做的内容，说着简单，实际的代码逻辑有点复杂。不过思路清晰就好。 7.游戏中大家是否发现，在拖拽物品时，它经过的格子都是被高亮显示，然后离开了就又回复原来的状态了。在Unity中，只需要实现IPointerEnterHandler, IPointerExitHandler这两个接口。在鼠标指针进入某一对象区域时，设置格子的高亮显示，离开时回复原状态。这里有一个关键地方需要注意，物品跟随鼠标移动的过程中，你的鼠标一般是不会检测到它所经过的格子区域的，因为你的鼠标视线被你的物品挡住了。如何知道鼠标指向的是物品还是它下面的格子呢？这里就要用到EventSystem了，如图   现在看到的是静止的EventSystem，Play后是另外一个样子。下面两个图分别表示EventSystem中鼠标检测到格子和没检测到格子    看到效果了没，当鼠标被物品挡住了之后，就意味着，物品后面的格子鼠标是看不到的，也没无法进行高亮的显示了。既然我已经解决了这个问题，那么，这也就不是个问题了。嘿嘿！！！这其中的关键就在于一个组件CanvasGroup,其里面有一个属性blocksRaycasts，将它的值设置为false就可以让鼠标透过物品，看到物品下面的格子了。CanvasGroup的其它功能，大家去查看文档，自己试试吧。 解决这个问题后，那么鼠标就可以检测到你拖拽着的这个物品下面是什么东东了，可以是格子，那么高亮显示，要是在另一个物品上释放，那么两物品交换位置。 总之，在进行界面操作时，充分利用EventSystem可以让我们实时监测界面操作，如可以知道鼠标进入了哪个区域，当前操作对象是哪个，防止出现某些类似鼠标点击不到目标等低级问题。另一个重要的地方就是类PointerEventData，它包含了进行界面操作许多信息，要充分利用好。 8.最后再说一点，就是包裹中的物品排序。我的做法就是让包裹中的格子从左上开始，按行排列，整理为一个有序数组（是内存中的数组，可以和界面无关的），物品与格子按索引从小到大一一对应。按照这个思路，我做了个简单排序，以实现包裹中的“整理按钮”功能。 目前这个包裹系统的基本功能就是如此，完整的功能还应该和实际数据关联的，这个我将在以后整理好思路后再送上。 送上完整的项目，因为很小，不到2M，我就直接送上了。  SimpleInventorySystem.rar (1.83 MB, 下载次数: 279)