Question: How do you add fading text and timers between messages?

Zxya-chan
23 Nov 2016, 03:44

I hope I don't sound stupid, I really did attempt to find documentation and tutorials on this, I just couldn't find any. In fact, the (possible, as I said, I couldn't find any. I just could be bad at looking.) lack of any documentation makes me wonder if you can. Thanks in advance!


OurJud
23 Nov 2016, 17:01

This is by no means a simple thing to do and what I'm giving you here is only part of the process. Also bare in mind I used this in Twine not Quest. But in short the fading text can be done with CSS and will be something like:

.passage {-webkit-animation: fadeout 10s;
       -moz-animation: fadeout 10s;
        -ms-animation: fadeout 10s;
         -o-animation: fadeout 10s;
            animation: fadeout 10s;
            opacity: 0;
}
@keyframes fadeout  {from {opacity: 1;} to {opacity: 0;}}

Where I have .passage at the start, you will need to use whatever selector controls the text you want to fade. The 10s is the duration of your fade (10 seconds in my case) and can be set at whatever you please.

fadeout is just the name I've given my effect, but you can call it whatever (so long as it's a single word - no spaces)

The above code goes in the CSS block in your code. If you don;t have a CSS block already you need to add one.

To add a CSS block:

(This is credited to The PIxie)

Go into full code view (press F9), you can add an attribute to the XML of the game object that includes CSS.

    <css><![CDATA[
      <style>
        FADE CODE GOES HERE
      </style>
    ]]></css>

Paste it in below this line:

    <firstpublished>2016</firstpublished>

You can output that in game.start, and it will affect the selected item.

JS.addText (game.css)

Replace FADE CODE GOES HERE with the fadeout code.