Quantcast
Channel: Library Questions - Processing 2.x and 3.x Forum
Viewing all articles
Browse latest Browse all 2896

Ptmx: How to draw overlayed maps (for vertical scrolling platform game)

$
0
0

This is my first question posting to the forum, though I have been working with Processing for a couple of years. I am now in the process of helping my son to learn object-oriented programming and Processing is the ideal starting point for him.

We have been working with "Tiled" Map Editor mapeditor.org for a simple vertical scrolling platform game. Below is an example of a tile map that my son created which has two tile layers "Background" and "Foreground" (the objects are not being used in the sketch at present):

https://www.flickr.com/photos/njl-photolog/27824867269

Unfortunately, when we try to draw the "Background" layer with the "Foreground" layer overlayed on top we just get the "Foreground" layer. It appears that empty tiles and transparent areas of other tiles are being painted as black which paints over the "Background" layer tiles:

https://www.flickr.com/photos/njl-photolog/39572556302

What we want to see happen is the "Foreground" layer overlay the "Background" and preserve the transparency. This way we can either move the "Background" together for the "Foreground" layer or at a different speed to create a parallax effect.

The code we are using is a modified version of the "MovingFree" example from the Ptmx library. I haven't posted the additional files (TMX, TSX and PNGs) needed to run this sketch -- it would make a very long post, but I will email a zip file of the whole thing if necessary to anyone.

The sketch code we are using is here:

// Example of using "Tiled" generated maps
// Modified from the PTMX library's example "MovingFree"

import ptmx.*;

final int tileSize = 70;

Ptmx map;
PImage smiley;
int xMapOffset = 7 * tileSize;
int xMapPosition, yMapPosition;
int xMovement = tileSize;

boolean flagLeft, flagRight, flagUp, flagDown; // Arrow direction keys that are being pressed

// Layer IDs are hard-wired for now.
// Note: It would be great to have an accessor method, like getName(i), to retrieve a layer's text name ;-)
int idForegroundLayer = 1;
int idBackgroundLayer = 0;

void setup() {
  // Long way round to set window size using variables. ;-)
  int dw = 15 * tileSize;
  int dh = 10 * tileSize;
  size(600, 400);
  frameRate(10);
  surface.setResizable(true);
  surface.setSize(dw, dh);

  smiley = loadImage("assets/smiley.png");

  map = new Ptmx(this, "Level_Two.tmx");
  map.setDrawMode(CORNERS);
  map.setPositionMode("CANVAS"); // Default Position Mode

  // Starting position for a vertical scrolling platform
  xMapPosition = 0;
  yMapPosition = 0;
  imageMode(CORNERS); // x,y refer to the upper-left corner
}

void draw() {
  int xSprite = width / 2;
  int ySprite = 8 * tileSize;
  String textDir = "";
  int tileNum;

  // In "Level_Two.tmx" the Map Properties->Background Color is set to 120,219,231 "Shade of cyan",
  // but empty tiles are painted as black squares so no cyan background appears
  background(map.getBackgroundColor());

  // Tiles in the foreground layer paint (with black) over tiles in the background!
  map.draw(idBackgroundLayer, xMapPosition, yMapPosition);
  map.draw(idForegroundLayer, xMapPosition, yMapPosition);

  image(smiley, xSprite, ySprite); // Draw player's sprite image

  int prevX = xMapPosition;
  int prevY = yMapPosition;

  if (flagLeft)  { xMapPosition -= xMovement; textDir += "<"; }
  if (flagRight) { xMapPosition += xMovement; textDir += ">"; }

  // Retrieve tile number that we are over in the foreground layer
  tileNum = map.getTileIndex(idForegroundLayer, int((xMapPosition + xSprite) / tileSize), int((yMapPosition + ySprite) / tileSize));

  // Show on-screen diagnostic information
  textSize(18);
  fill(200);
  text("Move (almost) free. Map x,y = " + xMapPosition + "," + yMapPosition +
      " Sprite x,y = " + xSprite + "," + ySprite + " tile = " + tileNum + " dir: " + textDir, 10, 50);
}


void keyPressed(){
  if (keyCode == LEFT) flagLeft = true;
  if (keyCode == RIGHT) flagRight = true;
}

void keyReleased(){
  if (keyCode == LEFT) flagLeft = false;
  if (keyCode == RIGHT) flagRight = false;
}

FYI: I have contacted the author of the Ptmx library (linux-man) prior to posting this question, but I wanted to post our question and examples on the forum so other to could see it too.


Viewing all articles
Browse latest Browse all 2896

Trending Articles