Retro graphical adventures in the browser
Remember Issue #8
Hey all! I hope everyone is doing ok! We just had a brutal heat wave and a whole city burning to flames and record wildfires and there will be more in the coming years thanks to global warming but uuuuh all good apart from that I suppose... 😅
My news
I undertook a little project related to Z-Machine abbreviations this month (it feels like I mention them every other month doesn't it?...). The Inform 6 compiler had a way to apply abbrevations in the text that wasn't optimal, and could miss the best way to apply them when two of them overlapped. So I changed it! It's my very first time contributing to the Inform 6 compiler, but it really wasn't too bad. As a result, from now on (when Inform 6.36 comes out, or whenever you decide to compile the compiler from source), everyone will have slightly smaller story files - I saved 1200 bytes in Tristam Island thanks to this, and Stefan Vogt saved 1100 in his Hibernated 1: Director's Cut! It feels very good to contribute to the community 😀
Community news
Among the notable things that happened last month in the field of retro text adventures:
- Stefan Vogt published the "Puddle build tools", a toolchain that makes disk images out of your Z-Machine (z3 or z5) game! I helped with setting up a couple of the platforms, like the CoCo or the TI-99/4A, and served as a Guinea pig for the rest of them. Congratulations to him; you have no idea how hard he worked to find all these interpreters, choose the best ones, parametrize them, find the right tools to build an automated toolchain out of them, etc. Now you can publish your game on over two dozen platforms! And I'm happy he added the Dragon 64 and the Sam Coupé - that's going to be for Release 3 of Tristam Island...
- There are 18 new text adventure games available to play at ParserComp! Head over to itch.io to discover the entries and rate them! I haven't had time yet, but they sound very diverse and exciting!
- A cool summer project: a few people seem interested in digging more on the file format for Level 9 games, which currently doesn't have a neat specification or standard like the Z-Machine does. It could prove useful and might make people interested in writing more interpreters or games for that format! If that's your cup of tea, head over to this intfiction.org thread.
- And only slightly related to retro text adventures, but the Mammoth Cave (yes, *that* cave) seemed to have some very interesting weather conditions last month! Pretty cool 😀
Article of the month
Switching tracks again, this month's article is a technical one! This article will give you a way to write browser-based graphical adventures using Inform 6. It uses a neat extension, Vorple, that not enough people know about; if you manage to set everything up, you can make a game that plays in the browser and can also be ported to Windows, OSX and Linux! I hope you enjoy it :)
Oh, before we go, one last thing...
This was Issue #8 of ">REMEMBER", and this month I'd like to ask for your feedback! If you have 2 minutes to reply to these quick questions about the newsletter, it'd really help me understand what you like about it so I can make it better. Thank you in advance, and take care; I'll see you next month!
Issue #8 : Browser-based graphical text adventures
This month's article is another technical article, outlining a way for you to make retro graphical text adventures in a browser. Adventuron is already fairly established in that niche, but the path I'll be talking about here uses Inform 6, and its very powerful parser, and has the ability to sprinkle in some JavaScript if you want more advanced features. It is one of the only ways to have an Inform 6 game with pictures, and while there is very little chance it'll ever run on a retro computer, the fact that it can run in a browser makes it very easy to share. Highly recommended for your own games, or if you want to make a browser remake of an old game!
Quick Vorple introduction
Vorple is a very interesting tool created by Juhana Leinonen to augment Inform's capabilities. The homepage is here:
The basic idea is that there is a regular interpreter in a browser, that can also interpret JavaScript/CSS commands started within the story file with a special function. This means you can write Inform code that controls the game logic and is able to communicate with the browser, tell it to change the layout, execute a complex function, or even recover information from Wikipedia or any other server! There are a few functions built in the Vorple libraries, but you can do anything if you know JavaScript. If you don't, that's fine: today's tutorial doesn't require you to know anything about JS.
(Note that, for now, this tutorial doesn’t work with PunyInform: Vorple is only compatible with Glulx, and PunyInform is not compatible with Glulx. It’s not hard to go from PunyInform to the standard I6 library and vice-versa: there’s only a few adaptations that you need to do to your code, and they are detailed in the PunyInform manual. Sorry!)
Vorple requires a little bit of setting up, but not too much; ultimately, it's just a set of extensions and a custom interpreter. First, start by downloading the contents of this Github repository:
github.com/vorple/inform6
The ".h" files are the extensions; we will only require "vorple.h" (core library), "vorple-multimedia.h" (pictures), and "vorple-status-line.h". They need to be included in your Inform source file, as follows:
Include "vorple.h";
Include "Parser";
Include "VerbLib";
Include "vorple-multimedia.h";
Include "vorple-status-line.h";Another thing you have to do is edit the "play.html" file; this is the one that runs your game in the javascript interpreter. Edit it so the line story: "test.ulx" refers to your game. For now Vorple is only compatible with Glulx, which means you have to specify the "-G" option when compiling; the result should be a "game.ulx" file. Finally, note that there is a "resources" folder; we will look into that soon.
One major thing to note about Vorple is that double-clicking on the html file will not launch the game correctly. (You’ll get a server error!) In order to run, the html file needs to be fed through an HTTP server. There are several solutions to this: zip your whole folder and upload it to your itch.io account; make the whole folder sync to your Dropbox/OneDrive and access it through your Dropbox/OneDrive account in a browser; or run a local HTTP server on your computer ("python3 -m http.server" in a terminal, for instance).
Once all of this is setup, you should hopefully get a successful compilation, and manage to have your game run in the browser. Let's add pictures!
Integrating pictures
The basic idea to integrate pictures above the scrolling text, like in a classic graphical text adventure, is to put the image in the status line, which by default is an element sitting at the top of the window and under which the scrolling text disappears. We thus need to insert the picture of the location in the status line every time the status line is drawn.
The way Vorple handles status line refreshes is by looking for, and executing, any code attached to this event; by default, this is just the regular status line. To attach code to be executed every time the status line is refreshed, you need to put it in an object, and put this object in the "StatusLineRulebook"; each turn, Inform will look at all the objects in that rulebook and run their code. Our particular code will need to switch focus to the center of the status bar, do its thing, then give back focus.
Something like this:
Object MyStatusLineRule "" StatusLineRulebook,
with description [;
! erase the contents in the old status line
VorpleStatusLineClear();
! Put the "cursor" at the center of the status line
VorpleSetOutputFocus("status-line-middle");
! Do something here
! Put the cursor back in the text zone
VorpleSetOutputFocusMainWindow();
];Let's leave this code for now, and look into how to specify a picture corresponding to each location. Inform 6 is an object-oriented language, so anything we tie to an object should be contained to that object; meaning, the best way is to specify inside the location object which picture should be displayed. I'll create a property named "imageName" inside each location, and give the path to the image file; this path should be relative to the base folder for images, which by default (you can edit "play.html" if you want) is "resources/images". My code looks like this:
Object aztecPyramid "Aztec Pyramid"
with description "You climb the last few steps, wipe the sweat off
your brow, and look at the surrounding jungle.",
imageName "pyramid.png";
Object jungle "In the jungle"
with description "The humid heat sticks o your clothes.",
imageName "jungle.png";We can then fill in the blank in the rule we had set up before:
Object MyStatusLineRule "" StatusLineRulebook,
with description [;
! erase the contents in the old status line
VorpleStatusLineClear();
! Put the "cursor" at the center of the status line
VorpleSetOutputFocus("status-line-middle");
! Display the location’s image
VorpleImage(location.imageName, "", IMAGE_CENTERED);
! Put the cursor back in the text zone
VorpleSetOutputFocusMainWindow();
];Note that because of the way the elements are arranged on the page, you might need to pad your text area so no text is ever displayed under the picture. (A symptom of this is if you have just a picture, and no intro text showing.) Adding the command
VorpleExecuteJavaScriptCommand("$('#window0').css('margin-top', '320px');");at the end of your “Initialise” function should do the trick, though you might have to tweak the pixel value depending on the height of your pictures.
That's it!
And that's enough for today! Should you want to go further, I'll leave the following as exercises:
- make your images looping GIF files (for instance, water dripping from leaves in the jungle) and display them;
- add your own CSS file to the page and change the font to a retro font of your choice, such as “Press Start 2P”
- if you prefer Inform 7, port this code to it (or ask me, I have it somewhere!);
- make imageName a routine that returns a different image name depending on whether it's day or night in your game;
- add more graphical elements to the interface, such as a compass that updates at every room;
- use Electron to create an executable version of your game so it can run on Windows and be sold on Steam (it's not too hard, ask me!).
Vorple is a really great tool to augment text adventures; I hope this month's article will have sparked some interest and make you want to experiment further with it!
