JavaScript level editor – first attempt

I invested a little time knocking up a (very crude) level editor. I wasn’t going to share it since it is so crude. But I’m a sucker for criticism ;)

You can find it here:

With this code I’ve ditched the idea of having a separate collision mask. For now.
Using my own example of a 16×16 tree casting a shadow across a 32×32 tile graphic and the player sprite therefore potentially colliding with the shadow when the tree is the only physical obstruction – I have opted to either draw the graphics as 4 separate tiles or simply ditch the support for such an elaborate feature.

If you highlight one of my simple tiles and click “set as floor” you can quickly get a feel for how you level will look.
Then click to select a tile to paint with, ensure that the mode is set as Brush and click away. I don’t currently support dragging the mouse around the level with the button down.

For each tile you can set two parameters just now. CanPass and Damage.

Finally when you’ve finished click the “generate level data” button to output the JSON structure to the textarea bottom right.

There are no game entities just now just obstructions. That comes next.

Interested in feedback and suggestions.

Post a comment or leave a trackback: Trackback URL.


  • Jani Hartikainen  On October 22, 2010 at 8:02 pm

    Looks nice, reminds me a bit of editors in some old top-down shooters like Ultimate Tapan Kaikki (finnish, means something like “Ultimate I will kill everyone”, creative don’t you think?)

    It would be good if the size of the highlighted area changed for those larger tiles.

  • Cody  On October 26, 2010 at 7:59 pm

    Nice work, Mark. Though I’ve not been visibly active in my own game design project for over a year, I’ve been visiting this site every month.

    About the shadow feature that you wanted to implement, could you not generate the shadows after everything is laid out independent of any collision map and such? I’ve just started using the canvas element, but I wonder about things like creating multiple canvas elements in layers (different z-indexes) and manipulating them independently from one another. However, I might not be understanding the situation enough.

  • markw1970  On October 30, 2010 at 2:43 pm

    Jani, thanks for the tip. I’ll definitely implement that.
    Cody, nice to hear from you again. I too have wondered about z-indexing. It seems to be based on the order in which you draw to the Canvas.
    i.e. If you draw the player character first and monster second, the monster will overlap the player.
    I’m sure there’s ways to control it. It’s certainly very exciting discovering a whole new technology in familiar surroundings :-)

  • Andrew Greatorex  On October 29, 2011 at 5:17 pm

    Hi, I’m working on a HTML5 game and wondered if you minded me taking your level editor, tweaking it and using on my site. Of course I will mention you and your blog once I release. Let me know –!/andrewgreatorex Thanks Andy

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: