unity3D-learning：UI背包系统

6、作业与练习

以下作业五选一：

1、血条（Health Bar）的预制设计。具体要求如下

分别使用 IMGUI 和 UGUI 实现
使用 UGUI，血条是游戏对象的一个子元素，任何时候需要面对主摄像机
分析两种实现的优缺点
给出预制的使用方法

2、 UI 效果制作（你仅需要实现以下效果之一）

进入 NGUI 官方网站，使用 UGUI 实现以下效果
- Inventory 背包系统
- Quest Log 公告牌
- Scroll View 选择板
以上例子需要使用 Unity web player，仅支持以下操作系统与浏览器，参见官方下载
- Windows 版 IE11
- Mac OS X 10.7 Safari
- 出现界面需要等待较长时间，打开页面让它慢慢加载

3、如果你觉得 UI 不是你的菜，喜欢复杂的设计与代码

研究 DOTween 网站 http://dotween.demigiant.com/getstarted.php 网页，它在 Specific settings 中 transform.DoMove 返回 Tween 对象。请实现该对象，实现对动作的持续管理。
- 本作业有较大难度，务必参考师兄的作业

4、编写一个组件，提供常用窗口服务

修改 Game Jam Menu Template 的脚本
- 如 ShowPanels 脚本
具体要求是实现一个方法
- 支持某个面板窗口独立显示
- 支持某个面板窗口模态，其他面板窗口显示在后面
- 支持几个窗口同时显示，仅一个窗口是活动窗口

5、如果你喜欢凭空构思场景，请自制有趣的 UI 场景

例如：“几个小动物（3D）开会，语句从每个动物头上飘出，当达到一个大小，会出现清晰的文字！如果文字较多，会自动滚动”

三种UI实现方法的比较：

IMGUI的产生和优势

IMGUI 的存在符合游戏编程的传统，即使在今天它依然没有被官方宣判为遗留（将要淘汰的）系统（Legacy Systems）。在修改模型，渲染模型这样的经典游戏循环编程模式中，在渲染阶段之后，绘制 UI 界面无可挑剔（参考Execution Order of Event Functions）。这样的编程即避免了 UI 元素保持在屏幕最前端，又有最佳的执行效率，一切控制掌握在程序员手中，这对早期计算和存储资源贫乏的游戏设备来说，更是弥足珍贵。当然，早年 UI 交互手段就是绘制图片和文本，检测输入事件等基本任务。

按 Unity 官方说法，IMGUI 主要用于以下场景：

在游戏中创建调试显示工具
为脚本组件创建自定义的 Inspector 面板。
创建新的编辑器窗口和工具来扩展 Unity 环境。

IMGUI系统通常不打算用于玩家可能使用并与之交互的普通游戏内用户界面。为此，应该使用 Unity 的基于 GameObject 的 UGUI 系统。

适用于简单的UI界面，那么代码很容易就能生成和实现那样的UI界面。对于程序员来说是很好的一种UI实现方式。

NGUI和UGUI 的产生与优势

随着游戏开发的普及，为了让设计师也能参与参与程序开发，从简单的地图编辑器、菜单编辑器等工具应运而生。设计师甚至不需要程序员帮助，使用这些工具就可直接创造游戏元素，乃至产生游戏程序。除此之外，现代游戏 UI 必须要满足以下要求：

跨设备执行，自动适应不同分辨率
UI 元素与游戏场景融为一体的交互
复杂的布局
多摄像机支持

以至于即使优秀的程序员在现代 UI 面前，传统代码驱动的 UI 面临效率低下，难以调试等问题。对于 Unity 平台，当 NGUI: Next-Gen UI kit 的出现使得不依赖 Unity Pro 功能，使用所见即所得（WYSIWYG）设计工具，集成了 tweening 运动管理系统，可以制作多数 2D 游戏，直接威胁了 Unity 的生意。 Unity 最终高薪聘了 NGUI 的主设计师，最终又分道扬镳，于是就有了 UGUI，青出于蓝而胜于蓝！

UGUI 的优势：

所见即所得（WYSIWYG）设计工具
支持多模式、多摄像机渲染
面向对象的编程

这篇博客我们选择完成一个背包系统，具体要求链接可以查看上文。

第一步：查找各类图片和背景拖入资源做成texture。

记得将type换成Sprite(2D and UI)，这样才可以在image里面导入我们的texture，当然你也可以选择等一下每一个组件都选择raw image而不是image，那么就能直接拖入图片，不用修改type

