Unity 开源项目推荐 UI 篇

一、前言

游戏开发是一个复杂并且庞大的工程,为了保证游戏开发的效率和质量,我们往往需要从多方面进行努力。例如,选择稳定且长期支持的引擎版本;使用经过商业项目验证后或者有大量使用者的游戏框架;使用部分现有的开源组件,节约开发时间。而这次以点入手,从小的方面出发,推荐一些的开源组件,避免重复造轮子,能让我们开发事半功倍。(挤出一半时间学习摸鱼学导论)这次先介绍 UI 相关的的三个 PSD2UGUI 、LoopScrollRect 和 DoTween 项目。

image-20210317201621570

二、PSD2UGUI

1. 项目介绍

如果你水过一些游戏开发的群,会经常能看见一个带有调侃性质的称呼,「拼图仔」。虽然带有夸张成分,但是我相信每一个参与游戏开发的同学,肯定是做过拼界面的任务。虽说有些大的项目组有资源策划的存在,专门进行UI资源的拼接和管理,但是大家其实都会被拼界面的任务烦恼。如果是个人项目,更会花费大量的时间在麻烦的拼界面和绑定资源上。这里就推荐一个能够从一定程度上舒缓大家疼痛的项目。quick_psd2ugui

该项目能够让我们在 PhotoShop 上按照一定的规则拼接界面,然后把保存的 PSD 文件,直接转成能够使用在 Unity 中的 UGUI 界面。

2. 项目演示

2.1 导入工程

从 Github 上将工程下载下来后,需要把脚本文件导入到 PS 中。即把脚本文件 Export PSDUI.jsx 拷贝至「PS 安装目录\Presets\Scripts」目录下。

image-20210314170515987
同样的需要把 PSD 项目中 Asset 下的代码导入到 Unity 的项目中。

image-20210314173534106

2.2 创建 PSD

作为演示,我们这里做一个奖励界面。打开 PS,搭建一个滑动列表的界面。

image-20210314174120469

这个界面的层级结构需要按照一定的规则去搭建,具体内容可以查看官方文档,路径为 「 psd2ugui\Assets\PSD2UGUI\Doc 」。这里只是简单搭建演示下滑动列表的规则要求。

image-20210314182512472

以「@」符号开始,后面填写的就是程序需要识别的关键词和参数。这里我们用到了两种控件,按钮 Button 以及滑动列表 ScrollView。

在 ScrollView 后通过字符「:」分割后续填入的就是滑动列表的参数。这里填写的是 V,代表滑动方向为垂直方向。Cell 后的 LE 对应 UGUI 的 LayoutElement。加该关键字后,滑动列表的子项(item)会自动布局。需要注意的是我们需要通过一张图片表示滑动区域的大小,需要创建一个名为 @Size 的图层,使用一张图片表示覆盖区域。rewardProp 后面的 Common 表示命名同一个 PSD 中多次用到的图,以后只会切一张图,不会产生多个资源。

保存我们创建好的 PSD 文件。PS 界面选择「文件」-「脚本」-「Export PSDUI」,选择导出的目录,就能生成切图和配置文件。

image-20210314180627781

image-20210314181321944

2.3 生成 UGUI

打开 Unity 项目,在菜单栏选择「 QuickTool 」-「 PSDImport 」。(如果你没有找到,请先确定是否将 PSD2UGUI 项目导入到了工程中,再查看是否存在报错情况)

image-20210314181045737

选择我们刚才导出目录下的 LoopScroll.xml 配置文件。就能够自动生成和 PS 中相同的 UGUI 界面。

scroll 由于我们设置了 ScrollView 会自动生成对应的 Viewport 和 Content,并且移动范围大小和我们最开始设置的 @Size 大小一致。

我们就可以将生成的 UI 界面 LoopScroll,生成预制体,然后通过我们自己的 UI 框架进行加载和运行。

2.4 自动生成 UI 脚本(可选)

这个项目还提供了可供参考的快速绑定实现方案。在 Unity 中执行 「 QuickTool 」-「 QuickGenCode 」,会打开以下界面,依次按照图片中的内容执行。

