Scrolling chatlog running alongside game

Authoring Twine
,
1

Twine Version: Twine 2.5.1.0
Story Format: Sugarcube 2.36.1

I’ve been very out of the loop on creating IF with Twine, and slowly getting back into things, and I’m piecing together a new point-and-click style puzzle/adventure game. The actual game system is functioning pretty well, the trouble’s come with the secondary gimmick of the game I want to implement - namely, a chatlog-style conversation between two people that’s continually running as the player navigates through the game that comments on what’s being done as it’s happening.

I had originally set up a sidebar UI with the hopes that I’d be able to use triggered events to make various chunks of the conversation load into it as the player encountered things in the main game. But every time the player navigates to a new passage, the sidebar gets reloaded. And unfortunately, I’m not a very good coder, so this is where my creativity on that front has run out.

Any help or ideas on how to make this work would be very appreciated! Thank you.

Prototype layout below, in the hopes that it’ll explain my intentions a liiiitle better than my rambling so far:

image
image2722×1692 93.6 KB

1 Like
2

If you are using code something like that found in this old post to implement your own “right side-bar” then the code segment in the 1st example that calls the setPageElement() function…

/* Automatically show the contents of the StoryRightSidebar passage in the right-ui-bar-body element. */
postrender["Display Right Sidebar Contents"] = function (content, taskName) {
	setPageElement('right-ui-bar-body', 'StoryRightSidebar');
};

…is what is causing the contents of the StoryRightSidebar Passage to be injected into the newly added <div id="right-ui-bar-body"> HTML element.

And it is the fact that that setPageElement() function call is contained within the body of a postrender Navigation Events task that causes that “area” to be refreshed each time a Passage Transition occurs. So if you don’t want that “area” to be refreshed after each Passage Transition then don’t call the setPageElement() function within such a task or event.

Now that that “area” doesn’t automatically refresh you will need to use macros like <<append>> and <<replace>> to update the content of it.

<<link "do something">>
	<<append "#right-ui-bar-body">>Something was done<</append>>
<</link>>
1 Like
3

This worked splendidly, thank you very much. Is there any way to make the contents of that sidebar either scroll up automatically (so the most recent messages are visible at the bottom without the user needing to scroll manually), or to delete older messages so scrolling isn’t necessary? I’ve done some combing of the forums but haven’t noticed anything that might help.

4

I know this is an old thread, but nobody answered the last question previously, and I thought of a way to do it if you don’t need scrolling to see the history.

I would consider keeping the contents of the log display in an array. Then when you add new items, you can do $logdisp.push($newitem), and when $logdisp.length > 10 or however many items you want, just do $logdisp.shift() to remove the oldest item. As Greyelf mentioned, just use <<replace>> after any change to update the display.

I think commentary like this sounds like a fun mechanic for a game! Or even a method to add a “director’s comments” version to a postcomp release of a game.

5

I made an autoscroll! I think you’d just have to change the element that’s being referred to in the javascript, searching for 'right-ui-bar-body' rather than 'story'. not 100% sure tho.

1 Like