How to I navigate to a new passage after a set time out in Snowman 2.0.2 Twine

Authoring Twine
, ,
1

I’m new to twine and the documentation of snowman isn’t much help without corresponding examples. Right now, I’m trying to navigate from one passage to another based on certain time (example: 5 seconds). How can I achieve this?

also, are there examples on how I can use window.story to get the passage name? I tried using window.story.show(“id”) but this just prints in the passage as text.

Any help would be greatly appreciated, thank you!

2

As explained in the documentation…

Snowman is a minimal Twine 2 story format designed for people who already know JavaScript and CSS

…so it assumes that the Author already: has knowledge about how to use JavaScript, and experence with reading API like documentation. The official Twine Cookbook does include some Snowman based recipes.

You can use Snowman’s story.show() function to programmatically cause a Passage Transition, and JavaScript’s setTimeout() function to delay the execution of that story.show() call. A HTML<script> element may be needed if you intend to do the above within the contents of a Passage.

The following TWEE Notation based example demonstrates using the above to achieve the outcome to mentioned…

:: Start
Wait five seconds...
<script>
	setTimeout(() => {
		story.show('Other Passage');
	}, 5000);
</script>

:: Other Passage
Welcome to the Other Passage.

If you intend to do many such delayed transitions then you may want to declare a custom function that you use instead of the above <script> wrapped code.

The following JavaScript first declares a personal Namespace to store any custom functions you may need, I call mine GE but you should use your own unique identifier. Next a custom function named delayedGoto() is added to the Namespace, which contains the code from the <script> with two arguments added. This code should be placed within your project’s Story JavaScript area.

window.GE = window.GE || {};

GE.delayedGoto = function (passageName, delay) {
	setTimeout(() => {
		story.show(passageName);
	}, delay);
};

warning: The above example does not include any error catching code, nor does it validate any arguments passed to the function.

The following TWEE Notation demonstrates how to change the 1st example to use the new custom function…

:: Start
Wait five seconds...
<% GE.delayedGoto('Other Passage', 5000) %>

:: Other Passage
Welcome to the Other Passage.

You can use the name property of the window.passage object to access the Name of the Passage currently being shown/visited.

The following shows how to change the above Other Passage Passage definition to reference that object’s property.

:: Start
Wait five seconds...
<% GE.delayedGoto('Other Passage', 5000) %>

:: Other Passage
Welcome to the <%= passage.name %>
1 Like
3

Thank you! I wanted to add a delay only for a single passage, the first option suggested by you worked.