0
0

Godot中所有UI节点介绍

Godot中所有UI节点介绍

文章目录

如果您觉得有用的话麻烦您收藏和关注，您的收藏和关注对我真的很重要！

前言

UI节点是游戏界面中常用的节点，但是很多UI节点可能用的次数很少，所以我写一下，做个基础介绍而已，主要是为了提醒自己UI界面具有多种制作方法。

理论上只使用ui界面也可以制作一个完整的文字冒险游戏

面板，节点 输入元素，滚动条，滑块，菜单栏，标签栏

基础容器

一、Container

在这里插入图片描述
Container是所有不同类型容器的基类，可以容纳节点决定它们的位置。也是总节点而已

二、AspectRatioContainer

在这里插入图片描述
AspectRatioContainer 长宽比容器，就是保持里面固定的长宽比，也就是里面图片和视频的纵横比不受分辨率等影响

三、BoxContainer

在这里插入图片描述
BoxContainer让容器内内容能够排列，一般子节点VBoxContainer和HBoxContainer，纵向和横向排列

四、VBoxContainer

在这里插入图片描述
UI纵向排列

五、HBoxContainer

在这里插入图片描述
UI横向排列

六、CenterContainer

在这里插入图片描述
元素子空间始终保持在中心

七、FlowContainer

在这里插入图片描述
允许元素按照文本的方式定位，让元素从左向右（或从上到下）放置，直到他们到达末端，此时回创造一行新的，让元素换行显示，就如同中文换行一样

八、HFlowContainer

在这里插入图片描述
让元素从左向右）换行显示，就如同中文换行一样

九、VFlowContainer

在这里插入图片描述
让元素从从上到下换行显示，就如同中文换行一样

十、GridContainer

在这里插入图片描述
网格显示，游戏中背包元素等都用这个实现。能够行列均匀分布排列换行

分隔相关

十一、Separator

在这里插入图片描述
分割线基类，用来分隔两个区域

十二、HSeparator

在这里插入图片描述
分割线，水平分割

十三、VSeparator

在这里插入图片描述
分割线，垂直分割成两区域

十四、SplitContainer

在这里插入图片描述
分隔容器的基类，只能含两个元素

十五、HSplitContainer

在这里插入图片描述
水平分割两个容器

十六、VSplitContainer

在这里插入图片描述
垂直分割两个容器

十七、MargintContainer

在这里插入图片描述
边距容器，主要作用就是设置元素的自定义边距

十八、PanelContainer

在这里插入图片描述
PanelContainer

十九、ScrollContainer

在这里插入图片描述
滚动条容器，一般用于子节点自动添加滚动条，能够鼠标滚轮使用，这个滚动容器必须指定是垂直或者水平才能正常工作，父节点必须有VBoxContainer或者HBoxContainer

二十、TabContainer

在这里插入图片描述
创建一个有标签的系统，做游戏属性栏、配置栏、系统设定等使用，能够区分开各种选项卡，类似 qt中tabwidget。

标签

二十一、Label

在这里插入图片描述
Label是标签，所有界面几乎都有的一个显示纯文本的控件

二十二、RichTextLabel

在这里插入图片描述
RichTextLabel是富文本标签，能够显示更复杂的文本，例如加粗，斜体或者其他文本标记

图片

二十三、ColorRect

在这里插入图片描述
一个可以设置颜色的矩形，适用于部分颜色遮挡或者添加图片

视频

二十四、VideoStreamPlayer

在这里插入图片描述
UI中添加能够播放视频的控件

面板

二十五、Panel

在这里插入图片描述
面板容器，最基础的面板，一般用来做基础容器的分组

二十六、NinePatchRect

在这里插入图片描述
9片式面板，增加纹理后，能够让纹理的边角不变，但是中心能够拉伸，用于标题和标签的制作

按钮相关

二十七、Button

在这里插入图片描述
最基础的按钮，能够包括文字和图标

