Thanks to the styling and hyperlink capabilities of Bisquixe, it’s now possible to move between Inform and Twine with relative ease, and vice-versa. You can check out a demo here:
Alien Vortex Demo by bjbest60 (itch.io)
Test it with X VORTEX / clicking on links / X ALIEN.
The files are also available for download. This game structure assumes that a player would reach the end of an Inform game, then play a Twine game to its end, at which point the player would be returned to a different Inform game. Thus it demonstrates both Inform → Twine and Twine → Inform, and you can structure your multipartite games as you see fit.
One key aspect to making this trick work fairly seamlessly is to ensure the stylings between Inform and Twine are consistent. So there’s a reasonable amount of CSS here to make it happen. But take the code, fiddle with it, and see what changes result! For more info on working with Bisquixe, you can check out the beginner’s guide I wrote.
The code for the first Inform game is:
"Alien Vortex" by "Biscuit Quick"
Part - Setup
Release along with a "Bisquixe" interpreter.
Include Simple Multimedia Effects For V10 by Mathbrush.
Include Basic Screen Effects by Emily Short.
Part - When play begins
When play begins:
import-google-fonts "Source+Code+Pro";
css-set-fast ".GridWindow; background; #00aa00"; [retro green]
css-set-fast ".GridWindow; color; black";
css-set-fast ".GridWindow; font-family; Source Code Pro";
css-set-fast ".GridWindow; font-size; 18px";
css-set-fast ".BufferWindow; background; black";
css-set-fast ".BufferWindow; color; #00aa00";
css-set-fast ".BufferWindow; font-family; Source Code Pro";
css-set-fast ".Input; color; #aaaaaa"; [gray]
css-set-fast ".Input.LineInput; font-family; Source Code Pro";
css-set-fast ".Style_input; color; #00aa00";
css-set-fast ".Style_input; font-family; Source Code Pro";
css-set-fast ".play; background; black";
css-set-fast ".coverimage; display; none"; [single column settings]
css-set-fast ".links; display; none";
css-set-fast ".interpretercredit; display; none";
css-set-fast "#gameport; left; 20%";
css-set-fast "#gameport; right; 20%";
css-set-fast "a; color; #00cccc"; ["a" styles the hyperlinks; we'll use cyan]
css-set-fast "a; font-weight; bold";
css-set-fast "a:hover; color; #00ffff";
css-set-fast "a:visited; color; #00cccc";
css-set-fast "::-webkit-scrollbar; display; none"; [no scrollbar]
Part - The final link
To say vortexlink:
hyperlink "into oblivion ..." as "zzxvm vortex";
Obliviating is an action applying to nothing. Understand "zzxvm vortex" as obliviating.
Carry out obliviating:
link-page "/alien.html" with TabOption 0;
HasVortexed is a truth state variable. HasVortexed is false.
Part - Lab
Lab is a room. "You're in a high-tech lab."
The green vortex is in the Lab. It is fixed in place. Understand "swirling" and "pulsing" as the green vortex.
Rule for writing a paragraph about the vortex:
say "A swirling, pulsing green vortex spirals and churns in midair in the center of the lab."
Instead of examining the vortex:
say "You tentatively approach the vortex. It spits green light. You hold up your hand to it, crossing its brink, and soon you are plummeting [vortexlink][line break]";
now HasVortexed is true;
css-set-fast ".Input; display; none"; [hide further input]
now the command prompt is "";
Instead of taking the vortex:
try examining the vortex.
Instead of touching the vortex:
try examining the vortex.
[And now a little hackery to allow only the link as an action after it first appears. The parser doesn't actually stop even though we've hidden the input line.]
After reading a command when HasVortexed is true:
if the player's command matches "zzxvm vortex": [this command is assigned above]
try obliviating;
otherwise:
say "You can't do anything else when you're falling [vortexlink][line break]";
stop the action.
Rule for printing a parser error when HasVortexed is true:
say "You can't do anything else when you're falling [vortexlink][line break]";
stop the action.
We then need to use similar CSS statements in Twine. Also note that the “into oblivion” link opens to “alien.html”. That’s my exported Twine game. It is placed in the same directory as the Inform HTML files for the Released game.
The Twine game (using Harlowe 3.3.7) is simple, with two passages and a stylesheet. I cleverly named my passages “Start” and “Finish”.
Here’s Start:
Like any of us, you've rehearsed this scenario a thousand times in your mind. Who hasn't dreamed about entering a green vortex, quivering with anticipation? But now that you're actually living it, the only thing you can think about is:
[[Your loving family |Finish]]
[[The summer you spent in Paris |Finish]]
[[Oatmeal raisin cookies |Finish]]
Nothing special there. Here’s Finish:
Yes, you think about that, and so many other things. But then your thoughts are interrupted by another green vortex which seems to be hurtling towards you at <a href="part2/index.html">an alarming speed ...</a>
Note that the hyperlink to the second Inform game needs to be written with HTML, not Twine’s link code. Also note that the second Inform game is placed in a subfolder within the main folder. I called the subfolder “part2”.
And then the Twine stylesheet:
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Share+Tech+Mono');
tw-story {
background: black;
color: #00aa00;
font-family: "Source Code Pro";
font-size: 16px;
}
tw-link {
color: #00cccc;
}
tw-link:hover {
color: #00ffff;
}
tw-sidebar {
display: none;
}
a {
color: #00cccc;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #00ffff;
}
And finally the second Inform game, which uses Bisquixe for the same formatting but otherwise is pretty standard stuff:
"Alien Vortex Part 2" by "Biscuit Quick"
Part - Setup
Release along with a "Bisquixe" interpreter.
Include Simple Multimedia Effects For V10 by Mathbrush.
Include Basic Screen Effects by Emily Short.
Rule for printing the banner text: [we don't need the story info again]
do nothing.
Part - When play begins
When play begins:
import-google-fonts "Source+Code+Pro";
css-set-fast ".GridWindow; background; #00aa00"; [retro green]
css-set-fast ".GridWindow; color; black";
css-set-fast ".GridWindow; font-family; Source Code Pro";
css-set-fast ".GridWindow; font-size; 18px";
css-set-fast ".BufferWindow; background; black";
css-set-fast ".BufferWindow; color; #00aa00";
css-set-fast ".BufferWindow; font-family; Source Code Pro";
css-set-fast ".Input; color; #aaaaaa"; [gray]
css-set-fast ".Input.LineInput; font-family; Source Code Pro";
css-set-fast ".Style_input; color; #00aa00";
css-set-fast ".Style_input; font-family; Source Code Pro";
css-set-fast ".play; background; black";
css-set-fast ".coverimage; display; none"; [single column settings]
css-set-fast ".links; display; none";
css-set-fast ".interpretercredit; display; none";
css-set-fast "#gameport; left; 20%";
css-set-fast "#gameport; right; 20%";
css-set-fast "a; color; #00cccc"; ["a" styles the hyperlinks; we'll use cyan]
css-set-fast "a; font-weight; bold";
css-set-fast "a:hover; color; #00ffff";
css-set-fast "::-webkit-scrollbar; display; none"; [no scrollbar]
say "... and in an instant the vortex swallows you then spits you out in another part of your research station."
Part - Containment Facility
Containment Facility is a room. "You're in a high-tech alien containment facility."
The alien is a person in the Containment Facility.
Rule for writing a paragraph about the alien:
say "An alien stands off to the side of the facility, looking at you quizzically."
Instead of examining the alien:
say "You have a telepathic conversation with the alien. It turns out the two of you have a lot of things in common, not the least of which is a penchant for jumping through pulsing green vortices.";
end the story finally saying "You made an out-of-this-world friend!"
And with that, you can have the best of both choice and parser worlds! I’m happy to answer any questions (or make corrections). Happy traversing!