This is about slowly revealing text one character at a time.

You can use io.addToOutputQueue to add your own items to the print queue. You need to provide a dictionary with "text" set to the text you want to print, "action" set to "effect", "tag" set to the HTLM tag (just use "p" for ordinary text), and "effect" set to the function giving your desired text (currently either io.typewriterEffect or io.unscrambleEffect), and optionally "params" for the text processor.

The speed with which characters are revealed is set with settings.textEffectDelay, the time in milliseconds to wait before showing the next one, and defaults to 50 (so a 100 character string will take five seconds to be fully revealed).

Note that the text should not contain any formatting or codes; the effects functions assume each character is displayed "as is".

All later output will wait until the effect is finished. You can optionally set "disable" to true to prevent the player taking any actions whilst the text is printing.

NOTE: Be careful using this, it has the potential to annoy users. Either use very sparingly, or make it faster than the fastest reading speed (and do not repeat stuff).

The classic effect is typewriter, so we will start there. Each moment a new character is added to the displayed text, until the whole line is revealed.

This example shows how it is done; for your game just copy the code, and change the text between the double quotes:

_msg("Here is some text that will be printed as though from a typewriter.", {}, {action:'effect', tag:'p', effect:io.typewriterEffect})

The _msg function requires three parameters, the string, a set of parameters for the text process, empty in the above, and the parameters for the print system. The last of these tells Quest to print using the HTML tag "p", and to use the built-in function "io.typewriterEffect" to handle the effect.

The unscrambler effect by default shows a line of random characters (but spaces are preserved). Each moment the line is re-written with the actual characters appearing from the left, and new random characters elsewhere.

_msg("This text will be unscrambled one character at a time from the left.", {}, {action:'effect', tag:'p', effect:io.unscrambleEffect})

You can set randomPlacing to true to have characters at random positions set right. You can also add you own "pick" function for choosing characters (but ensure it cannot return < as that has a special meaning in HTML). This example has each character replaced by a dot at first, but the dots are replaced at random with the real character:

_msg("The characters will appear randomly from dots.", {}, {action:'effect', tag:'p', effect:io.unscrambleEffect, randomPlacing:true, pick:function() {return '.' }})

We can even replace one string with another by using a "pick" that gets a character out of the original string. This time I have flagged it to include spaces, and the tag is "pre" (HTML will combine multiple spaces into one otherwise and the effect is not as cool). Both strings should be the same length.

_msg("The real message is revealed!!", {}, {action:'effect', tag:'pre', effect:io.unscrambleEffect, randomPlacing:true, incSpaces:true, pick:function(i) {return 'At first this message is shown'.charAt(i) }})

You can add your own effects too.

This is the body of the typewriter function (which takes a single parameter, data, the dictionary sent to _msg).

  if (!data.position) {
    $("#output").append('<' + data.tag + ' id="n' + data.id + '" class=\"typewriter\"></' + data.tag + '>');
    data.position = 0
    data.text = processText(data.text, data.params)
  }

  const el = $('#n' + data.id)
  el.html(data.text.slice(0, data.position) + "<span class=\"typewriter-active\">" + data.text.slice(data.position, data.position + 1) + "</span>");
  data.position++
  if (data.position <= data.text.length) io.outputQueue.unshift(data)
  setTimeout(io.outputFromQueue, settings.typewriterDelay)

The first line is used to determine if we have started yet. If not (if "position" has not yet been set), we add the new HTML element, then initialise some values in data (which will then be available in each later iteration).

Then we grab the HTML element, el, set its content using the html function, increment the position. If we have not finished, we then need to put data back in the output queue ready for the next step. Finally we call io.outputFromQueue with a delay.