Unity 2-4 UGUI Unity5.1 UI 案例学习
任务1-1：UGUI简介
什么是GUI：
游戏的开始菜单
RPG游戏的菜单栏、侧边栏和功能栏（比如背包系统、任务列表等）
设计用来控制移动的虚拟杆和攻击按钮
UGUI：
Unity内置
GUI也可以用第三方插件实现：如NGUI、DFGUI等
任务1-2：游戏案例介绍
任务1-3：创建游戏菜单
UGUI中的组件：
UI -> Panel -- 面板
Button -- 按钮
Text -- 文本
Image -- 图片
Raw Image -- 可拖放的材质
Slider -- 滑动器
Scrollbar -- 滚动条
Toggle -- 开关 (check box)
Input Field -- 输入框
Canvas -- 画布（所有的UI组件都位于Canvas下）
Event System -- 事件系统（处理有关UI的事件）
几乎所有的UI组件都有
Rect Transform -- 用来控制位置和Anchor信息
Script脚本 -- 控制组件的功能
Button：
Button->Text-> Text (Script) -- 可以修改文本显示
Image (Script) -- 修改背景图片
Toggle：勾选框
Toggle->Label-> Text (Script) -- 修改文本显示
Toggle->Background-> Image (Script) -- 修改背景图片
Toggle->Background->Checkmark-> Image (Script) -- 修改勾选的标志
Slider：滑动器
Slider -> Value 当前滑块位置对应的float值 [0, 1]
Slider->Background-> Image (Script) -- 修改后置背景（滑动块未滑动区域）
Slider->Fill Area->Fill-> Image (Script) -- 滑动条前置背景：滑动块已滑动区域
Slider->Handle Slide Area->Handle (Script) -> 滑动块背景
任务1-4：创建公告的文本列表
1. 创建Image，重命名为NoteBg，作为文本的背景
修改Alpha值：透明度
2. 创建另一个Image，重命名为TitleBg，作为标题背景，为Note的子物体
3. 分别在NoteBg下和TitleBg下创建Text
4. 给NoteBg下的Text添加上下滚动功能
1. 在NoteBg下创建一个Image，大小与NoteBg->Text一样
2. 给Image添加Scroll Rect组件
将Text作为Image的子物体
Content属性：指定拥有滚动功能的控件，这里赋值Text（表示滚动的是Text）
此时，Text就拥有了可以滚动的功能
将水平方向的滚动取消勾选 Horizontal
3. 此时滑动了一下，发现不行，只是出现了Text整块能够被拖拽走
而且文字没有显示完全 -- 将Text拉伸直到文字完全显示出来
此时，拖动文本就会发现有了拖动的效果
但是，超出NoteBg多余的文本也显示了出来
4. 通过Mask组件将多余的文字部分隐藏
在Image下添加Mask组件即可
5. 若不想要Image的背景显示（这里是纯白色）
将Mask的Show Mask Graphic取消勾选即可
5. 给文本右边添加滚动条
在Image->Scroll Rect中，有两个Scrollbar
在NoteBg下创建Scrollbar，修改Direction = Bottom To Top
将该Scrollbar赋值给Image->Scroll Rect-> Vertical Scrollbar
任务1-5：监听按钮的点击事件
Button的点击事件
创建GameObject GameManager，添加脚本GameManager.cs
public void OnStartGameButton() { // 自定义函数
SceneManager.LoadScene("02-Game");
}
创建新场景02-Game，用于点击StartGame后载入
在StartButton下的Button组件中，点击On Click()的加号
将GameManager指定给它，并选择要被触发的方法，OnStartGameButton()
在Build Settings中添加这两个场景即可
任务1-6：创建旋转的小球游戏
创建Cube，将Cube放在Camera的视野中
旋转的方法：Transform.
Rotate(Vector3 eulerAngles, Space relativeTo=Space.Self) --
围绕x轴做eulerAngles.x的旋转，
围绕y轴做eulerAngles.y的旋转，
围绕z轴做eulerAngles.z的旋转，
Space relateiveTo表示对于什么坐标(world/local)进行旋转，可设为Space.World
RotateAround(Vector3 point, Vector3 axis, float angle) --
围绕point点上的axis坐标旋转angle度（世界坐标）
RotateAroundLocal() -- RotateAround()的局部坐标版本
在Cube中创建脚本Cube.cs
public float rotatingSpeed = 90; // 旋转90度
void Update() {
tranform.Rotate(Vector3.up * Time.deltaTime * rotatingSpeed);
}
任务1-7：使用Slider控制小球旋转的速度
在Cube.cs中
public void ChangeSpeed(float newSpeed) {
rotatingSpeed = newSpeed;
}
在创建的UI->Slider中，在On Value Changed(Single)
将Cube.ChangeSpeed()赋值
表示当Slider的value改变时，会通知Cube gameObject，调用它的ChangeSpeed()方法
而该方法的实参就是Slider中的value值
此时，当滑动Slider时，会将速度设置为0~1
设置Slider的Max Value和Min Value为0~360即可
任务2-1：案例介绍
素材为UI.unitypackage，导入
UI -> Source文件夹下都是psd文件（美工的ps源文件）
UI -> effect Picture文件夹中是psd文件的效果图(.jpg)
UI -> Sprite文件夹是切好的图
任务2-2：开始界面的背景和锚点Anchor介绍
创建场景01-Start
将Sprite文件夹中的图片的Texture Type设置为Sprite (2D and UI)
创建UI->Image，设置Image的Source Image为StartScreen，重命名为Background
在Rect Transform中按住Alt，点击右下方的四周的stretch，
作用1：将Background的大小拉伸至和父类(Canvas)相同
作用2：将Background四周的Anchor分别设置在四个顶点上 -- 屏幕缩放时等比缩放
什么是Anchor：
控件与锚点之间的距离是保持不变的，比如在屏幕缩放时
如果四个锚点都在右上角，则屏幕缩放时，该控件相对于右上角的距离是不变的
可以利用Anchor锚点进行屏幕的自适应
任务2-3&2.4：按钮
之前都是通过UI->Button的方式添加按钮，这次用其他方法：
UI->Image -- 按钮的背景
在Image中添加Button组件，在Image下添加子物体Text
这就和UI->Button方式创建的按钮相同了
1. 添加左上方的声音按钮 ButtonSound
a) UI->Image，将Source Image选择为Button Round的Sprite 
按住shift进行等比缩小
注：按住Shift等比缩放时，以左上角为基准点；按住Shift+Alt时，以中心点为基准点
b) UI->Image，作为a)的子物体，将Source Image选择为ButtonRoundForeground
等比放大直到填充满Button Round
c) UI->Image，作为a)的子物体，将Source Image选择为Sound的Sprite 
会发现图标太窄了，选择Set Native Size，并等比放大
d) UI->Image，作为a)的子物体，将Source Image选择为Leave的Sprite 
，并等比放大
将a)重命名为ButtonSound，在其添加Button组件，这样就有了点击功能
此时点击的时候会发现点击的视觉效果是ButtonRound颜色变暗
发现Button组件里的Target Graphic为ButtonRound图片
将其改为ButtonRoundForeground（设置点击的视觉效果）
2. 添加右上方邮件按钮 ButtonMail
将Sound替换为Mail的Sprite 
将Anchor设置为右上角
3. 添加左下方的设置按钮 ButtonSettings
UI->Image，重命名为ButtonSettings
背景图片设置为ButtonRoundBackground的Sprite 
添加Button组件
UI->Image，设置为子物体，背景图片设置为Settings的Sprite 
4. 与3相似，Settings换为Controller 
任务2-5：开始按钮 & 设置开始页面的自适应
创建Play按钮：ButtonPlay
创建UI->Image，设置背景图片为Button Red B 
Set Native Size
添加Button组件
创建子物体UI->Text，居中，调整大小，颜色白色，字体选择自定义的造字工坊悦圆
字体放大为40，内容为PLAY
添加阴影：在Text里添加组件Shadow
屏幕自适应：
ButtonSound的Anchor设置为左上角
ButtonMail的Anchor设置为右上角
ButtonSettings、ButtonController、ButtonPlay的Anchor设置为中心点
任务3-1：主场景 -- 头像面板
左上角：头像
右上角：体力
左边：设置按钮
下方：技能状态
新建UI->Image-> Source Image设为bg-02的Sprite
新建UI->Image，重命名为Headbar，背景设为bar 
Set Native Size，等比放大，放在左上角
在Bar下创建子物体Text，用来显示角色名字，颜色白色，字体造字工坊悦圆、大小25
相似的，创建子物体Text，用来显示Level
点击头像的时候，显示人物的详细信息：
添加Button组件
头像：
任务3-2：体力的进度条（Slider和Filled Image）
UI->Slider 来实现体力的进度条（右上角）
Fill Area指的是填充部分，可以修改Fill的颜色为蓝色
Handle Slide Area指的是Slider的滑轮部分的显示，本案例中可以将其删除
自定义Slider的创建：
1. 背景
创建UI->Image，背景图片设为BarBackground 
体力条的背景有两部分，一部分是棕色边框，一部分是黑色电池部分
复制Image，缩小，将Color修改成黑色即可
2. 绿色的填充条
复制Image，将Color修改成绿色的填充
3. 实现Slider效果
将最外层的Image添加Slider组件，将BarForegroundGreen赋值给Slider的Fill Rect
此时会发现，绿色的方块大小放大了
将BarForegroundGreen的Image Type属性设置为Filled
原因：可以选择显示该Image的某一部分
Image Type的四种属性：Simple/ Sliced/ Tiled/ Filled详解见任务3-3
将绿色部分调整大小
Fill Method选择Horizontal，Fill Origin选择Left
此时，修改Slider中的value，会发现绿色的部分会随着value的改变而填充
4. 叶子装扮
UI->Image
5. 左边的体力标识
UI->Image, Source Image为ButtonRoundBackground2、Battle
、
6. 体力值
UI->Text，字体、字号、颜色、对齐等
7. 此时，外观实现了，但是，Slider是可以利用鼠标进行大小调节的，这样不行
体力条是不需要与鼠标进行交互的，只能通过代码来修改
将Slider上的Interactable选项取消勾选即可
8. EnergyBar的锚点设置为右上角
体力条：
任务3-3：Image中的类型simple, sliced, tiled, filled
Image中Image Type的四种属性：
Simple/ Sliced/ Tiled/ Filled
Simple：普通模式 -- 仅仅将图片正常显示出来，大小与边框保持一致
Sliced：切图
如果将某个图片放大，内部是填充色，而边框会出现失真
一般来说，放大的时候不希望边框也放大导致失真
实例：
选择一个Sprite，在Inspector中打开Sprite Editor
将绿色的小线框拖动，将图片分割成九个格子（4条线框）
此时若图片缩放，四个角不会缩放，左右边框只会上下拉伸，上下边框只会左右拉伸
Tiled：按图片原来的大小进行平铺
Filled：显示图片的某一部分
Filled Method：Radial 360°/ Radial 180°/ Radial 90°/ Horizontal/ Vertical
Filled Origin：Top/ Bottom/ Left/ Right等等
Clockwise: Check/ Uncheck
实例：技能的冷却效果：
FilledMethod: Radial 360°，FilledOrigin: Top，Anti-Clockwise
任务3-4：设置和对话框按钮
注：Anchor跟左边对齐
记得把ButtonRoundForeground设为按钮的Target Graphic
任务3-5：技能和技能的冷却效果
创建技能按钮：
UI->Image: Slot2 -- 技能背景
UI->Image: Sword Icon
UI->Image: 叶子 -- Leave
UI->Text: 右上角的快捷键显示
给字体添加外边框 -- 添加Outline组件即可
技能冷却显示：
创建相同的Sword Icon的Image
将颜色修改为黑色，将透明度修改为100
Image Type设置为Filled
Filled Method = Radial 360°
Filled Origin = Top
Anti-Clockwise
此时，value从1-0的过程就是技能冷却结束的过程
技能的使用：
添加脚本SkillController.cs
检测按钮的点击，并开始冷却
public class SkillController : MonoBehaviour { public float cooldownTime = 2; private float timer = 0; private bool timerHasStarted = false; private Image skillSwordCooldown; private void Start() { skillSwordCooldown = transform.Find("Skill_Sword_Cooldown").GetComponent<Image>(); } public void OnClick() { timerHasStarted = true; } private void Update() { if (timerHasStarted) { timer = timer += Time.deltaTime; skillSwordCooldown.fillAmount = (cooldownTime - timer) / cooldownTime; // 冷却所占比例 if(timer >= cooldownTime) { skillSwordCooldown.fillAmount = 0; timer = 0; timerHasStarted = false; } } } }
检测快捷键的点击，并开始冷却：
public KeyCode keycode;
在Update()中
if(Input.GetKeyDown(keycode) {
timerHasStarted = true;
}
将keycode设置为Alpha1即可
技能：
任务4-1：窗口边框
UI->Image: 背景为bg-01
UI->Image: 背景为window -- Image Type = Sliced -- 九宫格切图
边框部分不会出现失真模糊
在Window下创建子物体UI->Image: Title
在Title下创建子物体UI->Text：白色、字体、居中、Title等
任务4-2：角色面板的背景和关闭按钮
按任务4-1创建一个窗口框架
右上角关闭按钮：UI->Image: ButtonRound + ButtonX + Leave1
任务4-3：头像
在PanelCharacter下创建线框：PenalHead，作为人物状态的背景
UI->Image: frame2 -- Image Type = Sliced，放在Window的左半边
创建人物头像背景：PenalHead的子物体PortraitBackground
UI->Image: portrait
创建人物头像：PortraitBackground的子物体Character
UI->Image: character
创建等级：PortraitBackground的子物体Level
UI->Text: 显示角色当前等级，黑色、字体、Bold、大小、
创建显示人物名字的叶子和下划线：空物体PlayerName
UI->Image: Leave2
UI->Image: Seperator
UI->Text: 居中、字体、白色、大小、Bold等
任务4-4：人物属性
在PanelHead下创建人物属性：Strength
UI->Text: PropertyName -- 血量、白色偏暗、字体、大小
创建属性值：为PropertyName子物体
UI->Image: Input Background，重命名为PropertyValue
UI->Text: 为InputBackground的子物体，字体、大小、颜色与上相同、居中等
创建属性值加点按钮：
UI->Image: Button Plus，添加Button组件
创建其他两个属性：Dex和Focus
任务4-5：背包的选项卡（Toggle -- 单选/多选按钮）
Toggle: Toggle组件，其中有IsOn组件，勾选时会显示下面赋值的Graphics物体
Background: Image组件，本例中为勾选框的背景白色正方体
Checkmark: Image组件，本例中为勾选的符号
Label: Text组件
创建背景：PanelKnapsack
UI->Image: frame-01
创建选项卡：Tab1
UI->Image: tab-normal，添加Toggle组件
子物体UI->Image: tab-selected
将Tab1的Toggle组件中的Graphic设置为tab-selected
这样当IsOn为false的时候，tab-selected就不会显示了
子物体UI->Text: 装备
创建其他两个选项卡Tab2和Tab3
任务4-6：控制面板的切换（Toggle）
Tabs的切换：
任务4-5中，使用Toggle实现了三个单选按钮
现在，需要把他们变为多选按钮 Toggle Group
可以通过Toggle Group将一组Toggle进行分类
在PanelKnapsack下添加Toggle Group组件
对于Tab1、Tab2、Tab3，将它们的Group属性设置为PanelKnapsack
默认让Tab1处于IsOn开启状态，Tab2、Tab3关闭
创建Empty Object 称为Panel1~Panel3，存储所有Items：
切换的机理：隐藏其他两个Panel
注意到，Toggle组件有一个On Value Changed(Boolean)，可以用来监听是否勾选
在Tab1中的Toggle添加Panel1，并把SetActive()方法传递给它
并默认将Panel1和Panel2取消勾选 (手动隐藏) (否则刚开始的时候默认三个面板都会显示)
任务4-7：设计装备、消耗品和材料面板，以及之间的切换
通过网格 Grid Layout Group 实现背包内物品的显示
Grid Layout Group: 对子物体进行排序
Cell Size：每个网格的大小
子物体的大小是不能通过子物体自己设置的，是通过Grid Layout Group控制的
1. 在Panel1下创建空物体Grid，添加Grid Layout Group组件
2. 在Grid下创建子物体
UI->Image: Slot
在Slot下创建子物体Item: UI->Image: inventory-04
此时，Slot之间没有空隙，并没有像例图中那样显示（可以直接修改Spacing的值）
3. 修改：在Grid下创建空物体，将Slot放入该空物体
一个Slot对应一个空物体，Grid Layout Group控制的大小为空物体的大小
调整各个GameObject的大小
4. 增加空的Slot，直至填满整个Grid
将Grid->Slot->SlotItem->Item的Image Source设为空，并将Item取消勾选
5. 在最下方显示物品数量：
UI->Image: Input Background，下方居中
创建子物体UI->Text: 字体大小颜色等
创建子物体两边的修饰 UI->Image: Ornament
任务5-1：关卡选择界面
分析：
关卡分页显示，分页的实现为水平方向的滑动 -- Scroll Rect
关卡排序显示 -- 使用Grid Layout Group
下方的按钮对应各个页面 -- Toggle Group
创建背景 UI->Image->bg-01，Anchor&Position stretch
创建Window框架: PanelSelectLevel
创建线框: UI->Image: frame1
任务5-2&5.3：不同类型的关卡按钮&&并通过Grid Layout排序
创建单个关卡：Levelxxx
背景 -- UI->Image: ButtonRoundBackground
等级数 -- UI->Text: 黑色、居中、字体、大小等
通关的星数量 -- UI->Image: StarLeft，StarCenter，StarRight
在Levelxxx上添加Button组件
关卡类型：可制作为Prefab
三星完成 LevelCompletedThreeStars：如上所述
未三星完成 LevelUncompleted：
增加UI->Image: ButtonRoundForegroundGreen, 把颜色改为黄色
增加UI->Image: Leave，把被Foreground遮住的底部叶子还原
将部分星星隐藏显示
未解锁 LevelLocked：
增加UI->Image: ButtonRoundForegroundGreen, 把颜色改为深色
增加UI->Image: Lock
增加UI->Image: Leave，把被Foreground遮住的底部叶子还原
通过Grid Layout进行排序：
在PanelSelectLevel下创建32个空子物体 Level1~Level32
将上面创建的各个关卡Levelxxx分别放入Level1~Level8
在Frame下创建一个空物体，称为Grid，添加Grid Layout Group组件
Start Axis = Vertical; 调整Cell Size
将Level1~Level32放入Grid
需要将Grid进行从左向右的拉伸
因此将Grid的原点设置在左边（此时修改Width时，大小会以左边为基准进行缩放
如果原点是在中间，则大小会同时往左和右缩放）
注意，此时关卡按照Grid的排序为上下排序，即为
1 3 5 7
2 4 6 8
因此，需要将Text中显示的关卡数目与Grid的排序进行错位
任务5-4：关卡的滚动列表
&5-5&5.6：控制滑动列表按照页数滑动 && 缓动效果
实现关卡的滚动效果：Scroll Rect
详见任务1-4
在Frame下创建UI->Image，调整大小，就是Scroll Rect的大小（把Level1~8包含在内）
添加Scroll Rect组件，Vertical取消勾选，将Grid赋值给Content
将Grid拖动到GridScrollPanel下作为子物体
在GridScrollPanel中添加Mask组件，用于隐藏Grid中多余部分的显示
取消勾选Show Mask Graphic，用于隐藏GridScrollPanel自身背景的显示
按照页数滑动：
现在可以进行滑动了，但是本例的滑动功能比较特别：
滚动列表分为4页，当滑动完成后会停留在离它最近的一页进行显示
在GridScrollPanel下添加脚本LevelSelectScrollRect.cs
继承两个接口：using UnityEngine.EventSystems;
IBeginDragHandle, IEndDragHandle
要想得到滑动的位置 -- 在ScrollRect里可以得到
private ScrollRect scrollRect = GetComponent<>...
scrollRect.normalizedPosition; // The scroll position as a Vector2 btw (0,0) and (1,1) with (0,0) being the lower left corner.
x的值表示水平方向，y表示竖直方向；
表示当前end drag时所在的位置(以0~1表示)
注：鼠标松开后的惯性移动不计入测量（以放开鼠标那一刻的位置为准）
此处因为只需得到水平的滑动，使用scrollRect.horizontalNormalizedPosition即可
需要求得滑动的位置距离哪一页比较近：
一共有四页，第一页和最后一页用0, 1表示，中间两页用0.333和0.666表示
public void OnEndDrag(PointerEventData eventData) { float posX = scrollRect.horizontalNormalizedPosition; // 设四个数字，若当前horizontalNormalizedPosition的值离哪个近，就翻到该页 // 第一页：0；第四页：1 // 中间两页平均分，第二页0.333，第三页0.666 float[] indexArray = new float[] { 0f, 0.333f, 0.666f, 1f }; //判断当前滑动位置离哪一页近 int index = 0; // 默认离第一页近 (默认就是在第一页) int targetIndex = 0; float offset = Mathf.Abs(posX - indexArray[index]); for (index = 1; index < indexArray.Length; index++) { // 寻找最近的一页 if((Mathf.Abs(posX - indexArray[index])) < offset) { offset = posX - indexArray[index]; targetIndex = index; } } // targetIndex就是需要定位的页数 scrollRect.horizontalNormalizedPosition = indexArray[targetIndex]; }
缓动效果：
当前的效果是直接变到那一页，没有动画效果，太过于生硬
scrollRect.horizontalNormalizedPosition = indexArray[targetIndex];
-- 改进：需要使用差值运算的方式进行渐变
targetPosX设为全局变量
将上面直接设置Pos的代码改为设置targetPosX：targetPosX = indexArray[targetIndex];
之后在Update()进行差值运算
scrollRect.horizontalNormalizedPosition = Mathf.Lerp(
scrollRect.horizontalNormalizedPosition, targetPosX, Time.deltaTime * speed);
此时，实现了缓动效果。
但是，会发现在Update中该差值运算是不停地执行的，而在滑动的过程中，scrollRect的位置是不应该被代码所控制的：
使用bool startAutoScroll = false; 来判断是否需要自动缓动
在OnEndDrag()时，将其设为true，在OnBeginDrag()时，将其设为false
在Update()中，如果为true的时候才会运行差值运算和位置设定
private float targetPosX = 0; // 默认为第一页 private bool startAutoScroll = false; private float autoScrollSpeed = 5; public void OnEndDrag(PointerEventData eventData) { // ...求得targetIndex，targetIndex就是需要定位的页数 // scrollRect.horizontalNormalizedPosition = indexArray[targetIndex]; targetPosX = indexArray[targetIndex]; startAutoScroll = true; } void Update() { if (startAutoScroll) { // 差值运算和位置设置 if (scrollRect.horizontalNormalizedPosition.Equals(targetPosX)) { startAutoScroll = false; } } } public void OnBeginDrag(PointerEventData eventData) { startAutoScroll = false; }
任务5-7&5-8：添加单选按钮来控制列表的滑动
添加控制列表滑动的单选按钮：
在Frame下创建空物体SelectLevelToggles，用来存放Toggles
创建子物体UI->Image: Knob，灰色
创建Knob的子物体，用来显示toggle被选择时的状态 UI->Image: Leave
在Knob上添加Toggle组件，将其Graphics设置为Leave
（还记得IsOn为True时Graphics会显示吗）
在SelectLevelToggles中添加Toggle Group组件
并在所有Knob上的Toggle->Group中赋值SelectLevelToggles
将所有的Knob的IsOn都uncheck，完成按钮的添加
通过单选按钮来控制列表的滑动：
Toggle的事件为OnValueChanged(Boolean)
在GridScrollPanel.LevelSelectScrollRect.cs中添加四个方法分别对应四个按键的点击事件
public void MoveToPage1(bool isOn) {
if (isOn) {
startAutoScroll = true;
targetPosX = indexArray[0];
}}
并将这四个方法分别在四个Toggle中注册
此时，可以通过Toggle来控制页面的滑动了
但是，用拖拽的方式进行页面滑动的时候，不能控制Toggle的开关，该怎么做呢
-- 通过代码修改Toggle组件的IsOn属性即可
首先，得到所有的Toggles：public Toggle[] toggles = new Toggle[4];
在上一任务中得到targetIndex之后，实现toggles[targetIndex].isOn = true; 即可
public class LevelSelectScrollRect : MonoBehaviour, IBeginDragHandler, IEndDragHandler { // 用于修改Toogles的IsOn属性 public Toggle[] toggles = new Toggle[4]; private ScrollRect scrollRect; private float targetPosX = 0; // 默认为第一页 private bool startAutoScroll = false; private float autoScrollSpeed = 5; private float[] indexArray; void Start() { scrollRect = GetComponent<ScrollRect>(); indexArray = new float[] { 0f, 0.333f, 0.666f, 1f }; } void Update() { if (startAutoScroll) { scrollRect.horizontalNormalizedPosition = Mathf.Lerp( scrollRect.horizontalNormalizedPosition, targetPosX, Time.deltaTime * autoScrollSpeed); if (scrollRect.horizontalNormalizedPosition.Equals(targetPosX)) { startAutoScroll = false; } } } public void OnEndDrag(PointerEventData eventData) { float posX = scrollRect.horizontalNormalizedPosition; // 设四个数字，若当前horizontalNormalizedPosition的值离哪个近，就翻到该页 // 第一页：0；第四页：1；第二页0.333，第三页0.666 int index = 0; // 默认离第一页近 (默认就是在第一页) int targetIndex = 0; float offset = Mathf.Abs(posX - indexArray[index]); for (index = 1; index < indexArray.Length; index++) { // 寻找最近的一页 if((Mathf.Abs(posX - indexArray[index])) < offset) { offset = posX - indexArray[index]; targetIndex = index; } } // targetIndex就是需要定位的页数 targetPosX = indexArray[targetIndex]; startAutoScroll = true; // 通过拖拽导致的页面滑动，控制Toggles的IsOn属性 toggles[targetIndex].isOn = true; } public void OnBeginDrag(PointerEventData eventData) { startAutoScroll = false; } // 用于通过Toggles来控制页面的滑动 public void MoveToPage1(bool isOn) { if (isOn) { startAutoScroll = true; targetPosX = indexArray[0]; } } public void MoveToPage2(bool isOn) {} public void MoveToPage3(bool isOn) {} public void MoveToPage4(bool isOn) {} }
任务6-1&6-2：任务列表 -- 背景&&任务项
滚动列表
创建背景 UI->Image: bg-01
创建window frame和CloseButton见任务4
在PanelQuest下创建任务对话框：Quest
背景 UI->Image: quest-bg，Image Type = Sliced，并打开Sprite Editor切图
左边任务类型 UI->Image: quest-leave
leave的子物体: UI->Image: quest-dialog
任务名称 UI->Text: 字体、黑色、Bold、大小等
右边按钮 UI->Image: ButtonRedA，添加Button组件
子物体: 按钮文字: UI->Text: Done、白色等
任务6-3：使用Vertical Layout和ScrollRect控制任务列表的滑动
除了Grid Layout Group外，还有Vertical Layout Group和Horizontal Layout Group
这里因为Quests需要竖直排序，所以使用Vertical Layout Group实现
Vertical Layout Group会将所有子物体完全填充空间
因此和上面一样，需要将Quest放入空物体后再作为Vertical Layout Group的子物体
在PanelQuest下新建空物体QuestListVerticalLayout
在QuestListVerticalLayout下创建若干空物体，作为Quest的容器
Ctrl+D复制出(一共九个)QuestItem
调整各个物体的大小
实现滚动效果：
新建UI->Image: 添加ScrollRect组件，调节大小
将QuestListVerticalLayout放入ScrollRect，作为子物体
并将ScrollRect的Content指定为QuestListVerticalLayout，取消勾选Horizontal
在ScrollRect中添加Mask，取消勾选show mask graphics
任务7-1&7-2&7-3：游戏设置界面 -- 声音的滑动条
&& 游戏难度按钮
&& 音效和音乐开关
Volume：滑动条 (Slider)
Level：单选 (Toggle Group)
Audio/ Music：选择框 (Toggle扩展)
老样子，背景bg-01 + Window Frame + ButtonClose
音量滑动条：
UI->Text: VOLUME、白色、字体等
UI->Slider:
Background: Slider Background
Fill Area->Fill: Slider Background，颜色黄绿色
Handle Slide Area->Handle: Thumb
(注：Handle Slide Area的大小和Handle的大小之间的关系要调整好)
选择游戏难度的单选按钮：
UI->Text: DIFFICULTY
UI->Toggle:
Background: TickBackground
Background->Checkmark: Tick
Label: EASY
创建另外两个按钮MED和HARD
在Difficulty上添加Toggle Group组件，并将三个Toggle的Group设置为Difficulty
音效和音乐开关：
UI->Text: AUDIO
UI->ToggleAudio:
Background: SwitchBackground
Background->Checkmark: SwitchOn，并重命名
Label: on，黄色，在Hierarchy中放在Checkmark下(子物体)
在Checkmark旁边添加一个兄弟UI->Image: SwitchOff，位置在右边
同样，在SwitchOff下创建一个 UI->Text: off，红色，位置在左边
在ToggleAudio中添加ToggleAudioController.cs脚本，用于自定义控制Toggle
首先需要取得SwitchOn和SwitchOff两个gameObject
public GameObject switchOn;
public GameObject switchOff;
监听Toggle的按下：
public void OnSwitchPressed(bool isOn) {
switchOn.SetActive(isOn);
switchOff.SetActive(!isOn);
}
此时就能进行开关的切换了
但是还需要设置刚开始的初始化状态
private Toggle toggle = GetComponent<Toggle>();
在Start()中手动调用OnSwitchPressed(toggle.isOn); 即可
相同的MUSIC按钮，复制即可
任务8-1：游戏登录界面 -- 登录面板、输入框
下方两个按钮；中间两个输入框，一个单选按钮
老样子：bg-01 + Window Frame + ButtonClose
创建线框：UI->Image: frame2，调整大小
创建输入框Username：
UI->Text: Name，字体大小，向右对齐等
UI->Input Field -- InputField组件用来控制输入，它的属性：
Image: 输入框背景
Placeholder: 默认显示值
Text Component: 输入时会将输入值显示在该组件指向的Text物体中
子物体 Placeholder: Text组件 -- （当有输入时，该物体的Text会自动被禁用）
子物体 Text -- 用来存放InputField中输入的内容
同样方法创建输入框Password：
但是密码是不能显示明文的
在InputField组件中有一个ContentType属性，ContentType = Password即可
创建Remember Me单选框：
UI->Toggle:
Background: TickBackground
Background->Checkmark: Tick
Label: Remember Me?
创建下方两个按钮：
登录按钮：
UI->Image: ButtonRoundBackground，添加Button组件
UI->Image: Ok
控制按钮：
UI->Image: ButtonRoundBackground，添加Button组件
UI->Image: ButtonRoundForeground（并设为Button的Graphics）
UI->Image: Leave
UI->Image: Controller
任务8-2：结束语
掰掰