Class: TileSlice

A tile drawn as a box of any size, kept as a style to draw with, like a UI skin

9 slices is a nine-slice from the 3x3 block of tiles at tileInfo, see drawNineSlice
3 slices is a three-slice from the 3 tiles in a row at tileInfo, see drawThreeSlice
1 slice is the whole tile stretched over the box, a plain image
The UI system draws a widget's background with one, see uiSystem.defaultSlice

Constructor

new TileSlice(tileInfo, slicesopt, borderSizeopt, extraSpaceopt)

Create a tile slice style

Parameters:

Name	Type	Attributes	Default	Description
`tileInfo`	TileInfo			The tile, or the first of the tiles, to draw with
`slices`	number	<optional>	9	9 for a nine-slice, 3 for a three-slice, 1 for the whole tile
`borderSize`	number	<optional>		Drawn thickness of the edges and corners, undefined for the draw's own default
`extraSpace`	number	<optional>		Extra spacing adjustment of the slices, undefined for the draw's own default

Source: plugins/drawUtilities.js, line 216

Example

const panel = new TileSlice(tile(0, 16), 9, .5); // a border of half a world unit
panel.draw(vec2(0, 5), vec2(10, 4));
uiSystem.defaultSlice = new TileSlice(tile(0, 16), 9, 16); // UI sizes are pixels, every widget made after this

Members

borderSize :number|undefined

Type:

number | undefined

Properties

Type	Description
number \| undefined	Drawn thickness of the edges and corners, undefined for the draw's default

Source: plugins/drawUtilities.js, line 235

extraSpace :number|undefined

Type:

number | undefined

Properties

Type	Description
number \| undefined	Extra spacing adjustment of the slices, undefined for the draw's default

Source: plugins/drawUtilities.js, line 238

slices

Properties

Type	Description
number	9 for a nine-slice, 3 for a three-slice, 1 for the whole tile

Source: plugins/drawUtilities.js, line 232

tileInfo

Properties

Type	Description
TileInfo	The tile, or the first of the tiles, to draw with

Source: plugins/drawUtilities.js, line 230

Methods

draw(pos, size, coloropt, additiveColoropt, angleopt, useWebGLopt, screenSpaceopt, contextopt)

Draw it as a box in world space, or in screen space

Parameters:

Name	Type	Attributes	Default	Description
`pos`	Vector2			Center position
`size`	Vector2			Size of the box
`color`	Color	<optional>		Color to modulate with
`additiveColor`	Color	<optional>		Additive color
`angle`	number	<optional>	0	Angle to rotate by
`useWebGL`	boolean	<optional>	glEnable	Use WebGL for rendering
`screenSpace`	boolean	<optional>	drawScreenSpace	Are pos and size in screen space?
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D	<optional>		Canvas context to use

Source: plugins/drawUtilities.js, line 250

drawScreen(pos, size, coloropt, additiveColoropt, angleopt, useWebGLopt, contextopt)

Draw it as a box in screen space, with the 2D context by default, on top of what WebGL drew, like drawTextScreen

Parameters:

Name	Type	Attributes	Default	Description
`pos`	Vector2			Screen space center position
`size`	Vector2			Screen space size
`color`	Color	<optional>		Color to modulate with
`additiveColor`	Color	<optional>		Additive color
`angle`	number	<optional>	0	Angle to rotate by
`useWebGL`	boolean	<optional>	false	Use WebGL for rendering
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D	<optional>		Canvas context to use

Source: plugins/drawUtilities.js, line 270