Rendering Lines

Guide Source Code

Go to the

Lines

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 essential information related to rendering lines.
The guide project uses most of the concepts discussed in the previous guides.

Creating lines is very easy! There are only four settings that you need to worry about, and they are:

1. The starting point
2. The ending point
3. The color of the line
4. The line thickness.

Creating & Rendering Lines

Creating a line is just as easy as creating any C# object. The type to use when creating a line is Line and this keeps things performant and lightweight.

Creating Empty Lines

Here is an example of creating a line.

var line = new Line();

The code above will create a line with all attributes set to default values.

Start & End Points

Let's give the line a start and end point. We can do this by setting the P1 and P2 properties of the line. The property P1 is the start point of the line, and P2 is the endpoint of the line.

The code below would create a line starting at (100, 100) and ending at (200, 200), making a 45° diagonal line.

var line = new Line();

line.P1 = new Vector2(100, 100);
line.P2 = new Vector2(200, 200);

Rendering The Line

To render the line, we must create an ILineRenderer renderer.

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

Now that we have the renderer, we can render the line 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.lineRenderer.Render(line);

    IBatcher.End();
}

If you created what was described above, you should end up with a line that looks like the image below.

You can also render a line without creating a Line object. It requires using one of the ILineRenderer.RenderLine method overloads.

this.lineRenderer.RenderLine(new Vector2(10, 20), new Vector2(30, 40));

// or

this.lineRenderer.RenderLine(new Vector2(10, 20), new Vector2(30, 40), 14);

// or

this.lineRenderer.RenderLine(new Vector2(10, 20), new Vector2(30, 40), Color.MediumSeaGreen);

// or

this.lineRenderer.RenderLine(new Vector2(10, 20), new Vector2(30, 40), Color.MediumSeaGreen, 14);

Rectangle Color

To set the color of the line, set the Color property to the desired color.

var line = new Line();
line.Color = Color.MediumPurple;

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

Line Thickness

You can also set the thickness of the line in pixels. The smallest the thickness can be is 1 pixel. Set the Thickness property to the desired value.

var line = new Line();
line.Color = Color.DarkOrange;
line.Thickness = 15;

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