Twine: What is it and how is it used in game development / ITech content

Contents:

• A Brief History of the Program
• What Twine is Used for
• Is It Necessary to Know Programming to Work in Twine?
• How Twine Works?
• What is the Difference Between the Browser and Desktop Versions of Twine?
• Examples of Games Developed in Twine
• Conclusion
• Useful Links

Before starting to create a nonlinear narrative, developers, narrative designers, and authors of interactive fiction often face the issue of sequencing various plot lines. There are many programs for working with hypertext, but Twine stands out as one of the simplest and most accessible tools for realizing ideas. This tool makes it easy to create interactive stories, giving users the ability to choose the path of the plot. With its intuitive interface and flexible customization options, Twine is an ideal choice for both beginners and experienced creators looking to experiment with storytelling forms and formats.

In this article, the Skillbox Media Gamedev editorial team takes a detailed look at Twine, its capabilities, and its uses. Twine is a popular tool for creating interactive stories and visual novels, suitable for both beginners and experienced developers. We'll explore Twine's key features, interface, and usage, as well as share helpful tips for creating engaging content. Discover how Twine can help you create unique game projects and interactive stories.

A Brief History of the Program

Twine is free software designed for authors of interactive fiction. The program was created in 2009 by Chris Klimas, a web developer and indie game designer specializing in narrative projects, primarily for mobile platforms. Klimas initially developed Twine as a hobby, but over time, user interest in the tool has grown significantly. Twine enables the creation of interactive stories where readers can make decisions that influence the plot, making it an ideal tool for writers looking to experiment with narrative form and structure.

Today, nearly 15 years after its inception, Twine has received two full versions, the latest of which is regularly updated. Despite its niche nature, the program enjoys active support from a committed community, including the Interactive Literature Technology Foundation (IFTF). The current version of Twine is 2.7.0, released on July 8, 2023. Twine continues to evolve, attracting the attention of developers and authors of interactive literature.

What is Twine used for?

• A more comfortable presentation of interactive literature for the reader. If desired, the narrative can be made more immersive through illustrations and sound.
• Prototyping games with non-linear plots, such as visual novels or RPGs. In Twine, all plot branches are always visible, and they can be tested before integrating into the original project.
• Development of full-fledged text games with non-linear plots. In this case, Twine acts as an engine.

At the Centre for Writing and Communication at the South-Eastern University of New Zealand, Twine was used for interactive testing for staff. The project developed simulations of typical situations that mentors encounter when working with first-year students. This methodology has enabled the introduction of creative approaches to teaching, which contributes to the establishment of trusting relationships between students, mentors, and teachers. Interactive tools make the learning process more engaging and effective, which is especially important for a young audience who require a personalized approach and engagement.

Do I need to know programming to work in Twine?

Twine is a powerful tool for creating interactive stories, allowing you to build both linear and non-linear text fragments using hyperlinks. The program is based on HTML, one of the most accessible web design languages. With Twine, users can not only create text stories but also extend their functionality by adding variables and macros using CSS and JavaScript. These codes are integrated into text blocks and depend on the selected story format, which is a fixed set of functions and macros. This makes Twine an ideal tool for authors looking to create interactive and engaging content.

By default, Twine 2.0 uses the Harlowe format, which is ideal for beginners thanks to its simple code. This code combines features from three main languages, making it accessible and understandable. The first version of the program only supported the SugarCube 1 story format, which is now considered obsolete due to its limited functionality. Harlowe's choice allows you to create interactive stories more efficiently and with less learning curve.

If you want to create an interactive novel in Twine with a non-linear plot and add simple visual or audio elements, you don't need to delve into programming. The syntax for integrating such features is quite intuitive. However, if you plan to develop a full-fledged role-playing project with character customization, numerical parameters, and more complex content elements such as pop-up images or text strings, you will need a more detailed understanding of story formats and the languages ​​they use. It's important to understand that the right technical skills can significantly expand your project's functionality and improve the user experience.

How Twine Works

Let's review the basic principles of working with Twine 2. To begin creating a new story, click the +New button. You'll then need to enter a title for your story, though you can postpone this option if you prefer. Clicking the shortcut will open a grid-like workspace with the first block of text. Depending on the length of your story, the number of these blocks, called paragraphs in Twine, can increase significantly, exceeding one hundred. Twine 2 provides a convenient interface for organizing and managing your content, allowing you to easily add new paragraphs and link them together to create interactive stories.

