let mainAtlas;

let collisionAtlas;

let tileMapData;

let dataImg;

let canvasW = 400;

let canvasH = 400;

let viewportW = canvasW;

let viewportH = canvasH;

​

let cameraX = 0;

let cameraY = 0;

let cameraMovementSpeed = 10;

​

let M = 32;

​

let layerTileIndexImages = [];

let renderTarget;

let layerIndex = 0;

let printStuff = false;

​

​

function preload()

{

  tileMapShader = loadShader("basic.vert", "TileMap.frag");

  mainAtlas = loadImage("Atlas.png");

  collisionAtlas = loadImage("CollisionTiles.png");

  tileMapData = loadJSON("TileMapData.json");

}

​

​

function setup()

{

  createCanvas(canvasW, canvasH);

  renderTarget = createGraphics(viewportW, viewportH, WEBGL);

  BuildWorld();

}

​

​

function draw()

{

  let dt = Dt();

  background(220, 20, 200);

  UpdateCamera(dt);

  DrawLayers();

}

​

​

function keyPressed()

{

  switch (keyCode)

  {

  // case 32:  // spacebar

  //   let layerImg = layerTileIndexImages[layerIndex];

  //   layerImg.loadPixels();

  //   print(layerImg.pixels);

  //   layerImg.updatePixels();

  //   break;

  case 221:  // ]

    ++layerIndex;

    if (layerIndex >= layerTileIndexImages.length)

      layerIndex = 0;

    break;

  case 219:  // [

    --layerIndex;

    if (layerIndex < 0)

      layerIndex = layerTileIndexImages.length - 1;

    break;

  case 80:  // P

    printStuff = true;

    break;

  }

}

​

​

function BuildWorld()

{

  tileW = tileMapData.tilewidth;

  tileH = tileMapData.tileheight;

  layerCols = tileMapData.width;

  layerRows = tileMapData.height;

  mainAtlasW = tileMapData.tilesets[0]

  for (const layerObject of tileMapData.layers)

    BuildLayerTileIndexImage(layerObject);

}

​

​

function BuildLayerTileIndexImage(layerObject)

{

  let layerTileIndexImage = createImage(layerObject.width, layerObject.height);

  layerTileIndexImage.loadPixels();

  let pixels = layerTileIndexImage.pixels;

  // Remember, when you read an empty tile, write a pixel

  //   that the shader will interpret as a sentinel value

  let indexArray = layerObject.data;

  for (let i = 0; i < indexArray.length; ++i)

  {

    let index = indexArray[i] - 1;

    let r, g, b, a;

    if (index <= 0)

    {

      r = 255;

      g = 255;

      b = 0;

      a = 255;

    }

    else

    {

      r = (index >> 16) & 255;

      g = (index >> 8) & 255;

      b = index & 255;

      a = 255;

    }

    let p = i * 4;

    pixels[p + 0] = r;

    pixels[p + 1] = g;

    pixels[p + 2] = b;

    pixels[p + 3] = a;

  }

  layerTileIndexImage.updatePixels();

  layerTileIndexImages.push(layerTileIndexImage);

}

​

​

function UpdateCamera(dt)

{

  let dp = createVector();

  if (keyIsDown(RIGHT_ARROW))

    dp.x += 1;

  if (keyIsDown(LEFT_ARROW))

    dp.x -= 1;

  if (keyIsDown(DOWN_ARROW))

    dp.y += 1;

  if (keyIsDown(UP_ARROW))

    dp.y -= 1;

  dp.normalize();

  cameraX += dp.x * cameraMovementSpeed * dt * M;

  cameraY += dp.y * cameraMovementSpeed * dt * M;

}

​

​

function DrawLayers()

{

  for (let i = 0; i < layerTileIndexImages.length - 1; ++i)

  {

    // if (i !== layerIndex) continue;

    let atlas = mainAtlas;

    let tileset = tileMapData.tilesets[0];

    if (i === layerTileIndexImages.length - 1)

    {

      atlas = collisionAtlas;

      tileset = tileMapData.tilesets[1];

    }

    let layerTileIndexImage = layerTileIndexImages[i];

    let layerObject = tileMapData.layers[i];

    DrawLayer(atlas, layerTileIndexImage, layerObject, tileset);

  }

}

​

​

function DrawLayer(atlas, layerTileIndexImage, layerObject, tileset)

{

  let roundedCameraX = round(cameraX);

  let roundedCameraY = round(cameraY);

  let tileW = tileset.tilewidth;

  let tileH = tileset.tileheight;

  let atlasCols = tileset.columns;

  let layerCols = layerObject.width;

  let layerRows = layerObject.height;

  renderTarget.shader(tileMapShader);

  tileMapShader.setUniform("uAtlas", atlas);

  tileMapShader.setUniform("uTileIndices", layerTileIndexImage);

  tileMapShader.setUniform("uPixelsPerTile", [tileW, tileH]);

  tileMapShader.setUniform("uTilesPerLayer", [layerCols, layerRows]);

  tileMapShader.setUniform("uAtlasCols", atlasCols);

  tileMapShader.setUniform("uAtlasSize", [atlas.width, atlas.height]);

  tileMapShader.setUniform("uCameraPos", [roundedCameraX, roundedCameraY]);

  tileMapShader.setUniform("uViewportSize", [viewportW, viewportH]);

  renderTarget.rect(0, 0, 0, 0);

  image(renderTarget, 0, 0);

  if (printStuff)

  {

    printStuff = false;

    // print(atlas);

    layerTileIndexImage.loadPixels();

    print(layerTileIndexImage);

    layerTileIndexImage.updatePixels();

    // print(layerObject);

    // print(tileset);

  }

}

​

​

function Dt() { return deltaTime / 1000; }

​