How to make a text adventure look AWESOME

I’m experienced with both Quest and Squiffy. Authoring is my forte, but I also enjoy making my games look nice. The Quest interface is incredibly limited. That’s why I prefer squiffy because it allows me to change the style easily using CSS and JS (I’m pretty good at CSS). But then I got to wondering…

How can I make my game look AWESOME.

Like, SUPER AWESOME? What are some common techniques? Engines I can use? Tips and tricks? Any info you can share would be great!

2 Likes

Choice Games

Ink

  • easy to style with CSS
  • well-designed language
  • just choices, no hypertext elements like input boxes or text reveals
  • text-based source code
  • platform independent commandline compiler or Electron IDE

Twine

  • can be styled with CSS I think
  • for me, the language isn’t as intuitive
  • diverse hypertext elements (input boxes, text reveals, buttons, etc)
  • no source code. edit in the Twine app/site directly
  • there are compilers maintained by other people: Twee2 (Ruby) and Tweego (Go)

Parser Games

Adventuron

  • your only choice. To my knowledge no other parser system allows thorough customization
  • Doesn’t work offline. Editor is online, but games are compiled locally. Nothing is sent to the server
  • Tristen Grizel Dean’s games are the prettiest Adventuron games I’ve ever seen
3 Likes

Twine can indeed be styled with CSS and people do amazing things with it. Sugarcube is a very flexible format, so is Harlowe. I think Chapbook is a bit more limited. You can add your custom styles in the Twine IDE by clicking the story name in the lower left and choosing “Edit Story Stylesheet”.

Screen Shot 2022-05-15 at 10.01.56 AM

Parser games can be styled somewhat based on how you publish. If you use Inform 7 and publish with an interpreter and a website, you can style that website to some extent and host it only online it will display as a website. If you publish a gblorb file, people will play it in one of various interpreters that will not take styling into account.

1 Like

Adding to what Hanon said: especially if you use Vorple with Inform 6 or Inform 7, you can style the looks as well as the interface quite extensively.

Examples:

Edit: I think it’s also good to keep in mind some general design guidelines, such as:

  • paying careful attention to the contrast between text colour and background colour, so that the text is easily legible
  • not using too many different fonts, sizes, styles, and colours
  • choosing a pleasing colour palette, for example using “colour wheel” tools like https://color.adobe.com/create/color-wheel or sites like https://lospec.com/palette-list. This one is nice, for example:
3 Likes

I would echo @StJohnLimbo. With text, a flashy conspicuous design that may get lots of positive comments is often grating and tiring to engage with across more than the very short term. Gratuitous animation, blur effects, drop shadows, low-contrast color combos… it’s very easy to do more harm than good, and typography normally best succeeds when it’s least noticed.

Pay attention first to web typography and to standards – one should meet at least WCAG 2.1 level AA accessibility standards (the most relevant bits are around distinguishability).

7 Likes

What’s that first game? I don’t see Neon Vertex on IFDB.

It’s a short Vorple demo by @mulehollandaise, here’s the playable version: Neon Vertex by Hugo Labrande and here’s the source code: contributions/games/neon-vertex at master · vorple/contributions · GitHub

3 Likes

Thanks for the mention :slight_smile: That game wasnt much more than picking a color scheme and finding free to use images and tweaking CSS!
More experiments at http://hlabrande.fr/fi/hosted/mockup/play.html (Apple II style) and Vorple (scifi with looping gif)

3 Likes

One example that I want to point out is the newest version of The Hitchhiker’s Guide to the Galaxy. The interface is one of the best for parser in my opinion. How would one go about making that?

2 Likes

I’ll second that. A pretty game does not make it a good game, but her first two games (‘Reflections’ and ‘Sentient Beings’) were not only beautiful to look at, but beautiful to play. She was inspired by the 12 wonderful Cryptex Jam 2021 games, which are also Adventuron games and beautifully done.

2 Likes

For me, the most advanced visuals for a Interactive fiction are these:

And Kerkerkruip:

All those are done in Inform + Vorple.

I’ll take a chance here to plug The Twine Grimoire by G.C. Baccaris which is intended for Twine but may have CSS advice that applies to other formats:

1 Like

On the first two, the typography is otherwise handsome but the dynamic background makes trying to read it a living hellscape for me (well, not that I could actually read Spanish).

One of the web accessibility standards I referred to above is that if there’s any automatic motion lasting more than 5 seconds, user control to stop it must be offered (if it exists alongside other content on the page, that is). I’m one of the people for whom that exists, for whom its absence makes something inaccessible. Like many ADHDers, if I’m trying to read something, motion on the screen is like being hit in the face with a frying pan. If it sounds weird that I’m expressing such a strong reaction to it, I assure you I find it just as weird that there’s anyone who can stand it.

If I were told repeatedly that one of those was the greatest game ever (and assuming I could read the language…) then maybe I’d go to the bother of modifying the CSS to play it, 'cause I’m a geek and I can. Many others wouldn’t perceive that as an option.

And this is one of the reasons I think it’s worthwhile to pay attention to accessibility: when you don’t, you gratuitously lose audience.

3 Likes

Fair point.

This points to another necessary feature: accessibility options to turn off special effects.

but the point here was to make text adventures look AWSOME

That is, flashy and with glitter.

FYI, Kerkerkruip doesn’t use Vorple, it’s all just standard Glulx+Glk.

2 Likes

Just to correct this statement a little:

(for parser games) “your only choice”

  • Pretty sure that other parser based games offer customizations too.
  • Adventuron does goes wild with theming, which in most simple cases is easier to use than CSS, but Adventuron’s manual CSS features are fairly poor. If the theming doesn’t support a type of customisation, then it’s difficult to use CSS to theme around the edges.

“Doesn’t work offline. Editor is online, but games are compiled locally. Nothing is sent to the server”

  • Compiled games (as html files) are entirely playable offline (if shipped that way).
  • The web browser based editor is also available as an offline download here (no web connection required).
3 Likes

Ah, thanks a lot for the correction :heart: