UI编辑器案例：单位升星面板

1. 需求

- 在单位交互面板中增加一个『升星』按钮，点击弹出单位升星面板；
- 采用3合1的方式升星，在背包中选中2张与当前选中式神类型相同的卡来升星；
- 界面中需要显示当前选中塔的星级、升星后的星级；
- 备选狗粮中，不可用的狗粮要置灰，不可选中；
- 狗粮被升星消耗后，界面所显示的狗粮信息也要刷新，也就是说升星后被消耗的狗粮就不要显示在界面中了；

2. 拼界面

这个界面最后拼出来的效果如下图所示。



最基础的其实就是单位头像+单位星级这个部件，只要把这个拼出来，剩下的都用这个的副本即可。

这个结构其实也很简单，可以看一下下面的这棵控件树。



最外面套一个`button`，按钮的图片用一个黑色的框，里面的`spt_icon`是单位的头像，`spt_star_bg`是星级的显示背景。`spt_star_bg`有一个子控件，是一个水平列表，这个列表的列表项的唯一控件就是一个带有星星的图片，后续我们只需要通过触发器改变列表项数就能完成星级的显示。

3. 界面逻辑的实现

3.1 点击升星按钮

点击升星按钮，显示升星界面，同时给玩家设置一个数组`selected_cards_idx`，记录玩家当前已选中的卡的索引值。



3.2 升星界面初始化

首先获取需要被升星的单位、单位的星级、玩家拥有的卡，并将升星按钮灰化不可点击。



然后，设置被升星的单位的星级和升星后的星级。



接着，显示背包中的卡和卡的星级。



最后，将不可用的材料灰化不可点击。



3.3 点击材料按钮

点击材料按钮时，首先获得这个按钮所在的列表项在列表中的索引值。注意这个索引值也是这个材料在玩家背包中的索引值。（具体为什么，可以去看我前面的实现）

然后做这样的判断：

1. 如果这个材料已经被选中了，则取消选中；
2. 如果这个式神没有被选中，优先判断选择的材料的个数是否已经足够了，如果足够了就tellme"所选材料已经足够了"，如果仍然不够就选中这个式神；

这个判断挺简单的，就不贴了。

3.4 背包内的卡的移除

我这里是用数组来做的背包，所以移除的时候是对索引值做操作。其实有点僵硬，建议还是用自定义属性来实现。

太猛了，这是新的制图软件吗，66

y540980 发表于 2022-2-6 16:08
太猛了，这是新的制图软件吗，66

你是不是走错频道了