ProgressBar和TextureProgress

tech2024-10-01  17

godot ProgressBar和TextureProgress

控件节点继承

ProgressBar是通用的进度条。从右到左显示填充百分比。从下图可以看到ProgressBar和TextureProgress的继承关系。 所有用户界面节点都从Control继承。 控件的锚点和边距相对于其父控件调整其位置和大小。

Control是所有UI相关节点的基类,控件有一个矩形边框,定义了它的范围。这个范围是根据相对于父节点或视口的锚点和相对于锚点的边距设定的。也就是所Control这个类定义了一些控件大小,位置的属性。

Range是基于范围的控件的抽象基类。这些控制节点使用步进和页面在最小和最大之间更改浮点值,例如滚动条。 继承这个类的有 EditorSpinSlider, ProgressBar, ScrollBar, Slider, SpinBox, TextureProgress(编辑器旋转滑块,进度条,滚动条,滑块,旋转框,纹理进度),这些都在两个值之间浮动。

显示在属性检查器的Range的属性: Min Value;最小值,如果值小于最小值,会限制在最小值。 Max Value:最大值,如果值大于最大值,会限制在最大值。 Step:步长,如果大于0,则值将始终四舍五入为步长的整数倍。 如果rounded也为true,则将值首先四舍五入为步长的整数倍,然后四舍五入为最接近的整数。 Page:页面大小。 主要用于滚动条。 滚动条的长度是其大小乘以页面的最小值与最大值之间的差。 Exp Edit:如果为true,并且min_value大于0,则值将以指数形式而不是线性形式表示。 Rounded:如果为true,则值将始终四舍五入为最接近的整数。 Allow Greater:如果为true,则值可大于max_value。 Allow Lesser:如果为true,则值可小于min_value。

step

步长每一步走多长。可以看到,step为1,每一次拖动,值加1。如果我输入小数会自动四舍五入到步长值得倍数。

Exp Edit

为ture使得进度条得值不是线性增加:

Rounded

为true会四舍五入为整数:

ProgressBar

通用得进度条,没太多属性。显示在检查器的Percent visible,如果为真,填充百分比将显示在栏上。

TextureProgress

基于纹理的进度条。 对于加载屏幕和生命或耐力条很有用。 TextureProgress的工作方式类似于ProgressBar,但最多使用3个纹理而不是Godot的主题资源。 它可用于创建水平,垂直和径向进度条。

显示在属性检查器的属性:

Textures(纹理)

先说说纹理,TextureProgress有三个纹理属性,分别是under,over,progress.

under:在进度条下绘制的纹理。条的背景。over:绘制在进度条上的纹理。用它来添加高光或上框,隐藏texture_progress的一部分。progress:根据节点的值和 fill_mode 来裁剪的纹理。随着值的增加,纹理会被填满。当值达到max_value时,它会完全显示。 如果value等于min_value,则完全不显示。 value属性来自于Range。参阅Range.value、Range.min_value、Range.max_value。.

下图是值为50的纹理进度图:

Tint(着色)

tint是为了给进度条叠加颜色。

under:用under的颜色乘以bar的texture_under纹理的颜色。over:用overde 颜色乘以bar的texture_over纹理的颜色。这个效果类似于CanvasItem.modulate,只是它只影响这个特定的纹理而不是整个节点。progress:用progress的颜色乘以bar的texture_progress纹理的颜色。

颜色叠加后:

Fill Mode(填充模式)

填充模式是进度条的走向。这些很容易理解,逐个试一试是最好的学习方法。

FILL_LEFT_TO_RIGHT = 0 — texture_progress从左到右填充。

FILL_RIGHT_TO_LEFT = 1 — texture_progress从右到左填充。

FILL_TOP_TO_BOTTOM = 2 — texture_progress从上到下填充。

FILL_BOTTOM_TO_TOP = 3 — texture_progress从下到上填充。

FILL_CLOCKWISE = 4 — 将节点变成一个径向条。 texture_progress顺时针方向填充,请参阅radial_center_offset、radial_initial_angle和radial_fill_degrees来控制bar的填充方式。

FILL_COUNTER_CLOCKWISE = 5 — 将节点变成一个径向条形。 texture_progress逆时针方向填充,请参阅 radial_center_offset、radial_initial_angle 和 radial_fill_degrees 来控制bar的填充方式。

FILL_BILINEAR_LEFT_AND_RIGHT = 6 — texture_progress从中心开始填充,向左和向右扩展。

FILL_BILINEAR_TOP_AND_BOTTOM = 7 — texture_progress从中心开始填充,同时向顶部和底部扩展。

FILL_CLOCKWISE_AND_COUNTER_CLOCKWISE = 8 — 将节点变成一个径向条形。 texture_progress从中心开始径向填充,顺时针和逆时针都会扩张。请参阅 radial_center_offset、radial_initial_angle 和 radial_fill_degrees 来控制栅栏的填充方式。

Radial Fill(径向填充)

当填充模式是径向模式时,可以调整一些属性来影响填充方式:

Initial Angle(初始角度):如果填充模式是顺时针或逆时针,纹理进度条的填充初始角度。当节点的值等于它的min_value时,纹理根本不显示。当值增加时,纹理将填充并趋向于radial_fill_degrees。Fill Degrees(完全填充角度):如果填充模式是顺时针或逆时针,则纹理进度条的填充上限。 当节点的值等于其max_value时,纹理将填充到该角度。Center Offset(中心偏移):如果填充模式是顺时针填充或逆时针填充,将偏移纹理填充。径向填充有一个圆心,center offset的偏移就是圆心的偏移。

来看看图示:

Nine Patch Stretch

如果为真,Godot就会像在NinePatchRect中一样处理bar的纹理。使用 stretch_margin_* 属性,如 stretch_margin_bottom 来设置九宫的 3×3 网格。当使用径向fill_mode时,这个设置将启用拉伸。 当我缩放框时,其边框也跟着缩放这不是我想要的:

通过stretch_margin_*属性设置不拉伸拐角/边缘的大小,使得容器在拉伸时保持拐角/边缘不变。

最新回复(0)