做窗帘网站,各种网站建设报价,wordpress 作者列表,长春网站设计哪家好说明
本文写自2022年11月13日-14日#xff0c;内容基于Godot3.5。后续可能会进行向4.2版本的转化。
概述
之前基于ProgressBar创建过血条组件。它主要是基于修改StyleBoxFlat#xff0c;好处是它几乎可以算是矢量的#xff0c;体积小#xff0c;所有东西都是样式信息内容基于Godot3.5。后续可能会进行向4.2版本的转化。
概述
之前基于ProgressBar创建过血条组件。它主要是基于修改StyleBoxFlat好处是它几乎可以算是矢量的体积小所有东西都是样式信息没有图片什么事儿。 但是就像之前说过的它太过局限无法实现复杂的需求。
使用TextureProgress制作复杂血条
TextureProgress的好处是它是基于图片的通过创建三张图片你就可以做出一个血条。 under下面提供背景progress进度提供进度条自身的图片over上面提供边框
以上面示意图所显示的为例,其实我们需要创建如下图左的三张图片三者结合组成一个血条的样子图右 上面的血条如果想一格一格显示那么可以如下设置max8min0,step1这样就不会出现半格的现象了。
但是实际中无论是星际还是相似的游戏采用这种血条的都不是标准的一格一格的掉血。 甚至有变体是每一个格子像是一格单独的血条会根据血量变颜色而其他格子的血条颜色不变。
关于圆角
两侧的带圆角或一侧带圆角都是没有问题的。只要是三者的尺寸相一致就可以。你可以给progress做一些高光之类的修饰。 但是Godot的TextureProgress存在的问题是它的切面只能是规整的。
关于异形
TextureProgress做异形的血条也是没问题的。但是有点漏色只可远观。 TextureProgress、ProgressBar以及Slider控件都集成自Range类型Range提供了min、max、step和value实现一个范围内的值改变。 可以看到其实TextureProgress实现的主要是通过range来按比例(value/max)裁切和显示progress所提供的图片。
圆形
除了长条形也可以用圆形制作一些特殊效果的进度条。 以下是在圆形图片素材时通过设置不同的fill_mode可以或得的效果
FILL_LEFT_TO_RIGHT 自左向右【默认】 FILL_RIGHT_TO_LEFT自右向左 FILL_TOP_TO_BOTTOM自上向下 FILL_BOTTOM_TO_TOP(自下而上) FILL_CLOCKWISE径向顺时针 FILL_COUNTER_CLOCKWISE径向逆时针 - FILL_BILINEAR_LEFT_AND_RIGHT由中间往两侧 - FILL_BILINEAR_TOP_AND_BOTTOM由中间向上下 - FILL_CLOCKWISE_AND_COUNTER_CLOCKWISE径向同时向顺时针和逆时针 圆形美化的例子
加了一些剪切蒙版。
说实话暗色的那个图片素材是多余的应该用颜色调制实现。
圆环
其实看到圆形部分的例子几乎就能想到圆环的做法了当然还是去看了一下Hi小胡的圆环进度条实例跟我能想到的差不多而且他做的真的很不错用了自带的色彩调制以及径向模式下的偏移还做了动画。 我们先抛开Hi小胡的思路而是看我们自己首先会想到如何实现圆环。 最简单的就是只有一个progress而且它本身就是我们想要的色彩这样我们就获得了一个么有背景的圆环。
进阶一下的话可以设定一个背景
再进一步加个边线
当然还有一个组合就是值有progress和over没有under。
好了再说回Hi小胡是怎么做的以及巧妙之处。
他只在PS里画了一个圆环但是颜色设为了纯白色然后在Godot中将progress和under都设为了这个白色的圆环图案。
接下来骚操作来了给tint分组下的tint_under和tint_progress各设定一个颜色。 然后设定一个不是max的中间值value圆环的效果就出来了。 这到底是为什么呢
属性值类型默认值描述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小胡使用纯白色绘制圆环的妙处就在此。用一个白色圆环经过调色就可以获得完全不同的颜色甚至是可编程的。 学到“白色”的妙处之后我们可以举一反三制作素材的时候就可以省下至少一张图片了因为under和progress都可以用白色进行调制。
举一反三根据剩余血量变化血条颜色 根据剩余血量改变血条颜色是一个非常常见的设计策略通过“白色”的妙用我们完全可以100%的实现这一设计代码也就是几行if的问题。
径向的初始角度和最大填充角度 radial_initial_angle类似于给默认的起始点也就是0度位置进行了一个角度的偏移默认起始角度0°相当于表盘上的十二点钟方向同时默认最大填充角度radial_fill_degrees为360°相当于转一圈后回到了0°。
radial_fill_degrees如果设为360以外的数值就代表一圈不再是360度而是其他数值。
radial_center_offset就按字面意思就是对圆或圆环的圆心进行一定二维向量的平面偏移。
更好看的样式
下面是一些参考图可以自己试着实现一下应该都是类似的思路。
矩形和圆角矩形
在技能按钮组件制作时借用了Hi小胡的想法就是使用“矩形 径向逆时针“有些游戏里也会存在使用“矩形上到下/下到上”的组合比如植物大战僵尸植物的卡牌就是“矩形自下而上“。
技能按钮的矩形 径向逆时针图左植物大战僵尸植物卡牌的矩形自下而上 所以知识不就串起来了嘛~
ProgressBar和TextureProgress不仅仅是制作一些加载进度和血条任何带过程的东西都可以用它们来制作和表示。 发挥你的想象力吧。
心
参考Hi小胡的这个例子 【Godot】实现三种角色血量显示方式_哔哩哔哩_bilibili 因为TextureProgress对process的图片是采取裁切形式所以我们只需要将max值设为代表学血量的心的2倍步幅step为1最小值min为0就可以实现如下的效果
min0,max5step1 如果max设为5min设为0step设为1则情况就只剩下5种了。 此时如果step设为0.5则又出现10种情况如果是0.25呢就有了20种情况所以这种操控的可能性是非常多的。 在Godot中还是多少有点漏色。 比Hi小胡的省力气一些。当然也不是说他的实现没有好处。
