Shapes (Apos.Shapes)

Introduction

GumUI supports rendering vector shapes as visuals. The following shapes are supported.

• ArcRuntime

• ColoredCircleRuntime

• RoundedRectangleRuntime

Adding NuGet packages

MonoGame

The Gum.Shapes.MonoGame NuGet package adds support for rendering shapes. Add the following NuGet package:

https://www.nuget.org/packages/Gum.Shapes.MonoGame

Modify csproj:

<PackageReference Include="Gum.Shapes.MonoGame" Version="*" />

Or add through command line:

dotnet add package Gum.Shapes.MonoGame

Future versions of Gum may not require adding this package explicitly.

KNI

.NET MAUI

raylib

Silk.NET

Setup in Code

MonoGame / KNI

Whether you are using code-only or the Gum tool, you must add the following line of code in your Initialize method:

If using December 2025 or earlier:

GumUI.Initialize(...);
// Initialize ShapeRenderer after GumUI:
ShapeRenderer.Self.Initialize(GraphicsDevice, Content);

If using January 2026 or later:

GumUI.Initialize(...);
// Initialize ShapeRenderer after GumUI:
ShapeRenderer.Self.Initialize();

.NET MAUI

raylib

Silk.NET

Code Example: Rendering Shapes in Code

The following code shows how to add shapes to a MonoGame project:

public class Game1 : Game
{
    private GraphicsDeviceManager _graphics;
    GumService GumUI => GumService.Default;

    public Game1()
    {
        _graphics = new GraphicsDeviceManager(this);
        _graphics.GraphicsProfile = GraphicsProfile.HiDef;
        Content.RootDirectory = "Content";
        IsMouseVisible = true;
    }

    protected override void Initialize()
    {
        GumUI.Initialize(this, Gum.Forms.DefaultVisualsVersion.Newest);
        // Initialize shape renderer:
        Renderables.ShapeRenderer.Self.Initialize(GraphicsDevice, Content);

        GumUI.Draw();

        var circle = new ColoredCircleRuntime();
        circle.AddToRoot();
        circle.Color = Color.Red;

        var rectangle = new RoundedRectangleRuntime();
        rectangle.AddToRoot();
        rectangle.X = 100;
        rectangle.CornerRadius = 15;
        rectangle.UseGradient = true;
        rectangle.Color1 = Color.Blue;
        rectangle.Color2 = Color.Green;
        base.Initialize();

        var arc = new ArcRuntime();
        arc.AddToRoot();
        arc.X = 200;
        arc.Color = Color.Purple;
        arc.Thickness = 20;
        arc.StartAngle = 0;
        arc.SweepAngle = 270;
    }

    protected override void Update(GameTime gameTime)
    {
        GumUI.Update(gameTime);
        base.Update(gameTime);
    }

    protected override void Draw(GameTime gameTime)
    {
        GraphicsDevice.Clear(Color.CornflowerBlue);
        GumUI.Draw();
        base.Draw(gameTime);
    }
}

Shapes rendered in an otherwise empty project

Setup in Gum Tool

Shapes can be used in the Gum tool. To add shapes:

1. Launch the Gum tool

2. Select Plugins ⇒ Add Skia Standard Elements

3. Add instances of Arc, ColoredCircle, or RoundedRectangleRuntime to your Screens or Components

For information on using these shapes in the Gum tool, see the Arc, ColoredCircle, and RoundedRectangle pages. These shapes all share common values for fill, gradients, dropshadows. For information on these general properties, see the Skia Element General Properties page.

The MonoGame and KNI runtimes only supports the shapes listed above. Adding other Skia instances, such as SVG or Lottie, will result in compile time or runtime errors.

Screens and components containing shapes mentioned above can be loaded with no code gen, by reference code gen, or full code gen (no .gumx loaded at runtime).

Shapes in the Gum tool