【Godot 3.5控件】用TextureProgress制作血条

说明

本文写自2022年11月13日-14日,内容基于Godot3.5。后续可能会进行向4.2版本的转化。

概述

之前基于ProgressBar创建过血条组件。它主要是基于修改StyleBoxFlat,好处是它几乎可以算是矢量的,体积小,所有东西都是样式信息,没有图片什么事儿。

在这里插入图片描述

但是就像之前说过的,它太过局限,无法实现复杂的需求。

使用TextureProgress制作复杂血条

TextureProgress的好处是它是基于图片的,通过创建三张图片,你就可以做出一个血条。

在这里插入图片描述

  • under(下面):提供背景
  • progress(进度):提供进度条自身的图片
  • over(上面):提供边框

以上面示意图所显示的为例,其实我们需要创建如下图左的三张图片,三者结合,组成一个血条的样子(图右):

在这里插入图片描述

上面的血条如果想一格一格显示,那么可以如下设置:max=8min=0,step=1,这样就不会出现半格的现象了。

但是实际中无论是星际还是相似的游戏,采用这种血条的都不是标准的一格一格的掉血。
image.png
甚至有变体是每一个格子像是一格单独的血条,会根据血量变颜色,而其他格子的血条颜色不变。

关于圆角

两侧的带圆角或一侧带圆角都是没有问题的。只要是三者的尺寸相一致就可以。你可以给progress做一些高光之类的修饰。
带圆角的血条素材
但是Godot的TextureProgress存在的问题是,它的切面只能是规整的。
TextureProgress只能给予直线切面

关于异形

TextureProgress做异形的血条也是没问题的。但是有点漏色,只可远观。
异形血条的效果
TextureProgressProgressBar以及Slider控件都集成自Range类型,Range提供了minmaxstepvalue,实现一个范围内的值改变。

image.png
image.png
可以看到,其实,TextureProgress实现的主要是通过range来按比例(value/max)裁切和显示progress所提供的图片。

圆形

除了长条形,也可以用圆形制作一些特殊效果的进度条。

圆形素材
以下是在圆形图片素材时,通过设置不同的fill_mode可以或得的效果:

  • FILL_LEFT_TO_RIGHT (自左向右)【默认】

image.png

  • FILL_RIGHT_TO_LEFT(自右向左)

image.png

  • FILL_TOP_TO_BOTTOM(自上向下)

image.png

  • FILL_BOTTOM_TO_TOP(自下而上)

image.png

  • FILL_CLOCKWISE(径向,顺时针)

image.png

  • FILL_COUNTER_CLOCKWISE(径向,逆时针)

image.png - FILL_BILINEAR_LEFT_AND_RIGHT(由中间往两侧)

image.png - FILL_BILINEAR_TOP_AND_BOTTOM(由中间向上下)

image.png - FILL_CLOCKWISE_AND_COUNTER_CLOCKWISE(径向,同时向顺时针和逆时针)

image.png

圆形美化的例子

加了一些剪切蒙版。
在这里插入图片描述

说实话暗色的那个图片素材是多余的,应该用颜色调制实现。

圆环

其实看到圆形部分的例子,几乎就能想到圆环的做法了,当然还是去看了一下Hi小胡的圆环进度条实例,跟我能想到的差不多,而且他做的真的很不错,用了自带的色彩调制以及径向模式下的偏移,还做了动画。
我们先抛开Hi小胡的思路,而是看我们自己首先会想到如何实现圆环。
最简单的就是只有一个progress,而且它本身就是我们想要的色彩,这样我们就获得了一个么有背景的圆环。
在这里插入图片描述

进阶一下的话可以设定一个背景:
在这里插入图片描述

再进一步加个边线:
在这里插入图片描述

当然还有一个组合就是值有progressover没有under

好了再说回Hi小胡是怎么做的,以及巧妙之处。

他只在PS里画了一个圆环,但是颜色设为了纯白色,然后在Godot中将progressunder都设为了这个白色的圆环图案。
在这里插入图片描述

接下来骚操作来了,给tint分组下的tint_undertint_progress各设定一个颜色。

image.png
然后设定一个不是max的中间值value,圆环的效果就出来了。

image.png
这到底是为什么呢?

属性值类型默认值描述
tint_underColorColor(1,1,1,1)将设定的颜色与TextureProgress的texture_under纹理的颜色相乘
tint_overColorColor(1,1,1,1)将设定的颜色与TextureProgress的texture_over纹理的颜色相乘
tint_progressColorColor(1,1,1,1)将设定的颜色与TextureProgress的texture_progress纹理的颜色相乘

颜色相乘,虽然没有学过,但是将RGBA色彩当做是有四个分量的向量,那么就明白了。

