Howdy, Stranger!

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

Timed/delay of text in Twine 2.0.8

edited August 2015 in Help! with 2.0
Hi,
I tried to find scripts/macros for Twine 2 that can delay text to appear on the screen. In my case, I'm making a sort of terminal based look in CSS, and once the player starts the story, within the first second, I want one line of text to be displayed. Then next second, I want one line of text to appear underneath the original one, and so on.
Is it also possible to make the text type out itself? As if it was a machine who wrote on the screen? Like: H-e-l-l-o (writing it out within two second or so). Or maybe you can just use the text delay and only input one character at a time?

Oh well, hopefully someone more experienced can help me with this! :)

EDIT: I forgot to say I'm using Snowman 1.1 due to my terminal look, which didn't work on Harlowe.

Comments

  • Sorry, i don't have a solution jet...But this is what i have :P Maybe it would be usefull

    First I look for print code to know how to print...
    Macro.add("print", {
    	version  : { major : 3, minor : 0, patch : 0 },
    	skipArgs : true,
    	handler  : function () {
    		if (this.args.full.length === 0) {
    			return this.error("no expression specified");
    		}
    
    		try {
    			var	result = printableStringOrDefault(Util.evalExpression(this.args.full), null);
    			if (result !== null) {
    				new Wikifier(this.output, result);
    			}
    		} catch (e) {
    			return this.error("bad expression: " + e.message);
    		}
    	}
    });
    


    And in goto macro use the setTimeout function to delay instructions.
    setTimeout(function () {
    			
    		}, 40);
    


    Mixing both of them I've create this...
    Macro.add("TimedPrint", {
    	version  : { major : 0, minor : 1, patch : 0 },
    	handler  : function () {
    		if (this.args.length === 0) {
    			return this.error("no expression specified");
    		}
    		try {
    			var time=40;
    			if( typeof this.args[1] != "undefined" ){time=this.args[1]}
    			var result = printableStringOrDefault(Util.evalExpression(this.args[0]), null);
    			if (result !== null) {
    				setTimeout(function () {
    					new Wikifier(this.output, result);
    				}, 40);
    			}
    		} catch (e) {
    			return this.error("bad expression: " + e.message);
    		}
    	}
    });
    

    Adding it on javascript sheet the function throws an error of Macro is not definded. Changing it for macros.add(...), throws the printableStringOrDefault is not defined...

    I think that the problem is that this function should be in core not in javascript sheet but maybe with some help it works :)
  • $timedReveal = function(id,delay) { /*Reveals id after delay ms. id must be hidden using CSS. */
    var timer = setInterval(function(){document.getElementById(id).style.visibility = "visible"; clearInterval(timer);},delay)
    }

  • I think I'll try this one, it seems to be what I'm looking for!
    However, how would I implement this into my Twine 2 story? I'll try it myself, but I'm no expert... Thanks!

  • tobulos1 wrote: »

    I think I'll try this one, it seems to be what I'm looking for!
    However, how would I implement this into my Twine 2 story? I'll try it myself, but I'm no expert... Thanks!

    Okay, I figured it out, however, now I cannot get it to work together with my CSS template: http://cssdeck.com/labs/pure-css-osx-terminal
    Does anyone know how to make these two work together?

  • edited September 2015
    There are many ways you could get them to work together. As an example, you could do something like the following.


    Replace the Pure CSS OSX terminal <div id="body"> element with something like the following:
    <div id="body">
    	<!--
    		Typed.js will type into the #typed-output element here. Merging the
    		paragraph and span is not recommended (it screws up the cursor).
    	-->
    	<p><span id="typed-output"></span></p>
    </div>
    <div id="typed-input">
    	<!--
    		This will not be displayed. It is only for consumption by Typed.js.
    
    		Place the text you want Typed.js to type into the above #typed-output
    		element into paragraph elements here.
    
    		Successive paragraphs overwrite previous ones, the last remaining onscreen.
    		To have typed text cover multiple lines, use breaks within a paragraph.
    	-->
    	<p>Hello, meatbag! This will be overwritten in a bit.</p>
    	<p>
    		Typed.js is a <strong>jQuery</strong> plugin.
    		<br><br>
    		It <em>types</em> out sentences.
    		<br><br>
    		For one and all to see!
    	</p>
    </div>
    


    Replace the following two selectors within the Pure CSS OSX terminal CSS:
    .cursor
    #body:hover .cursor
    
    With these:
    .typed-cursor
    #body:hover .typed-cursor
    
    Just the selectors, not the associated style properties. This styles the Typed.js cursor with the Pure CSS OSX terminal CSS.


    Place something like the following in your Story JavaScript along with the Typed.js script: (it can go above or below Typed.js)
    $(document).on("showpassage:after", function () {
    	$("#typed-output").typed({
    		cursorChar     : "\u00a0",
    		stringsElement : $("#typed-input"),
    		typeSpeed      : 30
    	});
    });
    
    This runs Typed.js each time you show a passage in Snowman.
  • edited September 2015
    Oh my god, thank you! I finally got it to work! :)
    However, if I wanted to stop the erasing part for just one passage, what would I have to do then? So that the messages kept appearing under each other, and not be deleted. I've looked at the "customization" at https://github.com/mattboldt/typed.js/, but it doesn't seem to be very "page specific"...
  • That's a bit vague.

    Within the same passage? Simply use a single paragraph (as is shown in my example by the second paragraph, use breaks to simulate multiple paragraphs onscreen). If that's not feasible for some reason, then you're going to need to elaborate a bit as to what you're actually trying to do.

    Between passages? When you navigate to another passage the old one is cleared away, that's simply the way the Snowman works (most story formats, really). There are ways around that, but that's getting into the deep end.
  • No worries TheMadExile, I figured it out, thanks! :)
Sign In or Register to comment.