Howdy, Stranger!

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

How to make moving captions?

I want to show the credits of my game in a smoothly moving movie-captions style. I found several pure javascript variants, but was unable to adapt them to Twine. Neither I can get the size of the window (document.body.clientHeight returns 0!) nor I can access the div containing the moving text. E.g.:
<div id="capts"> <span><center><b>Game Title</b>

Author: Author

Music: Musician

2016
</center></span></div>

document.getElementById("capts") returns null!

Comments

  • Forgot to mention that I need it for Sugarcane.
  • It all a case of timing.

    You need to issue your two document related calls after the passage contents has been displayed to the Reader, that way the #capts div element will exist and the height of the client will be calculated.

    Unfortunately Sugarcane does not have SugarCube's postdisplay event, so you will have to use a setTimeout() function call to delay the execution of the javascript code you want to use.

    There are a number of different ways you can call the setTimeout function, two of them being:

    1. In a postrender event:
    postrender['run-credits'] = function() {
    	if (passage() == "Credits") {
    		console.log('run-credits called while Credits passage visible');
    		setTimeout(
    			function() {
    				console.log('capts: ' + document.getElementById("capts"));
    				console.log('client height: ' + document.body.clientHeight);
    
    				// Delete the above console.log calls and place your code here!
    			},
    			500);
    	};
    };
    

    2. Via a <<set>> macro call in the Credits passage:
    <<set setTimeout(
    			function() {
    				console.log('capts: ' + document.getElementById("capts"));
    				console.log('client height: ' + document.body.clientHeight);
    
    				// Delete the above console.log calls and place your code here!
    			},
    			500);>>
    

    You did not include links to the movie-captions style javascript you wanted to run.
  • yunyun
    edited April 2016
    Thanks!
    This is the resulting code:
    <<set setTimeout(
    		function() {
    		var pos=document.body.clientHeight;
    	    var element = document.getElementById("capts");
            element.style.top=document.body.clientHeight+'px';
            element.style.width=document.body.clientWidth;
            document.getElementById("passages").style.overflow='hidden';
    (function(){
            if (pos>0) {element.style.top = (--pos)+'px';  
            setTimeout(arguments.callee, 10);}
            else document.getElementById("passages").style.overflow='';
        })();
    			},
    			100);>>
     <center>THE END (not moving)</center>
    <div id="capts"  style="{top:9999px}"> <span><center>Captions go here...
    ...
    </center>
    </span></div>
    
    It also requires the stylesheet:
    #capts {
       background: black;
       color: white;
        position: relative;
        text-align: justify;
    }
    
  • BTW, where can I view this console.log? I'm pretty tired of using alert() for debugging ;)
  • Your web-browser's Developer Tools will have a Console area where the output of console.log will be displayed. How to access your web-browser's Developer Tools can be different for each brand but the F12 key short cut works in some.
  • Thanks, it's Ctrl-Shift-K in Firefox.

    BTW, I wrote one more nice function based on the previous idea. It fades out the final passage, then goes to credits:
    <<set $fadeoutgoto=
    function(psgname)
    { function getcolor(col) {
           var colornames={
            aqua: '#00ffff', black: '#000000', blue: '#0000ff', fuchsia: '#ff00ff',
            gray: '#808080', green: '#008000', lime: '#00ff00', maroon: '#800000',
            navy: '#000080', olive: '#808000', purple: '#800080', red: '#ff0000',
            silver: '#c0c0c0', teal: '#008080', white: '#ffffff', yellow: '#ffff00'
            };
            if (col[0]!='#') col=colornames[col] || '#FFFFFF';
            if (col.length==4) col='#0'+col[1]+'0'+col[2]+'0'+col[3];
            return Number(col.replace('#','0x'))
      }
    	   var col=document.getElementById("passages").style.color;
           var colx=getcolor(col);
           (function(){
            if ((colx-=0x010101)>=0) {document.getElementById("passages").style.color = '#'+colx.toString(16);  
            setTimeout(arguments.callee, 10);}
            else {setTimeout(function(){document.getElementById("passages").style.color=col;},100);state.display(psgname)}
            })();
    }
    >>\
    So this is the end... sad but true.
    <<set $fadeoutgoto("credits")>>
    
Sign In or Register to comment.