步骤 4 和步骤 7 可以二选一。步骤 4 是通过 transform.Find 方法进行绑定,步骤 7 是把脚本挂载在对应的 UI界面(LoopScroll 节点上),直接绑定 UI 组件,记得操作完成后 Apply 应用下预制体修改。

3. 总结

至此我们通过 PSD2UGUI,有了能直接在 Unity 中使用的界面。官方文档在 「 Assets/PSD2UGUI/Doc/使用说明 」下,建议还是多浏览一遍。之后的流程就是添加相关的逻辑功能脚本了,在我们开发的日常中,经常会遇到有重复的功能需求,此时一般就会提供出来公共组件。这种公共的组件一般会由内部的同学提供,或者通过开源的项目进行改造。

PSD2UGUI,这种实现方案导致工作流还是偏向程序,因为在拼 UI 的时候需要懂得一些规则,需要明白这个是一个按钮 Button,还是一个图片 Image。所以还是适合小团队或者是程序个人项目。而且类似的项目在 Github 上还有多个,可以选择一个最适合自己的,如果是团队使用最好在基础上进行二次开发。

三、LoopScrollRect

1. 项目介绍

我们在业务开发的过程中,经常会遇到有大量的列表需要显示的情况,比如上面的奖励列表。这里要推荐的,就是一个通过对象池实现的,元素可重复利用的循环列表。Github项目地址+官方文档

2. 项目演示

2.1 导入工程

我们从 Github 上下载的项目,将项目中 Scripts 目录下的代码导入工程中。

2.2 修改 UI 组件

循环滑动组件可以认为是原有滑动组件的增强组件,需要把新增的 LoopHorizontalScrollRect,或者是 LoopVerticalScrollRect,添加到对应位置,代替原有的 ScrollRect。

以我们上面的例子举例,先需要把原有 UI 进行下改造,把 Content 下的 Cell 节点保存成单独的预制体,并且删除原有的所有 Cell。

image-20210315142402396

我们这里是垂直方向,所以选择 LoopVerticalScrollRect 组件,把组件替换原有的 ScrollRect,并且绑定与 ScrollRct 相同的 Content 和 Viewport。如果不想响应水平移动,需要把 Horizontal 取消勾选,基本参数类似 ScrollRect。比较特殊的是 Prefab Source 属性。Prefab Name 中的名称需要和我们之前保存的 Cell 预制体相同,Pool Size 表示对象池的缓存大小。需要注意的是组件默认是通过 Resources.Load 的 API 来创建对象,所以需要把预制体存放在 Resources 目录下。当然如果是真正接入到项目的时候,往往会再此基础上进行部分修改和封装。改变一些加载和使用方式,让其更符合我们自己的项目。

image-20210315142803046

2.3 代码控制

创建初始化代码,RewardsScrollInit.cs。设置滑动列表 Cell 数量,并且重新填充。

using UnityEngine;
using UnityEngine.UI;

public class RewardsScrollInit : MonoBehaviour
{
        public int totalCount = 15;  // 创建15个 cell
        void Start()
        {
            var ls = GetComponent<LoopScrollRect>();
            ls.totalCount = totalCount;
            ls.RefillCells();
        }
}

将脚本挂载到与LoopVerticalScrollRect 相同的节点 scroll 上。

创建 Cell 接收代码 RewardCell.cs。ScrollCellIndex 在 Cell 创建和刷新的时候会被调用。组件默认使用的是 transform.SendMessage 的 API 来传递消息调用的方法。我们自己也可以使用自己项目内部的消息系统来传递调用。

using UnityEngine;
using UnityEngine.UI;

public class RewardCell : MonoBehaviour
{
    Image image;
    private void Awake() {
        image = transform.Find("rewardProp").GetComponent<Image>();
    }
    // 关键方法,idx 表示当初 Cell 的索引值
    void ScrollCellIndex (int idx) 
    {
		string name = "Cell " + idx.ToString ();
        if (image != null)
        {
            image.color = Rainbow(idx / 25.0f);
        }
		gameObject.name = name;
	}

    // http://stackoverflow.com/questions/2288498/how-do-i-get-a-rainbow-color-gradient-in-c
    public static Color Rainbow(float progress)
    {
        // 设置彩虹色
        //....
    }
}

