虚幻引擎logo矢量图svg源码!

博客讲述了如何通过虚幻引擎的ContentExample仓库中的样条线,结合SVG的S()函数,复现虚幻引擎的矢量图logo。整个过程涉及到三次贝塞尔曲线和SVG路径的转换,将UE5中的spline转换为SVG代码,最终得到独特且可编辑的矢量图形。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

由于网上很难找到虚幻引擎的矢量图logo,自己画又太麻烦,偶然间发现官方的ContentExample仓库(内容示例)中有一个用样条线spline实现的logo:

9e3d401ca448bcef3c64ae5df8dfadbf.png

这个logo完全使用三次贝塞尔曲线(Bézier)实现的,而且与每个点相邻的2个控制点对称,因此可以使用svg中的S(x2,y2,x,y)函数:

a5e8e3f065569ae153a66a24ab82d7a3.png

S(x2,y2,x,y)传入4个参数,表示【后控制点】和【终点】的横坐标和纵坐标,而【起点】则是上一个S()函数的x和y,【前控制点】则是上一个S()函数的x2和y2,所以不需要x1和y1。如果上一段曲线不是S()函数,那么【前控制点】就是【起点】,这段曲线降维成二次贝塞尔曲线。还要写一个蓝图脚本将UE5中的spline转成svg代码:

758dc8653cf7e24cef33495ff0eb54e3.png

这段代码将spline上的每个点(起点、终点)以及切线(控制点)拼接成svg字符串,最终打印到输出日志里,再复制粘贴到.svg文件中就完事了,最后稍微优化一下代码,得到如下的svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-75 0 150 200">
    <path transform=" translate(0 200) scale(1 -1)"
        d=" M -72 79 S -72 79 -72 79 S -83.393 86.313 -51 122 S -11.511 148.677 -11 149 S -24.086 131.036 -20 125 S -13.909 119.078 -14 120 S -16.199 70.35 -13 59 S 13.972 56.928 14 63 S 16 97.75 14 113 S 5.25 121.25 6 124 S 17.223 124.778 17 124 S 37.3 139.321 48 142 S 33.183 130.613 34 116 S 31.669 77.319 35 61 S 73.468 82.808 71.968 76.058 S 36.426 34.102 29 34 S 21.75 44.75 14 44 S 2.267 35.104 -2 31 S -40.386 46.284 -42 49 S -36.75 43 -35 58 S -32.602 95.035 -35 109 S -68.134 101.673 -72 79 " />
</svg>

成功复现出了全网独一无二的虚幻引擎logo的矢量图。无论是UE5的样条线还是SVG的<path>标签,本质上都是利用贝塞尔曲线这个大杀器实现各种各样的图形,贝塞尔曲线本质上也就是中学里学过的多项式而已,非常简单粗暴。

10c77ccd4736f14c630ba34e256e4c95.png

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xosg

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值