Rendering Circles

Guide Source Code

Go to the

Circles

guide project to see the source code for a fully working example of this guide.

This guide will show you only some steps relative to the guide project.
It will only show you the most essential information related to rendering circles.
The guide project uses most of the concepts discussed in the previous guides.

Rendering primitive shapes is a fundamental part of game development. Shapes can be used to create custom UI elements for guides, tutorials, and even debug drawing.

What is debug drawing, you ask?

Debug drawing renders shapes to the screen to help you debug your game. For example, you could draw a sprites bounding box to help you see where the sprite is on the screen, which can help with debugging issues with collision detection.

In this guide, you will learn how to render circles to the screen using Velaptor.

The circle has different attributes you can set to customize how the circle will look. These attributes range from position, size, color, and even color gradients.

Let's render some circles!

Creating & Rendering Circles

Creating a circle is just as easy as creating any C# object. The type to use when creating a circle is CircleShape. The CircleShape type is a record struct. Using a struct keeps things performant and lightweight.

Creating Empty Circle

Here is an example of creating a circle.

var circle = new CircleShape();

The code above will create a circle with all attributes set to default values. If you were to render this, you would not see anything. The reason for this would be that we did not set the size of the circle.

Let's give the circle a size by setting the Radius property.

var circle = new CircleShape();
circle.Radius = 50;

Rendering The Circle

To render the circle, we must create an IShapeRenderer renderer.

public Game()
{
    // If you are rendering from a `Game` class, make sure you have a batcher
    this.batcher = RendererFactory.CreateBatcher();
    this.shapeRenderer = RendererFactory.CreateShapeRenderer();
}

Now that we have the renderer, we can render the circle to the screen. Add the code below to an OnDraw() lifecycle method in your Game or scene class.

protected void OnDraw(FrameTime frameTime)
{
    IBatcher.Begin();

    this.shapeRenderer.Render(circle);

    IBatcher.End();
}

You should end up with a circle that looks like the image below.

Rectangle Color

Setting the color of the circle involves setting the Color property. This uses the System.Drawing.Color struct that is built right into dotnet.

var rect = new RectShape();
rect.Color = Color.RoyalBlue;

This should give you a rectangle that looks like the image below.

Circle Size

You can set the size of the circle using the Radius or Diameter properties. These properties are of type float for precision.

var circle = new CircleShape();
circle.Diameter = 100;

RADIUS VS DIAMETER

Changing the value of both properties will affect the other.
Remember, the Diameter of a circle is twice the size of the Radius.

Circle Position

Dealing with the position of the circle is straightforward. You can set the position of the circle by using the following properties:

1. Position
2. Top
3. Bottom
4. Left
5. Right

Changing the values of the properties above will affect the other property values. For example, let's say your circle was at the position of (10, 20) and the size was (100, 200).

If you were to move the circle to the right by 30 pixels using the 'Left' property, then the value of the Right property would be 130.

The result is that it makes circle positioning easy to work with. Your code will also be more readable and maintainable because you can use the property that makes the most sense for the situation and the rest of your code.

Check out the code below:

var circle = new CircleShape();

circle.Radius = 5; // or circle.Diameter = 10;

circle.Position = new Vector2(100, 200);

/* Starting Positions:
 * Left: 95
 * Right: 105
 * Top: 195
 * Bottom: 205
*/

circle.Left += 2;

/* Positions After Moving Left:
 * Left: 97
 * Right: 107
 * Top: 190
 * Bottom: 210
*/

circle.Top += 2;

/* Positions After Moving Down:
 * Left: 95
 * Right: 105
 * Top: 197
 * Bottom: 207
*/

circle.Radius += 10;

/* Positions After Increasing Radius (or diameter by 5):
 * Left: 985
 * Right: 115
 * Top: 185
 * Bottom: 215
*/

NOTE ABOUT POSITIONING

The Position of a CircleShape is relative to the center of the circle.
Not the top left corner of the bounding box of the circle.

Did you notice that the Radius or Diameter properties changed the values of the Left, Right, Top, and Bottom properties?

Since the position of the circle is relative to the center of the circle, changing the value of the Radius or Diameter of the circle will affect the position of the sides of the circle.

Solid & Empty Circles

You can render circles as solid or empty by setting the IsSolid property to true or false.

Here is an example of how to create a solid or empty circle:

var circle = new CircleShape(); // My default is solid

circle.IsSolid = false; // I am not solid
circle.IsSolid = true; // I am solid again

Border Thickness

When it comes to the border thickness, it is only visible when the circle is not solid. The border thickness is set using the BorderThickness property and is of type float.

Refer to the code below to see how to set the border thickness.

var circle = new CircleShape();
circle.Radius = 50;

circle.IsSolid = false;
circle.BorderThickness = 25;

Using the settings above, this is what your circle would look like.

Color Gradients

You can apply color gradients to the circle, which can come in two types. Apply the gradient type by setting the GradientType property to either GradientType.Horizontal or GradientType.Vertical.

These gradients will transition from one color to another using the GradientStart and GradientStop properties.

The code below shows you how you could have a horizontal color gradient that would transition from
Color.MediumSeaGreen to Color.MediumPurple, and a vertical color gradient that would transition from Color.Teal to Color.DarkOrange.

var hGradCircle = new CircleShape();
// Horizontal gradient circle
hGradCircle.GradientType = GradientType.Horizontal;
hGradCircle.GradientStart = Color.MediumSeaGreen;
hGradCircle.GradientStop = Color.MediumPurple;

// Vertical gradient circle
var vGradCircle = new CircleShape();
vGradCircle.GradientType = GradientType.Vertical;
vGradCircle.GradientStart = Color.Teal;
vGradCircle.GradientStop = Color.DarkOrange;

This would end with the result shown below.

GRADIENTS WHEN SET TO NONE

Even if you have the GradientStart and GradientStop properties set, if the GradientType is set to GradientType.None, the gradient will not be rendered, and the circle will be rendered using the Color property.