Drawing and Colors

In SadConsole we can draw content to the screen by changing the foreground, background and glyphs of cells.
The foreground controls the color of the glyph.
The background controls the color of the cell.
The glyph is the char in the cell, which is represented by the char’s index on the font.
For example casting char ‘A’ to an integer, will match the index in the font in this case 65

What are we drawing on?

Each Console contains a CellSurface, this Surface is used to render the cells to the screen.
So to directly adjust an individual cell, you can access the console.Surface collection to change the cells.

The console.Surface collection has an indexer that you can use which accepts x, y to acces a specific cell, but it also has a range of extension methods that you can use to also change appearance of a certain cell by its coordinate.

How are colors defined?

The Color class is basically a representation of RGBA float values eg:

var black = new Color(r: 0, g: 0, b: 0, alpha: 255);

Alpha represents the transparency of the color, where 255 is fully solid, and 0 is fully transparent.

A lot of pre-defined colors are available to pick from without having to specify the rgba yourself such as the one we defined which is actually: Color.Black

Manipulating colors

We can manipulate an existing color by multiplying, blending, etc..
We also provide methods for this, here are two examples.

// Blends color blue and red together at 50% right in the middle
// 100% would mean its red, 0% would mean its blue
var blendedColor = Color.Lerp(Color.Blue, Color.Red, 0.5f);

// Basically scales the rgb values * 0.5f (halving them)
var multipliedColor = Color.Multiply(Color.Red, 0.5f);

Drawing individual cells

You can use following methods to draw directly to a cell at a given coordinate:
(SetGlyph, SetForeground, SetBackground, SetCellAppearance)

var console = Game.Instance.StartingConsole;
console.Surface.SetGlyph(x, y, glyph);
console.Surface.SetGlyph(x, y, glyph, foreground, background);
console.Surface.SetGlyph(x, y, glyph);
console.Surface.SetForeground(x, y, color);
console.Surface.SetBackground(x, y, color);
console.Surface.SetCellAppearance(x, y, ColoredGlyph);

As mentioned you can also access a cell and change it properties:

var console = Game.Instance.StartingConsole;
var cell = console.Surface[x,y];
cell.Foreground = color;
cell.Background = color;
cell.Glyph = glyph;
cell.IsVisible = true; // determines if the cell is rendered or not
cell.IsDirty = true;

Note: It is important to mark a cell as IsDirty = true, when directly accessing it on the surface and changing any of its visual properties. (Eg. access through the indexer console.Surface[x,y])
The methods such as SetGlyph, SetForeground, SetBackground, SetCellAppearance already do this for you.

IsDirty = true, will notify the rendering engine that it should update the visual of the cell.

Drawing larger areas at once

SadConsole provides some helper methods to draw large parts, such as boxes, circles and lines.

DrawBox example:

// Define a rectangle box area starting at (0,0) and (10,10) in size
var area = new Rectangle(0, 0, 10, 10); 

// Define the parameters, here we just use a fill
var shapeParameters = ShapeParameters.CreateFilled(new ColoredGlyph(Color.White, Color.Blue), new ColoredGlyph(Color.White, Color.Cyan));

// Draw a box to the rectangle area, with the parameters provided
Game.Instance.StartingConsole.Surface.DrawBox(area, shapeParameters);

DrawCircle example:

// Starting at (10, 10) draw a circle with length of 10x 10y starting in the middle, so 5 on each side
var area = new Rectangle(10, 10, 10, 10); 

// Same fill parameters as DrawBox
var shapeParameters = ShapeParameters.CreateFilled(new ColoredGlyph(Color.White, Color.Blue), new ColoredGlyph(Color.White, Color.Cyan));

// Apply to the DrawCircle method
Game.Instance.StartingConsole.Surface.DrawCircle(area, shapeParameters);

DrawLine example:

var startPoint = new Point(0, 0);
var endPoint = new Point(Game.Instance.StartingConsole.Width, 0);
int? glyph = 'O'; // Lets add glyph O
var backgroundColor = Color.Red;
Game.Instance.StartingConsole.Surface.DrawLine(startPoint, endPoint, glyph, background: backgroundColor);

Here we are drawing a line from start to end point, with setting the glyph to O and the background color to Red.

Printing text

To print a line of text there are some Print methods available to use:

Game.Instance.StartingConsole.Surface.Print(x, y, ColoredString);
Game.Instance.StartingConsole.Surface.Print(x, y, "Hello World");
Game.Instance.StartingConsole.Surface.Print(x, y, "Hello World", ColoredGlyph appearance);
Game.Instance.StartingConsole.Surface.Print(x, y, "Hello", foreground: Color.Blue);
Game.Instance.StartingConsole.Surface.Print(x, y, "Hello", foreground: Color.Blue, background: Color.Transparent);

There are some more overloads with decorates, effects, mirrors but those are covered in other topics.

In a console you can also print using the Cursor, this allows easy build-in word wrapping, as when it hits the Console width, it it will automatically move to the next row.

// Make sure we start printing at (0, 0)
Game.Instance.StartingConsole.Cursor.Position = new Point(0, 0);
Game.Instance.StartingConsole.Cursor.Print("Hello");
Game.Instance.StartingConsole.Cursor.Print("Hello", ColoredGlyph);
Game.Instance.StartingConsole.Cursor.Print(ColoredString);

Note that you always have to adjust the cursor position before printing, as it will move along with the previous print.
Eg (0,0 with a Print(“Hello”) will move the cursor to (5, 0)

Thats it for basic drawing and color handling on consoles!

Leave a comment

Design a site like this with WordPress.com
Get started