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
- Source
Classes
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
- 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
| 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 | Draw the unlit part of the disk instead of the lit part |
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> | drawScreenSpace | Use screen space coordinates |
context | CanvasRenderingContext2D | | <optional> | Canvas context to use |
- Source
(static) drawNineSlice(pos, size, startTile, coloropt, borderSizeopt, additiveColoropt, extraSpaceopt, angleopt, useWebGLopt, screenSpaceopt, contextopt)
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.
| 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> | 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> | 0 | Angle to rotate by |
useWebGL | boolean | <optional> | glEnable | Use WebGL for rendering |
screenSpace | boolean | <optional> | drawScreenSpace | Use screen space coordinates |
context | CanvasRenderingContext2D | | <optional> | Canvas context to use |
- Source
(static) drawNineSliceScreen(pos, size, startTile, coloropt, borderSizeopt, additiveColoropt, extraSpaceopt, angleopt, useWebGLopt, contextopt)
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
| 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) | ||
color | Color | | <optional> | WHITE | Color to modulate with; a number here is the borderSize of the order before 1.20, deprecated |
borderSize | number | <optional> | 32 | Rendered thickness of the border sections |
additiveColor | Color | <optional> | Additive color | |
extraSpace | number | <optional> | 2 | Extra spacing adjustment |
angle | number | <optional> | 0 | Angle to rotate by |
useWebGL | boolean | <optional> | false | Use WebGL for rendering |
context | CanvasRenderingContext2D | | <optional> | Canvas context to use |
- Source
(static) drawThreeSlice(pos, size, startTile, coloropt, borderSizeopt, additiveColoropt, extraSpaceopt, angleopt, useWebGLopt, screenSpaceopt, contextopt)
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.
| 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> | 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> | 0 | Angle to rotate by |
useWebGL | boolean | <optional> | glEnable | Use WebGL for rendering |
screenSpace | boolean | <optional> | drawScreenSpace | Use screen space coordinates |
context | CanvasRenderingContext2D | | <optional> | Canvas context to use |
- Source
(static) drawThreeSliceScreen(pos, size, startTile, coloropt, borderSizeopt, additiveColoropt, extraSpaceopt, angleopt, useWebGLopt, contextopt)
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
| 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) | ||
color | Color | | <optional> | WHITE | Color to modulate with; a number here is the borderSize of the order before 1.20, deprecated |
borderSize | number | <optional> | 32 | Rendered thickness of the border sections |
additiveColor | Color | <optional> | Additive color | |
extraSpace | number | <optional> | 2 | Extra spacing adjustment |
angle | number | <optional> | 0 | Angle to rotate by |
useWebGL | boolean | <optional> | false | Use WebGL for rendering |
context | CanvasRenderingContext2D | | <optional> | Canvas context to use |
- Source
(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
| 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 | The unlit part of the disk instead of the lit part |
sides | number | <optional> | glCircleSides | Number of sides for a full circle (halved per arc) |
- Source
- List of points making up the crescent
- Type:
- Array.<Vector2>