THE KNOTTED









THREAD OF TWINE









(ENGINE)





I think TWINE is an extremely versatile engine that is under-utilized. I’m not sure if it’s because it’s advertised for being “easy-to-use” that it has kind of a low-down reputation, and I’m not sure if it’s because it’s free that its reputation is very low-tech / easily dismissed, but I think people don’t think highly enough of an engine that is easy, fast, and low-friction.

the concept of friction, which I was introduced to by the dev of the videotome engine, refers to the degree of stress / difficulty level / frustration when trying to get the engine to manifest your imagining.

sometimes, game engines will have extremely high production, but also extremely high friction which prevents me from utilizing them to the best of my ability, because it takes far too long to use them.

VISUAL NOVEL MAKER has some amazing functions, but is somewhat buggy and difficult to use. sometimes, you’ll get the command syntax right, but if you edit a certain command instead of deleting and replacing it, then it will refuse to function properly.

however, VN maker’s image mapping functionality is incredible, and so is its UI/UX adaptability. it’s probably on par with some UNITY plugins / usages, but VN maker has the advantage of not being overpowered as an engine as well as being specifically designed with VNs in mind.

BUT NOTHING BEATS THE KING, TWINE, FOR A RAPID-FAST WORKFLOW AND EASE OF CUSTOMIZATION AND INSTANT RESULTS.

TWINE is an engine designed for non-linear narratives due to its networking of passages.

you can, of course, create a linear narrative within it, using the passage-linking ability to simply turn the page, so-to-speak, but most people are familiar with twine from a “choose-your-own-adventure” standpoint of interactive fiction.

HOWEVER. to limit TWINE’s capabilities to only choose-your-own-adventure is nothing short of short-sighted.

basically, the way TWINE operates is that from any passage, you can link to any other passage. what this means is that using HTML links, you can connect any number of narrative threads similar to the choice branching that the visual novel genre is famous for.

an aspect of TWINE that would benefit the “poets” with a game dev itch is the way that you can link any string of text to another passage. it doesn’t have to be formatted as “a choice,” unlike many visual novel engines such as REN’PY.

in my gallery to the right, the bottom-left image in the final corner has a white link that has nothing to do with “player acknowledgment” at all (THE PLAYER IS A NON-ENTITY), and it simply presents advancement in the form of dialogue.

TWINE is a CSS goldmine. CSS/HTML benefit from very easy to understand syntax and next-to-no true logic. so, just with CSS, you can make a TWINE look like nearly anything you can imagine. in this case, it looks like a single-column page with old-school computer / arcade game font. I styled the dialogue boxes in ways particular to their speakers (black text / gold bg is haru; gold text / black bg is yuzu) which reflect their portraits.

there’s also a unique capability with custom CSS to nest styles within one another, such as the bottom-left image shows. haru’s dialogue is nested within the black of yuzu’s dialogue, showing that she’s controlling the conversation, and haru is swallowed up by her.

because TWINE is essentially pure HTML, you can also just insert .gifs in there as-is. I wrestled previously with REN’PY getting animations to work, and in the end had to loop them by inserting them frame-by-frame and timing them. with TWINE, as long as you have an image file, it can go in and works as-is.

TWINE is the closest fit I have found to a text-based engine that has just enough visual flair / customization that has a high ease-of-use and easy-to-memorize syntax that makes it the lowest friction engine for me to use.

a big plus is that TWINE is extremely easy to play-test, without any time-consuming workarounds or load-time. it opens right up into your browser instantly

TWINE is the closest to just writing a story and making it happen that I have found. once the CSS is designed, it just needs to be called, so it only really needs to be designed once, and then it can be left alone. doing the images/animations separately, treating them as completely separate entities, and then simply inserting them into a flexible “frame” I have already created in CSS is just the easiest workflow for me.

of course, bigger engines benefit from more functionality, but sometimes all you need is for one passage to go to another. and the time-sink in having to navigate and learn a big engine or construct a whole new workflow around the engine’s limitations, particularly in flexibility / ease of syntax / ease of use can really stifle creativity rather than inspire it.

TWINE is my favorite PC engine. maybe I’ll come back another time to talk about my favorite visual novel engine, which is actually a free android app called KOCHO.

that’s it, folks!

screenshots from THE RABBIT KING, my visual novel utilizing VISUAL NOVEL MAKER’s extremely easy-to-use and precise image-mapping to create choice-maps. in the screenshot below, when you hover over YES or NO, they glow and lead to branching paths, like a mindmap.

below are screenshots from MIRAI, a game with animated graphics with frames drawn entirely in MS paint. the engine i used was TWINE.

this is YUZU’S animation, yuzu is a black rabbit in this game

a screenshot showing more of the CSS (double bordered box, right-align) and the positioning of the .gif of haru

a screenshot showing the CSS nesting with the background bg remaining black even with haru’s gold double-bordered box remaining gold, even nested.

this is HARUICHI’S animation, he is a tailed kitsune. how many tails? you ask, wouldn’t you like to know.

a screenshot showing off the CSS (black bg box, alternate hex color for the text, left-align) and the positioning of the .gif of yuzu

a screenshot showing that it is a TWINE game after all, and has the little HTML link to the next passage (the white text is the link)