28. 制作 Gameplay Panel

本节目标

实现以下 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

posted @ 2024-03-06 14:33  hellozjf  阅读(14)  评论(0编辑  收藏  举报