[Harlowe 1.0.1] JavaScript : Dynamic Background Images

Echolocating

I just thought I'd share a JavaScript workaround for Harlowe 1.0.1 regarding dynamically changing the background of a story. I saw a sample Twine story (1.4.2 perhaps?) that changed the background image behind the passage content and it looked amazing. This workaround has been tested in Firefox 36.0.4 on Windows 8.1.

(I checked on these forums, but couldn't find any other post about doing things like this in Harlowe.)

First, you need to set up the Story JavaScript...

if (typeof window.gameEngine == "undefined") {
window.gameEngine = {
HTMLobject: null, /*global variable*/
setHTMLobject: function(nodeObject) {
var parentNodeString = "";
var isHTMLobject = 0;
while (isHTMLobject == 0) {
parentNodeString = ".parentNode" + parentNodeString;
if (eval("nodeObject" + parentNodeString + ".nodeName.toLowerCase()") == "html") isHTMLobject = 1;
}
gameEngine.HTMLobject = eval("nodeObject" + parentNodeString);
/*color position/size repeat origin clip attachment image*/
gameEngine.HTMLobject.style.background = "center top/cover no-repeat fixed";/*alternatively, this could have been set in the Story Stylesheet*/
},
setBackground: function(imagePath) {
gameEngine.HTMLobject.style.backgroundImage = "url('" + imagePath + "')";
}
}
}

Then in your first passage (or any one that appears before you begin to change the backgrounds), you need to call the setHTMLobject() function. I used an onload within a hidden image tag; I've seen onerror used as well with a bad src value. Maybe one is better to use than the other?

<img src="media/image.gif" style="display:none;" onload="gameEngine.setHTMLobject(this);">

Essentially, the code keeps checking each successive parent node of the element that called the function in the DOM until it finds one called HTML. Then it assigns a reference to that HTML node in a custom HTMLobject variable. Storing variables in the gameEngine object (or whatever you want to label it) is the only way I've found to store JavaScript variables for later use. Luckily, using background CSS styles on the HTML element works like it would with the BODY element. FYI: I was able to check the child nodes of the HTML element and found the BODY element (gameEngine.HTMLobject.childNodes[3], I think), but I couldn't do anything to it, not that it mattered anyway.

Lastly, when you want to change the background image on a specific passage, just put this in the corresponding passage...

<img src="media/image.gif" style="display:none;" onload="gameEngine.setBackground('media/new-background.jpg');">

Maybe there's an easier way to do this (and I'd love for someone to reply with how), but I like Harlowe's clean syntax and default style so I muddled through instead of changing to a different Story Format. Apparently, there is a new unreleased version of Harlowe (1.1.0) that allows for some better JavaScript handling.

Also, if you want to see the background image behind your passage text and not obscure your text, I recommend editing the Story Stylesheet as such...

tw-passage {
background-color:rgba(0,0,0,0.5);
border-radius: 0.5em;
border: 2px solid #dddddd;
}

In this style example, the passage background color is completely black with 50% opacity and has an almost white border with rounded corners. The border and contents of the passage are completely opaque though. Play around with the width of the passage and positioning and you'll always see a cool background around and slightly through your passage content.

Anyway, I hope this helps some people with their Twine 2 Harlowe Stories.

EnameledKoi

Hi,
Thanks for posting this! Unfortunately I haven't been able to get it to work. I've been trying Chrome and Safari though, not Firefox. Do you have any suggestions?