「自制卡牌游戏DIY」战斗界面设计（2）

#星火编辑器 #星火编辑器入门 #游戏ui界面 #星火编辑器小功能分享教程

我正在尝试用『星火编辑器』创作一款卡牌游戏。

在上一期，我们搭建了美观得体的能量槽、卡牌显示区和信息区，并尝试以圆饼形式在卡牌上显示能量进度的效果。今天让我们接着上一期继续丰富完善我们的战斗界面。

战斗界面必然要为玩家在战斗过程中的体验服务，而玩家在单场战斗中的核心目标就是要击败敌方首领，同时避免让己方首领被敌方击败。那么直观地显示双方首领的血量尤为重要。卡牌显示区放在屏幕下方方便手机玩家点击，而将首领血量放在屏幕上方既可避免遮挡，又直观醒目。所以我们直接在屏幕上端创建两段紧挨的长条形panel作为双方血条的背景，并用一个战斗图标将其隔开（P2）

接着分别在己方血条和敌方血条的panel上添加progress进度条，并分别换上代表己方首领的绿血条和红血条；进度条的进度（0-1）将决定血条长度占血槽长度的百分比。将己方血条进度设为从右往左会使己方血条从左往右扣血，同理，敌方血条进度设为从左往右则会使其从右往左扣血（P3）

当玩家点击某个单位时，直观显示该单位的属性信息是玩家想要看到的。因此可以建立一个在战斗中显示单位属性的简易窗口。在这个窗口中，最上面显示单位名称，第二行显示最重要的单位当前血量和总血量，还是使用panel背景+progress进度条的组合。下面依次放置攻击、攻速、物防、魔防、射程、移速以及单位特性的图标和数值。这里也可根据实际情况显示更多的属性信息（P4）

在右上角将时间与阶段显示区放上，而设置图标布局在其右下。这样，一个基本的战斗界面设计就完成得差不多了（P5）

但是，是否仍然有可以补充的地方呢？答案是肯定的。因为我们要设计的卡牌除了部队卡，还有法术卡。法术卡对应不同技能的目标类型、范围都未必一样，很难让程序或AI自动施法，因此必须要为玩家提供手动控制施法目标和区域的施法遥杆。那么我们找到组件库的控制面板，创建技能摇杆。这里我直接在卡牌区4张卡牌上方创建4个技能摇杆——当玩家选中法术卡时，让触发器自动激活卡上方的对应摇杆，玩家即可拖动摇杆控制施法目标或区域（P6）

最后加上中止施法区域，玩家按住技能摇杆拖到该区域即可中止施法（P7）

注意，技能摇杆等控件所在的控制面板页面与主页面控件（Mainpage）不在一个页面，可以理解为二者相互独立。

这样我们就有了一个相对完善的战斗界面了，感谢小伙伴们的点赞关注！那我们还是下期见哦！