Drawing a TileMap

draw

Syntax

method draw
param  {Number}   camLeft               Left Coordinate.
param  {Number}   camTop                Top Coordinate.
param  {Object}   [pg]                  Off-screen graphics buffer.

Information

draw() draws a TiledMap.

Layer Visible property is respected.

Layer Opacity is ignored.

Canvas (or the off-screen graphics buffer) IS NOT CLEARED BEFORE DRAWING.

Example

function draw() {
  tmap.draw(x, y);
}

An off-screen graphics buffer is optional but must be used if you need to control the Map position (or size) on Canvas.

function draw() {
  pg.clear();
  tmap.draw(0, 0, 0, pg);
  image(pg, 200, 200);
}

drawLayer

Syntax

method drawLayer
param  {Number}   layer                 Layer Index.
param  {Number}   camLeft               Left Coordinate.
param  {Number}   camTop                Top Coordinate.
param  {Object}   [pg]                  Off-screen graphics buffer.

Information

drawLayer() draws a TiledMap Layer.

Layer Visible property is ignored when drawing individual layers.

The use of a off-screen graphics buffer is optional. Can be used for extra image editing or if you want to use the layer opacity property (which is ignored when drawing to canvas) or to control the Layer position on Canvas.

Canvas (or the off-screen graphics buffer) IS NOT CLEARED BEFORE (that's up to you). That means you can draw several layers on a buffer, but the layer opacity will affect all layers drawn before.

Example

function preload() {
 tmap = loadTiledMap("desert", "data");
}

function setup() {
  createCanvas(800, 600);
  pg = createGraphics(800, 600);
}

function draw() {
  pg.clear();
  tmap.drawLayer(0, 0, 0, pg);
  image(pg, 0, 0);
}