将脚本挂载在 Cell 预制体上。

2.4 运行效果

3. 总结

该组件重点在于实现了对象池缓存,能够通过由Cell 组成的内容部分大小和可视区域 ScrollRect 大小进行比较,动态的增删对象。方便展示大量的对象。

在一些加载对象和传递调用方面,就如是上文所说,还是推荐进行修改和封装后放入到我们自己的项目中。

四、DoTween

1. 项目介绍

DoTween 应该是 Unity 中插件使用排行榜前几的插件,作为一款动画插件,覆盖率非常高。官方的介绍是“DOTween 是适用于 Unity 的快速,高效,完全类型安全的面向对象的动画引擎,针对 C# 用户进行了免费和开源优化,具有大量高级功能”。通过 DOTween 我们能够很方便的完成许多动画效果,并且支持 2D 和 3D,是一个非常强大的插件。这里我们简单的演示下,使用 DoTween,来实现一下界面关闭的效果。

2. 项目演示

2.1 导入项目

官网下载下载,解压后直接把 DoTween 拖入项目目录中。

image-20210315153935276

或者直接从 Unity Store 上搜索 DoTween,直接下载导入到项目中。
image-20210315153827369

2.2 代码控制

打开在 PSD2UGUI 中自动生成的 UI 脚本 LoopScrollWin.cs,在关闭按钮事件中进行关闭界面表现控制。

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using DG.Tweening;	// 引入命名空间
public class loopScrollWin : MonoBehaviour
{

    #region UI Variable Statement 
    // UI 组件
	//...
    [SerializeField] private Button button_closeButton;
    #endregion

    #region UI Event Register 
    private void Awake()
    {
        // 添加事件
        AddEvent();
    }
    private void AddEvent()
    {
        button_closeButton.onClick.AddListener(OncloseButtonClicked);
    }


    private void OncloseButtonClicked()
    {
        // 缩放,时长0.3s
        Tweener tweener = transform.DOScale(Vector3.zero, 0.3f);
		// 移动
		// transform.DOMove(new Vector3(0,10,0), 0.3f);
		// 旋转
		// transform.DORotate(new Vector3(0,90,0), 0.3f);
        // 缩放完成后关闭
        tweener.OnComplete(() =>
        {
            Destroy(this.gameObject);
        });
    }
    #endregion

}


2.3 运行效果

除了常见的缩放、平移、旋转,DoTween 还有大量的 API,浏览官方文档或者搜索各种教程,我们能够实现各种效果。比如上面的例子,线性缩放看起来有点不自然,那么我们可以增加一个曲线。

    private void OncloseButtonClicked()
    {
        Tweener tweener = transform.DOScale(Vector3.zero, 0.3f);
        // 设置缓动函数
		tweener.SetEase(Ease.InSine );
        tweener.OnComplete(() =>
        {
            Destroy(this.gameObject);
        });
    }

image-20210315161704758

3. 总结

DoTween 是一个使用简单,功能强大的组件。除了使用脚本来控制播放,还拥有可视化编程的内容,只需要为要做动画的物体添加 DoTweenAnimation 组件,在 Inspector 面板上设置参数,就能够实现动画效果。

五、总结

这次只是简单介绍了下,我工作中接触到的一部分组件。固然通过这些组件能够快速的实现一部分需求,但是也要警惕通过各种开源组件拼接出来一个工程项目的做法。因为每个开源项目的进度和目的不同,所以会存在完成度差距的问题。比如 PSD2UGUI,项目时间较远;循环滑动列表需要封装改造后,才能更好的使用;最为成熟的 DoTween 也要考虑是否需要添加全部组件。

因此我认为,最正确的打开方式应该是,先确定自己工程的主要游戏框架。可以选择已有的较成熟的游戏框架,或者自己搭建一个。以框架为骨骼,这些开源的组件为肉,在添加进项目前,按照框架的一些需求和工作流,进行修改和封装,最后再添加进工程。以模块化的方式使用这些组件,方便以后可以替换和修改这些组件,不会影响到大部分功能,这样才能保证我们的项目总体上不受各个开源项目的反噬影响。