Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    78
    Thanks
    18
    Thanked 1 Time in 1 Post

    Map Editor Script?

    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.







    Last edited by Cliffo; 07-23-2011 at 12:53 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,159
    Thanks
    203
    Thanked 2,548 Times in 2,526 Posts
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,401
    Thanks
    11
    Thanked 595 Times in 575 Posts
    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?
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    Cliffo (07-24-2011)

  • #4
    New Coder
    Join Date
    Mar 2010
    Posts
    78
    Thanks
    18
    Thanked 1 Time in 1 Post
    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/

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,401
    Thanks
    11
    Thanked 595 Times in 575 Posts
    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...
    Last edited by rnd me; 07-24-2011 at 07:02 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    Cliffo (07-24-2011)

  • #6
    New Coder
    Join Date
    Mar 2010
    Posts
    78
    Thanks
    18
    Thanked 1 Time in 1 Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •