Monday, December 24, 2012

Map Editor updates

Last two weeks I've spent quite some time on improving the map editor. Some noteworthy improvements from the last two weeks:

  • I've swapped out KineticJS to use FabricJS instead. FabricJS turned out a little harder to integrate than Kinetic, but it's giving me some real advantages:
    • Export to SVG - you can export your complete maps to SVG now
    • Built-in selection support - I will exploit this further in the future
    • Nicer positioning (items are positioned by center rather than top left corner) - this made it a lot easier for me to implement displaying room names on the map, for example
  • Performance has been drastically improved. Zooming, changing perspective, all are now fine, even with 10,000+ rooms. Only the initial loading may still be slow.
  • Support for Areas. You can easily choose which areas are visible and which are not. Especially useful with areas that (partially) overlap.
  • Z-level filtering. Designing a skyscraper or a cave with multiple floors? Using z-level filtering you can filter out anything not on the current floor so you regain oversight.


  1. Looking good Arend!

    At this point how modular is the map editor?

  2. Thanks!

    The map editor is quite modular. The code has been split into a model and a view and the property editor and portal editor are also separate modules. I'm using require.js to separate the modules.

    That said, I'm only developing features in combination with the PlainText engine, and of course the model is tied to the server-side PlainText model. If you want to reuse some code and have patches to make things even more generic, I would happily accept those!