Dynamic MiniMap Macro

[Delyth Angharad]

I happen to have an awesome boyfriend who made me this MiniMap macro for use in my Work-In-Progress game, you can see it in action (complete with crudely drawn map) at http://welshpixie.com/beginning

Here's the deets to put in the header file;

With the other macros:

macros['map'] =

{

handler: function(place,macroName,params)

{

var mapX = params[0];

var mapY = params[1];

jQuery("#map img").animate({"left":mapX+"px", "top":mapY+"px"}, "slow");

}

};

The CSS (bend it to your will):

#map {

position: absolute;

left: 20px;

top: 20px;

width: 200px;

height: 200px;

overflow: hidden;

}

#map img {

position: absolute;

left: 0px;

top: 0px;

}

The HTML (put before storeArea):

<div id="map"><img src="big.png"/></div>

This needs jquery to go with the other scripts (just underneath <title>storytitle</title>; google hosts jquery that you can link to (https://developers.google.com/speed/libraries/devguide#jquery)

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

______________

The minimap will always show throughout your whole game. You can position it on the screen with the CSS above. 

To control the minimap location, insert the following at the bottom of each passage:

<<map x-coord y-coord>>

This works on pixel size, and the coordinates also depend on the size of your minimap window. For example, the map I'm using in my story is 1000x1000. My minimap window is 200 x 200. In order to link the absolute center of the map I subtract 100px from each coordinate for <<map -400 -400>> (negative values because the top left corner of the map image is 0,0). 

That's about it. Enjoy :)

[Christopher Liu]

That's a really cool map, thanks for sharing!

--
You received this message because you are subscribed to the Google Groups "Tweecode / Twine" group.
To view this discussion on the web visit https://groups.google.com/d/msg/tweecode/-/k7trCW6v53kJ.
To post to this group, send email to twee...@googlegroups.com.
To unsubscribe from this group, send email to tweecode+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/tweecode?hl=en.

[Porpentine]

That is stunning, and a good argument for having some kind of Twine library people can submit snippets to.

[Christopher Liu]

I could put up a list of snippets - are there any other ones worth recommending?

--
You received this message because you are subscribed to the Google Groups "Tweecode / Twine" group.

To view this discussion on the web visit https://groups.google.com/d/msg/tweecode/-/X8VrKptzDGwJ.

[Delyth Angharad]

As a newbie to the 'Twine/Twee scene', I've been noticing that information currently seems scattered - there's the main Twine site, these groups, and in reading these groups I noticed some people have set up their own Twine sites as repositories but information on them is scant. It'd be great to have a central library with everything in one place.

[HarmlessTrouble]

As a newbie to the 'Twine/Twee scene', I've been noticing that information currently seems scattered - there's the main Twine site, these groups, and in reading these groups I noticed some people have set up their own Twine sites as repositories but information on them is scant. It'd be great to have a central library with everything in one place.

You're right, despite the efforts of the community to document twine.  We do need an offical "TweecodeTwine Repository" hub outside of google groups.  I would be happy to admin such a site.  We should pick a service.  We could select a free service such as Drupal gardens and have something ready to load tutorials, code snipets and example files onto in a day or two.  Who's with me?

[Delyth Angharad]

Absolutely. Any way it could be linked on  http://www.gimcrackd.com/etc/src/  also?

[HarmlessTrouble]

Absolutely. Any way it could be linked on  http://www.gimcrackd.com/etc/src/  also?

 

That's up to Chris Klimas i think, I'm not positive about who manages it actually. but I don't see why [they] would object. :)

-Henry 

[Delyth Angharad]

Heya :)

Did you put the jquery bit in, from the bottom of the post?

This bit:

This needs jquery to go with the other scripts (just underneath <title>storytitle</title>; google hosts jquery that you can link to (https://developers.google.com/speed/libraries/devguide#jquery)

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

On Mon, Dec 10, 2012 at 11:56 PM, Solon Scott <solon...@gmail.com> wrote:

I keep getting this error when I try to implement the map for my own Twine project:

Error executing macro map: ReferenceError: jQuery is not defined 

The map shows up in the corner of the screen, but this error shows in the line of the passage.
I believe I am copying all three parts into the header the right way, but maybe I'm missing something?

Thanks!

--
 
 

--
Lick the Lid of Life!

[Delyth Angharad]

Ok, try changing:

y("#map img").animate({"left":mapX+"px", "top":mapY+"px"}, "slow"); 

 to:

$("#map img").animate({"left":mapX+"px", "top":mapY+"px"}, "slow");

See if that works?

On Tue, Dec 11, 2012 at 12:10 AM, Solon Scott <solon...@gmail.com> wrote:

Yeah- I copied the <script></script> part and put it right underneath the <title></title> line. I also tried the updated version of jquery, but it gave the same message.

[Delyth Angharad]

Ah, and I've also just noticed that there's no http:// in the src=" for the ajax script - try putting that in! So it should be;

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

[Delyth Angharad]

Hehe, no worries. Good luck with the final!

On Tue, Dec 11, 2012 at 12:06 PM, Solon Scott <solon...@gmail.com> wrote:

Aha! That was the one! That did the trick perfectly! Thank you so much for all of your help!

Wow. I really wish my final wasn't due tomorrow- but that is what caffeine is for!

--
 
 

[Solon Scott]

So, I can't thank you enough! Because of that extra push, I am proud to announce that my Twine-based project final is now in Beta (and ready to turn in/finish for a while)! Basically, my final project for this class (Autumn '12, CHID 490D, University of Washington) was designed to use Twine to "string together" all of the  other final projects that the rest of my classmates have been working on. This came out in the style of a:

"Radical Interactive Walking Tour of the University of Washington" - Ver. 1.0

This interactive map features poems, songs, interviews, research, and a lot of other things from the other people that were in the class with me (plus WP's awesome mini-map and WP's CSS as well <3). It focuses on themes of deconstructing pedagogy, radical activism, indigenous culture, and a lot of other awesome stuff. So, it is kinda all over the place, but all completely wrapped up in responses to our university.

If you try it out, let me know what you think [via email (solonscott a gmail d com), so as not to clutter up this thread.]

Hopefully you find it engaging, entertaining, and maybe even a little fun! I had a great time using Twine to make this, and it is a really big [incomplete] map, so there are lots of little nooks and crannies to explore!

[Stormrose]

Wow. Nice work.

[sandwich puissant]

i didn't understand how you did your "portrait" thing, i don't know how to write the macro for it.

[Delyth Angharad]

This is the macro - 

macros['portrait'] =
	{
	handler: function(place,macroName,params)
	{
	if (params[0] == "*") {
	var html = " ";
	} else {
	var html = "<img src='"+params[0]+"'>";
	}
	jQuery("#char").html(html);
	}
	};

--

You received this message because you are subscribed to a topic in the Google Groups "Tweecode / Twine" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tweecode/lA4bIX3iegg/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to tweecode+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[sandwich puissant]

i'm trying to do the same with an iframe:
each passage display an animation in an iframe located in the top of the page.
but i don't understand how exactly i can achieve that.
is there a way to declare jquery.js directly in twine or do i have to manually edit the html output?

[Delyth Angharad]

You have to edit the template file directly - the same goes for the macro, that needs to go in there too. 

[sandwich puissant]

do you think i can simply change this line:

      var html = "<img src='"+params[0]+"'>";

to:

     var html = "<iframe name="myframename" src='"+params[0]+"' width="300" height="200"></iframe>";

[Delyth Angharad]

Send your template file over and I'll pass it to my boyfriend to have a look at. He's the coder - I just write the stories. ^.^

--

You received this message because you are subscribed to a topic in the Google Groups "Tweecode / Twine" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tweecode/lA4bIX3iegg/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to tweecode+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Leon Arnott]

Hello! I just had a look over this code, and I decided to try and write a variation that A) does not require jQuery for the smooth animation, and B) does not require altering the compiled HTML at all. I hope this is alright.

Put this in a passage tagged "script":

macros['map'] =
{
        handler: function(place,macroName,params)
        {
                var mapX = params[0];
                var mapY = params[1];

                $("map").firstChild.style = "left:-"+mapX+"px; top:-"+mapY+"px;";
        }
};

Put this in a script passage tagged "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;
}

Put this in the StoryMenu script passage (that is, the passage entitled "StoryMenu"):

<html><div id="map"><img src="big.png"></div></html>

Obviously replace "big.png" with the URL of the image you're using.

It's a good macro, and I believe this variation can be inserted into a Twine document slightly quicker, and may be a bit easier to use in testing.

[John Lynch]

I know I'm coming to this party late, but I just found this awesome code and wanted to say thanks and ask a question.  

I'm working on a Twine game that has part of the story take place on earth and part of it on other planets.  Is it possible to have the map change to another image when you go to another planet?  Also - do you call the coordinates the same with your non-jquery version?

[jessica gomula]

Hi Leon,

Do you have a version that works in Twine 1.4.2? I followed your example, and my mini-map displays, but doesn't move. Thanks!!