Godot4.3类星露谷游戏开发之【时钟UI】

千里之行，始于足下

零、 笔记

本文将制作这个系列里的第一个UI（User Interface，用户界面）——时钟UI，如下图所示；

一、UI界面

$$时钟面板$$
第一步，在 res://场景/UI/ 路径 下，创建 时钟UI.tscn 场景；

节点树如下：

• 时钟UI（Control）
  • 时钟面板（PanelContainer）
    • 昼夜图标1（Sprite2D）
    • 昼夜图标2（Sprite2D）
  • 当前时间（Label）

第二步，选中 时钟面板 节点，在检查器中 新建Theme 并另存为 游戏UI主题.tres 到路径 res://资源/主题/ 下；

第三步，在展开的主题底栏中点击【+】，添加项目类型 ClockUI ；

第四步，添加基础类型 PanelContainer ；

第五步，在panel下新建 StyleBoxTexture 并选中，随后在检查器中新建 AtlasTexture ；

第六步，从文末 UI包 导入 Weather_UI_Free.png，并 编辑区域 ；

第七步，观察到裁剪后图片尺寸为 65x54像素；

第八步，选中时钟面板节点，在检查器中更改 size 为 65x54 ，更改 Type Variation 为 ClockUI ；

效果如下；

---

$$昼夜图标1（左）$$
第一步，选中昼夜图标（Sprite2D）节点，直接将 UI包 中的 Weather_Icons_smal_freel.png拖入检查器中的 Texture ；

第二步，点开检查器中的 Animation ，并设置 Hframes 为 2，Vframes 为 3 ；

第三步，手动将图标拖入时钟UI中，如下图；

---