自己的 UI 设想与斥地履历总结 （Unity）2023.2.18

风残殒落殒d

来历：知乎



前言：

自己是一位游戏开辟进修中的门生，被朋友提醒，决议总结一下自己做游戏开辟中的 UI 设想和开辟经历，供自己快速回首，也给在忧心不异题目标伙伴一些参考。自己没有从业经历，本篇文章请当做无专业性的文章看待。倘使有先辈可以赐与指导，不甚感激。

本篇聚焦于视觉交互设想，包括 GUI 及其动效的设想和开辟。
〇、自己的 UI 设想流程

1. 在平面设想软件建造 UI 保真图

• 在这个阶段与伙伴敲定一个可用的版本
  
• 一些草图混乱，很多部分都是在游戏中优化完成
  

草图



制品



草图



制品



草图



制品

2. 导出 UI 所需的图像素材

请将巨细导出为 2^n（为了紧缩），并最好使单元像素巨细分歧。
3. 在 Unity 中建造 UI

请见下文↓
一、在 Unity 中建造 UI（UGUI）

Unity 中 GUI 工具治理

一般自己针对一个利用处景会写一个 xxUIManager ，以单例形式存在，这里包括 GUI 的一切（有需的）GUI 工具援用、会触发事务（退出、重新起甲等）。
xxUIManager 终极会挂在一个 Canvas 下，再将该 Canvas 存为预制体，点窜只需点窜预制体即可。
以下为例：

• LevelUIManager (Canvas)
  
  
  
  • ButtonsPanel (Panel)
    
    
    
    • AButton
      
    • BButton
      
    
    
  • KeymapPanel
    
  • WinPanel
    
  
  

当某个面板的功用过量时，能够会将对一个面板的操纵封装成一个剧本，挂在对应面板下。
xxUIManager 和面板的剧本下的物体援用凡是会表露给内部工具，凡是是不会在内部工具中停止操纵。内部工具对xxUIManager下子物体的操纵尽能够封装成方式，供内部挪用。
自界说 UI 组件 与 CustomEditor 与 预制体

编写自己的 UI 组件

很多时辰 Unity 自带的 UI 组件完全不能满足自己的需求，此时会自己写 UI 剧本，继续 IPointerClickHandler, IPointerDownHandler, Up, Enter, Exit… 等常用的事务。

我还没有做过兼容手柄的菜单，所以此处必定疏忽了兼容手柄挑选的情况。
对兼容手柄有需求的读者也答应以阅读 Selectable 类。

自界说 Inspector ( CustomEditor ) 方便地点窜预制体参数

写好 UI 剧本后利用 CustomEditor 调剂 UI 是非常方便的事。
不外利用预制体时利用 Editor 会出现没法将改变的参数保存的题目，自己找了一些地方找到领会决计划。 Editor 类：
private MyUIComponent componetSelf;
private void OnEnable()
{
        componetSelf = target as MyUIComponent;
}

public override void OnInspectorGUI()
{
        base.OnInspectorGUI();

        //objectSelf 指这个 editor 剧本所对应的组件(target)
        //objectSelf.TextComponent 是一个例子，指这个预制体内被点窜的组件，这里是笔墨
        Undo.RecordObject(componetSelf.TextComponent, "descriptive name of this operation");

        //这里履行需要做的操纵，例如点窜笔墨的内容和字号
        componetSelf.TextComponent.text = EditorGUILayout.TextField("Name", componetSelf.TextComponent.text);
        componetSelf.TextComponent.fontSize = EditorGUILayout.FloatField("Font Size", componetSelf.TextComponent.fontSize);
   
        //标志笔墨组件被点窜
        EditorUtility.SetDirty(componetSelf.TextComponent);
        PrefabUtility.RecordPrefabInstancePropertyModifications(componetSelf.TextComponent);
        //标志场景中我们的物体被点窜
        EditorSceneManager.MarkSceneDirty(componetSelf.gameObject.scene);
}

资本文件治理

自己对 UI 的资本文件凡是不会单开一个文件夹，而是放在对应品种的文件夹下方的 ~/UI/ 目录下。
自己凡是会用 <文件范例[小写]>(_<细分范例[小写]>)_<文件称号[大写驼峰]>  的方式命名资本文件。对于 UI 的资本文件，例子是 spr_ui_HelloWorld ，其中 spr 代表 Sprite，ui 代表 UI，HelloWorld 是文件名。对于别的资本，命名方式同理，如预制体用 p_，状态机用 ant_，动画用 an_ 等，缩写的挑选取决于自己和伙伴的认知。
精灵图的留意事项

对于用于 UI 的精灵图，倡议将 Mipmap 关掉，（按需）将 Wrap Mode 改成 Clamp，这两者能够致使 UI 边沿出现毛病的边线。
导入资本时设备资本属性可阅读：
二、动效

