Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Fade-out/fade-in question (Sugarcube-2 in combination with Twine 1.4.2)

Hi all,

I am in the process of making a CYOA using twine (1.4.2) in combination with the Sugarcube-2 story format and some basic CSS. I have a question about the fading transition between pages. In addition to the normal Passages I make use of two special passages: PassageHeader and PassageFooter to display character stats (variables) and location data. I really like the fading-out and fading-in script between pages, but I would like the PassageHeader and PassageFooter to remain static (e.g. no transition effect when switching 'pages'), I know this is sort of cosmetic, but can this be accomplished with Sugarcube-2? I really need this story format, because Sugarcane has proven to be a lot of trouble when exporting it to an android app.

I have included 3 sample files in the attachment. The source code (.tws file), the exported/build .html file and an android (.apk) sample. I would very much like it that the greyish bar (header/footer) in the provided sample won't fade.

I hope some-one can help me out or give me some pointers where to look.

With kind regards,
Jeroen Wolf, from the Netherlands


  • Yes, it can be accomplished. No, you cannot do it with the PassageHeader and PassageFooter special passages as their content is simply added to the main passage display element.

    I'd suggest:
    1. Removing the PassageHeader and PassageFooter special passages.
    2. Setting up your header and footer elements outside of the main passage display with a little JavaScript. And use IDs, not classes.
    3. Using the PassageReady special passage to update your header and footer elements via the <<replace>> macro.
    4. You'll also need some style changes, since your header and footer elements are in new locations.
    I'll attach an example of what I mean.

    Additionally, I'd also suggest that you not use intermediary passages with a final <<goto>> macro simply to modify state. That bloats the story history and is completely unnecessary. Use of <<goto>> should be a last resort, not a first one. My attached example shows how to do achieve the same result via the <<click>> macro.

    My attached example also shows use of the naked variable formatter, instead of the <<print>> macro. You do have to use <<print>> for expressions and the like, however, for what you were using it for in your example the naked variable formatter is sufficient. I don't know if that was a specific choice on your part or you simply didn't know about the naked variable formatter. It doesn't really matter in the end, so use whichever you prefer. If you do prefer <<print>>, it has a couple of aliases which you may find useful: <<=>> and <<->>.
  • edited July 2016
    Hi Thomas. Thx so much for your answer & time. This is exacly what I meant ... Also thanks for cleaning up the tws, it's much more efficient this way. The <<click>> en <</click>> macro works super.

    I also liked what you did with the Header & Footer Set in combination with PassageReady.

    I will use this setup for my game (a Dutch translated version of "Grailquest - Castle of Darkness") in combination with storing variables/arrays (like pagenumber, hitpoint, experiencepoint, etc. in localStorage (strings)

    With kind regards and thanks again for your time and insight :)
Sign In or Register to comment.