itch.io is community of indie game creators and players

Devlogs

Decker First Impressions

Thriftgirl
A browser memoir made in HTML5

Thriftgirl was my first time working with Decker by Internet Janitor, an engine for HyperCard-like games. It's a wonderful free tool behind hundreds of games on here.

This post goes over some thoughts and tricks. It's not quite a tutorial so there's one linked below!

~~~

Quick links

~~~

Micro-engines

Decker sits alongside other micro-engines like Bitsy, Twine, and Videotome.

Though you can always bend them with mods, each has a distinct visual identity* and language of player interaction.

Bitsy's got (mostly) 2-color palettes and arrow key movement. Twine's got a text heavy interface with interactive links. Videotome strips down visual novel engines like Ren'Py.

the museum of mid-2000s forum signatures
sensors

I love Decker's twist of dithered black-and-white visuals, clickable buttons/images to move between "cards", and chunky pixel fonts. It's easy to import an image, see it crunched-up, and immediately feel out what's next. Its Button and Contraption Widgets also allow for customizable retro GUIs.

The heavy limitations mean almost anything you put in will be visually coherent (not just in your game, but with other Decker games).

More directly than the engines above, you can import images and sketch over them within Decker, shifting the workflow closer to making a scrapbook or collage! Electric Zine Maker also does this well. Working in both feels playful in itself!

DEMATERIAL DICTIONARY

*Em Reed's 2019 Game Art Engines Talk and communistsister's Stuff I thought about when making Videotome are great. They made me rethink what to look for in engines and the indie scenes around them.

~~~

Dechniques

preprocess in GIMP

Decker automatically converts imported images to black-and-white and dithers them. This sometimes looks too grainy (especially on photographs). You can use Photo Editors like GIMP to "flatten" image colors so Decker's dither is more consistent. It's like cooking - sometimes we'll peel veggies so they fry better.

Some effects I tried:

This depends on how much you want to flatten in the original image. A simple threshold worked for the anime screenshots, since there's very little random shading.

You can use Decker's Pencil to clean up any ugly artefacts left once you import!

For most of the links in Thriftgirl, I did this instead:

  1. Make an empty Field Widget
  2. Go to (Tool -> Interact) and click on the Field
  3. Type in text directly
  4. Highlight text to link
  5. Go to (Text -> Link)**
  6. Type in the name of another Card***
  7. Go to (Widgets -> Locked) so players can't edit the Field like you just did

**This is also how you can change Fonts within a Field. It won't be within the Field's Widget properties, since different parts of text within one Field can have different Fonts.

***You can put full internet URLs here too!

inverting

Select any area in Decker and visit (Edit -> Invert, Flip, Rotate). Sometimes an inverted image is more striking! Flip and Rotate are great for creating room to then place text in.

Widgets can also be inverted or made transparent (very handy for invisible buttons that go over an image or text).

palette changes

I changed Thriftgirl's palette using the command line (Decker -> Listener). Since this also affects the palette used to render the editor itself, I wouldn't recommend it! I'll use the Deckstamp contraption for future projects.

creative fill

Decker's Flood tool is great (it's like MS Paint's Fill). Selecting it (Tool -> Flood) will open up a Style toolbar (Style -> Stroke) with cool patterns, including four animated patterns. Make sure you change the Stroke though, the Fill pattern is for the inside of the Filled Box and Filled Oval tools.

Download Thriftgirl
Leave a comment