How to create a 'gameplay area' for passage content

Authoring Twine
, ,
1

By default twine renders all the content of a passage directly over the main background.

However, what i want and have seen in a number of the twine/sugarcube games is a dynamic ‘gameplay area’. Basically another window over the background that is a separate entity from the background where the content of the passages is displayed. It’s generally dynamic and adjusts the area size to fit the amount of text or images in a given passage accordingly and can even have it’s own styling changed on the fly.

I gather this would probably be done with CSS in the stylesheet but i’m currently lost for how to go about it or to even start learning about how to go about it.

Hopefully this is clear enough, but i’m still very much learning all of this. Advisement would be appreciated!

1 Like
2

You might find some interesting leads here…

→ https://www.reddit.com/r/twinegames/comments/tx2pc6/are_there_general_templates_that_most_game_makers/

1 Like
3

You could just link this thread :joy:

It’s more up to date!

1 Like
4

It’s all about using the StoryInterface special passage, to build the interface from scratch.

5

While others have mentioned the StoryInterface passage, which essentially allows you to replace the whole SugarCube UI with your own, all it sounds like you are asking about is how to visually separate the passage from the background of the window, i.e. to put a box around it, like this:

image
image1704×736 79.1 KB

(But perhaps with an image behind it instead of more blackness :D)

In that case it’s a simple matter of adding a rule to your Stylesheet along these lines:

.passage {
     border: 1px solid white;
     background: #666;
     border-radius: 1em;
}

You can obviously get a lot more fancy, adding background images and the like, but in essence this is all you need to separate out the passage from the background.

if you want that styling to differ based on passage tags, or indeed for specific passages you can add more rules, e.g.

/* Target a passage based on tags */
.passage[data-tags~="forest"] {
     background: green;
}
/* Target a passage based on name */
#passage-name-as-an-id {
     background: red;
}
3 Likes
6

Lots of good resources here, so thanks for that!

But @Hituro pretty much nailed exactly what i was looking for. Perfect place to start building off to get what i want. Greatly appreciated.

1 Like