生成 2D 视觉内容

在编辑器和运行时UI中创建饼图

使用矢量图形

矢量图形是可缩放的、与分辨率无关的图形，可以在 UI 中使用。它们由数学方程定义，而不是像素计算机图像中的最小单位。像素大小取决于您的屏幕分辨率。像素光照是在每个屏幕像素下计算的。更多信息
请参阅术语表，这使他们能够在任何尺寸下保持质量。

导入和使用矢量图形

您可以导入矢量图形以在 UI 中使用。

导入矢量图像时，将其生成的资产类型设置为 UI Toolkit 矢量图像检查器一个Unity 窗口，显示有关当前选定游戏对象、资产或项目设置的信息，允许您检查和编辑值。更多信息
请参阅术语表以获得最佳结果。这将创建专门设计用于 UI 工具包（例如 UI 生成器或运行时 UI）的专用资产。此资产是 UI 工具包可以高效呈现的 SVG 文档的轻量级细分表示形式。

或者，你可以将其 生成的资产类型（Generated Asset Type）设置为 Texture2D，以便在其他上下文中使用。

有关详细信息，请参阅矢量图像导入设置和设置背景图像。

注意： 将矢量图像导入为 UI SVGIImage（用于 uGUI）或矢量/纹理精灵A 2D 图形对象。如果您习惯在 3D 中工作，精灵本质上只是标准纹理，但有一些特殊技术可以组合和管理精灵纹理，以提高开发过程中的效率和便利性。更多信息
请参阅术语表，您必须安装com.unity.vectorgraphics包.

局限性

使用矢量图形时，请注意以下限制：

避免使用-no-graphics命令行参数，因为这可能会阻止 SVG 矢量图像正确导入。
SVG 导入器支持 SVG 1.1 规范的子集。当前不支持以下功能：

使用 C# 脚本创建矢量图形

您可以使用 C# 创建和作矢量图形脚本一段代码，允许您创建自己的组件、触发游戏事件、随时间修改组件属性以及以您喜欢的任何方式响应用户输入。更多信息
请参阅术语表在您的 UI 中。Unity 提供了一组类和方法，可让您：

创建矢量图形元素，例如路径和形状。
将填充和渐变应用于形状。
使用其他形状作为剪辑器剪辑内容。
将矢量图形细分并渲染为网格体、精灵或纹理，以便在 UI 中显示。

可绘制实例主要有两种类型：路径和形状。

路径

路径是由一系列三次贝塞尔曲线定义的矢量形状，分组为BezierContour.每个轮廓由路径段数组和指示轮廓是否闭合的标志组成。您可以使用这些曲线为您的 UI 图形创建复杂的连续曲线。

每个路径段指定一个起点和两个控制点。下一个线段的起点继续曲线，允许您链接多个线段以获得平滑、连续的形状。您至少需要两个线段才能获得有效的轮廓。

例如，考虑以下路径：

要创建路径，请定义线段列表并指定是否关闭轮廓。然后，您可以根据需要指定描边和填充属性来设置路径样式。

var a = new Vector2(0, 0);
var b = new Vector2(100, 0);
var c = new Vector2(100, 100);
var d = new Vector2(0, 100);
var e = new Vector2(50, 50);
var f = new Vector2(150, 50);
var g = new Vector2(200, 0);

var segments = new BezierPathSegment[] {
    new BezierPathSegment() { P0 = a, P1 = b, P2 = c },
    new BezierPathSegment() { P0 = d, P1 = e, P2 = f },
    new BezierPathSegment() { P0 = g }
};
var path = new Shape()
{
    Contours = new BezierContour[]
    {
        new BezierContour()
        {
            Segments = segments,
            Closed = true
        }
    },
    PathProps = new PathProperties()
    {
        Stroke = new Stroke() { Color = Color.red, HalfThickness = 1.0f }
    }
};

当您定义BezierContour跟Closed = true，轮廓将最后一个路径段连接到第一个路径段。最后一个路径段使用其P1和P2值作为控制点。

形状

形状与路径类似，但可以包含多个轮廓和支撑填充。您可以使用纯色、纹理或渐变填充形状，并将变换应用于填充。这允许您为 UI 创建复杂的填充矢量图形。

您可以使用不同的填充类型：

梯度

渐变填充允许您将多种颜色混合在一起，无论是直线（线性）还是从点辐射（径向）。您可以通过指定类型和一系列色标来定义渐变，每个色标沿渐变都有颜色和百分比。

例如，您可以通过定义 0%、50% 和 100% 的停止来创建从蓝色过渡到红色再到黄色的线性渐变：

var gradient = new GradientFill()
{
    Type = GradientFillType.Linear,
    Stops = new GradientStop[] {
        new GradientStop() { Color = Color.blue, StopPercentage = 0.0f },
        new GradientStop() { Color = Color.red, StopPercentage = 0.5f },
        new GradientStop() { Color = Color.yellow, StopPercentage = 1.0f }
    }
};

渐变寻址模式定义了当渐变坐标超出范围时 Unity 如何显示颜色，如下所示：

填充模式

填充模式决定了如何计算复杂形状和孔的内部。主要填充模式有：

NonZero：通过计算路径轮廓绕点的次数来确定点是否在形状内。如果结果为非零，则考虑里面的点。每个轮廓的方向（顺时针或逆时针）都会影响结果。

