28. 制作 Gameplay Panel

合集 - 王国之梦(42)

1.02. 创建房间的 Prefab2024-03-012.03. 设计地图配置表2024-03-013.04. 生成地图上的房间2024-03-014.07. 泛型事件框架2024-03-025.08. 场景加载2024-03-026.09. 保存地图场景2024-03-027.10. 房间进出逻辑2024-03-028.11. 制作卡牌 Prefab2024-03-039.12. 创建卡牌数据类2024-03-0410.13. 对象池2024-03-0411.14. 制作卡牌库实现抽卡2024-03-0512.15. 创建卡牌布局2024-03-0513.16. 抽卡动画2024-03-0514.17. 实现卡牌扇形布局2024-03-0515.18. 实现鼠标事件2024-03-0516.19. 卡牌拖拽2024-03-0517.20. 攻击牌的拖拽指针2024-03-0518.21. 实现洗牌逻辑2024-03-0519.22. 导入Spine人物素材2024-03-0520.23. 人物基类代码2024-03-0521.24. 执行卡牌效果2024-03-0522.25. 制作血条的 UI Document2024-03-0523.26. 绑定血条数据2024-03-0624.27. 创建USS血条样式2024-03-06

25.28. 制作 Gameplay Panel2024-03-06

26.29. 绑定 Gameplay Panel 数据2024-03-0627.30. 回合转换2024-03-0628.31. 出牌能量判断2024-03-0729.32. 防御牌及 UI2024-03-0730.33. 回血的苹果牌及特效2024-03-0731.34. 增加力量牌及 UI2024-03-0732.35. 更多卡牌2024-03-0733.36. 人物动画2024-03-0934.37. 敌人意图 AI 逻辑2024-03-1135.38. 敌人的动画执行逻辑2024-03-1136.39. 对战胜负逻辑2024-03-1237.40. 制作胜利和抽卡面板2024-03-1238.41. 抽卡面板的实际逻辑2024-03-1239.42. GameOver 及 Menu 面板2024-03-1340.43. 实现休息房间的逻辑2024-03-1341.44. Boss 制作和整体流程2024-03-1342.45. 淡入淡出及打包游戏2024-03-13

收起

本节目标

实现以下 UI

功能实现

创建 GameplayPanel

在 UI 目录下创建一个 GameplayPanel，编辑 GameplayPanel，增加 Visual Element、Label、Button

注意，需要将它们的 Attributes -> Picking Mode 都修改为 Ignore，避免鼠标在拖拽卡牌的时候碰到 UI 物体后，系统认为鼠标松开了

需要特别注意一下，EndTurn 这个按钮是不能将 Picking Mode 改为 Ignore 的，否则按钮的鼠标交互就没有了

Top 和 TurnLabel

Top 需要修改 Flex.Grow 为 0，Size.Height 为 80

Energy、DrawDeck、DiscardDeck的父级VisualElement

需要将 Position Mode 改为 Absolute，也就是相对布局。距离左侧 48 像素，距离下侧 60 像素。

大小改为 393 x 341

Energy

EnergyAmount

首先需要将 Text 改为 3，然后把 Select Word By Double Click、Select Line By Triple Click、Display Tooltip When Elided 取消勾选

Position 距离右边 23 像素

字体选择得意黑，字体加粗，字体大小48，居右，外边框2像素，白色

EndTurn

EndTurn 是一个 Button，需要去掉按钮里面的文字，背景色，边框

为了给按钮添加移动过去放大，以及点击放大的效果，我们需要给它增加样式

将添加好的样式放到 EndTurn 按钮上面

.turnbutton:hover表示当鼠标悬停在按钮上的时候触发，.turnbutton:active表示当鼠标点击按钮的时候触发

项目相关代码

代码仓库：https://gitee.com/nbda1121440/DreamOfTheKingdom.git

标签：20240306_1403