TA进阶实例35（Unreal制作分段进度条效果）

最新推荐文章于 2023-11-24 12:12:10 发布
最新推荐文章于 2023-11-24 12:12:10 发布
阅读量839 收藏 4
点赞数
分类专栏： Unreal 文章标签： Unreal
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/unity3d_xyz/article/details/119374433
版权
本文档介绍了如何使用Unreal Engine通过Shader创建分段进度条效果，详细探讨了极坐标系统、通用图形绘制、图形边缘锐化以及进度颜色分段的技巧。内容包括设置极坐标、制作不同形状的图形、边缘锐化以及分段圆环的颜色应用，最终实现可调整的进度条颜色和占比。
摘要由CSDN通过智能技术生成

在B站上看到一个制作分段进度条的视频，感觉非常的实用并且炫酷，自己学着摸索制作，以后指不定就可以派上用途了；
分段进度条我记得在Unity制作的时候挺麻烦的，需要Shader+代码来实现，UE比Unity要先进，直接Shader搞定
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
可以调整进度分段、颜色分段、进度的颜色占比，接触到的节点
#1 Unreal中的极坐标
#2 通用图形绘制
#3 图形边缘锐化
#4 进度颜色分段技巧

#1 Unreal中的极坐标
极坐标是由中心点向四周发射的一种坐标，使用UV来表示，不同的通道代表了不同的发射信息
在这里插入图片描述
极坐标的R通道，也是U坐标
在这里插入图片描述
极坐标的G通道࿰

