Moving Around

setPositionMode

Syntax

method setPositionMode
param  {String}   mode                 "CANVAS" or "MAP".

Position

Information

Define the meaning of draw and drawLayer coordinates.

By default, the coordinates are read as pixel position. but with setPositionMode("MAP"), they become Tiles Coordinates.

Example

var tmap, x, y;

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

function setup() {
  createCanvas(800, 600);
  textSize(24);
  x = 0;
  y = 0;
}

function draw() {
  background(128);
  tmap.draw(x, y);
  text("Map Coordinates (wasd): " + x + ", " + y, 10, 50);
  text("Position Mode (c/m): " + tmap.getPositionMode(), 10, 100);

  if (keyIsPressed) {
    if(key == 'a' || key == 'A') x -= 1;
    if(key == 'd' || key == 'D') x += 1;
    if(key == 'w' || key == 'W') y -= 1;
    if(key == 's' || key == 'S') y += 1;
  }
}

function keyPressed(){
  if(key == 'c' || key == 'C') {
	tmap.setPositionMode("CANVAS");
	x = 0;
	y = 0;
  }
  if(key == 'm' || key == 'M') {
	tmap.setPositionMode("MAP");
	x = 0;
	y = 0;
  }
}

setDrawMode

Syntax

method setDrawMode
param  {Constant} mode                 CORNER or CENTER.

Information

Define the meaning of draw and drawLayer coordinates. By default, they are camLeft and camTop - the left/top coordinates of the camera, but with setDrawMode(CENTER), they become the coordinates of the camera center.

Example

var tmap, x, y;

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

function setup() {
  createCanvas(800, 600);
  textSize(24);
  x = 0;
  y = 0;
}

function draw() {
  background(128);
  tmap.draw(x, y);
  text("Map Coordinates (wasd): " + x + ", " + y, 10, 50);
  text("Draw Mode (o/e): " + tmap.getDrawMode(), 10, 100);

  if (keyIsPressed) {
    if(key == 'a' || key == 'A') x -= 1;
    if(key == 'd' || key == 'D') x += 1;
    if(key == 'w' || key == 'W') y -= 1;
    if(key == 's' || key == 'S') y += 1;
  }
}

function keyPressed(){
  if(key == 'o' || key == 'O') tmap.setDrawMode(CORNER);
  if(key == 'e' || key == 'E') tmap.setDrawMode(CENTER);
}

getPositionMode

Syntax

method getPositionMode
return {String}   mode                 "CANVAS" or "MAP". Default: "CANVAS".

getDrawMode

Syntax

method getDrawMode
return {Constant} mode                 CORNER or CENTER. Default: CORNER.

getCamCorner

Syntax

method getCamCorner
return {p5.Vector}                     Left Top Corner Coordinates

getCamCenter

Syntax

method getCamCenter
return {p5.Vector}                     Left Top Corner Coordinates

getCamSize

Syntax

method getCamSize
return {p5.Vector}                     Camera (last used Canvas) Width and Height

Information

Always return width and height in pixels

getPosition

Syntax

method getPosition
return {p5.Vector}

Information

Depending on drawMode, returns the camera corner or center coordinates.

Depending on positionMode, returns the Map or Canvas coordinates.

Essentially, you get the coordinates of last draw.

Example

var tmap, x, y;

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

function setup() {
  createCanvas(800, 600);
  tmap.setPositionMode("MAP");
  textSize(24);
  x = 0;
  y = 0;
}

function draw() {
  background(128);
  tmap.draw(x, y);
  text("Map Coordinates (wasd): " + x + ", " + y, 10, 50);
  text("Position Mode (c/m): " + tmap.getPositionMode(), 10, 100);
  text("Draw Mode (o/e): " + tmap.getDrawMode(), 10, 150);
  text("Position: " + tmap.getPosition().x + ", " + tmap.getPosition().y, 10, 200);
  text("Cam Corner: " + tmap.getCamCorner().x + ", " + tmap.getCamCorner().y, 10, 250);
  text("Cam Center: " + tmap.getCamCenter().x + ", " + tmap.getCamCenter().y, 10, 300);
  text("Cam Size: " + tmap.getCamSize().x + ", " + tmap.getCamSize().y, 10, 350);

  if (keyIsPressed) {
    if(key == 'a' || key == 'A') x -= 1;
    if(key == 'd' || key == 'D') x += 1;
    if(key == 'w' || key == 'W') y -= 1;
    if(key == 's' || key == 'S') y += 1;
  }
}

function keyPressed(){
  if(key == 'c' || key == 'C') {
	tmap.setPositionMode("CANVAS");
	x = 0;
	y = 0;
  }
  if(key == 'm' || key == 'M') {
	tmap.setPositionMode("MAP");
	x = 0;
	y = 0;
  }
  if(key == 'o' || key == 'O') tmap.setDrawMode(CORNER);
  if(key == 'e' || key == 'E') tmap.setDrawMode(CENTER);
}

You can notice that the map shifts when changing positionMode. That's because on MAP mode (0, 0) is the center of (0, 0) tile. On CANVAS mode (0, 0) is the left top pixel of (0, 0) tile