Gamemap: Canvas Experiment

Intro

Since I needed a map for my new working title prototype: General’s Map, I decided I would try out something with the HTML 5 canvas element.

Using the canvas element meant I would be using a lot of javascript. Animations would be so much easier, though I had my doubts about other parts. Okay, animations would be easier, but could it do the ‘normal stuff’?

I decided the best way to test it was to make it. So I began on a simple script . The first step was to render the tiles to the screen, that was very easy. The next step was to render other ‘objects’ on top of it, like cities etc, that was even easier.

But then, making the cities ‘clickable’? Nope, can’t do that. Well, it can be done, but it’s a real pain. Check out 4.8.14 on the canvas element information page.

So what did I learn?

1. I got to know the canvas element better
2. I practised my javascript
3. That, when creating a gamemap, you should stick to more ‘standard’ methods. The canvas element is a no-go.

I hope this information was useful to you. Here’s the basic script (where I render the tiles). It’s very small, but it might be useful to someone.

PS blogger doesn’t seem to have an attachments option?

// Edit

You can have clickable areas by creating an image map for a transparent image, you lay on top of the canvas. I’m sticking with the standard method, but if you’re interested in the canvas element you can give it a try.