Fixed Part of Screen and Clicking Through Dialogue

Question

I realize I'm trying to make Twine do something it's really not suited for, however, I'm far too deep into development on my project to switch engines to something like Ren'py. There'd just be too much lost development time learning Python and porting the content over. So, I have two questions!

1. How can I fix the top half of the screen in place? Basically, I want an image of all currently present actors at the top of the screen, while only the bottom half can be scrolled down for dialogue. This feels like something I should be able to do with CSS Grid, but I'm still kinda wrapping my head around that one.

2. I want a system where I'll show only 2-3 lines of dialogue at a time, followed by a "Continue" button which has to be clicked in order to replace the existing dialogue with new dialogue. I have two methods of doing that, but I was hoping there was something a little more efficient.

<span id="text">\
  ''Here is some text.''
  ''Here is more text.''
  <<click "Continue...">>
    <<replace "#text">>\
      ''Here's the next line''
      ''Here's the next next line...''
      
      <<click "Continue...">>
        <<replace "#text">>\
          ''And we keep going and going...''
        <</replace>>\
      <</click>>
    <</replace>>\
  <</click>>
</span>\

This gets out of control pretty quickly, and it's easy to lose my place in the code, and it kills any value of having saves and passage history... I usually use the following method...

"Passage name is "Story1", endpassage code set $c to 0."

<<switch $c>>\
  <<case 0>>\
    ''Here's some text.''
    ''Here's some more text.''

    [[Continue...|Story1][$c=1]]
  <<case 1>>\
    ''Here's where the dialogue continues.''
    ''And here's even more.''

    [[Continue...|Story1][$c=2]]
  <<case 2>>\
    ''And we're going...''
    ''...and going...''

    [[Continue...|Story1][$c="ohmygodwhataamIdoingwithmylife?"]
<</switch>>\

This keeps things a lot more organized, keeps saves and history intact, etc. It's probably the best way to do something horrible like this but I'd like to know if there's something better!

Thanks.

Answer 1

1. How can I fix the top half of the screen in place?

It's hard to offer advice without knowing, specifically, what you want.  What are the dimensions of the image?  Should it be shown as-is or cropped a bit?  Do you want it in a box or more like a background?  Et cetera.  Some details would help.

 

2. I want a system where I'll show only 2-3 lines of dialogue at a time, followed by a "Continue" button which has to be clicked in order to replace the existing dialogue with new dialogue.

That's probably about as good as you're going to get considering what you want.

Though, you could simplify the return to the same passage links a bit.  For example:

[[Continue...|passage()][$c=1]]

The passage() function returns the name of the current passage.  That way you don't have to hard code the passage name.

Comments

That passage() function is great to know. Thanks!

As for the first, I guess I'm less concerned with how the image is handled and more about just having a fixed area that doesn't move when you scroll the lower area. Not counting the sidebar, you'd have a top and bottom frame, basically. Once I have that I can tweak to my needs.

---

Try something like the following JavaScript:

$('<div id="imagebox-wrapper"><div id="imagebox"></div></div>').prependTo('#story');

The wrapper is simply there for styling.  Add images to the background of #imagebox or whatever you plan on doing.

And the accompanying styles:

body {
	overflow: hidden;
}
#passages {
	border: 1px solid #444;
	height: 280px;
	overflow-y: scroll;
}
.passage{
	margin: 1em;
}
#imagebox-wrapper {
	border: 1px solid #444;
	margin: 0 auto 10px;
	max-width: 54em;
}
#imagebox {
	height: 580px;
	overflow: hidden;
}

That's not responsive at all, but it should serve as a starting point.