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

#星火编辑器 #星火编辑器入门 #游戏ui界面

我正在尝试用『星火编辑器』创作一款卡牌游戏，并将创作之旅整理为完整的笔记教程系列，为屏幕前可爱的你分享。

在前面两期中，我们在完成简易选英雄功能的基础上，新增了游戏阶段管理的系统。这使得游戏既能为玩家实时呈现当前阶段和对应时间，也能有效执行和管理不同游戏阶段中服务端和客户端要执行的事件与逻辑。当玩家完成英雄选择并确认进入战场后，程序将会在5秒的读秒后让玩家跳转至战斗场景。那么，接下来要做的就是这款游戏设计的核心——战斗界面设计。这一期纯UI，无触发器部分，车速较缓，请放心乘坐。

在界面设计前，要提前规划好的一点是——我要让玩家在游戏里玩什么、怎么玩，这将决定要让玩家在游戏过程中看到哪些东西。正如一个开车的人，要看到的除了前方路况，主要就是面前显示车速等信息的仪表盘，以及两侧后视镜。而我们的卡牌游戏，要让玩家使用卡牌在战场中放怪、施法，那么玩家的卡牌显示区就是核心中的核心，要像汽车仪表盘一样放在画面的正下方——一个用于放置卡牌的的框。所以这里直接建一个扁而平的panel，可以用类似羊皮纸的材质作背景（P2）

接着在框中放入创建好的4张卡牌（具体可参考我早期笔记：创建一张游戏卡牌）右边可以留出一些空间用来放置其他诸如刷新之类的按钮（P3）

为了实时显示当前拥有能量占各卡牌所需能量的百分比，可以在组件库里加一个透明进度条progress，将进度类型设置为逆时针，覆盖在卡牌上，形成一个透明饼状效果（P4）

加上一个刷新按钮，事件里静态关吃掉开不要忘记（P5）

显示玩家当前能量值及能量恢复速率也很必要。这里我选择把这部分放在卡牌显示区左侧，而能量值的进度条还是用刚才的progress组件，放在进度条背景panel下，只不过进度类型换成了从左至右（P6）

而当玩家选中卡牌时，如果有一个对卡牌信息的提示会让人体验很不错。在卡牌显示区右侧有一片空，正好可以放入卡牌信息区，用于在玩家选中对应卡牌时实时显示该卡牌对应信息。创建panel，加上一个美观得体的背景，再放入label文字即可（P7）

这样一个基础的战斗场景ui就搭建好了（P8），但是很明显还有不小的可完善空间。那么下一期我们继续搭！还是依然感谢所有看完我笔记教程内容、为我点赞收藏关注的小伙伴，愿你的游戏创作之旅乘风破浪！下期我们还是不见不散！