LittleJS 1.28.0

DrawUtilities

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, slices, borderSize, extraSpace)drawUtilities.js:210

Create a tile slice style

tileInfo TileInfo

The tile, or the first of the tiles, to draw with

slices number optional, default 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

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

Methods

Members

borderSize : number|undefineddrawUtilities.js:229

Drawn thickness of the edges and corners, undefined for the draw's default

extraSpace : number|undefineddrawUtilities.js:232

Extra spacing adjustment of the slices, undefined for the draw's default

slices : numberdrawUtilities.js:226

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

tileInfo : TileInfodrawUtilities.js:224

The tile, or the first of the tiles, to draw with

Methods

draw(pos, size, color, additiveColor, angle, useWebGL, screenSpace, context)drawUtilities.js:244

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

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, default 0

Angle to rotate by

useWebGL boolean optional, default glEnable

Use WebGL for rendering

screenSpace boolean optional, default drawScreenSpace

Are pos and size in screen space?

context CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D optional

Canvas context to use

drawScreen(pos, size, color, additiveColor, angle, useWebGL, context)drawUtilities.js:264

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

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, default 0

Angle to rotate by

useWebGL boolean optional, default false

Use WebGL for rendering

context CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D optional

Canvas context to use