›

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Register

Categories

Macro Mini-map to go..

Dazakiwi38Dazakiwi38
in Workshop
I just want to share something cool that I came across on the old twine forums, someone came up with a script to have a minimap of a large image in the sidebar, when the player visits certain locations it updates the minimap.
There is a link to the game it was used for in the thread itself...
https://groups.google.com/forum/#!msg/tweecode/lA4bIX3iegg/k7trCW6v53kJ

Anyway Leon refined the script, because the original required a jquery file.  However at that time i think it was untested and he recently helped me get it working properly by updating the script. So thanks for that Leon!
I only use sugarcane at the moment, so not sure if it would need to be modified for other story formats?

Stylesheet:

#sidebar {
top: 240px;
}
#map {
position:fixed;

left: 20px;
top: 20px;
width: 200px;
height: 200px;
overflow: hidden;
}
#map img {
position: absolute;
left: 0px;
top: 0px;

transition: all 2s;
-webkit-transition: all 2s;
}
Script:
macros['map'] =
{
handler: function(place,macroName,params)
{
var a = $("map").firstChild.style;
a.left=-params[0]+"px"; a.top=-params[1]+"px";
}
};
var li = document.createElement("li");
li.id = "map";
li.innerHTML = '<img src="ImageName.png" style="">';
$("sidebar").insertBefore(li,$("storyMenu"));
Usage:
<<map 200 200>>
You'll have to fiddle around with the coordinates to get mini-map to move to exactly where you want it on your map, and you will have to set a default starting position in the stylesheet.

The game this was made for also has another image overlaying on top of it as a border frame around the mini-map. This would be a nice addition to add to the script if anyone knows how to do this? Perhaps with layers? if that is possible.