Color(1,1,1,1)就是纯白色,完全不透明,它乘以任何颜色值就等于这个颜色值本身。所以Hi小胡使用纯白色绘制圆环的妙处就在此。用一个白色圆环,经过调色,就可以获得完全不同的颜色,甚至是可编程的。

image.png
学到“白色”的妙处之后,我们可以举一反三,制作素材的时候就可以省下至少一张图片了,因为under和progress都可以用白色进行调制。

举一反三:根据剩余血量变化血条颜色

在这里插入图片描述

根据剩余血量改变血条颜色是一个非常常见的设计策略,通过“白色”的妙用,我们完全可以100%的实现这一设计,代码也就是几行if的问题。

径向的初始角度和最大填充角度

image.png
radial_initial_angle类似于给默认的起始点也就是0度位置进行了一个角度的偏移,默认起始角度0°相当于表盘上的十二点钟方向,同时默认最大填充角度radial_fill_degrees为360°,相当于转一圈后回到了0°。
在这里插入图片描述

radial_fill_degrees如果设为360以外的数值,就代表一圈不再是360度,而是其他数值。
在这里插入图片描述

radial_center_offset就按字面意思就是对圆或圆环的圆心进行一定二维向量的平面偏移。

更好看的样式

下面是一些参考图,可以自己试着实现一下,应该都是类似的思路。
在这里插入图片描述
在这里插入图片描述

矩形和圆角矩形

在技能按钮组件制作时,借用了Hi小胡的想法,就是使用“矩形 +径向,逆时针“,有些游戏里也会存在使用“矩形+上到下/下到上”的组合,比如植物大战僵尸植物的卡牌就是“矩形+自下而上“。
在这里插入图片描述

技能按钮的:矩形 +径向,逆时针(图左),植物大战僵尸植物卡牌的:矩形+自下而上
所以知识不就串起来了嘛~

ProgressBarTextureProgress,不仅仅是制作一些加载进度和血条,任何带过程的东西都可以用它们来制作和表示。
发挥你的想象力吧。

参考Hi小胡的这个例子:
【Godot】实现三种角色血量显示方式_哔哩哔哩_bilibili
image.png
因为TextureProgress对process的图片是采取裁切形式,所以我们只需要将max值设为代表学血量的心的2倍,步幅(step)为1,最小值min为0,就可以实现如下的效果:
min=0,max=10时value所对应的血量情况

min=0,max=5,step=1

image.png
如果max设为5,min设为0,step设为1,则情况就只剩下5种了。
image.png
此时如果step设为0.5,则又出现10种情况,如果是0.25呢?就有了20种情况,所以这种操控的可能性是非常多的。
在Godot中还是多少有点漏色。
image.png
比Hi小胡的省力气一些。当然也不是说他的实现没有好处。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/481712.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Mysql学习--深入探究索引和事务的重点要点与考点

꒰˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好,我是xiaoxie.希望你看完之后,有不足之处请多多谅解,让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN …

基于springboot+vue+Mysql的闲一品交易平台

开发语言:Java框架:springbootJDK版本:JDK1.8服务器:tomcat7数据库:mysql 5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:…

2024,产品国际化改造

2024,我们的核心是国际化/信创/多租户/AI融合应用。 作为招投标与即将推进的项目需求,优先对产品进行国际化改造。 1.我们的思考 作为基础平台个性化定制的项目落地模式,我们必须兼顾平台与定制直接的平衡,使整个系统能快速在多…

力扣541. 反转字符串 II

