【转载】数据驱动(Data-Driven)的 UMG

348 阅读2分钟

原文链接:【小功能】数据驱动的 UMG | Mantra

在做项目过程中,新手一般都是功能的罗列叠加,并不会过多的考虑可维护性。这样当我们后期修改功能和需求时就会变得非常麻烦,甚至会重写。尤其是对于 UMG(UI)系统更是如此。如我们要显示商店中的物品信息(图标和价格),如果一开始不考虑可维护性,那么后期我们添加和删除商店中的商品时就会变得异常麻烦。下面推荐一种 Data-Driven UMG(数据驱动),这种思想可以适用于任何引擎。

Data-Driven 系统中最核心的部分是数据本身,所以我们需要创建一张数据表DataTable)【当然也可以用 XML JSON数据库 等各种形式,但是 DataTable 对于美术来说是最友好的,来存储商店中所有的商品信息。首先我们创建一个结构体来代表每一行商品的信息,之后会创建前面提到的 DataTable ,结果如下图:

  • 一行商品信息(ShopItem)

  • 所有商品的信息表(ShopTable)

数据创建完成,之后就是创建界面啦。首先创建一个 Widget 蓝图,用于表示每一行的商品信息。并创建自定义方法用来设置 UMG 的值(此处并没有用 Binding ,因为相比来说 Binding 的效率可能会略低),具体效果可以参考下图。

  • 设计 Widget 蓝图

  • 其中需要分裂结构体为 IconMoney 进行分别设置 image.png

之后创建主界面即可,具体可参考下图。

  • 设计主界面

  • 在主界面中动态添加子界面 image.png

这样我们就可以随意更改 DataTable 中的数据,从而达到界面中及时更新的效果。