非零填充
OddEven：计算从点开始的水平线与形状轮廓相交的次数。如果交叉次数为奇数，则点在内部;如果偶数，它就在外面。此模式通常用于带孔的形状。

偶数奇数填充

选择最符合矢量形状所需外观的填充模式，尤其是在处理重叠路径或孔洞时。

裁剪

这SceneNode类包括一个Clipper属性，允许您用形状剪切节点的内容。

以下代码示例创建一个椭圆，用于剪辑重复正方形的模式：

// Create an ellipse shape to use as the clipper
var ellipseShape = new Shape();
VectorUtils.MakeEllipseShape(ellipseShape, new Vector2(0, 0), 50, 100);

var ellipseClipper = new SceneNode
{
    Shapes = new List<Shape> { ellipseShape }
};

// Create a pattern for clipping, for example, repeating squares
var squaresPattern = new SceneNode
{
    Shapes = new List<Shape>() // Add your fill pattern here
};

// Create a SceneNode that applies the clipper to its children
var clippedNode = new SceneNode
{
    Children = new List<SceneNode> { squaresPattern },
    Clipper = ellipseClipper
};

注意：仅将形状用作理发器。剪切过程将忽略您在剪辑器形状上定义的任何笔划。您可以将形状和描边的任意组合剪辑为内容。

警告：裁剪的计算成本可能很高。虽然使用简单的剪辑器剪切简单的形状通常很有效，但使用复杂的形状或剪辑器可能会显着影响性能。

渲染矢量图形

要在屏幕上渲染矢量图形元素，请首先获取场景场景包含游戏的环境和菜单。将每个唯一的场景文件视为一个独特的关卡。在每个场景中，你放置你的环境、障碍物和装饰品，基本上是将你的游戏设计和构建成碎片。更多信息
请参阅术语表.设置 VectorScene 实例后，可以使用以下内容对其进行细分VectorUtils方法：

var geometry = VectorUtils.TessellateScene(
    scene,
    new VectorUtils.TessellationOptions()
    {
        StepDistance = 10.0f,
        MaxCordDeviation = 0.1f,
        MaxTanAngleDeviation= 0.1f
    });

注意：您必须指定maxTanAngleDeviation以弧度为单位。

要禁用maxCordDeviationconstraint，将其设置为float.MaxValue. 要禁用maxTanAngleDeviationconstraint，将其设置为Mathf.PI/2.0f.

禁用约束会使曲面细分更快，但可能会生成更多顶点。

生成的列表Geometry对象包含正确渲染场景所需的所有顶点和随附信息。

纹理和渐变图集

如果场景有任何纹理或渐变，则必须生成纹理图集并填充几何体的UV。这些方法是VectorUtils类：

var atlas = VectorUtils.GenerateAtlasAndFillUVs(geoms, 16);

这GenerateAtlas方法是一个昂贵的作，因此请尽可能缓存生成的 Texture2D 对象。只有当场景内的纹理或渐变发生变化时，才需要重新生成图集。

当几何体内部的顶点发生变化时，调用FillUVs方法，这很便宜。

绘制细分场景

您可以通过多种方式渲染几何体。例如，可以通过以下方式渲染几何体：

填充Mesh资产
构建一个Sprite资产
使用 Unity 的低级图形库

对于这些方法中的任何一种，请使用提供的材质绘制细分矢量图形内容。

要填充网格Unity 的主要图形基元。网格构成了 3D 世界的很大一部分。Unity 支持三角或四边形多边形网格。Nurbs、Nurms、Subdiv 表面必须转换为多边形。更多信息
请参阅术语表资产，请使用以下VectorUtils方法：

var mesh = new Mesh();
VectorUtils.FillMesh(
    mesh, 
    geoms,
    100.0f, // svgPixelsPerUnit
    false); // flipYAxis

要构建精灵资产，请使用以下命令VectorUtils方法：

var sprite = VectorUtils.BuildSprite(
    geoms,
    100.0f,                       // svgPixelsPerUnit
    VectorUtils.Alignment.Center, // alignment
    Vector2.zero,                 // pivot
    16,                           // gradient resolution
    false);                       // flipYAxis

将精灵渲染到Texture2D，请使用以下命令VectorUtils方法：

var tex = VectorUtils.RenderSpriteToTexture2D(
    sprite,          // The sprite to draw
    256, 256,       // The texture dimensions
    null,           // The material to use ("Unlit_Vector" or "Unlit_VectorGradient")
    1);             // The number of samples per pixel

使用立即模式渲染生成的精灵GL命令，请使用RenderSprite方法VectorUtilsclass 将精灵绘制成一个单位正方形（X 和 Y 方向上介于 0 和 1 之间的框）：

// Or "Hidden/VectorGraphics/VectorGradient" for gradients
var mat = new Material(Shader.Find("Hidden/VectorGraphics/Vector"));

VectorUtils.RenderSprite(
    sprite,  // The sprite to draw
    mat);    // The material to use ("Unlit_Vector" or "Unlit_VectorGradient")

其他资源

生成 2D 视觉内容

在编辑器和运行时UI中创建饼图

手册

使用矢量图形

导入和使用矢量图形

局限性

使用 C# 脚本创建矢量图形

路径

形状

梯度

填充模式

裁剪

渲染矢量图形

纹理和渐变图集

绘制细分场景

其他资源