前言：

最近需要做装备合成树，类似于王者荣耀的那种直来直去的合成线。大概类似于下图：

然后王者荣耀这个合成树的画法是只显示相邻的合成关系，而不相邻的列之间的合成关系不显示。比如在第三列的装备A由第二列的装备B、C和第一列的装备D合成，那么只绘制A与B、C的关系，D与A之间则没有连接线。先暂且不讨论这是不是最优的解决方案，我们可以作为参考来制作自己的装备合成树。

下面开始弄装备合成树。

正文：

1、一条能自适应的折线

首先需要一条自适应的折线，他能根据起点和终点的位置自动适应。我们分析这条线由3部分组成：左边横线、中间竖线、右边横线。我的预计效果如下：

具体步骤为：先制作一个预制，其包含三根线。

分别设置好其锚点和中心点(Pivot)：

TreeLine 锚点：左上，中心点：（0，1）；

LineLeft 锚点：左上，中心点：（0，1）；

LineMiddle 锚点：左中，中心点：（0.5,0.5）;

LineRight 锚点：右下，中心点：（1，0）；

之后给TreeLine添加一个脚本：

    using UnityEngine;using UnityEngine.UI;/// <summary>/// 左侧线/// </summary>public Image LineLeft;/// <summary>/// 中间线/// </summary>public Image LineMiddle;/// <summary>/// 右侧线/// </summary>public Image LineRight;/// <summary>/// 左侧线的占比；/// </summary>[Range(0, 1)]public float LeftRatio = 0.5f;/// <summary>/// 设置线；/// </summary>public void SetLines(){float x = (transform as RectTransform).sizeDelta.x;float y = (transform as RectTransform).sizeDelta.y;//先编辑左右两端的长度；LineLeft.rectTransform.sizeDelta = new Vector2(Mathf.Abs(x * LeftRatio), 5);LineRight.rectTransform.sizeDelta = new Vector2(Mathf.Abs(x * (1 - LeftRatio)), 5);//中间线长度；LineMiddle.rectTransform.anchoredPosition = new Vector2(x * LeftRatio, 0);LineMiddle.rectTransform.sizeDelta = new Vector2(5, Mathf.Abs(y));//设定反转；LineLeft.transform.localScale = new Vector3(x > 0 ? 1 : -1, y > 0 ? 1 : -1, 1);LineRight.transform.localScale = new Vector3(x > 0 ? 1 : -1, y > 0 ? 1 : -1, 1);LineMiddle.transform.localScale = new Vector3(x > 0 ? 1 : -1, y > 0 ? 1 : -1, 1);}}

之后在编辑器下吧三条线拖进去就OK了。如果需要测试，可以在Update里面调用SetLines()方法，然后在编辑器里面更改TreeLine的宽高就能看到效果了。

我们以这个折线作为基础，来进行装备合成树的绘制。

2、装备合成树的绘制

和王者荣耀一样，相邻列显示合成树进行连接，不相邻的不显示。

具体装备合成树的代码就不再贴上来了，大家的解决方案都不太一样，没有太好的复用性。

由于我们已经有了TreeLine这个类，只要给他设定起始位置和宽高就能正确显示了。具体的显示效果如下：

（画面上各种红色的叉是因为TreeLine的宽高设定为负数的原因，起始在显示上没有影响，因为Unity支持图片的双面显示。当然你也可以在代码中手动翻转这些图片。）

后记：

起始还有一个间隔列的合成树的绘制。但是由于目前没有这个需求所以就没有做。

后面如果有需要了会补充关于间隔列之间的装备合成树的绘制思路。

在Unity中用UGUI实现装备合成树相关推荐

Unity GUI(uGUI)使用心得与性能总结
Unity GUI(uGUI)使用心得与性能总结作者 kingshijie 关注 2015.09.26 15:35 字数 3686 阅读 28031评论 10喜欢 49 背景和目的小哈接触Unit ...
Unity的UGUI用TexturePacker全自动打图集，包括九宫格切图信息
Unity的UGUI用TexturePacker全自动打图集,包括九宫格切图信息前言环境准备实现过程注意总结版权声明前言最近在学习UGUI的打图集,之前一直在用SpritePacker ...
【Unity使用UGUI实现王者荣耀UI界面（四）】游戏开始界面
文章目录 [Unity使用UGUI实现王者荣耀UI界面(四)]游戏开始界面 1. 把一些重复的UI添加 2. 开始游戏按钮 3. 注销按钮 4. 完成 5. 打包 6. 打包完成内容简介章节 ...
Unity 之 UGUI Dropdown下拉选单组件详解
Unity 之 UGUI Dropdown下拉选单组件详解 1,属性面板 1), Dropdown的组成 2,代码操作 3,使用实例 1), 控制菜单展开方向 4,相关扩展 1), Lua中动态添加O ...
Unity的UGUI使用Text和Image实现文字下划线
Unity的UGUI使用Text和Image实现文字下划线引子效果设置原文链接引子效果写需求的时候搜了一些文字加下划线的方法,UGUI的Text,大都需要写一堆代码来封装Text,比较麻烦. ...
Unity中用递归删除空文件夹和文件夹下面的子文件，meta文件保留和IO的一些操作总结
/*----------------------------------------------------------------Created by 王银文件名: FilesTools创建时间: ...
零基础入门 Unity 之 UGUI 详解专栏 | 寻找C站宝藏
零基础入门 Unity 之 UGUI 详解专栏 | 寻找C站宝藏六大推荐理由理由一:系统理由二:详细理由三:专业理由四:图解理由五:深度理由六:实例一键直达:<UGUI 控件详解 ...
Unity 之 UGUI 图片和粒子特效显示层级关系调整
Unity 之 UGUI 图片和粒子特效显示层级关系调整通常我们使用UGUI时都是通过调整UI的先后顺序或者父物体的层级关系,可是当我使用到粒子特效和Image一起的时候发现光修改层级关系是达不 ...
使用Unity的UGUI制作带时间头的相册
Unity UGUI相册制作并且加上时间头的效果在介绍排版之前需要先了解一下Unity中的排版布局方式的三个组件 1.Horizontal Layout Group(水平布局) 1.Padding ...

在Unity中用UGUI实现装备合成树

前言：

正文：

后记：

在Unity中用UGUI实现装备合成树相关推荐

最新文章

热门文章