思路:题目的意思就是每2k个字符进行一次循环访问,如果个数小于k就全部反转,如果大于k则只反转k个字符; class Solution {public String reverseStr(String s, int k) {char[] charArray s.toCharArray();int length charArray.length;//每…

DDR4总结最全纯干货分享

DDR存储器发展的主要方向一言以蔽之,是更高速率,更低电压,更密的存储密度,从而实现更好的性能。 DDR4 SDRAM(Double Data Rate Fourth SDRAM):DDR4提供比DDR3/ DDR2更低的供电电压1.2V以及更高的…

学会这些Jmeter插件,才能设计出复杂性能测试场景

为什么要使用jmeter线程组插件呢? jmeter自带的线程组插件模拟的压测场景非常有限,当需要模拟复杂压测场景的时候,推荐大家使用jmeter线程组插件。 如何下载jmeter线程组插件呢? 早期版本的jmeter可以针对我们需要的扩展功能&a…

Docker-Container

Docker ①什么是容器②为什么需要容器③容器的生命周期容器 OOM容器异常退出容器暂停 ④容器命令清单总览docker createdocker rundocker psdocker logsdocker attachdocker execdocker startdocker stopdocker restartdocker killdocker topdocker statsdocker container insp…

宏集PLC如何应用于建筑的3D打印?

案例概况 客户:Rebuild 合作伙伴:ASTOR 应用:用于建筑的大尺寸3D打印 应用产品:3D混凝土打印机 一、应用背景 自从20世纪80年代以来,增材制造技术(即3D打印)不断发展。大部分3D打印技术应…

力扣---零钱兑换---动态规划

思路: 这是一道典型的动态规划问题(希望下次不用提示,能直接认出来):我将g[i]定义为总金币为i所需的最少硬币个数。所以递推公式可以表示为:g[i]min(g[i-1],g[i-2],g[i-5])1,也就是g[i]min(g[i-…

简介:网络数据中心和数字孪生系统融合

前言 云服务器是在云中提供可扩展的计算服务,避免了使用传统服务器时需要预估资源用量及前期投入的情况。云服务器支持用户自定义一切资源:cpu、内存、硬盘、网络、安全等等,并可在访问量和负载等需求发生变化时轻松地调整它们。云服务器为业…

算法公式汇总

文章目录 三角函数定义式诱导公式平方关系两角和与差的三角函数积化和差公式和差化积公式倍角公式半角公式万能公式其他公式反三角函数恒等式 三角函数定义式 三角函数 定义式 余切: c o t A 1 t a n A \text { 余切:} \ cotA \frac{1}{tanA} 余切&a…

华为OD机22道试题

华为OD机试题 2.查找小朋友的好朋友位置 在学校中,N 个小朋友站成一队,第 i 个小朋友的身高为 height[i],第 i 个小朋友可以看到第一个比自己身高更高的小朋友j,那么 j 是 i 的好朋友 (要求:j>i) 。 请重新生成一个…

springboot+itextpdf+thymeleaf+ognl根据静态模版文件实现动态生成pdf文件并导出demo

第一步&#xff1a;导入maven依赖 <!-- 导出为PDF依赖包 --><dependency><groupId>com.itextpdf</groupId><artifactId>itextpdf</artifactId></dependency><dependency><groupId>com.itextpdf</groupId><art…

xAI开发的一款巨大型语言模型(HLM)--Grok 1

在xAI发布Grok的权重和架构之后&#xff0c;很明显大型语言模型&#xff08;LLM&#xff09;的时代已经过去&#xff0c;现在是巨大型语言模型&#xff08;HLM&#xff09;的时代。这个混合专家模型发布了3140亿个参数&#xff0c;并且在Apache 2.0许可下发布。这个模型没有针对…

C++关于类和对象的基础语法

前言&#xff1a; 介绍c中类和对象的基础语法和注意事项&#xff0c;这里是c入门的第一道坎&#xff0c;细节很多&#xff0c;在后面的更深的学习中还会反复提到。 目录 前言&#xff1a; 1.OO语言 2.类的定义 3.类的访问限定符与封装的引入 4.类的实例化 5.关键字this指…

Magic Copy:一键AI抠图,在浏览器中获得任何图像素材

Magic Copy&#xff1a;轻松一点&#xff0c;精准抠图&#xff0c;让创意无限放大&#xff01; - 精选真开源&#xff0c;释放新价值。 概览 Magic Copy&#xff08;AI智能抠图插件&#xff09;是一个创新型的浏览器扩展工具&#xff0c;其独特之处在于能够无缝集成于用户的网…

项目配置之道:优化Scrapy参数提升爬虫效率

前言 在当今信息时代&#xff0c;数据是无处不在且无比重要的资源。为了获取有效数据&#xff0c;网络爬虫成为了一项至关重要的技术。Scrapy作为Python中最强大的网络爬虫框架之一&#xff0c;提供了丰富的功能和灵活的操作&#xff0c;让数据采集变得高效而简单。本文将以爬…

Kafka安装配置

#安装启动之前必须配置好zookeeper 可以参考zookeeper安装配置-CSDN博客 一、下载安装包&#xff0c;并解压 #创建目录 mkdir -p /kafka/{install,data} #进入/kafka/install目录下 cd /kafka/install #下载kafka wget https://archive.apache.org/dist/kafka/3.7.0/kafka_2…

JSONP 实现跨域请求案例

后端使用 express 搭建&#xff0c;案例代码如下&#xff1a; const express require(express)const app express() const PORT 3000app.get(/data, (req, res) > {const jsonData {name: Alan,age: 666,city: GD}const callback req.query.callback // 获取前端中的回…

【Linux】Linux开发工具-vim / 编译器-gcc/g++ / 调试器-gdb / git操作 / 项目自动化构建工具-make/Makefile

主页&#xff1a;醋溜马桶圈-CSDN博客 专栏&#xff1a;Linux_醋溜马桶圈的博客-CSDN博客 gitee&#xff1a;mnxcc (mnxcc) - Gitee.com 目录 1.在Linux写自己的第一个程序 1.1 nano指令 1.2 nano指令的使用 1.2.1 介绍 1.2.2 演示 1.2.2.1 创建.c文件 1.2.2.2 nano cod…