GodotUI增强企划

旨在让我Godot中UI的制作更加完美

参考资料：

12分钟(15分钟)内讲解godot4中每个UI节点

[!TIP]

让UI流动起来！

如何在Godot 4里做出那个既好看又好玩的动画主菜单【无需多言版】godot教程 –（待制作）

基础UI控件

Control
- Container
  - AspectRatioContainer
  - BoxContainer (H/V)
  - CenterContainer
  - FlowContainer (H/V)
  - GraphElement
    - GraphFrame
    - GraphNode
  - GridContainer
  - SplitContainer (H/V)
  - MarginContainer
  - PanelContainer
  - ScrollContainer
  - SubViewportContainer
  - TabContainer
- ~~BaseButton~~
  - Button
    - CheckBox
    - CheckButton
    - ColorPickerButton
    - MenuButton
    - OptionButton
  - LinkButton
  - TextureButton
- TextEdit
  - CodeEdit
- ColorRect
- TextureRect
- VideoStreamPlayer
- Label
- RichTextLabel
- Panel
- NinePatchRect
- GraphEdit
- ~~Range~~
  - ScrollBar (H/V)
  - Slider (H/V)
  - ProgressBar
  - TextureProgressBar
  - SpinBox
- Separator (H/V)
- ItemList
- LineEdit
- MenuBar
- ReferenceRect
- TabBar
- Tree

UI插件

10 better vircle

可旋转的UI

https://github.com/kcfresh53/Better-Vircle

9 slider label

跟随显示滑块Value

https://github.com/KoBeWi/Godot-Slider-Label

8 reorderable container

可拖动重组子物件排列顺序的容器

https://github.com/FoolLin/ReorderableContainer

7 Splash Screen Wizard

渐变

https://github.com/ThePat02/SplashScreenWizard

6 spanning table container

酷炫的排列方式…

https://github.com/Magodra/SpanningTableContainer

5 Godot UI Component Library

有猜想词的输入框？

https://github.com/Bloodyaugust/godot-ui-component-library

4 smooth scroll

https://github.com/SpyrexDE/SmoothScroll

3 markdown label

支持.md格式

https://github.com/daenvil/MarkdownLabel

2 label font auto sizer

自动调整字体大小的标签组件

https://github.com/LuisEscorza/GodotLabelFontAutoSizer

1 simple GUI transitions

似乎是制作GUI切换动画的

https://github.com/murikistudio/simple-gui-transitions

UI框架

可以创建一个UIManager用来控制所有UI的行为，中转游戏控制器与UI之间的信号连接

UI接口实现关闭打开等

Tween

参考：DeerLuuu-鹿——合集·【Godot Tween教程】

Tween是Godot中，让开发者能用代码实现一些简单的动画的轻量级对象。

Tween是一种补间动画，也就是选择一帧的位置，然后选择末尾帧的位置，由程序自动生成中间的帧，实现一个流畅的动画。

(在不使用时自动回收)

创建

Tween 的创建比较特殊，它不能通过 Tween.new() 来实例化一个 tween，必须通过 Node.create_tween() 或者 SceneTree.create_tween() 的方式进行创建。

# 第一种方法, Node.create_tween()
var tween : Tween = self.create_tween()
# 第二种方法, SceneTree.create_tween()
var tween : Tween = get_tree().create_tween()

//第一种方法, Node.create_tween()
Tween tween = this.CreateTween();
//第二种方法, SceneTree.create_tween()
Tween tween = GetTree().CreateTween();

~~额，貌似直接CreateTween()就可以哦~~

动画播放

TweenProperty()

1	public PropertyTweener TweenProperty(GodotObject @object, NodePath property, Variant finalVal, double duration)

TweenProperty有四个参数，分别是对哪个对象进行补间动画补间动画影响的值补间动画的末尾值补间动画的时间

1
2
3

//示例：
//将脚本所在节点的全局x值修改为100，持续时间为0.75s
tween.TweenProperty(self, "global_position:x", 100, 0.75);

SetParallel()&Chain()

默认Tween的补间动画是按顺序依次播放的，该方法可让动画同时播放

//示例：
Tween tween = CreateTween().SetParallel();
//那么该tween带有全局的平行播放属性，它播放的所有动画都同时
tween.TweenProperty(self, "global_position:x", 100, 0.75);
tween.TweenProperty(self, "global_position:y", 100, 0.75);

//如果想让个别动画同时播放，即在单个后设置平行，只对其以及之前的tween生效
Tween tween = CreateTween();
tween.TweenProperty(self, "global_position:x", 100, 0.75);
tween.SetParallel().TweenProperty(self, "global_position:y", 100, 0.75);
tween.TweenProperty(self, "global_rotation", 360, 0.75);
//只有第一个和第二个同时，第三个单独

//另一种实现：
Tween tween = CreateTween().SetParallel();
tween.TweenProperty(self, "global_position:x", 100, 0.75);
tween.TweenProperty(self, "global_position:y", 100, 0.75);
tween.Chain().TweenProperty(self, "global_rotation", 360, 0.75);

可传递bool变量决定是否设置平行，默认true(方便与中途更改)

SetTrans()

1	public Tween SetTrans(Tween.TransitionType trans)

设置动画播放曲线

SetEase()对应下方不同颜色的曲线，即播放速度

其他

TweenCallback(Callable callback)

在执行到该处时调用Callback（函数等）

1	tween.TweenCallback(Callable.From(FuncName));

SetDelay(int time)

字面意思啦

TweenInterval(int time)

我们tween区自己的计时器

TweenMethod()

TweenProperty和TweenCallback的结合，要用自己查

Tips（杂）

不需要点击的物体的Mouse/Filter改成ignore
不需要被看到的按钮直接用不带材质的TextureButton就行
UI圆角设置：Styles->新建StyleBoxFlat->设置Corner Radius
UI背景九宫格切分：Custom Styles->新建StyleBoxTexture->设置原始图片->Margin设置里调整切分