42_利用UGUI与脚本交互做出逼格DEMO(上)

创建时间: 2020/10/23 15:02
更新时间: 2021/12/23 14:25
作者: 金色的海螺

1.场景搭建

2.棋盘格场景

42_利用UGUI与脚本交互做出逼格DEMO(上) - 图1
42_利用UGUI与脚本交互做出逼格DEMO(上) - 图2
42_利用UGUI与脚本交互做出逼格DEMO(上) - 图3
42_利用UGUI与脚本交互做出逼格DEMO(上) - 图4

frac 代表取分数
42_利用UGUI与脚本交互做出逼格DEMO(上) - 图5

3.优化棋盘格场景

4.UGUI-画布Canvas

42_利用UGUI与脚本交互做出逼格DEMO(上) - 图6
42_利用UGUI与脚本交互做出逼格DEMO(上) - 图7

EventSystem 事件响应系统 一般无需关注
42_利用UGUI与脚本交互做出逼格DEMO(上) - 图8

42_利用UGUI与脚本交互做出逼格DEMO(上) - 图9

42_利用UGUI与脚本交互做出逼格DEMO(上) - 图10

画布缩放
通常选择第二项 按照屏幕尺寸缩放
42_利用UGUI与脚本交互做出逼格DEMO(上) - 图11

5.UGUI-图片Image

42_利用UGUI与脚本交互做出逼格DEMO(上) - 图12

6.UGUI-文本Text

42_利用UGUI与脚本交互做出逼格DEMO(上) - 图13

文本大小代码编写(副文本Rich Text的功能)
文本
42_利用UGUI与脚本交互做出逼格DEMO(上) - 图14

颜色代码
文本
42_利用UGUI与脚本交互做出逼格DEMO(上) - 图15

7.UGUI-按钮Button

42_利用UGUI与脚本交互做出逼格DEMO(上) - 图16

42_利用UGUI与脚本交互做出逼格DEMO(上) - 图17

Color Tint
42_利用UGUI与脚本交互做出逼格DEMO(上) - 图18

Sprite Tint 用不同图片切换来实现按钮单击效果
42_利用UGUI与脚本交互做出逼格DEMO(上) - 图19

Animation 方法同上
42_利用UGUI与脚本交互做出逼格DEMO(上) - 图20

8.UGUI-滑动条Slider

42_利用UGUI与脚本交互做出逼格DEMO(上) - 图21

Fill Rect 绿色部分填充组件
Handle Rect 圆形为控制钮
42_利用UGUI与脚本交互做出逼格DEMO(上) - 图22

9.UGUI-开关Toggle

42_利用UGUI与脚本交互做出逼格DEMO(上) - 图23

建立一个空对象(单选功能)

Allow Switch Off 是否允许关闭
42_利用UGUI与脚本交互做出逼格DEMO(上) - 图24

选中Toggle组件,将空物体拖入Group
42_利用UGUI与脚本交互做出逼格DEMO(上) - 图25

10.UGUI-锚点

Alt和Shift 快捷键 快速定位UI图标
42_利用UGUI与脚本交互做出逼格DEMO(上) - 图26