Integrating Unity with a web-based map editor

While I still feel a total noob when it comes to Unity, I've a fair bit of experience with web development and javascript. So I was in more familiar territory recently, making an online map editor, which allows users to select different tile and wall types, in a grid-like arrangement.

The editor itself is still pretty crude, but - like most of my own personal projects - it's functional enough to demonstrate how it would work.

Of course, with a bit of SteveMagic, it'll really look the biz, but for now it's simple enough. Select either the floor tile or wall type you want to place, and click into the HTML5 canvas area. Using some simple array sorting and some bitmap blitting, the map is redrawn each time a tile (or wall) is placed or removed.

Wherever you click on the canvas, a bit of javascript turns the mouse co-ordinates into a relative square number. If you're placing a tile, the currently selected tile is placed in (or removed from) the selected square.

If you're placing a wall, a bit more javascript looks at where within the square you clicked (top, bottom, left or right of centre) and places (or removes) a wall as necessary. When you're done, the whole array is written out as a string, ready to be delivered to our Unity app.

A bit of simple string splitting and a "instantiate" calls later, and our map is recreated from our flat HTML5 web page into our 3D game environment. All very exciting stuff. A bit boring and repetitive to give full code listing here (and if you really must, you can always "view source" on the map editor screen) but at last it feels like we're making progress with this whole "let's-put-the-game-into-a-3d-environment-we've-never-used-before" idea!