Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Total Newb - Backgrounds
Hello All! I'm a total newbie at this, I confess it. I'm just a writer that wants to create a choose your own adventure companion piece to one of my book series. (Sort ofzombies, caused by medical nanites gone awry. Readers really like that world, so I'd like to give them a little more just for fun.)
I've got the story and am working on the mapping. I also have my collection of images. I'd like to change the background image as the story progresses to different arenas. Woods for the woods, lake house for the lake, etc. Basically, I'd like to have the background image based on whatever passage chain they're in rather than have a single one for the whole story. This is aside from the images inside various passages, which I sort of have a handle on for the moment.
I saw one other question regarding this, but it was based on SugarCube and not for 2.0x, so not quite right. I'm using Harlowe (though I've changed the appearance and style of it quite a bit).
I'm not a coder or very comfy (yet) with all this vocab of working in JS, CSS, etc. I generally hire that out, but I'm fascinated with this and learning quite a lot. It turns out doing this is super fun. (Reminds me so much of building all those MUDs back in ancient times.)
Is there anyone out there who might assist with this? Regards, Ann
I've got the story and am working on the mapping. I also have my collection of images. I'd like to change the background image as the story progresses to different arenas. Woods for the woods, lake house for the lake, etc. Basically, I'd like to have the background image based on whatever passage chain they're in rather than have a single one for the whole story. This is aside from the images inside various passages, which I sort of have a handle on for the moment.
I saw one other question regarding this, but it was based on SugarCube and not for 2.0x, so not quite right. I'm using Harlowe (though I've changed the appearance and style of it quite a bit).
I'm not a coder or very comfy (yet) with all this vocab of working in JS, CSS, etc. I generally hire that out, but I'm fascinated with this and learning quite a lot. It turns out doing this is super fun. (Reminds me so much of building all those MUDs back in ancient times.)
Is there anyone out there who might assist with this? Regards, Ann
Comments
The code is as follows:
Replace the word above with the HTML element you want to change the class of (e.g. putting there would change the class of the body element in your HTML.
And replace the word with the class you want that element to be changed to.
So for example:
This will produce a "body.intro" element and class for that particular passage.
Then in your CSS, you can style it as you like, e.g.:
body.intro { background-image:url("imageFolder/myImage.jpg"); background-size: cover; background-attachment: fixed; width: 100%; height: 100%; z-index: -1; }For an example of changing backgrounds (and hopefully for some fun too!), check out my first Twine Story... THE CHALLENGE
I hope this is helpful.
NOTE: In The Challenge, I also change the appearance of tw-story (which is the main container for your passages) in a couple of passages using this method.
Also note that the larger the images, the longer they take to load (which should be obvious, but it still produced a lag that I wasn't too pleased with. Perhaps there is a way to avoid that delay in the images loading, but I don't yet know how to do that, as I am a newb just like you!!)
Ann
You need to ensure images are loaded in at story start by making them all appear on the page at the same time, just hidden.
More than just "seeing it action," you can also right-click on his link, and then save it somewhere on your computer. From there you go to Twine and import it into your system (from wherever you just downloaded it to) and then you can see the framework and everything.
The reason you might want to do this is so that, later (when playing his game), if you come across a passage that intrigues you... you can go to that part in the code and REALLY get some insight.
If that doesn't make sense, let me know and I can explain it further.
—Sage.
That's very interesting. I'll give that a go next time and see how it works. Thanks
With my game, make sure you download the actual image folder as well if you want to use it offline, as otherwise it won't work.
You can download a zip with all the files HERE.
You. And Christmas. It's like.... You're one and the same! Thank you!
Oh dear!! Then prepare for some disappointing holidays from time to time!! lol. Thanks for the encouragement.
Thank you all so much!
In your story Javascript, try the following:
(function() { var images = []; var preload = [ "urlofimage1", "urlofimage2", "urlofimage3" ]; for (var i = 0; i < preload.length; i++) { images[i] = new Image(); images[i].src = preload[i]; } })();The reason you do this is because if you load an image as hidden, browsers (especially Chrome) are becoming smarter about not rendering/loading it at all. The display:none trick already doesn't work anymore, and I suspect shoving stuff off the rendering window will also not work in the near future.
But Javascript will force pre-loading images regardless.
Edit: the best part is that this method also pre-loads images asynchronously and thus won't interrupt loading the story/page.
I don't think my particular method works in Twine 2.0 though.
Each of the "transition" passages are the passages where I change the background image to a new area. I used the absolutely lovely code offered by feliwebwork (thank you!) and inserted the appropriate newclass line into the top of the passage.
But now, it erases some of the elements I have set up to display the text. Primarily, it centers the text and makes huge margins. I've attached an image of the two passages so you can see the results.
Here is the code at the beginning of the passage that changes the background:
And here is what I have in the stylesheet to control it:
body.forestscene { background-image:url(http://www.annchristy.com/wp-content/uploads/2015/05/ForestScene-e1432415452273.jpg); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; z-index: -10; }And this is what I have controlling my text:
tw-passage { width:90%; padding:2em; margin:auto; border:solid #000 0.05em; border-radius:0.2em; font-family:Geneva, "Helvetica Neue", Helvetica, sans-serif; font-size:1.25rem; color:#000; text-align:left; background-color:rgba(255, 255, 255, .9); box-shadow:#000 0.5em 0.5em 0; }Some fixes I tried:
I did try to use that second line of code for the passage that would direct a subset of and I called it Inside there, I changed some elements of the text display just to test, and they all showed up except it was still centered and with huge margins...as shown in the images. So, I got rid of that and went back to regular tw-passage.
I'm not sure what I've done. The code looks exactly the same in my notes on notepad, so if I've put a space in somewhere I shouldn't, it's invisible to me. (Then again, I'm a science fiction writer, so I have to use editors to correct all my "their" "they're" flubs.)
Anyone see what mayhem I've wrought on myself and can point (and maybe laugh) at my newbish mistake?
Query: can you attach a truncated story file that replicates the problem so we can play with it and determine what's going on with the code?
either the whole html file, or if you want (and I think perhaps this is what AvaJarvis is suggesting) make a copy of your story (naming it something else) and then delete most of the passages in that copy, so that only the most basic passage is displayed with the problem you are experiencing. I assume this is in case you don't want everyone to read all your work, or to simplify things.
Thank you!
Sorry, I'm a bit rushed on the computer today... could you guide us through that file you posted, describing what links we click on and the errors you feel it produces and what it SHOULD produce? That will give us a better idea of how to "fix the problem".
Later, I'll take time to enjoy the narrative of your story!
In the truncated (and severely pruned) story posted, that would be the starting passage, 'Between Life and Death: The Lake' is the title. Then all the passages are fine until you get to the next transition (take the Drop and Run options in the story) where the background image changes called, 'close'.
As far as narrative...I took most of it out so as to avoid spoilers.
So, LESS (long explanation and short short) other than the passages where a new background image is going to be displayed, the text is formatting properly. In the ones where a new background image is shown, it centers the text and makes the margins huge, but the borders and all sorts of other details remain the same.
In the passage "Close" you have the following code:
This centers all the text that follows after that.
I am not sure if that is the format change that you are talking about, but I think it could be.
You would only need to delete that code from your passage, and the text would display normally.
Or if you want only part of the text to display centered, then you have to include another line with
You put this code in a separate line immediately before the text you want to go back to being left aligned. This will "undo" the centering of the text and bring it back to the left.
Please let me know if this fixes your issue. I am going off the computer for a day or so, as I am travelling, but I am sure others on the forum will probably help you in the mean time.
LOL...I put that in because it was in the code I lifted. I'm such an idiot.
Thank you!
http://twinery.org/forum/discussion/comment/9617/#Comment_9617
For some reason, when I clicked that it was an answer, it swept up and out of context to higher up in the stream of posts.
Thank you so much!
I'm glad it's solved now!
I probably should wear a helmet, because this head smacking things is fairly common!