A Map Editor with HTML Canvas
Mon 2009-05-04 ( En pr )

Here’s another experiment with canvas: a simple map editor (click on the image).

You need Firefox, Opera, or Safari to see this; preferably one of the current beta versions (Safari 4 runs fastest, Firefox 3.5 is okay).

Notes:

  • The sprites are just for benchmarking. But they also look nice :)
  • The desert background tiles and sprites are generated randomly.
  • Everything is rendered with JavaScript.

This may be the beginning of a real-time strategy game or something.

Next ideas:

  • save and load maps (JSON format)
  • intelligent sprites (that don’t move on water, rocks)
  • ability to select and command sprites
    • pathfinding? I have no idea yet ^^
  • resources to gather for the sprites: gold, lumber, …
  • buildings: town center, storage, …
  • bitmap sprites
  • fighting sprites!

Say something! / Sag was!

I've been in the process of making my own map editor using <canvas> and this helped me a lot! I majorly looked it for how you processed clicks and changed them to x,y coords since every time I attempted to do so, if the page was magnified it screwed it up.

Good job!
Firstmate @ 04:15 on Tuesday, 2010-03-16

No markup, just plain monospace text. / Kein Markup, nur Normschrift-Klartext.