Namespace: DrawUtilities

LittleJS Drawing Utilities Plugin

Extra drawing functions for LittleJS
Nine slice and three slice drawing

Source: plugins/drawUtilities.js, line 1

Methods

(static) drawCrescent(pos, sizeopt, percentopt, coloropt, angleopt, invertopt, lineWidthopt, lineColoropt, useWebGLopt, screenSpaceopt, contextopt)

Draw a crescent / moon-phase shape built from a polygon Routes through drawPoly, so it supports WebGL, screen space, color, and outlines

Parameters:

Name	Type	Attributes	Default	Description
`pos`	Vector2			Center position
`size`	number	<optional>	1	Diameter
`percent`	number	<optional>	0	Moon phase over a full cycle (0=new, .25=first quarter, .5=full, .75=last quarter), wraps
`color`	Color	<optional>		Fill color
`angle`	number	<optional>	0	Angle to rotate by
`invert`	boolean	<optional>	false	Flip which side is illuminated
`lineWidth`	number	<optional>	0	Outline width, 0 for no outline
`lineColor`	Color	<optional>		Outline color
`useWebGL`	boolean	<optional>	glEnable	Use WebGL for rendering
`screenSpace`	boolean	<optional>	false	Use screen space coordinates
`context`	CanvasRenderingContext2D	<optional>		Canvas context to use

Source: plugins/drawUtilities.js, line 158

(static) drawNineSlice(pos, size, startTile, coloropt, borderSizeopt, additiveColoropt, extraSpaceopt, angleopt, useWebGLopt, screenSpaceopt, contextopt)

Draw a scalable nine-slice UI element in world space This function can apply color and additive color if WebGL is enabled The nine-slice samples a 3x3 block of tiles from the tilesheet, it does not subdivide a single tile. Pass the top-left tile of that block as startTile; the other 8 tiles (edges, corners, and center) are taken automatically from the 3x3 grid of tiles extending right and down from it. borderSize only sets the rendered thickness of the edges and corners, not how the texture is cut.

Parameters:

Name	Type	Attributes	Default	Description
`pos`	Vector2			World space position
`size`	Vector2			World space size
`startTile`	TileInfo			Top-left tile of the 3x3 block to sample the nine-slice from
`color`	Color	<optional>		Color to modulate with
`borderSize`	number	<optional>	1	Rendered thickness of the border sections
`additiveColor`	Color	<optional>		Additive color
`extraSpace`	number	<optional>	0.05	Extra spacing adjustment
`angle`	number	<optional>	0	Angle to rotate by
`useWebGL`	boolean	<optional>	glEnable	Use WebGL for rendering
`screenSpace`	boolean	<optional>		Use screen space coordinates
`context`	CanvasRenderingContext2D	<optional>		Canvas context to use

Source: plugins/drawUtilities.js, line 45

(static) drawNineSliceScreen(pos, size, startTile, borderSizeopt, extraSpaceopt, angleopt)

Draw a scalable nine-slice UI element to the main canvas in screen space This function can not apply color because it draws using the 2d context

Parameters:

Name	Type	Attributes	Default	Description
`pos`	Vector2			Screen space position
`size`	Vector2			Screen space size
`startTile`	TileInfo			Top-left tile of the 3x3 block to sample (see drawNineSlice)
`borderSize`	number	<optional>	32	Rendered thickness of the border sections
`extraSpace`	number	<optional>	2	Extra spacing adjustment
`angle`	number	<optional>	0	Angle to rotate by

Source: plugins/drawUtilities.js, line 21

(static) drawThreeSlice(pos, size, startTile, coloropt, borderSizeopt, additiveColoropt, extraSpaceopt, angleopt, useWebGLopt, screenSpaceopt, contextopt)

Draw a scalable three-slice UI element in world space This function can apply color and additive color if WebGL is enabled The three-slice samples 3 consecutive tiles from the tilesheet, it does not subdivide a single tile. Pass the first tile as startTile; the three tiles are used in order as corner, side, and center, then rotated and mirrored to build all four edges and corners. borderSize only sets the rendered thickness.

Parameters:

Name	Type	Attributes	Default	Description
`pos`	Vector2			World space position
`size`	Vector2			World space size
`startTile`	TileInfo			First of 3 consecutive tiles (corner, side, center) for the three-slice
`color`	Color	<optional>		Color to modulate with
`borderSize`	number	<optional>	1	Rendered thickness of the border sections
`additiveColor`	Color	<optional>		Additive color
`extraSpace`	number	<optional>	0.05	Extra spacing adjustment
`angle`	number	<optional>	0	Angle to rotate by
`useWebGL`	boolean	<optional>	glEnable	Use WebGL for rendering
`screenSpace`	boolean	<optional>		Use screen space coordinates
`context`	CanvasRenderingContext2D	<optional>		Canvas context to use

Source: plugins/drawUtilities.js, line 110

(static) drawThreeSliceScreen(pos, size, startTile, borderSizeopt, extraSpaceopt, angleopt)

Draw a scalable three-slice UI element to the main canvas in screen space This function can not apply color because it draws using the 2d context

Parameters:

Name	Type	Attributes	Default	Description
`pos`	Vector2			Screen space position
`size`	Vector2			Screen space size
`startTile`	TileInfo			First of 3 consecutive tiles: corner, side, center (see drawThreeSlice)
`borderSize`	number	<optional>	32	Rendered thickness of the border sections
`extraSpace`	number	<optional>	2	Extra spacing adjustment
`angle`	number	<optional>	0	Angle to rotate by

Source: plugins/drawUtilities.js, line 87

(static) getCrescentPoints(pos, sizeopt, percentopt, angleopt, invertopt, sidesopt) → {Array.<Vector2>}

Get the list of points that make up a crescent / moon-phase shape Returns world-space points with pos and angle baked in, ready for drawPoly or other use

Parameters:

Name	Type	Attributes	Default	Description
`pos`	Vector2			Center position
`size`	number	<optional>	1	Diameter
`percent`	number	<optional>	0	Moon phase over a full cycle (0=new, .25=first quarter, .5=full, .75=last quarter), wraps
`angle`	number	<optional>	0	Angle to rotate by
`invert`	boolean	<optional>	false	Flip which side is illuminated
`sides`	number	<optional>	glCircleSides	Number of sides for a full circle (halved per arc)

Source: plugins/drawUtilities.js, line 175

Returns:

List of points making up the crescent

Type:: Array.<Vector2>