LittleJS 1.28.0

TileLayers

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 the Box2dTileLayer plugin

Classes

Functions

Constants

Typedefs

Functions

objectLayersAddType(name, make, defaults, tileInfo)engineTileLayer.js:521

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 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<string, any> optional

Properties set on each one made, the level editor shows inputs for them

tileInfo TileInfo optional

An icon for the level editor

objectLayersAddType('Coin', Coin, {value: 1}, tile(5, 16));
objectLayersAddType('PlayerStart', (pos)=> playerStartPos = pos);
objectLayersLoad(tileMapData) → Array<any>engineTileLayer.js:539

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
tileMapData TiledMap

The same Tiled map given to tileLayersLoad

Returns
  • What each object's type made, a function that made nothing is left out
tileCollisionGetData(pos, solidOnly) → numberengineTileLayer.js:116

Get tile collision data for a given cell in the grid

pos Vector2
solidOnly boolean optional, default true

Only check solid layers?

tileCollisionRaycast(posStart, posEnd, callbackObject, normal, solidOnly) → Vector2|undefinedengineTileLayer.js:170

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

posStart Vector2
posEnd Vector2
callbackObject EngineObject|TileCollisionCallback optional

Callback, engine object, or undefined

normal Vector2 optional

Optional normal of the surface hit

solidOnly boolean optional, default true

Only check solid layers?

Returns
  • where the ray meets the first tile hit, nudged just inside it, or undefined if no hit
tileCollisionTest(pos, size, callbackObject, solidOnly) → TileCollisionLayer|undefinedengineTileLayer.js:143

Check if a tile layer collides with another object

pos Vector2
size Vector2 optional, default vec2()
callbackObject EngineObject|TileCollisionCallback optional

Callback, engine object, or undefined

solidOnly boolean optional, default true

Only check solid layers?

tileLayersFromLDtk(ldtk, level) → TiledMapengineTileLayer.js:390

Make a Tiled map of a level of an LDtk project, to load with tileLayersLoad and objectLayersLoad

  • Each Tiles, AutoLayer and IntGrid layer is a tile layer, the bottom one first as in Tiled; where LDtk stacks tiles in a cell, an edge over a fill, each tile over another goes in a layer of its own just above, named with (2), (3) and so on, and a tile LDtk draws see-through goes in one of its own with that opacity, times the layer's, named with it, like Ground .25
  • An IntGrid layer is a hidden layer of its values under its own name, for collision, whatever tiles its rules make, which are layers over it named with tiles, like Collisions tiles; pass the name as collisionLayer, since the stacked and see-through layers change the indices from level to level: tileLayersLoad(map, tile(0, 16), 0, 'Collisions')
  • An Entities layer is an object layer: an entity's name is its type for objectLayersAddType, it is placed at its middle, and its Int, Float, Bool, String, Color and FilePath fields are its properties (an enum is a string)
  • The tileset is the first tile layer's, with its padding and spacing; give tileLayersLoad a tile info of its image
  • The level is in the project file (not saved as separate level files), its layers of one grid size; a layer of another grid size or another tileset is left out, with a warning in debug builds, and a project with no tileset keeps its tiles for the tile info the game gives; a project of several worlds has its levels counted in order
  • Layer offsets are not read
  • The level editor edits the map this returns, and saves it as a Tiled map
ldtk Object

The LDtk project, its JSON

level number|string optional, default 0

Which level, by its index or its identifier

Returns
  • A Tiled map: width, height, tilewidth, tileheight, tilesets and layers
const map = tileLayersFromLDtk(await fetchJSON('world.ldtk'), 'Level_0');
const layers = tileLayersLoad(map, tile(0, 16), 0, 'Collisions'); // its IntGrid layer is solid
objectLayersLoad(map);
tileLayersLoad(tileMapData, tileInfo, renderOrder, collisionLayer, draw) → Array<TileCollisionLayer>engineTileLayer.js:236

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
  • A tileset kept in the map with a margin or a spacing, a sheet with gaps between its tiles, is read where its tiles are, whatever padding the tile info has; one in a file of its own (a tsx) is not read, pass a tile info with its padding
  • An LDtk level loads through tileLayersFromLDtk, which makes it a map like these
  • 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
tileMapData TiledMap optional

Level data from exported data, a 50 by 50 empty level when left out

tileInfo TileInfo optional

Default tile info (used for size and texture), tile() by default, none when no image is loaded

renderOrder number optional, default 0

Render order of the top layer

collisionLayer number|string optional

Layer to use for collision if any, by its index or its name

draw boolean optional, default true

Should the layer be drawn automatically

Returns
  • It throws for a map that is not whole cells, or a layer whose tiles do not fill it, before it makes any layer

Constants

tileCollisionLayers : Array<TileCollisionLayer>engineTileLayer.js:44

Keep track of all tile layers with collision

tileLayersLoad.layers : Array<{dataLayer: Object, color?: Color, visible?: boolean}>engineTileLayer.js:272

Typedefs

TileCollisionCallback(tileData, pos) → booleanengineTileLayer.js:153
tileData number

the value of the tile at the position

pos Vector2

world space position of tile where the collision occurred

Returns
  • true for a hit; a callback that returns nothing lets everything through
TiledMap : ObjectengineTileLayer.js:19

A Tiled map as Tiled saves it as JSON, what tileLayersLoad and objectLayersLoad take and tileLayersFromLDtk makes; the fields read are listed, and the rest of the file is kept as it is

width number

Cells across

height number

Cells up

tilewidth number optional

A tile's width in pixels

tileheight number optional

A tile's height in pixels

layers Array<Object>

Tile layers, object layers and groups of them, bottom first

tilesets Array<Object> optional

The first one's margin, spacing and columns are read

nextlayerid number optional
nextobjectid number optional
orientation string optional
renderorder string optional
infinite boolean optional
type string optional
version string|number optional

A number in files from Tiled before 1.6

tiledversion string optional
compressionlevel number optional
backgroundcolor string optional
properties Array<Object> optional