Comments

  • WraithbaneWraithbane
    That's hilarious.  I was looking at this code the other day and have been playing around with it.  I'm using Sugarcube though so its giving me some issues.
  • Dazakiwi38Dazakiwi38
    Yeah ive recently switched to sugarcube and learning the differences to what im use to.

    I just tried running this in sugarcube too, no image displays in the sidebar and it threw this error
    Error: cannot execute macro <<map>>: Cannot read property 'style' of undefined
    Would some sugarcube-guru be able to show to how fix these errors?

  • TheMadExileTheMadExile
    Rather than injecting the minimap into the page around the story menu, since your fixing its position, you could simply append it to the body element.  Also, if you're going to use jQuery at all, then really use it.

    This code, which includes the minimap overlay, will work in both SugarCube and Sugarcane (it should also work in Jonah and Responsive, though you'll likely need to change the CSS a bit).  You'll also need to enable jQuery in the vanilla headers via the StorySettings special passage.

    1. Put this in a script tagged passage:

    /* Setup the minimap container, image, and overlay. */
    $(document.body).append('<div id="minimap"><img><div id="minimap-overlay"></div></div>');

    /* Setup the minimap image source. */
    $("#minimap img").attr("src", "MINIMAP_IMAGE_URL");

    /* Setup the <<map>> macro. */
    macros['map'] =
    {
    handler: function (place, macroName, params, parser)
    {
    var mapX = (parseInt(params[0]) * -1) + "px"
    , mapY = (parseInt(params[1]) * -1) + "px";
    $("#minimap img").css({ left: mapX, top: mapY });
    }
    };
    Replacing MINIMAP_IMAGE_URL in the minimap image source setup with the URL of the image you're using.  If you wanted to use an image passage, then you'd change the minimap image source setup code to:

    $("#minimap img").attr("src", tale.get("MINIMAP_IMAGE_PASSAGE").text);
    Replacing MINIMAP_IMAGE_PASSAGE with the title of your minimap image passage.


    2. Put this in a stylesheet tagged passage:

    #sidebar, #ui-bar
    {
    top: 240px;
    }
    #minimap
    {
    position:fixed;
    left: 20px;
    top: 20px;
    width: 200px;
    height: 200px;
    overflow: hidden;
    }
    #minimap img
    {
    position: absolute;
    left: 0px;
    top: 0px;
    transition: all 2s;
    -webkit-transition: all 2s;
    }
    #minimap-overlay
    {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 200px;
    height: 200px;
    background-image: OVERLAY_IMAGE_SOURCE;
    }
    Replacing OVERLAY_IMAGE_SOURCE in the #minimap-overlay style with either the URL of the image you're using (e.g. url(http://some.place/minimap-overlay.png)) or the wiki image syntax for the minimap overlay image passage you're using (e.g. [img[MinimapOverlay]]).
  • WraithbaneWraithbane
    Thanks TME!!
  • Dazakiwi38Dazakiwi38
    Thanks MadExile for the script conversion. it works nicely :) but the sidebar line is broken.

    undefined

    I tried adjusting settings in the stylesheet, but even though i could resize the image the broken line was still there.
  • TheMadExileTheMadExile
    Dazakiwi38 wrote:

    Thanks MadExile for the script conversion. it works nicely :) but the sidebar line is broken.


    It's not broken, the two pieces are simply no longer connected.  ;D  (Despite the smiley, I am serious.)

    SugarCube's border there actually comes in two pieces, one on the right-hand side of #ui-bar and the other on the left-hand side of #passages.  Normally, this provides a better look than having it only on one of them (IMO).  In this case, however, since you've moved the #ui-bar down and your passage is so short, you're seeing both borders separately.

    Possible solutions: (you only need one)

    1. A longer passage would solve the issue.  So, if you have no short passages in your real project, then doing nothing would work.


    2. Make the #ui-bar (or #sidebar) underpin the minimap (the minimap will not be harmed).  For instance, change this style:

    #sidebar, #ui-bar
    {
    top: 240px;
    }
    To something like this:

    #sidebar #title, #ui-bar #title
    {
    margin-top: 210px;
    }

    3. Remove the #ui-bar's border.  Like so:

    #ui-bar { border-right: none; }

    Personally, if #1 isn't viable, I'd choose #2 (it's probably what you want).
  • WraithbaneWraithbane
    Now let's really test your skills!!

    Can you swap that map on the fly by clicking a passage link? 
  • TheMadExileTheMadExile
    Wraithbane wrote:

    Can you swap that map on the fly by clicking a passage link?


    Yes, easily.  For example, using the same code that you initially set the minimap source with (but using a different image).

    URL version:

    [[Head into the swamp|Swamp 1][$("#minimap img").attr("src", "http://some.place/minimap-swamp.png");]]
    Image passage version:

    [[Head into the swamp|Swamp 1][$("#minimap img").attr("src", tale.get("minimap-swamp").text);]]

    You could also switch minimaps via tags, so it would be automatic.

    For example, with image passages, if you named your image passages like minimap-NAME (e.g. minimap-swamp, minimap-forest), tagged your passages with similar tags, and swapped out the &lt;&lt;map&gt;&gt; macro for this one:

    /* Setup the <<map>> macro. */
    macros['map'] =
    {
    map: "",
    handler: function (place, macroName, params, parser)
    {
    var x = (parseInt(params[0]) * -1) + "px"
    , y = (parseInt(params[1]) * -1) + "px"
    , map = tags().find(function (v) { return /^minimap-.+$/i.test(v); });
    if (map &amp;&amp; map !== this.map)
    {
    this.map = map;
    $("#minimap img").attr("src", tale.get(map).text);
    }
    $("#minimap img").css({ left: x, top: y });
    }
    };
    Then calling &lt;&lt;map&gt;&gt; would update the map's source automatically based on a passage's minimap-* tag, if it needed to be updated.

    The URL version would be similar, you'd simply need a tagURL mapping.
  • WraithbaneWraithbane
    Umm.. oh yeah!!?  But can you add a coffee making script to it?!  Whats Java good for if not coffee?
  • Dazakiwi38Dazakiwi38
    [quote]
    Personally, if #1 isn't viable, I'd choose #2 (it's probably what you want).


    Thanks again MadExile, solution two was perfect. And with your addition thanks to Wraithbane's suggestion to being able to swap the map on the fly makes it even better. :)

    *Update*
    Concerning the swap map addition. In regards to using the img method, where do we assign the image/path?

    So erm..we have two methods suggested here? the line below is for the previous script version?? and updating the image through the passage link.
    [[Head into the swamp|Swamp 1][$("#minimap img").attr("src", tale.get("minimap-swamp").text);]]
    The #minimap img refers to the css attribute?, we have the src and the next bit im not sure about, is this suppose to be a variable which stores the imagefile name?

    Then the other method is a new script which updates when a tag triggers it- which ideally sounds better, but same problem can't figure out where to put the imagename.png that it is swapping with.  Brain imploding.. :o





  • WraithbaneWraithbane
    Daz, what are you doing for the portrait surrounding the minimap?
  • WraithbaneWraithbane
    I'm using the 2nd way for calling the map.. its way easier imo.  You just tag the passage with minimap-X where X is the rest of the name you want on the image you call.  Make sure your images are named minimap-forest for example or minimap-swamp and then add <<map>> with the x and y coords on the page.
  • Dazakiwi38Dazakiwi38
    Wraithbane wrote:

    I'm using the 2nd way for calling the map.. its way easier imo.  You just tag the passage with minimap-X where X is the rest of the name you want on the image you call.  Make sure your images are named minimap-forest for example or minimap-swamp and then add <<map>> with the x and y coords on the page.


    Not working, no starting image is displaying. Can you be a little more specific or maybe upload an example?

    And it would be <<map x y>> as per normal.

    This is what I have

    Start:

    [[Head into the swamp|swamp1][$("#minimap img").attr("src", tale.get("minimap-swamp").text);]]
    swamp1:
    Tag: minimap-swamp (have tried minimap-swamp.png as a tag too) image file name being swamp.png

    <<map 200 200>>
  • WraithbaneWraithbane
    Did you use the 2nd incarnation of the macro?  It won't work without that. 


    What did you do for your border for your map?
  • Dazakiwi38Dazakiwi38
    Yes I am using the 2nd version of the map script. The image is in the same folder etc.

    Are you able to upload a tws of your demo for it? I must be doing something wrong.

    The border, sorry i forgot to reply to that before. I made the border in paint.net  and the center was filled blue and i set that to be transparent so its basically a window, saved as a png.
  • TheMadExileTheMadExile
    First, stop trying to use image passage version code when you're using the URL version (you keep talking about paths, so URL).


    MANUALLY CHANGING THE MINIMAP URL:
    If you want to change the minimap manually, then do something like this: (the setter is the important bit)
    [[Head into the swamp|Swamp 1][$("#minimap img").attr("src", "MINIMAP_IMAGE_URL");]]
    Replacing MINIMAP_IMAGE_URL with the URL of the appropriate minimap image.


    AUTOMATICALLY CHANGING THE MINIMAP URL (VIA: TAG -> URL MAPPING):
    If you want to have &lt;&lt;map&gt;&gt; change the minimap automatically based on passage tags, put this in a script tagged passage: (includes all necessary scripting)

    /* Setup the passage tag to URL mapping. Add as many of these as you need. */
    setup.maps =
    {
    "minimap-forest" : "MINIMAP_IMAGE_URL_FOR_FOREST"
    , "minimap-plains" : "MINIMAP_IMAGE_URL_FOR_PLAINS"
    , "minimap-swamp" : "MINIMAP_IMAGE_URL_FOR_SWAMP"
    };

    /* Setup the minimap container, image, and overlay. */
    $(document.body).append('<div id="minimap"><img><div id="minimap-overlay"></div></div>');

    /* Setup the initial minimap image source. */
    $("#minimap img").attr("src", "MINIMAP_IMAGE_URL");

    /* Setup the <<map>> macro. */
    macros['map'] =
    {
    handler: function (place, macroName, params, parser)
    {
    var x = (parseInt(params[0]) * -1) + "px"
    , y = (parseInt(params[1]) * -1) + "px"
    , map = tags().find(function (v) { return /^minimap-.+$/i.test(v); });
    if (map &amp;&amp; map !== this.map)
    {
    this.map = map;
    $("#minimap img").attr("src", setup.maps[map]);
    }
    $("#minimap img").css({ left: x, top: y });
    },
    map: ""
    };
    Replacing MINIMAP_IMAGE_URL_FOR_* and MINIMAP_IMAGE_URL with the URLs of the appropriate minimap images.

    You must also tag your passages with tags like minimap-* (e.g. minimap-forest, minimap-plains, minimap-swamp).
  • Dazakiwi38Dazakiwi38
    Okay thanks MadExile it makes better sense now, i didn't click with the map: "" part in the original script where I needed to setup the map images.

    Thanks for your patience and making this mini-map even better :)



  • TheMadExileTheMadExile
    Dazakiwi38 wrote:

    i didn't click with the map: "" part in the original script where I needed to setup the map images.


    Are you referring to the map property of the macro?  You don't setup images there, you don't touch that at all, it's only for use by the macro itself.  The macro uses it to see if the minimap image requires updating, so that it can update it only when required.

    You setup the tag -> image mapping in the setup.maps object (right at the top of the script in my previous reply), the one with the comment just before it that says:
    /* Setup the passage tag to URL mapping. Add as many of these as you need. */
  • WraithbaneWraithbane
    http://welshpixie.com/beginning/#c

    How is she doing that map graphic around her map?
  • TheMadExileTheMadExile
    Wraithbane wrote:

    How is she doing that map graphic around her map?


    The same way Dazakiwi38 is doing theirs, with a partially transparent overlay image.  Its edges are painted opaque, while the interior is allowed to be transparent or, if you wanted a hazier look, translucent.  The overlay image sits directly over top of the minimap image, which would completely obscure it normally, however, since the overlay is partially transparent you can still see the minimap underneath through the transparent parts.

    All of the example scripts and CSS that I've given in this thread, starting with this post, have included support for an overlay.

    In the example stylesheet, it's this part:

    #minimap-overlay
    {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 200px;
    height: 200px;
    background-image: OVERLAY_IMAGE_SOURCE;
    }
    You simply replace OVERLAY_IMAGE_SOURCE with either the URL of the image or the wiki image syntax for the minimap overlay image passage that you're using.  For example:

    /* via URL */
    background-image: url(images/minimap-overlay.png);

    /* via an image passage */
    background-image: [img[minimap-overlay]];
    If you didn't want the overlay, then you could change its style to:

    #minimap-overlay { display: none; }
Sign In or Register to comment.