Unity UI制作与鼠标光标

来自chutianbo老师笔记

一：UI的制作

主要结构：

分别为左上角血条，右边金币，左边遥控栏，右边攻击等

左上角血条：

1.创建一个UI中的silder

按照UI中的渲染顺序，那么从上到下应该是Fill Area（黑色背景），子类（红色血条），FrontFrame（血条外边框）,UserLevel（左侧盾牌）以及其子类Text类显示等级

这里需要通过锚点将Slider移到左上角,通过shift和shift+alt可以迅速将方框和锚点移动

2.Gold

综上所述

但是金币的背景可以通过设置color 0，0，0，135来设置半透明

3.左侧移动，

事实上是通过一个背景圆和四个方向的亮色方向圈组成

我们这里只做模拟，所以不考虑程序问题，所以我们做完四个方向后，可以通过隐藏来形成移动方向高亮

4.右侧技能键

唯一的关键点在于如何制作UI上的倒计时和半透明

倒计时计数由最后面的text制作

半透明由（0，0，0，135）的image制作，这里的技能倒计时由途中Fill Amount控制

二：事件系统绑定

1.制作攻击按键：

1.1绑定动画

制作Attack来作为跳转状态的触发器；

这里注意，进入攻击状态允许打断，所以可以取消has exit time。但是攻击状态播放完后，需要后摇

2.2

Unity中的UI 中的按钮和安卓或者前端开发中的按钮没有什么区别都是通过click控制，切Unity中可以可视控制。

当然是我们需要在角色控制器中加入 Attack函数

Animator m_Animator;

public void Attack()
{
m_Animator.SetTrigger("Attack");
}

2.3关于制作一个设置菜单

一般而言设置菜单分为三种

1.一次性菜单，直接挂接在当前场景

2.将菜单作为prefabs，在多个场景复用

3.直接将菜单作为一个独立游戏场景使用，使用时跳转（常用）

这里制作的的为类型1，直接挂接

这里需要的控件分别为

1.UI中的Toggle（即为前端中的checkbox）

2.Slider（滑动条）

3.button当前设置实现数据保存

1.由于我们游戏默认游戏开启

所以需要Is On打开

音频我们可以挂接在角色的父对象

默认就是全局播放可以不管

如果需要播放源可以调整下方的3d曲线

2.滑动条

唯一需要注意的就是挂接数据选择volume即可

但是我们这样子设置完事实上每次关闭setting界面之后，所有的数据都会回到我们默认的数据

所以我们在游戏中需要一个应用按键来存储我们所需的数据

这里我们需要两个脚本一个为C#基础脚本存储我们所需的数据

分别存储float类型的音量大小

和bool类型的是否开启音量

public class SettingData{
public float MusicVloume;
public float IsOn;
}

然后我们需要一个unity脚本：SaveSetting

这里我们需要用json数据类型来存储数据

   private SettingsData m_settingsData;
//获取两个控件，并且序列化显示[SerializeField] private Slider volumeSilder;[SerializeField] private Toggle MusicToggle;private void Awake(){string filePath=Application.streamingAssetsPath+"/settings.json";if (!File.Exists(filePath)){return;}
//读文件信息用的信息流StreamReader sr=new StreamReader(filePath);string json=sr.ReadToEnd();、
//判断字符串是否为空if (json.Length > 0){SettingsData settingsData = JsonUtility.FromJson<SettingsData>(json);if (volumeSilder != null){volumeSilder.value = settingsData.MusicVolume;}if (MusicToggle != null){MusicToggle.isOn = settingsData.IsMusicOn;}}}
//转换数据为json字符串public void SaveSettingsToJson(){m_settingsData = new SettingsData();m_settingsData.MusicVolume = volumeSilder.value;m_settingsData.IsMusicOn = MusicToggle.isOn;string settings=JsonUtility.ToJson(m_settingsData);Debug.Log($"转换用户设置的菜单数据到Json格式为{settings}");File.WriteAllText(Application.persistentDataPath+"/settings.json",settings);Debug.Log("执行LoaddingSettings");}
}

三：光标制作

因为是放在另一个Demo中所以下面的结构不太一样

效果如下，将鼠标光标转换为下图

1.制作脚本CursorScreen：

消失原本的鼠标

将脚本位置与鼠标位置同步

UI层级：

Screen设置：

用的叠加模式，不熟悉可以看前面的说明，将图层渲染顺序改为200，为最后渲染，最上层

因为我的demo素材为16像素点，这个自己设置就行

：

Aspect：宽高设配器

选的FItParent模式，根据宽高比把UI放入父物体的Rect当中，宽高都无法手动设置，会自动根据宽高比，无论如何修改Ratio比值都不会超出父物体的框；

这里的数值来自于16/9

Cursor:其实就是一个image，在这里加自己的光标就行，如果不需要射线检测就关掉好了，

就是如果不需要做点击宝箱什么这种，可以优化性能；

最后一步Edit➡project Settings➡player

这里其实就有一个默认光标设置，我这里因为是自己设置了一个，为了避免特殊情况，将原本的cursor设置为黑色

至于这两个的区别可以看下图

由于截图之后，鼠标光标脱出会消失，大概可以理解为光标会在距离那个tilemap（1，-1，0）的位置，有一定的误差