Please specify version and format if asking for help, or apply optional tags above:
Twine Version: 1.4.2
Story Format: Sugarcube
Hey all! Complete newbie here, I’ve been having a devil of a time getting Twine to show an interactive map–i.e. an image file that allows you to click on different parts of it to link to different passages. I’ve been hammering at this problem for a while, and IT seems like this method should work, but it doesn’t. Here’s what I’ve got:
The image shows up just fine, and I can see that the map is working because my cursor changes when I move over the spot that should be clickable. However, when I click, nothing happens. I’ve double-checked that the data-passage value is the correct spelling of the room I’m trying to link to.
One other question: I need to have the image file in the directory /res/images inside the game directory, but can’t figure out how to make Twine do this. It seems to either need to be right in the game directory, or given a full path listing as the directory. I’ve read on various Twine-related sites about “absolute” and “relative” linking, but nothing I’ve tried has worked.
Take a look at the Displaying Images in Twine code for a way to simplify linking to images that works both within Twine and in the published Twine file. It will automatically use absolute or relative links as needed once set up.
Also, the Clicking Parts of Images sample code should show you how to make the parts of an image clickable and perform various functions for you, including sending you to other passages.
If you’re still having problems after trying out that code, then we’ll need to see your code to determine exactly what you’re doing wrong. Don’t forget to put any code you post inside of a code block (use the “Preformatted text” </> button) otherwise this forum tends to “eat” the insides of SugarCube macros.
Thanks! I’ll try this later tonight and let you know if it works. Your explanations were much easier to understand than anything I’ve found previously!
Ok, I’ve read through the passages and I think I understand them, but (and this is embarrassing), I’m not sure where to put the code.for the Displaying Images in Twine thing. It says to put it at the top of my JavaScript–where is that, exactly? Putting it in the Start Passage leads to an error. I’m sure the question I’m asking is a very naive one; sorry for my newbness,
I’m using Twine 1, not Twine 2, so I don’t have any menus in the bottom left. My understanding is that if I use Twine 2, I would have to store the images online, right? I want the game to be available offline, and the guide on Twinery suggested using Twine instead if that was what I wanted.
That’s the purpose of the script tag in Twine 1. It tells the selected story format that the passage contains TwineScript/JavaScript to be executed during story startup, similar to the Story JavaScript section in Twine 2.
Gotcha. Ok, good to know. I’m still having problems, though. To test this out, I’m trying to have it load an image with two clickable areas that take the player to different passages. I created a passage called JavaStuff, typed the word “script” in the tags for it, and wrote this based on HiEv’s example:
if (document.location.href.toLowerCase().includes("/temp/") || document.location.href.toLowerCase().includes("/private/") || hasOwnProperty.call(window, "storyFormat")) {
// Change this to the path where the HTML file is
// located if you want to run this from inside Twine.
setup.Path = "C:/Twine/"; // Running inside Twine application
} else {
setup.Path = ""; // Running in a browser
}
setup.ImagePath = setup.Path + "res/images/";
setup.SoundPath = setup.Path + "res/audio/";
Then, in my Start Passage, I used HiEv’s other tutorial to write this code:
Again, I’m probably missing something that a more experienced coder would catch right away, so forgive my naivete. Anyone know how I can make this thing work?
Your <map> and <img> tags are HTML, not JavaScript, so they should not be wrapped within a <script> tag. Your markup also had a few other issues. Try something like the following:
Now one more question. Is there a way to have a variable changed when the player clicks an area? e.g. someway to use the “set” command as part of the .onclick phrase? If so, what would the format for that be?
