DFMA Map Viewer

Drag and Drop an FDF-MAP file to open.

Extracted Tiles from:

---

Controls:

• Move Map
  • Click and Drag
  • Use the 8642 keys to move one tile at a time.
  • Hold the z key to move by 10 tiles at a time
    (Shift doesn't work due to the DOM wanting to scroll the entire window when holding shift)
• Zoom
  • Zoom out: -
  • Zoom in: + or =
• Change Layer
  • Up: < or ,
  • Down: > or .

---

About:

This viewer was created using P5.js. The parser for the FDF-MAP files is written in pure ES6 javascript.

View Code

---

Changelog

• TODO
  • Side / Front View (as in flash version)
  • UI Controls (Mostly for mobile)
  • Repeating input when holding down movement keys (utilize acceleration so it doesn't happen instantly and slowly speeds up.)
• 29 May 2020
  • Implemented an internal "ZoomTo" function. The function takes the following parameters:
    • layer - layer to zoom to (i.e. layer 76)
    • scale - zoom level (same as page zoom level)
    • xTile - x Coordinate of tile to zoom to (Starts at 0)
    • yTile - y Coordinate of tile to zoom to (starts at 0)
    If an invalid layer is given, nothing happens.
  • Added keyboard only movement. The numpad 8,6,4,2 keys will move one tile at a time. And holding the z key will make the movement with the numpad move by 10 each press.
• 4 May 2020
  • Fixed small hang when initially loading map. (Entire DOM was freezing when parsing individual layers.)
    • Javascript Promises were used to make this async so that DOM updates could occur.
• 1 May 2020
  • Fixed slow parsing. Manually manipulated each color channel (RGBA) of the image. MUCH faster.
  • Contacted Markavian with initial product.
• 30 April 2020
  • Implemented map parsing fully.
  • Smooth zooming
  • Parsing is SUPER SLOW! Most likely due to using P5.Image's 'set' function.
• 29 April 2020
  • Initial Commit.
  • Basic Tile Viewing. (This version just gets a map and displays its tiles.)

---