How would I make a player facing flowchart of their decisions to facilitate easy replaying of certain parts? Example of flowchart.
The two things that I want out of such a flowchart is that it should allow the player to click on a node to play that passage again without having to restart the whole game, and should visualize the nodes in a tree for intuitive understanding of the flow of events.
I’m not sure where to start with this, since I’m mostly only familiar with the passage tools, not any of Twine’s scripting or styling tools (though I can understand JS and CSS given some effort).
I’m using the Twine in my browser. I don’t have an attachment to any specific story format, so I’ll go with whatever one works the best for this particular situation.
If you’re using the SugarCube story format in Twine, then you can use the State.index() method to get the history of choices players made in the game, going back as far as Config.history.maxStates is set to (default is 100).
With that information, you can use the Engine.go() method to send players back to moments in their playthrough’s history.
As for automatically building a flowchart, well, that isn’t easy to do automatically. In most cases you’d be better off doing that manually, and then simply highlight the nodes based on the history. Looking at the examples you gave, it looks like they were all manually created. I’m not saying it can’t be done, it certainly can, I’m just saying that computers aren’t great at making things look good to humans without a lot of work.
About the flowchart part, you probably can build it with images. One would be the background, others would be conditional rooms or updated rooms. Image positions should be absolute to ensure proper surimposing.
In html images can be support to multiple links, each depending on a zone of the picture.
I’ve never done anything like this, so I’m not offering any coding, just take it for an idea, not a solid solution.
There are countless ways of doing that. You could use individual images, one single image along with an image map, or using pure HTML/CSS. You could also generate it in an image editor or by putting the data into an array or other JavaScript object.
Which method works for you depends on how you want it to look and where your skills lie.
Reading your answer closer, it seems that this use case is for traveling through a user’s history. What if I just want to have a player travel to different passages in the story that they’ve played already? Like, they make a choice, and go down one path until it reaches a dead end. Instead of rewinding the history, they go to the passage in which the choice was made and go down the other path.
Edit: I remembered the Jump To menu was a thing. So the question becomes how would I style that?
If you don’t want to go back in the history, you could simply use the Engine.play() method to go forward to whatever passage name you want.
As for styling the “Jump To” menu, I’d recommend simply viewing it in your browser, right-click on it, choose “Inspect” (or whatever your particular browser calls it), and then you’ll see the HTML and CSS for it, plus you’ll be able to manipulate the CSS however you want from there. Once it looks the way you want, simply copy whatever CSS changes you made in the browser over to your game’s Stylesheet section.
