0 votes
by (120 points)
I would like to make a game with a UI, similar to a lot of first person point-and-click adventures (Shadowgate for example), where the top half of the screen will display an image of your location (or whatever you are seeing) and the bottom half will display all the text. I want to make it so that when the player is scrolling through the text, the image doesn't scroll along with it, but stays on the screen. I suppose this can be achieved if the image is somehow displayed over the text and scrolling is disabled. I am not quite sure how to do this, though. I am using Sugarcube 2.21.0 and I am still very new to CSS. Can anyone help me with this?



1 Answer

0 votes
by (23.6k points)

You could just create a new div that holds your image. In the following example I got rid of Sugarcube's UI-bar. If you want to keep the bar, you'll have to play around with the css and see what ends up looking right. First we set up the new elements in our CSS-stylesheet:

#passages {
  position: absolute;
  left: 50%;
  bottom; 1%;
  transform: translateX(-50%);

#picture {
  background-color: #111;
  position: fixed;
  bottom: 50%;
  left: 50%;
  top: 1%;
  transform: translateX(-50%);
  border: 1px solid white;

Then add them via our JabaScript section:

$('<div id="picture"></div>').appendTo(document.body);

Then we call the appropriate picture within our passage like this:

<<replace "#picture">>Your Picture<</replace>>


Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.