第二步：创建目录结构，实现基本的布局，记得布局模式我们选择这个

这样的选择不会改变我们做出来的页面布局

我们想象的目录结构（所有的网格的类型都是image，等下可以美化和放置装备）

左边为对应的目录结构，右边是图形和位置，因为我们画布的设置的位置是（0,0,0），而且是正对中心，所以我们这些位置可以通过很简单的位置参数设置来实现。

这里为了容易控制各种间距，我们给仓库和装备两个目录增加一个Grid Layout Group（unity自带）

这些参数分别控制了对应目录下的各种边框之间的间隔和大小。

第三步，适当美化仓库和放置一些武器进入对应网格（这里我比较懒，没有想要写装备加到人物上的效果，所以连人物模型都用的是图片替代，佩服自己的懒）

右边的这9种装备我们都是在第一步就修改了textre type的，

给他们挂上texture

第四步：实现一个装备随着鼠标的拖拉移动，这里先介绍一个网址：博客链接。

三个接口来实现我们的鼠标拖拽功能，（这里先不考虑其他逻辑，先实现能拖拽的效果）

public class DraggableObjectScene : MonoBehaviour,IDragHandler,IPointerDownHandler,IPointerUpHandler
{//Drag事件，设置目标的位置为鼠标的位置public void OnDrag(PointerEventData eventData){transform.position=Input.mousePosition;}public void OnPointerDown(PointerEventData eventData){//按下鼠标图片会缩小transform.localScale=new Vector3(0.7f,0.7f,0.7f);}public void OnPointerUp(PointerEventData eventData){//松开鼠标图片变正常大小transform.localScale=new Vector3(1f,1f,1f);}
}

接下去实现逻辑，比如装备必须拖到特定的卡槽，仓库某个格子已经有了装备的话不能再放置装备上去等，当然现在游戏好像更多的是如果你一件物品有很多件的话可以增加一个下标表示件数，也很好实现，这里就不说了。

 public GameObject grid;//网格public GameObject cell;//具体的小空间//父对象与位置改变public void OnDrag(PointerEventData eventData) {transform.position = Input.mousePosition;transform.SetParent (grid.transform);}//是否能够被射线穿透public void OnPointerDown(PointerEventData eventData) {transform.localScale = imgReduceScale;transform.GetComponent<CanvasGroup> ().blocksRaycasts = false;}//增加一些逻辑判断public void OnPointerUp(PointerEventData eventData) {transform.localScale = imgNormalScale;GameObject current_Grid = eventData.pointerCurrentRaycast.gameObject;if (current_Grid.tag == "cell")transform.SetParent (current_Grid.transform);elsetransform.GetComponent<CanvasGroup>().blocksRaycasts = true;transform.parent = cell.transform;cell = transform.parent.gameObject;}

第五步：设置参数，运行。（这里player我没有写代码控制武器加到人物身上的动作效果）

运行效果直接看视屏

完整代码：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems; public class DraggableObjectScene  : MonoBehaviour,IDragHandler,IPointerDownHandler,IPointerUpHandler { public GameObject grid;public GameObject cell;Vector3 imgReduceScale = new Vector3(0.8f, 0.8f, 0.8f);   //设置图片缩放Vector3 imgNormalScale = new Vector3(1.0f, 1.0f, 1.0f);   //正常大小// Use this for initializationvoid Start () {}// Update is called once per framevoid Update () {}//父对象与位置改变public void OnDrag(PointerEventData eventData) {transform.position = Input.mousePosition;transform.SetParent (grid.transform);}//是否能够被射线穿透public void OnPointerDown(PointerEventData eventData) {transform.localScale = imgReduceScale;transform.GetComponent<CanvasGroup> ().blocksRaycasts = false;}//增加一些逻辑判断public void OnPointerUp(PointerEventData eventData) {transform.localScale = imgNormalScale;GameObject current_Grid = eventData.pointerCurrentRaycast.gameObject;if (current_Grid.tag == "cell")transform.SetParent (current_Grid.transform);elsetransform.GetComponent<CanvasGroup>().blocksRaycasts = true;transform.parent = cell.transform;cell = transform.parent.gameObject;}
}

视屏地址：https://pan.baidu.com/s/18AUbtid5adX8AlNfL7deDA

视屏比较模糊，见谅！