Hello! I've been trying to add backgrounds to specific passages in a Harlowe Twine 2 project using javascript. It's fairy easy to show a random background image from a directory attached to <body onload="..") but that would only randomize the background when reloading the game, which is not what I want.
The closest thing to a solution I have seen is this-
http://twinery.org/forum/discussion/2529/harlowe-1-0-1-javascript-dynamic-background-images which is doing something with hidden inline images that doesn't quite make sense to me.
Is there another way to do this? Again, what I am attempting is to pick a random numbered image from images/ as a page background, but only for specific passages.
Thanks in advance!
Comments
That JavaScript looks kinda hacky. There's a slightly easier way to do it if you're willing to do a lot more leg work, but I've only got it working in Harlowe 1.2.3. Adapting this solution from greyelf, you can use this code:
In a header-tagged passage:
Set up some base line CSS for all the images using the html element, to your preference. For example:
Then whip up some specific CSS:
Then you can control the image via the $background variable. To make every passage do it, go the same header-tagged passage and place this:
You can also include the either statement directly in your passages. You can also easily manipulate which passage to have the random backgrounds on through tags, passage names, etc using Harlowe's built in functions and methods.
This does not work in 2.0.0, and I'm not familiar enough with Harlowe to know why, but I'm sure it can be adapted somehow.
Ah okay. Makes sense. Also, note that I made a pretty dumb error above. The header code shouldn't be testing tag length at all. I wrote:
I should've wrote:
If you're using harlowe 2.x, then change "html" to "tw-story" in both that code and the css and you should be good. I'll test it out later when I'm back at my computer, but I wanted to fix that error now.
I'm not sure why or how altering tw-story would break the formatting, at least if all you're doing is adding background images and associated properties.
Edit: Just tested it using the tw-story element in Harlowe 2.0.0 and it worked exactly as it did in Harlowe 1.2.3 using the html selector, and did not seem to break formatting. Here's the exact code I used:
In stylesheet:
In the passages:
"the number 0 isn't the same type of data as the string "')</script>"
I tried to use an operation on some data, but the data's type was incorrect."
If you had done that then $background would of had a default value before your "header print statements".
intro passage:
header passage (has some extra existing class adds for html):
startup passage has lots of existing variables, but is in there with the sets too, I know that's working because I can see the base class added to tw-story in the inspector.
Anything I should be looking for?
notes:
1. The passage names of the startup and header tagged passages can be whatever you want because their names have no meaning to the Harlowe engine, only which special passage tag has been assigned.
2. Unless you are planing to use both custom passage tags and the $background variable to style your story then you should do as Chapel suggested and replace the contents of your header tagged passage with the following: ... even if you are considering using both techniques to style the story I would suggest using Harlowe 2.0.0's built-in passage tag support which is mentioned in this amendment to the Basic Harlowe Passage Tag Based Styling thread.
Thanks so much! I've been stuck for a while trying to do this conventionally and it looks like Twine actually makes it pretty easy now that I see it working.
(Has anyone else got a problem where hitting 'undo' deletes a whole passage though? It's happening for me on the mac twine app and I did quite a bit of cussing at it as a result)
Sorry, lost track of this. If you haven't figured it out yet, you can try something like this in your story JavaScript:
This has a couple of weird hiccups, as it fires the transition on the link click instead of on the passage loading, but I couldn't for the life of me figure out how to do something closer to a post-render.
In other words, while this code "works," you might want to check back in a bit to see if anyone else has anything better, and bumping with this code should help with that. Good luck!