›

Howdy, Stranger!

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

Sign In Register

Categories

Sugarcube- Text on the bottom, auto scrolling as it more lines appear.

k3lit0k3lit0
in Help! with 2.0
I want each passage to have the long "text appears and the passage scrolls" look that Jonah has. Then eventually a link takes you to the next chapter, which is its own long scrolling passage. Ideally I would like the text to appear at the bottom and push old text up.

Currently the only way I can see to do this is to have multiple output spans and have a lot of replace macros. I can use the display macro to help but it's still not as simple as I'd like. Any suggestions would be much appreciated.

I guess my main questions are-

1- Is there a way to have text appear at the bottom of the passage, and then new text appear below while pushing up the older text? Similar to facebook chat, in a way. I guess it would be that the page is always scrolled to the bottom, really.

2- Is there a way to keep the passage text from going all the way to the bottom of the screen? I have a bar at the bottom where options appear like in a visual novel but I can't keep the passage from overlapping it.

http://puu.sh/k0kEP/a6d69b03c6.jpg

That overlapping text is driving me insane, I've tried padding and margin and height and everything I can find.

Please help! Thanks in advance.

Comments

  • TheMadExileTheMadExile
    1. I'm going to post what's becoming my usual discouragement in attempting to recreate Jonah in SugarCube here.

    SugarCube is not designed to work in that fashion. While you can approximate it by appending new text blobs to a passage via various methods, in doing so you are subverting the story history, which works via passage navigation (i.e. going from passage to passage). By subverting the story history, you subvert much of the usefulness of history navigation and saves.


    2. If you have the bar fixed to the bottom of the page, then you'll have to fix the story display area as well. Something like the following should do what you want without breaking any of the normal UI: 
    #story {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 100px; /* Set this to be a bit greater than your bar's height. */
	margin-right: 0;
	margin-top: 0;
	padding-right: 2.5em;
	padding-top: 2.5em;
	overflow: auto;
}
  • k3lit0k3lit0
    I understand the discouragement, but is there a better way to have conversations in twine? I thought it would be weird to jump from passage to passage for a quick back and fourth. And if a scene has a few elements I thought it'd be nice to have things progress on one screen. I suppose i could fake it and have the next passage look the same but the text has changed... Maybe disable transitions so that it's smooth.
  • TheMadExileTheMadExile
    You specifically called out Jonah for its infinite scroll and mentioned each passage being a chapter. That very specifically does not sound like any "conversation" I might at first imagine.

    So, a more detailed explanation of what you mean by conversations would be helpful.
  • k3lit0k3lit0
    Well ideally it would be longer, with chosen options adding text similar to Jonah and forming a long passage before taking you to the next chapter. But if that's not to be I'd still need conversations, so that style of "new things appearing" would have to happen.

    I currently have a very rough method of doing this that involves replace, click, and displaying other passages. I'm at work right now so i can't link it but i can later if it helps.
  • TheMadExileTheMadExile
    It would, yes.
  • k3lit0k3lit0
    I'll do it as soon as I'm home, thanks for all your help.
  • k3lit0k3lit0
    Ok here's how I'm doing it. I use the linkbar code you wrote to have that section at the bottom for dialog options.

    The passage you're actually on as this-
    <<display V-C1-1 ["Start"]>>

<span id="output"></span>

<span id="output2"></span>



    The V-C1-1 passage that is being displayed initially has the following-
    The text to display, which shows up in the main area

<<replace "#linkbar">><div class="header"><span id="question">Question1</span></div>
<<nobr>>
<div class="options">
<span id="option1">
<<click "Option1">>
	<<replace "#option1">><</replace>>
	<<replace "#option2">><</replace>>
	<<replace "#output">><<display "V-C1-1-2" "div">><</replace>>
<</click>>
</span> <span id="option2">
<<click "Option2">>
	<<replace "#option1">><</replace>>
	<<replace "#option2">><</replace>>
	<<replace "#output">><<display "V-C1-1-3" "div">><</replace>>
<</click>></span>
</div><</nobr>><</replace>>

    Then there's a passage for each option which has its own branches. These branches output to "output2". I could add more output spans for each line needed, but I hope there's a simpler way to do this. This is fine for a few big paragraphs and just a few options, but it gets clunky for a back and forth conversation.

    I would like it if the passage was always scrolled down, too, so that new text is always visible and older things go upwards.
  • TheMadExileTheMadExile
    Linkbar code that I wrote? Waaait, you don't mean this, I hope? If so, that's for SugarCube 1.x, not 2.x. I'm surprised that actually worked, it certainly can't be working well.


    Anyway. You seem to be overcomplicating things quite a bit. Maybe there's a reason for that, maybe not. However, I think you could probably simplify what you're trying to do now.

    With that in mind, I've attached a full working example of what I think you should probably be doing. It includes a revamped linkbar, auto-scrolling story area, and simplified conversion mechanics (revamped JavaScript and CSS as well). I believe it covers more or less everything you were looking for.
  • k3lit0k3lit0
    Yup, that's exactly what I'm using. I adjusted it a bit to make it work, but it was working OK.

    Thank you for the help, you're awesome. Do you have a patreon or something? :)
  • k3lit0k3lit0
    TheMadExile wrote: »
    Linkbar code that I wrote? Waaait, you don't mean this, I hope? If so, that's for SugarCube 1.x, not 2.x. I'm surprised that actually worked, it certainly can't be working well.


    Anyway. You seem to be overcomplicating things quite a bit. Maybe there's a reason for that, maybe not. However, I think you could probably simplify what you're trying to do now.

    With that in mind, I've attached a full working example of what I think you should probably be doing. It includes a revamped linkbar, auto-scrolling story area, and simplified conversion mechanics (revamped JavaScript and CSS as well). I believe it covers more or less everything you were looking for.

    Sorry i don't actually see the attachment which might be because i said you answered the question? D:
  • TheMadExileTheMadExile
    That's the second time recently that an attachment has gone AWOL. What the heck.

    Okay. Attaching the example to this post.
Sign In or Register to comment.