If it helps, I think about this game OFTEN.
I liked the fantasy section in A Rope of Chalk and was wondering what fantasy books you like and are influenced by.
If you mean specifically the Cealdhame segment, it was mostly influenced by the two semesters I studied Old English.
If you mean the whole fourth section, the influences aren’t really fantasy fiction exactly. One room resembles a scene from House more than anything else, one room is supposed to be a Neruda poem/Waterhouse painting, one room is the film The Nightmare Before Christmas. In general I think the surrealism and “collage” sensibility of the fourth section ultimately derive from Space Ghost Coast to Coast.
The fantasy books that influence me the most, where “influence” is defined as realizing where I got an idea that I had thought was original, are the Chronicles of Narnia and Madeleine L’Engle’s books. In particular L’Engle’s perspective and ideas are kind of baked into my brain as baseline generic fantasy.
Fantasy fiction I really dig and aspire to includes the Dirk Gently books, what I remember of the Gormenghast books, the Sandman comics, the League of Extraordinary Gentlemen comics, the Doctor McNinja comics, Jesse Moynihan’s Forming comic, Evan Dahm’s Rice Boy/Order of Tales/Vattu comics, the show called Adventure Time, and let’s say Venture Bros. counts as fantasy. But this all influences stuff like the Little Match Girl games more than A Rope of Chalk. I guess that one room in A Rope of Chalk is very Sandmanesque, though.
There’s been a bunch of talk about Vorple in this recent thread and how few games have been written in it — but of course an fine recent example is the prizewinning and highly regarded The Little Match Girl 4: Crown of Pearls.
Is this your first time using Vorple? What about The Little Match Girl 4: Crown of Pearls inspired you to use it? Is it nice? Any advice or experience to share for future authors?
First, caveats: I have had a bunch of trouble putting Vorple games on itch.io. There’s some problem with scroll bars. I don’t really know what’s going on.
ANYWAY, I first used Vorple for Even Some More Tales from Castle Balderstone. The structure there is an “anthology” of Inform games accessed via a Twine framing story. To make that work, I needed to be able to link seamlessly between Twine and parser environments. To “gate” the big finale so that it was accessible after you finish all the sub-games, I needed to track the player’s progress from multiple parser games. And with Vorple I could do those things!
I don’t think anything within the sub-games of Even Some More relies on Vorple. I designed them before I knew I would be using Vorple. Individually they’re all more or less standard parser experiences. Vorple was really just about juxtaposing them in the way I wanted.
When I made The Little Match Girl 3, I got to use Vorple more creatively and not just out of necessity. But I only used it for a few things:
- Change background colors
- Music
- Fancy text styling
And this was all in the service of adding some cinematic presentation elements to an otherwise fairly standard parser experience. It’s not like I wanted the game to open another window where you drag Tetris pieces around to organize your inventory.
When I did the public releases of the earlier Little Match Girl games, I “ported” them to Vorple so I could add these elements and give the series a consistent style, and then later games are also in Vorple so they can match. So, that is why LMG4 is a Vorple game. I haven’t done a lot of what you’d call innovation.
But there are a couple cool things I’ve done in recent games which should interest people:
- All the music in LMG4 is timed with the associated text in fairly sophisticated ways. I did calculations down to the millisecond to make sure text shows up at just the right time. I was never sure if it all worked perfectly for all players… When you have a minute, you should play all the way to the finale and let me know whether everything matches the beat perfectly or not.
- Near the end of The Little Match Girl against the Universal Sisterhood of Naughty Little Girls there is a really cute effect that I won’t spoil here.
- OH HEY I FORGOT ABOUT THE SHOOTING GALLERY IN LITTLE MATCH GIRL 4. Uh, I’ll talk about that in another post.
Vorple can do way way way way more than I’ve done with it. I’m sure there are capabilities that I could leverage that I just haven’t thought of yet, and then there’s a universe of things that I can imagine but don’t know how to do, and then there’s a third universe of things that I don’t even know that Vorple can do.
The main thing anyone needs to know about Vorple is: It lets you execute JavaScript commands. That means, if you don’t know how to make Vorple do something, you don’t have to google “vorple rickroll open CD-ROM drive”—you can google “javascript rickroll open CD-ROM drive” and start from there. And because JavaScript can affect CSS, Vorple opens the door for you to let a parser game do anything that you’d expect a website to be able to do. And then you’re off to the races.
Dear Ryan,
I only want to use Vorple in the super unsophisticated ways that you use it in your beloved Little Match Girl games, which I promise I will get around to playing eventually. In the meantime, could you show me an example of how you use Vorple? But can it be the simplest example? For babies?
— Rudimentary in Richmond
Dear Rudimentary,
Of course. Here’s a game where, as Kirby, you eat different monsters and gain their powers, causing the background color to change.
"Kirby's Ability Extravaganza" by Ryan Veeder
[In this Kirby fangame, the background color
will change to match the ability you've acquired.
NO COPYRIGHT INFRAGMENT INTENTED.]
[For executing JavaScript commands,
the baseline Vorple extension should be sufficient.]
Include Vorple by Juhana Leinonen.
Release along with the "Vorple" interpreter.
[As you know, the beloved Nintendo character
known as Kirby is a little pink ball of a guy
who lives on the planet Pop Star.
When he eats monsters, he gains their abilities.
He swallows a fire guy, and he gets fire powers.
He swallows a monster with a sword, and he gets to use a sword.]
Pop Star is a room. Description of Pop Star is "Eat a monster to gain its ability!"
[I'm going to define just a few of the more boring
abilities Kirby has been known to use.
Plus we will define his default state, which I will call "null."]
Ability is a kind of value. The abilities are Null, Fire, Ice, Tornado, and Sword.
The player has an ability. Ability of the player is Null.
Description of the player is "You are Kirby! The pink thing from the Nintendo games! [if ability of player is not Null]Right now your ability is [ability of player].[end if]"
[Now, pick a background color for each ability!
Pull up your favorite color picker and find the color you like.
Copy its hex RGB value and set that as the "bgcolor" property in Inform.
(I don't prefix these bgcolors with the #
that indicates a hex triplet, because that's going to be
in my JavaScript command, which we will see below.)
The default state has to be pink!]
An ability has text called the bgcolor.
bgcolor of Null is "f6a1ff".
bgcolor of Fire is "ff7c70".
bgcolor of Ice is "a4f5eb".
bgcolor of Tornado is "9fc5e3".
bgcolor of Sword is "8df290".
[We want the background color to match
Kirby's default state even at the very beginning of the game.
We could set the background color in the game page's CSS,
but we may as well do it at runtime, to demonstrate the
technique that is the whole point of this example.]
When play begins:
let our ability be ability of the player;
execute JavaScript command "document.getElementById('vorple').style.backgroundColor = '#[bgcolor of our ability]';";
[What the heck is this "getElementByID" action???
Well, the main stuff you gotta know is here: https://www.w3schools.com/jsref/met_document_getelementbyid.asp
The element we're getting by its ID here is "vorple,"
which is initiated in the browser interpreter file with
<main id="vorple">. It contains the whole game and,
by Vorple default, applies its own background-color
"on top of" the background-color of the page body.
This command will change the background-color
property of (the style property of) the vorple element
to "#[the bgcolor we want]".
But what we call "background-color" in a CSS or HTML
file is rendered in camelCase as "backgroundColor"
in a JavaScript context.]
[Anyway, we also want the background to change during gameplay.]
A monster is a kind of person. A monster has an ability.
Instead of eating a monster:
let new ability be ability of the noun;
say "You eat [the noun]. You gain the [new ability] ability!";
now ability of the player is new ability;
execute JavaScript command "document.getElementById('vorple').style.backgroundColor = '#[bgcolor of new ability]';";
Hot Head is a monster in Pop Star.
Description of Hot Head is "He's a little guy who's on fire!"
Ability of Hot Head is Fire.
Pengy is a monster in Pop Star.
Description of Pengy is "He's a little penguin!"
Ability of Pengy is Ice.
Blade Knight is a monster in Pop Star.
Description of Blade Knight is "He's a little guy with a sword!"
Ability of Blade Knight is Sword.
Twister is a monster in Pop Star.
Description of Twister is "He's a little spinny guy!"
Ability of Twister is Tornado.
[We should be done, right? NOT SO FAST, PUFFBALL.
If we UNDO eating a monster, Kirby will lose that ability,
but the background color will not change. Similarly,
when we RESTORE a game where Kirby had an ability,
the game's interior state will be restored,
but not the game-exterior state of the background color!
So we need to make sure both these out-of-world "actions"
will "update" the styling. Now, I personally don't know any
way of affecting what-happens-when-you-undo, except to
insert it into the response the game prints to report that
something was undone. So that's what I do.]
Immediately undo rule response (E) is "[bracket]Previous turn[sneaky change background] undone.[close bracket]"
Restore the game rule response (B) is "LOADING[sneaky change background]."
To say sneaky change background:
let our ability be ability of the player;
execute JavaScript command "document.getElementById('vorple').style.backgroundColor = '#[bgcolor of our ability]';";
[I am haunted by the feeling that there must be some other
out-of-world action that also requires this behavior,
but I don't know what it is.]
Couple caveats:
- Targeting the “vorple” div means you don’t affect anything exterior to that div, such as, possibly, a list of links off to the left of the gameport. This can turn out to be undesirable if, for example, you’re changing text color in addition to background color. I typically target the whole page (
document.body.style.backgroundColor = '#whatever'
), but then I have to modify vorple.css to remove the line that sets a background color for vorple. The method above doesn’t require hand-tweaking any css files. - If you test this example by saving and restoring to see the background color change, you will notice that the response to your >SAVE command was “Save failed.” But it didn’t really fail! As far as I know this is just Vorple being confused. You can get around this with something like
Save the game rule response (A) is "Saved the game successfully."
although that will also end up printing if saving really does fail somehow.
Dear Ryan,
I am not a baby. Could you please show me some examples of more involved things you can accomplish with Vorple? Specifically, could you explain how you implemented the shooting gallery in The Little Match Girl 4, a game that I have played?
— Intermediate in Indianapolis
Dear Intermediate,
Certainly. Here’s an example that will demonstrate two techniques, both of which kind of involve the game sort of “talking to itself.”
The Vorple Hyperlinks extension lets us make hyperlinks to web addresses, hyperlinks that activate JavaScript commands, and hyperlinks that essentially type a command into the prompt and hit Enter for you. This example demonstrates the third version:
"The Heavy Door" by Ryan Veeder
Include Vorple Hyperlinks by Juhana Leinonen.
[This causes the base Vorple extension to be included as well.]
Release along with the "Vorple" interpreter.
Security Checkpoint is a room.
Vault is a room.
The heavy door is a closed door.
The heavy door is inside from Security Checkpoint and outside from Vault.
Instead of opening the closed heavy door, say "The door is too heavy to open!"
The button is in Security Checkpoint. The button is fixed in place.
Initial appearance of the button is "There is a [pushable button link] here."
To say pushable button link:
place a link to command "push button" reading "button".
Instead of pushing the button:
say "You push the button, and the heavy door opens.";
now the heavy door is open.
When the player clicks the hyperlink reading “button,” the command >push button will appear in the transcript and the action will take place. Visually, it looks exactly like the player typed that command! Can you think of anything clever you could do with this???
The other way you can make Vorple “tell itself” a command is with the “queueing” function of the Vorple Command Prompt Control extension. To “queue” a command is to make the game process that command. The documentation explains how using this extension to queue a parser command "take inventory", without showing the command
is basically identical to using the native Inform 7 technique of try taking inventory
and so by itself this syntax is not very useful.
Within the source of the Vorple Command Prompt Control extension, we see that queue a parser command "wear stockings" without showing the command
gets translated into JavaScript with the line:
execute JavaScript command "vorple.prompt.queueCommand('wear stockings',true)"
(The true
indicates that we don’t want the command itself to show up in the game transcript.)
Again, by itself, this is kind of the same thing as the Inform 7 code try wearing the stockings
. But, because we have escaped from the Inform 7 environment into the realm of JavaScript, we can use additional JavaScript syntax to do more interesting things. For example, what we’re going to do now is make the heavy door slowly swing shut, in real time.
If you were going to make this door close by itself on a turn-by-turn basis, you’d probably write something like:
Openness is initially 0.
Instead of pushing the button:
say "You push the button, and the heavy door opens.";
now the heavy door is open;
now openness is 4;
Every turn while openness is greater than 0:
decrement openness;
if openness is 3:
say "The door is beginning to close.";
else if openness is 2:
say "The door is halfway closed!";
else if openness is 1:
say "The door is almost closed!";
else if openness is 0:
say "The door swings shut.";
now the heavy door is closed.
To do this in real time, the principle is the same, except instead of referring to “every turn,” we’re going to invoke a secret action that we can tie to the actual passage of time.
Openness is initially 0.
Button timing is an action applying to nothing.
Understand "xxxbuttontimexxx" as button timing.
Carry out button timing:
if the heavy door is open:
decrement openness;
if openness is 3:
say "The door is beginning to close.";
else if openness is 2:
say "The door is halfway closed!";
else if openness is 1:
say "The door is almost closed!";
else if openness is 0:
say "The door swings shut.";
now the heavy door is closed.
Notice that no Vorple nonsense has occurred yet. To be clear, in Inform 7 terms, “xxxbuttontimexxx” is a regular old input the player could type at any moment, triggering the “button timing” action that exists only to advance the story of the door closing. The text “xxxbuttontimexxx” will not appear in the game, though. There is no reason to expect the player to type it. Instead, we will make the game type it to itself on a schedule we define.
All we have to do is add to the “pushing the button” rule:
Instead of pushing the button:
say "You push the button, and the heavy door opens.";
now the heavy door is open;
now openness is 4;
execute JavaScript command "setTimeout(function() {vorple.prompt.queueCommand('xxxbuttontimexxx', true);}, 2000)";
execute JavaScript command "setTimeout(function() {vorple.prompt.queueCommand('xxxbuttontimexxx', true);}, 4000)";
execute JavaScript command "setTimeout(function() {vorple.prompt.queueCommand('xxxbuttontimexxx', true);}, 6000)";
execute JavaScript command "setTimeout(function() {vorple.prompt.queueCommand('xxxbuttontimexxx', true);}, 8000)";
These new lines contain the “queue a command” JavaScript syntax that we’ve seen already, but each queued command is nested in a setTimeout command. And all that command does is tell the browser, "I need you to fire off this nested command after this many milliseconds." The number at the end is the number of milliseconds.
(Because we’re directly referencing the JavaScript methods as defined in vorple.js or wherever, we don’t actually have to include the specific Vorple Command Prompt Control extension for these purposes.)
After you push the button, the game will wait two seconds, and then “secretly type in” the command “xxxbuttontimexxx,” causing the button timing action to occur. And after two more seconds, the same thing will happen again. The way each instance of the action is resolved gets handled at the Inform 7 level.
So, how does the shooting gallery in Little Match Girl 4 work? Starting the minigame “launches a bunch of targets,” putting them into play so that the player can start trying to >SHOOT TARGETS. But at the same time the minigame starts, we “schedule” a “secret action” for a few seconds later. That secret action represents all the targets falling to the ground and the minigame being over.
And you can use these same principles to sync text with music. LIKE IN THAT GAME I MADE.
A caveat: These “secret actions” are regular plain old actions, as far as Inform 7 knows. That means that they increment the turn counter, trigger “every turn” rules, etc. But if your scheduled secret actions start interfering with your “every turn” rules, you’ll probably notice something screwy is happening pretty quick.
Thank you for this. I’ve been working on a multimedia extension that includes hyperlinks.
A few years ago I made a graphical game that used a technique very similar to this but instead of surrounding it with xxx I prefaced it with xxvym or something.
I thought about including something like that in the extension I didn’t know if 1. People would use something like that, or 2. If there was a more efficient way. This post inspired me to add it in. Thanks!
Funny! In ZIL if you need a placeholder synonym (because you can replace synonyms for a word in-game), you use ZZMGCK, then ZZMGCL, ZZMGCM, etc.
I feel like we always focus on your work and what we can extract from that. May we stray into the silly for a change?
With Neapolitan Ice cream, what are your preferences?
I prefer the chocolate and strawberry over the vanilla, but due to the order of the sequence, this sadly makes a single continuous scoop composed of chocolate and strawberry, but with no vanilla, functionally impossible.
Inquiring minds wish to know. Also, if you feel so inclined, feel free to share another utterly irrelevant personal preference.
Thank you as always.
I don’t especially want to eat chocolate-and-vanilla-and-strawberry ice cream, and I don’t typically encounter Neapolitan. But I feel like if I did, I would ask for a scoop of just vanilla, or just chocolate, depending on what other options are available (see below). Actually, now I am thinking about wanting vanilla ice cream and getting little bits of chocolate or strawberry in there due to imprecise scooping. The prospect does not appeal to me.
Even at an ice cream parlor where I’m lucky enough to get a two-scoop cone, I sometimes prefer getting two scoops of the same flavor. I sometimes regret getting two different flavors! This might be because I eat ice cream too fast to really appreciate a flavor after only one scoop. Afterward, I feel like I didn’t really taste either of them.
I think the other reason Neapolitan doesn’t appeal to me is that, in a home setting, I like to add whipped cream and chocolate sauce and other accoutrements to my ice cream. Putting that stuff on top of a multi-flavor system would be too much complexity.
My favorite ice cream flavor is mint chocolate chip. I suspect I would really enjoy plain old mint ice cream with no chocolate in it.
My other favorite flavor for desserts is lime.
Hello, Ryan,
is there a technical mechanism in one of your games you find interesting to talk about (with or without source code)?
Greetings
Peter
I wonder why is called “Neapolitan”…
Best regards from Italy,
dott. Piergiorgio.
Sorry to ask that to a real Italian, but doesn’t that go back to the Neapolitanian waffles in which these three flavors were first served?
huh ? yes, indeed here’s three flavors, but are vanilla, chocolate and nut cream, not strawberry…
Best regards from Italy,
dott. Piergiorgio.
Wikipedia suggests that the name is an Americanism after the Neapolitan immigrants who “brought their expertise in frozen desserts with them to the United States,” and points out that it wasn’t always vanilla, chocolate and strawberry, citing a 1929 cook book which describes it as “vanilla, strawberry, and pistachio” (mimicking the colors of the Italian flag, I guess?).
I love the concept of this thread so much, and am delighted by the side tangent of icecream we’ve all delved into. The vanilla, strawberry, and pistachio version sounds so much yummier than the chocolate one…
I agree on mint chocolate chip, and can see the use-case for “plain mint” ice cream - if you don’t like chocolate or don’t like texture in your ice cream or for aesthetic looks if you want to shave chocolate over it or make a snowman without chips in it. (Surely this is a matter of Cold-Stoning your own vanilla or plain ice-cream base with a bit of mint extract - I’ve never seen plain mint ice cream for sale.) You could probably make a very pretty “peppermint stick” ice cream with red and white swirls and no chocolate.
Surely someone has made key lime ice cream, sherbet, or sorbet. I know lime is always my choice for sherbet.
The Naples flag in the early 1800s was white, red and black - like some Neapolitan ice creams - substituting chocolate for black.
There is also “Spumoni” ice cream - similar concept but a bit different. Spumoni is a layered mix of ice cream in three flavors: chocolate, pistachio, and maraschino cherry. It often contains nuts and fruit within instead of just smooth ice cream.