3D Computer Game Programming-Note 9

UI 效果制作 —— Quest Log 公告牌

效果展示

Unity-UI系统 - 图1

制作过程

  • 点击菜单 GameObject -> UI -> Scroll View 新建一个滚动视图,在 Content 下创建几个的 Button 对象和 Text 对象,根据需要修改文本及位置等参数信息
    Unity-UI系统 - 图2
    Scroll View
    Unity-UI系统 - 图3
    Content
    Unity-UI系统 - 图4
    Button/Text
    Unity-UI系统 - 图5
    Text
    Unity-UI系统 - 图6

  • 为 Content 添加 VerticalLayoutGroup 组件,便于调整其子对象的布局
    Unity-UI系统 - 图7
    粗略排版如下:
    Unity-UI系统 - 图8

  • 为 Canvas 和 Scroll View 对象添加 Image 组件,并设置对应的 Source Image 分别作为主视图和滚动视图的背景
    使用 Menu Chalk Board 中的 Texture 素材,先将其转化为 Sprite 类型:
    Unity-UI系统 - 图9
    Unity-UI系统 - 图10
    Canvas
    Unity-UI系统 - 图11
    Scroll View
    Unity-UI系统 - 图12

  • 根据素材效果重新调整部分子对象的颜色、位置、大小等
    Button
    Unity-UI系统 - 图13

  • 调整滚动条样式,具体为隐藏水平滚动条的 Image 组件,并修改垂直滚动条的背景/颜色
    Scroll Vertical
    Unity-UI系统 - 图14
    Scroll Vertical/Sliding Area/Handle
    Unity-UI系统 - 图15
    现在界面如下:
    Unity-UI系统 - 图16

  • 接下来为 Button 添加点击处理事件,使菜单可折叠展开
    新建脚本 ButtonHandler.cs,首先为 Button 组件添加点击事件,使用协程实现菜单折叠和展开的过程: ```csharp private Button button;

void Start() { button = this.gameObject.GetComponent