最低0.47元/天 解锁文章
inspironx
关注
专栏目录
【UE5】自定义环形进度条、方形进度条
１eonＣhan的博客
10-24 2195
（中间为透明，外部为白色的png图片）方形： 星形： 将上图导入到UE5中，再拖入到我们的Material中，连线如下：如果将图片换成1.3的星星，那么效果如下 （圆形同理，可以在iconfont网站自己找一个即可。） 这一步是使用 TexCoord（快捷键：U），结合 CustomRotator 节点，进行时钟旋转。 而控制这个进度条的就是 Percent 参数。而进度条的进度也是根据该参数改变而改变： 将1.4和1.5的结果相融合，使用Multiply节点即可。
自定义分段式进度条
最新发布
qq_34465338的博客
10-10 580
在进度条的 div 中添加新的 div 来展示异常进度，颜色可以自定义；在 div 中的 background 使用渐变属性。1、需要进行分段，用来展示正常和异常状态；一样，只是需要不断的进行删除和添加。来展示整个进度条的整体进度。属性来控制异常状态的进度。2、异常状态需要提示信息。
自定义分段进度条
11-28
自定义分段进度条：1.可以根据权重设置不同段的大小；2.可以设置进度到某段时进度条显示的颜色；
unity 进度条分段显示效果
shuai1210的博客
04-17 1711
进度条分段： 游戏中常用到一些进度条需要有分段效果，如图： 正在上传…重新上传取消转存失败重新上传取消转存失败重新上传取消 NGUI中的UISlider中前景后景都是使用UISprite UISprite：正在上传…重新上传取消转存失败重新上传取消转存失败重新上传取消 UISprite的Type属性： simple:将原始图片拉伸铺满，和Texture的效果类似，如果这时拉伸图片...
UE4-利用UMG动画制作场景切换Loading进度条
热门推荐
zilisen的博客
06-09 1万+
用UMG动画实现一个场景切换Loading进度条。
Unity使用DOTween实现分段进度条
⚡
11-24 1187
用组件进度条（Slider），利用分段加载进行以假乱真的进度效果，比如说2秒钟到达20%的进度，10秒钟加载20%到50%进度，1分钟加载50%到90%的进度，30秒钟加载90%到100%的进度。在加载过程中，如果加载完成了，则直接把进度条拉到100%。如果关闭，也可以在“Tools / Demigiant”菜单中打开DOTween 工具面板，然后从出现的面板中选择“Setup DOTween …以供学习，但是感觉实例讲得不是很清楚，利用 Sequence 自己操作了一下终于实现了，贴上来给大家参考。
UE4圆环进度条
h87795694的专栏
05-14 4800
TA进阶实例34（Unreal制作水晶星光效果）
Unity3d 攻城师一枚
08-02 582
效果图，这是模式世界中潘达利亚团队副本里面的伊拉贡BOSS，区域效果； 这个效果在游戏中有多处用到，LR的灵魂兽也是这个效果，卡拉赞副本里面的人形怪 星光龙的效果可以分为2个部分，透明的身体和发光的骨架，其中背景的点缀部分不显示在模型身上 透明效果还带高光效果 这个效果不是普通简单的透明效果，透明+高光表面 当我制作的时候发现，Unreal的透明通道并不带高光及粗糙度的输入节点 前三个重要的选择下拉功能依次是使用次表面作用Shader，使用透明通道来混合图色，默认光照算法 透明效果尝试解决办法.
TA进阶实例33（Unreal制作魔兽世界透视效果）
Unity3d 攻城师一枚
07-25 1186
非常实用的游戏特效，这种透视效果在很多游戏里面有使用，《CS：GO》《守望先锋》《魔兽世界9.1》 通用Graphic API，兼容性非常强，当前已经在Android\PC上测试通过
TA进阶实例37（Unreal卡通风格化渲染效果）
Unity3d 攻城师一枚
08-08 1787
汉语“漫画”一词源自日本，最初由江户时代一个叫做葛饰北斋（1760-1849）的浮世绘画家所创立，他于1814年创作的《北斋漫画》绘谱可谓是远东地区漫画的元祖。之后到了1925年5月《文学周报》连载丰子恺的画时，将这些作品注明为“漫画”，这就是中国最早被称为漫画的作品。 卡通知乎：关于什么是“卡通风格” 卡通按照空间维度划分可以分为2d/3d，按照区域划分主要是欧式卡通和日式卡通；在当今的游戏市场，以日式卡通为主导市场，欧式卡通由于技术含量过高，没有被大众普及；在可见的未来，欧式卡通也将会普及起来； ..
UE进阶实例41（制作静态环形技能范围指示器）
Unity3d 攻城师一枚
02-04 1748
环形技能指示器，纯材质编写
Unity Progress Bar Scripts进度条插件
03-29
Unity 进度条插件，有6种进度条可供选择。即拖即用。。
加载loading进度条动画
07-01
加载loading进度条的demo,亲测直接可用哦亲...
场景切换插件，支持进度条等
07-27
场景切换插件，支持进度条，场景异步加载等，亲测有效
unity学习之进度条
jingjingcrystal的专栏
01-13 2165
unity学习，希望我的博客能给喜欢unity的朋友带来帮助 今天有同学过生日，所以我们上午没有讲课，十点出发去吃了自助，下午的时候也让我们自由活动放松了，晚饭后我来了教室，学习了一下怎么设置进度条，想想这一天也不是全无收获啊。        首先进度条用到的是GUI的内容，首先在类外面创建一个空的文本纹理，因为是进度条，是由两个空的文本纹理，然后定义一个当前的
Unity Shader实现各种进度条
weixin_33842328的博客
04-28 1851
1、圆形进度条shader Shader "ProgressBar360" { Properties { _BGTex("Background Texture",2D) = "white"{} // [PerRendererData] _MaskTex("Mask Texture", 2D) =...
Unity不均匀进度条
Struugle_Guy的博客
09-05 1490
在游戏中进度条的使用非常的多，经验条，任务进度，奖励进度等等。当数值达到很大的时候，经验条增长的速度可能会很慢，这对玩家的兴趣有消极作用。所有有时候会使用非线性增长的方式来处理，就是进度条的前一部分会增长的比较快，但是那只是表象，真正占比反而很少。如图，1000经验占了进度条比例的0.3 以下是代码...
如何实现间隔式渐变色进度条
weixin_44019706的博客
11-01 572
间隔式渐变色进度条
css3实现圆环百分比进度
06-11
可以使用CSS3中的transform和animation属性来实现圆环百分比进度的效果，具体步骤如下： 1. 创建一个圆环的基本样式，设置圆环的宽度、颜色和边框样式： ``` .progress { width: 100px; height: 100px; border: 10px solid #eee; border-radius: 50%; position: relative; } .progress:before { content: ""; width: 100%; height: 100%; border-radius: 50%; border: 10px solid #ccc; position: absolute; top: 0; left: 0; } ``` 2. 使用transform属性将圆环旋转90度，使起点从顶部开始： ``` .progress:before { transform: rotate(-90deg); } ``` 3. 使用animation属性设置动画效果，将圆环的进度从0%到指定百分比： ``` .progress:after { content: ""; width: 100%; height: 100%; border-radius: 50%; border: 10px solid #000; position: absolute; top: 0; left: 0; transform: rotate(-90deg); animation: progress 2s ease-out forwards; } @keyframes progress { from { transform: rotate(-90deg); } to { transform: rotate(calc(-90deg + (360 * 80 / 100))); } } ``` 其中，animation属性中的forwards参数表示动画结束后保持最后一帧状态，calc函数用来计算旋转角度。 4. 在HTML中添加进度条的容器，并设置对应的百分比： ``` <div class="progress" data-progress="80"></div> ``` 5. 使用JavaScript获取进度条容器和其对应的百分比，将百分比值设置为圆环的进度： ``` const progress = document.querySelector('.progress'); const percent = progress.getAttribute('data-progress'); progress.style.setProperty('--progress', `${percent}%`); ``` 6. 最后，在CSS中使用var函数获取JavaScript设置的进度值，并将其应用到圆环的进度样式中： ``` .progress:after { transform: rotate(calc(-90deg + (360 * var(--progress) / 100))); } ``` 这样就可以实现一个简单的圆环百分比进度条。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值