Map Editor Script?

[Cliffo]

I am looking to create a web script that allows you to create custom strategy maps for various game like battlefield. What I want is the users to select a map (probably an image map with some default icons on it) and then they can lay on custom icons (directional arrows, attack / defend icons, ect, ect) to show a battle plan and then save it as an image. I would assume an image map would be best for this, but I am not sure how users can input, remove, rotate and resize the icons if needed. Is there some sort of script like this I can build on? I only know the basics of javascript and php, but perhaps someone can point me to a guide of some sort? Here is an example of what I want the user to be able to create which I made in photoshop, though it can easily be made in a simple program like paint too.

[Philip M]

What you want is not possible using Javascript, which is purely a client-side language which cannot communicate with the server.


All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

[rnd me]

you need to use the canvas tag to do all that. canvas can rotate, reposition, stretch, etc, as well as export to jpeg or png.


i don't know of any pre-built tools for doing all this, but there are lots of tools, both native and library-based, that can be used for all the different sub-parts of your overall procedure.


the way i would do it would be to use the canvas to draw the bg, and offer drag-and-drop html elements as icons to drag over the bg. you can create onclik handlers for the draggables to let them assume different tasks like label, rotate, delete, etc. at the end, would then read the pixel position of each draggable (relative to the top-left of the canvas tag), and then one-by-one, draw() the icon of the draggable into the canvas. the last step is something like calling window.open(canvas.toDataURL('image/jpeg')) to grab your setup map as an image file.


@Philip M- what part of this requires a server? how do you do drag and drop on a server app?

[Cliffo]

Would jquery or ajax be a good option? If not, what about the one of the libraries from here? http://javascript.open-libraries.com...vas-libraries/

[rnd me]

jQuery can indeed make this easier, especially if xbrowser compat is at the top of your list.

specifically, it has good tools for grabbing lots of elements at once, getting the pixel pos of on-screen elements, adding click handlers, and offered drag and drop plug-in libraries.


often i'm fairly anti-jQuery, but that mostly because people put it an html document for one or two fx that could easily be hand-coded or done in css these days. For apps and game interface like the one described, jQuery is much less of a burden since the same page stays loaded for a long time, and so jQuery only has to load once. It's when it loads every time i click a new 5kb static page that it really drives me nuts...

[Cliffo]

I have been needing to dive in jquery for other reasons anyhow, so this should work out good. I agree completely, the only reason I have not used jquery yet is because I have only done basic things that can and should be done by hand.

I did a little messing around with http://raphaeljs.com/reference.html and I was able to select a map, and then select an icon and drop it into the center of the map, but I couldn't figure out how to select that icon and then manipulate it (move, rotate, stretch, ect)

I am a bit busy so I may put this off or pay someone else to do it, but it is great to know jquery can do it.