Use the left mouse button (LMB) to move paragraphs. Double-click to edit the content. To preview the result in the browser, open the Build menu and select Test or Play mode. These features will help you work effectively with text and visualize changes in real time.

The text typed in the paragraph without any changes or settings will be displayed like this. It is important to remember that proper text structure, formatting, and keyword use play a significant role in SEO optimization. This helps increase the visibility of the page in search engines and attract the target audience. Optimized text should be readable, contain relevant information, and match the interests of users. It is also important to use headings and subheadings to improve navigation and content comprehension. Avoid overusing keywords to keep the text natural and interesting for readers.

To create branching plots, You should highlight the hyperlinked word or phrase using two square brackets. This will cause additional branching paragraphs to appear in real time in the workspace, allowing you to open and edit them. This approach allows you to effectively organize and develop storylines, improving interaction with the content.

Note:

Notes play an important role in structuring information and providing Its clarity. They can be used to add additional information, clarifications, or references to sources, allowing readers to better understand the context. It is important that notes are clear and concise, without distracting from the main topic. Using keywords in notes can help improve the SEO of the text, making it more accessible to search engines and attracting the attention of the target audience. Properly formatted notes facilitate better perception of information and increase the level of trust in the content.

For new paragraphs, you can use titles different from the highlighted words. To do this, specify them in the editor in the format [[link to next paragraph|paragraph title]]. In practice, this is implemented as follows.

For detailed information on creating hyperlinks, we recommend referring to the official documentation. Here you will find all the necessary instructions and recommendations to help you effectively use hyperlinks in your projects. This is an important aspect of web development, allowing you to improve site navigation and increase its functionality.

To enhance the perception of the story, it is worth adding images, such as illustrations, background design, animated GIFs, or logos. To do this, you need to include a link to an image from the Internet in the text paragraph or upload the file directly from your hard drive. Please note that the information on adding images is outdated, so for correct display of images, we recommend watching the video tutorial below.

A note is an important remark or clarification that helps improve understanding of the text or context. Notes can contain additional information, references to sources, explanations of terms, and other relevant details. They are often used in scientific and academic works, as well as in literature, to provide readers with a deeper understanding of the topic. Properly formatted notes improve comprehension and make the text more informative.

If you plan to make your project publicly available and use content from the internet, it's important to carefully verify its origin. Failure to comply with copyright laws can lead to serious consequences. We recommend familiarizing yourself with information about content in the public domain. Subject to certain conditions, it can be legally used in your projects.

By completing a few simple steps in the first paragraph, we have created an example of the beginning of a non-linear narrative. From there, we can move on to creating branching plots, gradually developing the story, as mentioned earlier. It is also important to add visual content to each paragraph using scripts. Remember to regularly create backups of both the content and the story itself using the Build - Publish to File function. This will save all changes and avoid data loss, ensuring a smooth writing and editing process.

Once the project is complete, the HTML file can be hosted on your own website or on platforms that support HTML games, such as itch.io. For publishing interactive literature, we recommend using the specialized IFDB portal. If you are confident that your project is worthy of publication on Steam or other similar platforms, you will need to convert the content from web format into a full-fledged application. NW.js, formerly known as node-webkit, is a suitable tool for this task. This tool will allow you to create an application that will run on various operating systems while maintaining the functionality and interactivity of your project.

What is the difference between the browser and desktop versions of Twine?

The Twine versions have a similar appearance, but there are several key features that are important to consider when using Twine in a browser. These nuances can affect functionality and user experience, so it is recommended to take them into account for the optimal experience.

The size of the input data is limited and depends on the size of the browser's local storage, where cookies are usually stored. The web version displays information about available space in the upper right corner.

The web version of the app automatically saves your data, storing it in your browser's cache. However, there is a risk of losing information when clearing the cache, so it's important to back it up regularly. To do this, use the "Publish to File" feature. As in the desktop version, your entire history is saved in HTML format and placed in your browser's downloads folder. Even if you delete your history from the web app, you can restore it by loading the file directly from your hard drive and selecting "Library - Import." This ensures the safety of your data and prevents loss during the work process.

Examples of Games Developed with Twine

Developers actively use Twine as their primary tool for creating text-based games. This platform provides opportunities for the implementation of a variety of projects in various genres. We present you with several examples of games created with Twine, which demonstrate its functionality and creative potential.

