Pardon the mess, Play My Code is in beta!

READY TO PLAY?
CLICK TO LOG IN!

sign up - lost password

How Alignment Works

In some functions you might see 'xAlign' and 'yAlign' which allow you to align on the x and y axis. These include 'drawText', 'fillRect', 'drawCircle', 'fillSegment', and many more.

These two parameters allow you to change where the x location refers to when the item is drawn. They can take one of two types of values.

true or false

First they can take a boolean value to denote if they align or not. True will state that they centre on that axis, and false states they draw from the top left corner.

// draw from top-left
drawText( "example text", x, y, false, false )

// draw fully centred
drawText( "example text", x, y,  true,  true )

// draw centred only on the x-axis
drawText( "example text", x, y,  true, false )

// draw centred only on the y-axis
drawText( "example text", x, y, false,  true )

:left, :center, :right, :top, :center, :bottom

For more precise control you can also pass in a symbol or string describing how the item is aligned on each axis. Each axis has different values, to help keep them descriptive.

For the x-axis these are 'left', 'center' and 'right'. If you pass in 'left', then you can imagine that the 'x' location given is on the left side of the item when drawn. 'center' centres the item when drawn, whilst 'right' has the 'x' location be on the right (with the item drawing out towards the left).

The yAlign parameter works in a similar way, but with different values. These are: 'top', 'center' and 'bottom'. 'top' has the y location refer to the top of the item when drawn, 'bottom' has it refer to the bottom and 'center' will centre the item.

// draw from top-left
drawText( "example text", x, y, :left, :top )

// draw fully centred
drawText( "example text", x, y,  :center, :center )

// draw centred only on the x-axis
drawText( "example text", x, y,  :center, :top )

// draw from the bottom-right
drawText( "example text", x, y, :right,  :bottom )

Mix and Match

You can also mix these. So you can use a boolean value for the xAlign, and a symbol for the yAlign, or have it the other way around. The choice is up to you.

// draw from top-left
drawText( "example text", x, y, false, :top )

// draw fully centred
drawText( "example text", x, y,  :center, true )

// draw centred only on the x-axis
drawText( "example text", x, y,  true, :top )

// draw from the bottom-right
drawText( "example text", x, y, :right,  :bottom )