二十八、CheckButton

在这里插入图片描述

二十九、BaseButton

在这里插入图片描述
基本按钮，样式使用主题

三十、TextureButton

在这里插入图片描述
纹理按钮，能够使用自定义纹理，例如图片等。

三十一、LinkButton

在这里插入图片描述
链接按钮，如同文字上超链接一样，跳转网页

三十二、MenuButton

在这里插入图片描述
菜单按钮，能够点击出现下拉菜单按钮，

三十三、OptionButton

在这里插入图片描述

选项按钮，能够点击出现下拉菜单按钮，和menu类似。参数不同

三十四、CheckButton

在这里插入图片描述

切换按钮，切换后立刻使用

三十五、CheckBox

在这里插入图片描述
也是切换选择框，主要是选择后不立刻执行

三十六、ColorPickerButton

在这里插入图片描述
颜色选择按钮，能够比较方便的改变按钮颜色

文本相关

三十七、LineEdit

在这里插入图片描述

行编辑器，单文本编辑段。常规简单文本都可以使用

三十八、TextEdit

在这里插入图片描述
文本编辑器，输入文本做复杂处理

三十九、CodeEdit

在这里插入图片描述

代码编辑器、输入代码自动做代码的对齐

四十、SpinBox

在这里插入图片描述
带有箭头的文字输入框

进度条

四十一、Range

在这里插入图片描述

范围节点，用来显示当前节点的最大值和最小值范围

四十二、ProgressBar

在这里插入图片描述
ProgressBar是进度条组件，一般用于进度条或者血量显示。

四十三、TextureProgressBar

在这里插入图片描述
TextureProgressBar基于纹理的进度条，能够创建更加复杂好看的进度条，和ProgressBar一样

滚动条

四十四、HScrollBar

在这里插入图片描述
水平滚动条，控制滚动的内容，使用户能够滚动查看内容的隐藏部分，没有水平容器常用

四十五、VScrollBar

在这里插入图片描述
垂直滚动条，控制滚动的内容，使用户能够滚动查看内容的隐藏部分，没有垂直容器常用

滚动滑块

四十六、VSlider

在这里插入图片描述
和VScrollBar类似的垂直滑块，用来控制数值，最大值最小值方向相反

四十七、HSlider

在这里插入图片描述
和HScrollBar类似的水平滑块，用来控制数值。

菜单相关

四十八、ItemList

在这里插入图片描述
ItemList是项目列表，用来创建一个可选的项目选单，类似菜单按钮。

四十九、MenuBar

在这里插入图片描述
菜单栏，用于子节点添加菜单按钮做下拉式菜单

五十、TabBar

在这里插入图片描述
TabBar是标签栏，提供类似标签的选项

渲染相关

五十一、ReferenceRect

在这里插入图片描述
渲染一个固定区域做UI的指示。

五十二、Tree

在这里插入图片描述
用于添加复杂任务线的分支设置

渲染图形

五十三、GraphEdit

在这里插入图片描述
GraphEdit是渲染图形的UI节点

五十四、GraphNode

在这里插入图片描述
GraphNode主要是做图形渲染的节点，没用过

标签： godot ui 游戏引擎
本文转载自: https://blog.csdn.net/watch361/article/details/139864866
版权归原作者 超级馒头神 所有， 如有侵权，请联系我们删除。
登录后发布评论

“Godot中所有UI节点介绍”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

web3+web2安全/前端/钱包/合约测试思路——尝试前端绕过直接上链寻找漏洞

交换机：端口安全与访问控制指南

基于 Postman 和 Elasticsearch 测试乐观锁的操作流程

软件测试—— Selenium 常用函数（二）

全新电脑，一站式指南：Anaconda、Pycharm 、Cuda与Pytorch的完整安装流程

Xibo：开源数字标牌平台的领航者

解决”Failed to connect to raw.githubusercontent.com“报错

文章导航