自己实现动效的方式可以不松散地分为三类：
1. DoTween：功用完整、利用方便

有些进修本钱、治理复杂

DOTween 的官网：
一个 DOTween 系列教程：
各类动画曲线一览：

2. 自己写个 Tweener：灵活可控，支持打断动画

数学根本是插值，保举视频

在用 DOTween 时发现治理动画打断很不方便，会出现动画忽然闪到尽头的情况等等；另一方面，在场景切换或物体烧毁时，物体的动画没有播放完，DOTween 也会给出平安形式警告。
因而就自己实现一个可以随时打断和返程的 Tweener（与 DOTween 中的 Tweener 无关）
写一个类：
    [Serializable] // 使可以在 Inspector 编辑
    public class SimpleTweener
    {
        [HideInInspector] public float time; // 动画确当前时候
        public float duration; //动画的延续时长
        public AnimationCurve curve; //动画曲线

        private bool isActive; //能否正在停止
        private bool isPositive; //能否停止正向计时

        public float ProgressRate => time / duration; //动画播放的进度

        public Action<float> doAnimation = (value) => { };

        public void Update()
        {
            if (isActive)
            {
                time = isPositive ?
                    Mathf.Min(time + Time.deltaTime, duration) :
                    Mathf.Max(time - Time.deltaTime, 0);
               
                if (time == 0 || time == duration) isActive = false;
               
                float result = curve.Evaluate(ProgressRate); //对曲线停止采样
                doAnimation.Invoke(result);
            }
        }

        public void Start()
        {
            isActive = true;
            isPositive = true;
        }

        public void Stop()
        {
            isActive = true;
            isPositive = false;
        }
    }
以后我们在自己的 MonoBehaviour 中利用：
public class AnimationTestBehaviour : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler
    {
        public SimpleTweener tweener;
        public Image image;

        private void OnEnable()
        {
            tweener.doAnimation += DoTween;
        }
        private void OnDisable()
        {
            tweener.doAnimation -= DoTween;
        }
                               
        private void Update()
        {
            tweener.Update();
        }

        void DoTween(float value)
        {
            Color color = image.color;
            color.a = value;
            image.color = color;
            image.transform.localScale = (0.5f + value) * Vector3.one;
        }

        public void OnPointerEnter(PointerEventData eventData)
        {
            tweener.Start();
        }

        public void OnPointerExit(PointerEventData eventData)
        {
            tweener.Stop();
        }
    }



Inspector



结果

自己编写 Tweener 的可控性高却烦琐，单程动画自己一般会用 DoTween 实现。

我想 DOTween 也是有实现可打断动画的方式的，自己应当进修一下。

3. 无穷趋近式：编写快速、顺应性高

动画形式单一、可控性差、没法到达方针值

在一次 Ludum Dare 的作品中我用了这个方式实现卡牌动画


无穷趋近式的意义是，让希望改变的参数的现实值无穷趋近这个方针值。
以缩放为例，我们设定一个物体缩放的方针值，然后让现实值无穷趋近这个方针值：
float value = Mathf.Lerp(currentSize, targetSize, speed);
speed 是趋近的速度，在 0 ~ 1 之间。在 Update 中挪用的话，记得将speed 乘上 Time.deltaTime .
public void Update(){
      float currentSize = transform.localScale.x;
      currentSize = Mathf.Lerp(currentSize, targetSize, speed * (Time.deltaTime * 50f));
      image.transform.localScale = currentSize * Vector3.one;
}


这类方式会致使物体永久没法到达方针值，动画的停用也需要用差值停止检测。但其治理和实现都很简单，2D 相机跟踪物体用这类方式实现非常方便。
后记：

回首一下，发现自己做完的可玩的游戏都是 Game Jam 作品。自己在私下空想和开辟的游戏未便展现。所以本篇文章的 UI 美术都是 Game Jam 的快速生产内容，一定有很多不标准的地方。
做 UI 是自己喜好的一件事，自己一有游戏想法，第一件事就是去做 UI，自己做了很多游戏的 UI，成果游戏却没怎样开工过w。若有机遇，愿意结识更多的伙伴，去做些风趣都雅的游戏。




原文地址：https://zhuanlan.zhihu.com/p/607445633
免责声明：
1、文章部分图片源于收集，均为表示图；
2、一切文章、图片、音频视频文件等材料版权归版权一切人一切；
3、因非原创文章及图片等内容没法和版权者联系，如原作者或编辑以为作品不宜上网供阅读，或不应无偿利用，请实时告诉我们，以敏捷采纳适当办法，避免给双方形成不需要的经济损失；
4、本页面内容由爬虫法式自动收集于互联网，如无意中加害了媒体或小我的常识产权，请电邮【E-Mail:cb@yoyodoc.com】告之，我们将于24小时内删除。

_阿乐哥哥

很是好文章，爱来自 Nova ( heartheartheart