UI - wuboluo/Unity-Farm GitHub Wiki

为什么单独一个场景存放UI？

工程师必须实现一个 UI菜单系统。每个菜单都包含一个 UI面板和一个或多个 UI按钮，所有这些对象都以 UI画布为父对象。整个 UI菜单系统将在另外加载的单独场景中创建。

面板和按钮的外观风格应该一致 (包括颜色、纹理、按钮过渡类型等)，但美术总监尚未最终敲定这些决定。她希望能在工程师进行 UI工作期间同时处理这些设置。她做出的更改将对场景中的所有新对象和现有对象生效。

为了让工程师使用 Unity 功能轻松创建可正常工作的菜单系统，并满足美术总监同时且独立处理外观工作的要求，最佳的解决方法是什么？

  1. 为 UI.Button 和 UI.Panel 创建子类，并以编程方式设置外观值
  2. 创建新的按钮和面板材质，并将它们分配给场景中的所有按钮和面板
  3. 对按钮和面板采用预制件，让美术总监修改预制件
  4. 编写脚本，根据美术总监的意见查找/替换场景文件中的值

布局

忽略布局影响

添加 LayoutElement 组件并勾选 IgnoreLayout 选项，可以忽略父节点的 LayoutGroup 布局安排 image

自适应高度

目标：实现物品描述提示，根据行数自适应背景框的高度，始终保持合适的高度 1，添加 VerticalLayoutGroup 和 ContentSizeFitter 组件 2，设置图片拉伸方式 ImageType：Sliced 3，控制内容（受布局影响的子节点）宽度 ControlChildSize：Width=True 4，设置适应高度 VerticalFit：PerferredSize image

布局内某个元素最小高度

image

运行时刷新布局

强制立即重新构建受计算影响的布局元素和子布局元素，UnityAPI LayoutRebuilder.ForceRebuildLayoutImmediate(RectTransform layoutRoot)

物品拖拽

制作思路

创建一个新的 Canvas，其中包含一个空白的临时的 Image，用作在被拖拽时跟随鼠标显示。也就是说拖拽的只是一张图，并不是背包栏中的其中一项 1，OnBeginDrag 时，将被拖拽的图标赋值给这个临时的图，设置被拖拽的物品为选中状态 2，临时的图标跟随鼠标位置 3，通过 EventSystem 中提供的 eventData.pointerCurrentRaycast.gameObject 可以获得鼠标射线落在哪个 UI物体 上，如果是在其他格子上，就可以实现交换位置

注意

1，临时的图和每个 Slot 格子子节点中的 IconImage、Amount(TextTMP) 和 HighlightImage，都需要取消勾选 RaycastTarget，以忽略射线检测，方便直接获取到父节点 SlotUI 2，TextMeshPro 的 RaycastTarget 属性在这个位置 image

UI-Button透明部分不可点击

将此图片设置为 Read/Write：true image

Canvas Group

image 取消勾选此项，可以不影响鼠标点击

是否在和UI互动

EventSystem.current != null && EventSystem.current.IsPointerOverGameObject()