Howdy, Stranger!

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

Scrolling text & a second window in Sugarcube

Hello!

I'm in the middle of creating a prototype for my next Twine game, but have run into a couple of issues and was wondering if anyone was able to help me? I should point out I am very much a beginner when it comes to creating macros using JavaScript and the suchlike, so any help would be greatly appreciated! I'm currently using the Sugarcube header.

Firstly, I'm trying to create a macro which would display text on a letter by letter basis. I've found some JavaScript code which does this, but I'm having trouble adapting the code for use as a Twine macro. The code can be found here: http://jsfiddle.net/bzBzL/

Secondly, I'm trying to create a second pane outside the main passage pane to display additional information, as in Sharpe's Dumb Terminal stylesheet - http://twinery.org/forum/index.php/topic,691.0.html (I have to say a huge thanks to Sharpe for this stylesheet, as it has formed the basis of my game; I've managed to get pretty much everything in it working in Sugarcube bar this one element) . I've been able to create a second passage by using the <<display>> macro to call a passage, wrapping it in a div, and then styling it so it appears next to the main passage. However, this seems overly cumbersome as it would involving having a <<display>> macro in every single passage, rather than simply calling it when I want the content of the passage to update.

Any help with either of these issues would be fantastic!

Thanks!

Comments

  • Have you tried using the PassageReady or PassageDone passages? If you put code in one of those to create the DIV, you wouldn't have to put it in every passage.
  • Hi. I'm using similar display features for my project. Some things I found useful:
    • Leon's Typewriter effect: http://www.glorioustrainwrecks.com/node/5161 Works in 1.4 though you don't seem to be able to control the speed anymore sadly. (Let me know if you need any help getting this one working or if you yourself find a better method for doing this.)
    • Sounds like you have may already have a core stylesheet of two screens to work with, but I have been building from this one here called "The Earth's Story Illustrated" http://www.glorioustrainwrecks.com/node/5163
  • I tried using the PassageReady passage, and was able to create a div but what I couldn't figure out is how to alter the text in the div if needed. Using <<if>> statements to determine which <<script>> is loaded didn't seem to work. Whilst I could just have the second window display one piece of text, I'd like to somehow have the ability to alter it.

    I think the issues stems from the fact that Sugarcube has made significant changes to the History prototype, meaning that you can't really use History.prototype.display.

    Commissar 64 that Typewriter effect is brilliant! I managed to get this working in Sugarcube by replacing all references to state.history[0].passage.title with state.active.title and it works like a charm! It seems that the speed is able to be controlled as well, which is good.
  • It has nothing to do with SugarCube's changes to the History prototypenot that anyone should be modifying it anyway (without a damn good reason).  Modifying the History prototype is both completely unnecessary in the vast majority of cases and quite perilous unless you know exactly what you're doing (and most people who think about doing it do not).

    Anyway.  I'm assuming that that you only need one secondary sub-display area and that you're using some variant on the .storyRegion style for it.  If that's the case (and I'm understanding what you want), try this:

    Add the following to the StoryInit special passage: (this creates your sub-display container)

    <<script>>
    var region = document.createElement("div");
    region.id = "sub-display";
    document.body.insertBefore(region, document.body.firstChild);
    <</script>>
    Then anytime you need the sub-display updated, simply do something like this: (using the &lt;&lt;replace&gt;&gt; macro)

    <<replace "#sub-display">>stuff<</replace>>

    /% For example: %/
    <<replace "#sub-display">>In the beginning<</replace>>
    <<replace "#sub-display">><<display "Some Passage">><</replace>>
    For instances where you want to update the sub-display via displaying a passage, you could wrap that in a &lt;&lt;widget&gt;&gt; macro to make it less wordy.  For example:

    <<widget subDisplay>><<replace "#sub-display">><<display $args[0]>><</replace>><</widget>>
    Usage:

    <<subDisplay "Some Passage">>
    You'll also, obviously, need to change the selector in your CSS for the sub-display from .storyRegion to #sub-display.
  • That worked brilliantly TheMadExile, thank you! I had to play a little bit with the CSS in order to display the two elements exactly how I wanted, but I got there in the end.
  • I have a related question, so: thread necro.

    I have been trying to write a macro that gets the value of the "data-passage" attribute of the first child of the div id="passages" and displays it in a span elsewhere in the document, but I haven't been able to get it to work. In the first place, I guess I'm not sure where I should be putting it. I've tried putting it in PassageReady and PassageDone; my assumption was PassageDone was the correct place. It looks something like this:
    <<script>>
    var passagesDiv = document.getElementById( "passages" );
    var passagesFirstChild = passagesDiv.firstChild;
    var passagesStatusTitle = passagesFirstChild.getAttribute( "data-passage");
    var titleTarget = document.getElementById( "statusBarSceneTitle ");
    titleTarget.innerHtml = passagesStatusTitle;
    <</script>>
    edit: of course, shortly after I post, I find a solution. And, of course, it turns out the issue is much simpler than I thought it was. Twine has a function which can be used to assign a passage title to a variable. It's just a matter of assigning a value to the variable and displaying it each refresh.
  • lit wrote:

    edit: of course, shortly after I post, I find a solution. And, of course, it turns out the issue is much simpler than I thought it was. Twine has a function which can be used to assign a passage title to a variable. It's just a matter of assigning a value to the variable and displaying it each refresh.


    Indeed.  You can simply use the passage() function to get the title of the rendered/rendering passage.  For example: (if #statusBarSceneTitle is guaranteed to exist)

    <<script>>
    document.getElementById("statusBarSceneTitle").innerHtml = passage();
    <</script>>
    Unless you plan on putting HTML in your titles, however, I'd suggest using the textContent property, rather than innerHTML, since content assigned to it will be treated as text, rather than HTML, which is likely what you want.  For example:

    <<script>>
    document.getElementById("statusBarSceneTitle").textContent = passage();
    <</script>>
    The same thing but using jQuery:

    <<script>>
    $("#statusBarSceneTitle").text(passage());
    <</script>>
  • Thank you! That code is much less clunky that what I wrote myself.
Sign In or Register to comment.