LittleJS Tile Layer System
- Renders large tile-based levels efficiently using cached canvases
- Unlimited tile layers with automatic canvas allocation
- Layers support both rendering and collision detection
- Direct canvas2d drawing access for custom tile rendering
- TileLayer for rendering, TileCollisionLayer for physics
- Collision callbacks for tile interactions with objects
- Optimized raycast support for tile-based physics
- Integration with Box2D physics via Box2DTileLayer plugin
- Source
Classes
Members
(static, constant) tileCollisionLayers :Array.<TileCollisionLayer>
Keep track of all tile layers with collision
- Array.<TileCollisionLayer>
- Source
Methods
(static) objectLayersAddType(name, make, defaultsopt, tileInfoopt)
Add a type of object, so objectLayersLoad makes one wherever a map's object layer has an object of that type
- The name is the object's type in Tiled (its class in Tiled 1.9); it is a string because minified builds rename classes
- A class, or any function with a prototype, is made with new make(pos); an arrow function is called as make(pos), for what is not an object, like a player start
- The defaults, and then the properties the object has in Tiled, are set on what it made
- Adding a name again replaces it
| Name | Type | Attributes | Description |
|---|---|---|---|
name | string | The type the objects have in Tiled | |
make | function | A class made at each object's position, or a function called with it | |
defaults | Object | <optional> | Properties set on each one made, the level editor shows inputs for them |
tileInfo | TileInfo | <optional> | An icon for the level editor |
- Source
objectLayersAddType('Coin', Coin, {value: 1}, tile(5, 16));
objectLayersAddType('PlayerStart', (pos)=> playerStartPos = pos);(static) objectLayersLoad(tileMapData) → {Array.<any>}
Make the objects in a map's object layers, each from the type added for its name with objectLayersAddType
- An object is made at its position, the world y up as tileLayersLoad places the layers; layer offsets are not read, and a shape or tile object is made at its position too
- Group layers are flattened in order, as tileLayersLoad does
- The object's properties in Tiled are set over the type's defaults: numbers, booleans, strings, and colors, and for a Vector2 default the string x,y
- An object whose type was not added is skipped, with a warning in debug builds
| Name | Type | Description |
|---|---|---|
tileMapData | Object | The same Tiled map given to tileLayersLoad |
- Source
- What each object's type made, a function that made nothing is left out
- Type:
- Array.<any>
(static) tileCollisionGetData(pos, solidOnlyopt) → {number}
Get tile collision data for a given cell in the grid
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
pos | Vector2 | |||
solidOnly | boolean | <optional> | true | Only check solid layers? |
- Source
- Type:
- number
(static) tileCollisionRaycast(posStart, posEnd, callbackObjectopt, normalopt, solidOnlyopt) → {Vector2|undefined}
Return the exact position of the boundary of first tile hit, undefined if nothing was hit. The point will be inside the colliding tile if it hits
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
posStart | Vector2 | |||
posEnd | Vector2 | |||
callbackObject | EngineObject | | <optional> | Callback, engine object, or undefined | |
normal | Vector2 | <optional> | Optional normal of the surface hit | |
solidOnly | boolean | <optional> | true | Only check solid layers? |
- Source
- where the ray meets the first tile hit, nudged just inside it, or undefined if no hit
- Type:
- Vector2 |
undefined
(static) tileCollisionTest(pos, sizeopt, callbackObjectopt, solidOnlyopt) → {TileCollisionLayer|undefined}
Check if a tile layer collides with another object
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
pos | Vector2 | |||
size | Vector2 | <optional> | vec2() | |
callbackObject | EngineObject | | <optional> | Callback, engine object, or undefined | |
solidOnly | boolean | <optional> | true | Only check solid layers? |
- Source
- Type:
- TileCollisionLayer |
undefined
(static) tileLayersLoad(tileMapData, tileInfoopt, renderOrderopt, collisionLayeropt, drawopt) → {Array.<TileCollisionLayer>}
Load tile layers from exported data
- Tiled maps come in as they are, flipped and turned tiles included, from one tileset image (a second tileset's tiles continue its numbering), finite maps in the CSV or array layer format; layer offsets and parallax are not read
- Group layers are flattened in order, each replaced by the layers inside it, so the layer indices (collisionLayer and the returned array) count that flattened list; a group's tint, opacity and visibility carry to the layers inside it
- An object or image layer keeps its index, with its slot in the returned array left empty
- A hidden layer (visible false) is loaded, its collision included, but not drawn; its render is a no-op, delete that and call redraw() to show it
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
tileMapData | Object | Level data from exported data | ||
tileInfo | TileInfo | <optional> | Default tile info (used for size and texture), tile() by default, none when no image is loaded | |
renderOrder | number | <optional> | 0 | Render order of the top layer |
collisionLayer | number | <optional> | Layer to use for collision if any | |
draw | boolean | <optional> | true | Should the layer be drawn automatically |
- Source
- Type:
- Array.<TileCollisionLayer>
Type Definitions
TileCollisionCallback(tileData, pos) → {boolean}
| Name | Type | Description |
|---|---|---|
tileData | number | the value of the tile at the position |
pos | Vector2 | world space position of tile where the collision occurred |
- Source
- true for a hit; a callback that returns nothing lets everything through
- Type:
- boolean