tilemap.js

import * as p from 'pixi.js'

const DEFAULT_TILE_WIDTH = 48
const DEFAULT_TILE_HEIGHT = 48
const DEFAULT_MAP_DIMENSIONS = 16
/**
 * Bootstrap the application
 */
const application = new p.Application(
  window.innerWidth,
  window.innerWidth,
  {
    backgroundColor : 0x303539
  }
)

document
  .getElementById('viewport')
  .appendChild(application.view)

/**
 * Create a map for our agent to navigate through
 **
 * 0: grass/empty tile
 * 1: wall/blocked tile
 * 2: agent
 * 3: goal
 */
const mapData = [
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 3, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 2, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
]

/**
 * Render the tilemap
 */
const mapContainer = new p.Container()

for (let xi = 0; xi < DEFAULT_MAP_DIMENSIONS; xi++) {
  for (let yi = 0; yi < DEFAULT_MAP_DIMENSIONS; yi++) {
    let tileData = mapData[xi][yi]
    let sprite = new p.Sprite(p.Texture.fromImage(`/assets/graphics/${tileData}.png`))

    sprite.anchor.set(0.5)
    sprite.x = (xi % DEFAULT_MAP_DIMENSIONS) * 48
    sprite.y = Math.floor(yi / DEFAULT_MAP_DIMENSIONS) * 48

    mapContainer.addChild(sprite)
  }
}

mapContainer.x = (application.renderer.width - mapContainer.width)
mapContainer.y = (application.renderer.height - mapContainer.height)

application.stage.addChild(mapContainer)