Introduction

The SkiaSpriteCanvas type provides a Skia canvas which can be used to render any Skia graphics. All rendering performed on the canvas is efficiently converted to a Texture2D. SkiaSpriteCanvas inherits from the standard FlatRedBall Sprite, so it provides all of the common Sprite functionality including:

• Attachment to entities

• Sorting according to the SpriteManager settings

• Rotation, position, and size

• Velocity and acceleration values

Adding SkiaSharp

At the time of this writing, SkiaSharp must be manually added to your project as explained in this blog post: https://flatredball.com/news/gum-now-supports-skiasharp/ Future versions of FlatRedBall may automatically include SkiaSharp as part of new projects.

Introduction

RenderableSkiaObject provides common implementation for rendering Skia graphics in the Gum rendering system. This class simplifies the implementation of interfaces necessary to render Skia objects. It also provides implementation for interfaces so it can be used as a renderable object by Gum objects (GraphicalUiElement). Custom classes can inherit from RenderableSkiaObject to provide custom Skia rendering code, which is useful for custom situations which are not supported by Gum.

Code Example - Rendering a Circle in Code

The following class provides an example of how to inherit from RenderableSkiaObject to provide custom rendering:

public class CustomRenderable : RenderableSkiaObject
{
    public override void DrawToSurface(SKSurface surface)
    {
        // Any skia code works here, but we'll draw an orange circle as an example:
        var canvas = surface.Canvas;

        using var paint = new SKPaint();
        paint.Color = SKColors.Orange;

        var radius = Width/2;
        canvas.DrawCircle(new SKPoint(radius, radius), radius, paint);
    }
}

This object can be used as a standalone object or it can be added to a Gum GraphicalUiElement. Adding to a GraphicalUiElement is easier and provides more layout flexibility so we'll do that. The following code can be added to a Screen to draw the CustomRenderable:

// Add this at class scope so it can be removed in CustomDestroy:
GraphicalUiElement container;

void CustomInitialize()
{
    var renderable = new CustomRenderable();
    container = new GraphicalUiElement(renderable, null);
    // This acts as the size of the canvas:
    container.Width = 300;
    container.Height = 300;
    container.AddToManagers();
}

void CustomActivity(bool firstTimeCalled)
{
}

void CustomDestroy()
{
    container.RemoveFromManagers();
}

This code results in an orange circle with width and height of 300 (radius of 150) being drawn at the top left of the screen.

Introduction

The SkiaGum namespace contains classes which can be used to integrate SkiaSharp into your FlatRedBall game. This integration supports the following common scenarios:

1. Using Skia objects in your Gum screens. The Gum tool provides a plugin which enables Skia objects such as RoundedRectangle, ColoredCircle, and Svg.

2. Using SkiaSpriteCanvas to create FlatRedBall Sprites which can draw custom Skia graphics.

3. Using RenderableSkiaObject to create Gum objects which support custom Skia graphics.

Skia Availability

As of April 2024, Skia is supported only in FlatRedBall MonoGame DesktopGL projects. You can verify that your project has the Skia libraries included by checking the linked assemblies as shown in the following screenshot:

Projects which link to source can optionally include the Skia libraries, as shown in the following screenshot:

If you are targeting a different platform (such as Android), please join the FlatRedBall Discord to discuss extending platform availability.

Note that Skia works on MonoGame DesktopGL, and with a little work it can work on mobile platforms, but it will not run on consoles without significant work. Practically speaking, Skia should not be used if your game will target consoles unless you are willing to make changes to Skia.

Adding Skia Elements to Gum Projects

To add Skia controls to a Gum project:

1. Open your project in the FlatRedBall Editor

2. If your game wasn't created using the wizard, make sure you have added a Gum project

3. Open your Gum project by clicking the Gum icon at the top of FlatRedBall

4. Click Plugins -> Add Skia Standard Elements

You should now see the newly-added Skia elements under the Standard folder.

Using Skia in Your Gum Screen

Once you have added Skia elements to your Screen you can use these elements in your Gum screens and components just like any other type of Gum object. For example, a ColoredCircle can be added to the MainMenuGum screen by drag+dropping the ColoredCircle standard into the workspace in Gum.

The ColoredCircle is also shown in your game, assuming the matching Screen is the startup screen.