LittleJS 1.28.0

DrawUtilities

LittleJS Drawing Utilities Plugin

  • Extra drawing functions for LittleJS
  • Nine slice and three slice drawing, and TileSlice to keep one as a style, like a UI skin

Classes

Functions

Functions

drawCrescent(pos, size, percent, color, angle, invert, lineWidth, lineColor, useWebGL, screenSpace, context)drawUtilities.js:327

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

  • At angle 0 the lit side faces up while waxing (percent below .5) and down while waning, and the lit width grows evenly with the phase, not as the real moon's does
pos Vector2

Center position

size number optional, default 1

Diameter

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

Angle to rotate by

invert boolean optional, default false

Draw the unlit part of the disk instead of the lit part

lineWidth number optional, default 0

Outline width, 0 for no outline

lineColor Color optional

Outline color

useWebGL boolean optional, default glEnable

Use WebGL for rendering

screenSpace boolean optional, default drawScreenSpace

Use screen space coordinates

context CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D optional

Canvas context to use

drawNineSlice(pos, size, startTile, color, borderSize, additiveColor, extraSpace, angle, useWebGL, screenSpace, context)drawUtilities.js:54

Draw a scalable nine-slice UI element in world space Color and additive color apply in WebGL and Canvas2D (with canvasColorTiles) 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.

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

Rendered thickness of the border sections, 1 in world space and 32 pixels in screen space by default

additiveColor Color optional

Additive color

extraSpace number optional

Extra spacing adjustment, .05 in world space and 2 pixels in screen space by default

angle number optional, default 0

Angle to rotate by

useWebGL boolean optional, default glEnable

Use WebGL for rendering

screenSpace boolean optional, default drawScreenSpace

Use screen space coordinates

context CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D optional

Canvas context to use

drawNineSliceScreen(pos, size, startTile, color, borderSize, additiveColor, extraSpace, angle, useWebGL, context)drawUtilities.js:26

Draw a scalable nine-slice UI element in screen space, drawNineSlice with screenSpace set

  • Draws with the 2D context by default, on top of what WebGL drew, like drawTextScreen
  • With no angle its pieces land on whole pixels and meet exactly, so pixel art lines up and extraSpace is not used
pos Vector2

Screen space position

size Vector2

Screen space size

startTile TileInfo

Top-left tile of the 3x3 block to sample (see drawNineSlice)

color Color optional, default WHITE

Color to modulate with

borderSize number optional, default 32

Rendered thickness of the border sections

additiveColor Color optional

Additive color

extraSpace number optional, default 2

Extra spacing adjustment

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

drawThreeSlice(pos, size, startTile, color, borderSize, additiveColor, extraSpace, angle, useWebGL, screenSpace, context)drawUtilities.js:144

Draw a scalable three-slice UI element in world space Color and additive color apply in WebGL and Canvas2D (with canvasColorTiles) 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.

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

Rendered thickness of the border sections, 1 in world space and 32 pixels in screen space by default

additiveColor Color optional

Additive color

extraSpace number optional

Extra spacing adjustment, .05 in world space and 2 pixels in screen space by default

angle number optional, default 0

Angle to rotate by

useWebGL boolean optional, default glEnable

Use WebGL for rendering

screenSpace boolean optional, default drawScreenSpace

Use screen space coordinates

context CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D optional

Canvas context to use

drawThreeSliceScreen(pos, size, startTile, color, borderSize, additiveColor, extraSpace, angle, useWebGL, context)drawUtilities.js:117

Draw a scalable three-slice UI element in screen space, drawThreeSlice with screenSpace set

  • Draws with the 2D context by default, on top of what WebGL drew, like drawTextScreen
  • With no angle its pieces land on whole pixels and meet exactly, so pixel art lines up and extraSpace is not used
pos Vector2

Screen space position

size Vector2

Screen space size

startTile TileInfo

First of 3 consecutive tiles: corner, side, center (see drawThreeSlice)

color Color optional, default WHITE

Color to modulate with

borderSize number optional, default 32

Rendered thickness of the border sections

additiveColor Color optional

Additive color

extraSpace number optional, default 2

Extra spacing adjustment

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

getCrescentPoints(pos, size, percent, angle, invert, sides) → Array<Vector2>drawUtilities.js:344

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

pos Vector2

Center position

size number optional, default 1

Diameter

percent number optional, default 0

Moon phase over a full cycle (0=new, .25=first quarter, .5=full, .75=last quarter), wraps

angle number optional, default 0

Angle to rotate by

invert boolean optional, default false

The unlit part of the disk instead of the lit part

sides number optional, default glCircleSides

Number of sides for a full circle (halved per arc)

Returns
  • List of points making up the crescent