So I’ve spent a lot of time dabbling (possibly more than dabbling) with Inform 7 over the last few years but this year’s Ectocomp was the first time I actually tried to “release” a game. Since Ectocomp is hosted on itch, I figured including a browser-playable version as well as just a plain .gblorb file was probably likely to be appreciated, and everything in the manual says that it’s just a matter of writing “release along with an interpreter” and then uploading the contents of the “Release” directory. Right?
Unfortunately, the website template seems to assume that it’s fine to use the cover image as a background. My cover image was largely black, and most of the text in the website template is also black, so needless to say, this looked terrible. I didn’t even care about the index.html file (I was intending to delete that and rename play.html to index.html anyway) but play.html also uses the cover image as a background for the sidebar. Despite more than three decades of messing around with computers, I don’t know much about modern web design (CSS in particular) so trying to modify the templates myself didn’t seem like an appealing option.
I tried telling Inform to package with Parchment instead of Quixe but they seem to use the same template anyway so that didn’t help.
Writing with Inform says that there are different website templates you can use, which sounded like a solution, but I wasn’t sure where to look for any. I tried the Friends of Inform 7 GitHub but there didn’t seem to be any templates there. Then I found this thread where @Draconis provides an alternative template, so I gave that a go.
Unfortunately, I ran into the same “dark mode toggle doesn’t work” issue that gets mentioned later on in that thread. I figured a dark mode toggle that doesn’t work would be more annoying than not having one at all, so I edited the html file to remove the top bar where the toggle is and called it good.
So I managed to release my game with a working web build, but this seemed like much more effort than I was expecting for a prominent and well-established tool, especially where I didn’t care about doing any styling but just wanted something that was playable in a browser. What is everyone else doing when it comes to releasing Inform 7 games?
By the way it only uses the cover image as a background because inform stopped requiring a separate small cover file but forgot to automatically resize the new one. If you out an120x120 small cover in your folder to replace the automatic one it won’t overflow the text box anymore.
Yeah, this is a longstanding bug that I hope gets fixed in future releases of desktop Inform, I remember it being a problem when I made Terminator Chaser nearly 10 years ago. Inform 7 doesn’t require a manually resized small version of the cover image (IMO, a mistake – sometimes you want the smaller cover to be lower-detail, not just a resized version of the large original; this is actually the case for Kinophobia…) but it also does not actually resize the image automatically anyway!
I apologise that this isn’t an answer to your question but I feel urged to encourage people exporting parser games to run in the browser to at least add margins if they’re not there already… I used this as a quick fix for IFComp games:
.BufferWindow {margin: 6px 256px 6px 196px;}
but I’m sure someone else can come up with a less wonky implementation.
I did finally get something going, and I kept adding images until I found sizes that worked most of the time. I edited the CSS until I managed the modest stying changes I wanted. I downloaded “python”—which I had previously only as a snake—and ran a mysterious script.
It worked out in the end, but it was very close, and harrowing, too.
I never used the off-the-shelf Inform stuff again. Maybe Inform 11 will be different!
For the next six releases of Repeat the Ending, I used the Parchment IF Site Generator that Dannii made.
For my more recent games, I used Bisquixe, which allows authors to inject specific bits of CSS a web release without having to understand a ton of CSS. I went back and rereleased Repeat the Ending with Bisquixe, too. My next game will be a Bisquixe game. I’m used to the required python thingy by now, and I’m happy with how those games look. These are the web versions on my itch.io page.
For a basic, defaults-only website, I can’t say enough good things about the Parchment generator. It made it possible for me to quickly fix bugs and update the post-Thing version of RTE.
The actual scariest thing I’m going to encounter this Ectocomp was that same mysterious Python script we had to run to get images to show up in our game. I had to use the command line! It doesn’t get scarier than that!
For my and baezil’s Ectocomp game, I ended up using Zarf’s OneColumn template (there’s a link on this page) with some modifications, including adding @media (prefers-color-scheme: dark) CSS; not as good as a toggle, but at least it’ll load in light or dark mode based on the user’s browser settings. I need to try Bisquixe one of these days…
Edit: For anyone else who wants to do this, note that there are two CSS files generated when you use the “release along with a website” option. One in the Release folder, called “style”, and one in the Interpreter folder, called “glkote”. I had to add the dark mode CSS to the glkote file. This is the CSS I used:
@media (prefers-color-scheme: dark) {
/* Dark mode overrides go here */
#gameport {
background: #1C1C1C;
}
body {
color:#EDEDED;
}
.GridWindow {
background: #333333;
}
.Input {
color:#EDEDED;
}
.Style_input {
color:#FF8A3D;
}
}
As of 3 months ago, the Docs and Resources post has a Publication section primarily about Web publishing. It touches on many things mentioned in this thread (in its terse, wall of text, way, emphasizing linking to other things over explaining things).