render2dplugin

The PixiJS stage, its canvas and its camera.

#Putting it in a scene

With no world.render2d, actors draw on stage in canvas pixels. With it, render2d builds a world of named layers drawn through a camera, and things are placed in the world's own units.

"world": {
  "render2d": {
    "ground": [[32, 0], [0, 32]],
    "up": [0, -32],
    "zoom": 2,
    "look": [15, 8],
    "layers": ["ground", { "name": "things", "sort": true }],
    "fit": "integer",
    "background": "#101418"
  }
},
"plugins": ["loader", "scenemanager", "player", "tilemap", "render2d"]

#Properties

Read from world.render2d.

.ground : [[x, y], [x, y]]

Where one step along the world's x, and one along its y, goes on the stage, in pixels. [[1, 0], [0, 1]] is the stage itself, [[1, 0], [0, -1]] has y growing up the screen, and [[32, 16], [-32, 16]] is isometric with diamond cells 64 pixels across.

.up : [x, y]

Where one step of height goes on the stage, in pixels. A point [x, y, h] is drawn h steps of up from the ground point [x, y].

.zoom : number

Screen pixels per stage pixel. Any positive number, fractions included.

.look : number[]

The world point in the middle of the canvas.

.layers : (string | { name, sort?, parallax? })[]

The world's layers, bottom first. sort: true draws a layer's things in zIndex order; set it to depth(pos) and nearer things draw over farther ones whatever height either stands at. parallax: [fx, fy] is the factor the camera moves the layer by, [1, 1] if left out.

.fit : "window" | "integer" | "contain"

.background : "#rrggbb" | number

The colour the canvas is cleared to. Black if left out.

#Methods

On the page, through plugins.render2d. Everything except layer reads world.render2d, so ask in an actor's tick, not its setup.

layer( name ) : PIXI.Container

The container of a layer. Throws on a name layers doesn't list.

place( pos ) : [x, y]

The stage pixel of a world point [x, y] or [x, y, h]: x·ground[0] + y·ground[1] + h·up.

depth( pos ) : number

The stage y of the ground point under pos. The zIndex for a thing on a sort layer.

ground( ) : [[x, y], [x, y]]

A copy of ground. A size in world units is drawn scaled by it: a radius of r on [[w, 0], [0, h]] is r·w pixels across and r·h down.

project( pos ) : { x, y, behind }

The canvas pixel of a world point, from the top left, through the current camera. behind is always false.

unproject( x, y, h = 0 ) : [x, y, h]

The world point at height h under a canvas pixel. A click on the canvas finds the ground with it.

along( dir ) : [x, y]

The world direction, as a unit vector, that goes the way a screen direction goes. Holding up walks up the screen even on an isometric ground.

turns( heading ) : number

The direction on screen a world heading faces, in turns counter-clockwise from right.

look( point ) / zoom( z ) / camera( )

Move and zoom the camera, taking effect the same frame. camera() returns { look, zoom }.

parallax( name, fx, fy )

Sets how far a layer moves when the camera does: 1 with the world, 0 not at all, 0.5 half as far.

background( colour )

Sets the clear colour, a number 0xRRGGBB.

mosaic( size, names )

Draws the named layers in squares of size × size canvas pixels, each the colour of its top-left pixel. Layers not named stay sharp. A size of 1 turns it off.

#Properties of the plugin

Also on plugins.render2d.

PIXI

PixiJS. Draw with plugins.render2d.PIXI rather than importing it.

stage : PIXI.Container

The root container. The world is its first child.

world : PIXI.Container | undefined

Undefined without world.render2d, and until the first tick.

canvas, size, scale

size is the canvas in its own pixels, [width, height]. scale is the CSS pixels one canvas pixel covers, 1 without fit.

#Used by

• sprite2d
  Draws rows as sprite sheet frames in the world.
• tilemap
  Draws a tiled level, and needs a ground that matches its tiles.
• light2d
  Darkness and lights over the world.
• particle2d
  Effects in the world.
• pancamera
  Moves the camera with edge pan, keys and wheel zoom.
• roomcamera
  Moves the camera between rooms.

#In the editor

The game view shows the 2D stage: click to pick the row drawn topmost, a box around the selected row, and overlay marks through world points. The placer moves a row's pos as [x, y] or [x, y, h].

#In the guide