So I finally got around to buying Monument Valley and playing through it (and the extra level pack, “Forgotten Shores”) and I have to say I’m really enamoured with it. I’ve always loved weird perspective-distorting images (I had a book of Escher engravings as a kid that I studied obsessively) and I found the game itself totally charming. Also, why has nobody had this idea before? It’s genius. Actually, perhaps somebody has had this idea before. In which case, why haven’t I heard of them?

For those not in the know: Monument valley is a game for mobile devices where you navigate Ida, the princess, through Escher-like impossible constructions and beautiful architecture. It’s available for iOS and Android and costs 4 dollars. This is the game’s website.

A couple days ago I posted a little level editor that I made using Javascript and the <canvas> tag. Today I’m going to discuss how I did that. I’m basically discussing my learning experience here. I’m not really sure who is going to find this useful, to be honest, but I’m going for it anyway.

So first we obviously have to set up our canvas. I decided to make mine 256x256 pixels, and divide it into eight tiles per side. This makes the tiles 32x32 pixels.

<canvas width="256" height="256" id="can">you don't support canvas</canvas>

This creates a blank 256x256 canvas with a transparent background whose ID is “can.” The text inside the tag is what shows up to people whose browsers don’t support the tag.

Recently, I’ve been trying to get away from using Flash to make games. It seems like a relic from a bygone era. As such, I probably need to start learning to write games in HTML5 or something. Today, I’m messing around with the <canvas> tag.

But unfortunately you aren’t using a browser that supports the canvas tag. That’s too bad.

It's a little level editor, implemented in 44 lines of Javascript. (And it could be less if I shrunk it down.) Granted, I used jQuery for some of it, and it doesn't do very much, but I doubt I could have done much better in Flash. And, unlike Flash, this thing has the advantage of being cross-platform. So I think this is pretty nice.

You select which thing you want to place using the buttons at the bottom, then click on the image to place that tile in that place. If you want to save your level for some reason, you can right-click on the canvas element and hit 'save image.'

I may discuss later how I built this. I will also make some more weird canvas experiments. Wish me luck!

Hello, this is my new website design! The old design was showing its age — it has been around for quite a few years now and never quite satisfied. This site now uses an actual CSS framework (Bootstrap) so it looks a lot prettier. I still have to put up some of the old pages, because the site is pretty much empty now. However, I now have this handy static-site-generator blog thing. I’ll try to keep this updated, although I think we all know how that always goes.

Well, check back in a bit for some more interesting stuff!