Depression Quest is an interactive story that immerses the player in the world of a person suffering from depression. Despite the negative attention associated with the project and its developer as a result of the scandal known as Gamergate, it is important to note that Depression Quest was the first game on the Twine platform to be released on Steam. The scandal surrounding the project ultimately contributed to increased interest in Twine in the text-based games market. Many authors began to more actively explore the capabilities of this software, which led to an increase in the popularity of text-based games. Depression Quest not only attracted attention to its theme, but also opened new horizons for developers of interactive stories.

Scaffold 22 is a cyberpunk text-based RPG set in the distant future. The game offers unique gameplay, enhanced by atmospheric music, vibrant illustrations, and an intuitive interface that displays the protagonist's current stats. Scaffold 22 delivers over 20 hours of engaging gameplay, allowing players to immerse themselves in a captivating cyberpunk world and explore its depths.

Wayfarer is a dark fantasy role-playing game, offering players deep character customization and skill development. The game's plot is shaped not only by the player's decisions but also by the relationship between current skills and the results of dice rolls in the game. This creates a unique dynamic where the consequences of actions become less predictable, adding an element of surprise and increasing engagement. Players will be immersed in a captivating world where every decision matters and impacts the course of the game.

The Second Floor is a compact post-apocalyptic quest with a top-down view. In this game, players explore an abandoned hotel, navigating its rooms and interacting with various markers on the map. Players must carefully examine the environment, find useful items, and gather resources to survive. Every decision matters, and every action can lead to new discoveries or dangers. Explore the dark world of The Second Floor, where every corner holds its own secrets.

Nanopesos is a financial management simulator designed to teach financial literacy. The idea for the game arose in response to low wages and the high cost of living in Chile. The game teaches users how to manage their money effectively, recognizing when to avoid unnecessary expenses and when to indulge in small pleasures. Nanopesos helps strike a balance between paying bills and loans on time and spending wisely, which contributes to the improvement of the financial situation of players.

Despite its simple structure, Twine is a versatile tool for developing games across various genres. This editor allows you to create interactive stories and text adventures, making it popular among developers. To learn more about the diverse range of game projects created with Twine, visit the itch.io platform.

Conclusion

Twine is a convenient tool for creating interactive literature, combining ease of use and versatility. With its help, authors can develop original projects, immersing readers in a unique text experience. While Twine is a popular choice, there are more powerful alternatives on the market, such as articy:draft 3. Like any software, Twine has its advantages and disadvantages, which are important to consider when choosing a tool for developing interactive stories.

• The program is free, it does not require purchasing licenses, and it is easy to learn for users without programming skills.
• The ability to work on a project in the desktop version or directly from the browser.
• You can prototype the plot, as well as experimental mechanics, without using the original build of the game.
• The presence of open source code means that a more advanced user can modify the current tool to suit their needs.
• Detailed documentation on the program's website, a large and responsive community.

• The main drawback of Twine is the inability to collaborate on a project in real time. You need to constantly save the HTML file and send the data to another user for editing. Of course, it's always possible to set up remote access for co-authors to your computer. However, for security reasons, this method is only suitable for those whose team consists of people you can trust.
• Visual storytelling capabilities are limited. If the project focuses more on visuals than on text, it's better to consider a different platform or engine. Twine's structure is essentially just a flowchart for page navigation, and to define more complex logic, you'll have to program from scratch in JavaScript.
• Mastering the program's advanced features will take time, as the austere interface without built-in tooltips can initially be confusing for a beginner. As a result, users will have to consult documentation or video tutorials early on.

Twine, which appeared in the late 2000s, remains a popular tool for creating interactive literature, despite the fact that this segment remains niche. Projects developed with Twine can significantly enrich a narrative designer's portfolio. Furthermore, reader-focused games offer aspiring developers a first step toward attracting a small but devoted audience. Twine offers unique opportunities for experimenting with narrative and interaction, making it a valuable tool for those seeking to combine literature and technology.

Useful Links

• A playlist of Twine video tutorials from DigitalExposureTV.
• A half-hour overview of Twine for beginners in Russian (Artyom Vorobyov's channel).
• A beginner's guide to Twine 2.0 with accompanying videos and cheat sheets on macros and CSS variables in PDF from Adam Hammond. The author uses the SugarCube 2 story format.