Reviving 1990s
Digital Dress-Up Dolls

With Smooch

About me

• Libby (she/her)
• Worker-owner at Position Development
• Currently work remotely from Wheeling, WV
• KiSS artist from 2001-2006

What I'm going to talk about

• What the Kisekae Set System is
• Who created it and why
• Why I trying to revive it
• My KiSS viewer, Smooch

What is the

Kisekae Set System?

A: Wow, I love those!

1991: The Invention of KiSS

• Created by MIO.H for users of a Japanese BBS (Bulletin Board System)
• Internet was expensive and slow
• Pre-web!
• Users were sharing dress-up doll programs of favorite characters
• A separate viewer allowed individual dolls to be smaller

"Sailor Moon" by MIO.H

CEL image format

A transparent background like an animation cel

Each graphic in a KiSS doll is  a separate CEL file, a custom image format MIO.H created just for KiSS

Indexed color

Why not GIF?

• GIF was invented in 1987

• Allows for transparent backgrounds

• Indexed, just like CEL

KCF Palette Format

Each GIF file stores its

own palette

CELs share a common

KCF palette file

KCF Palette Format

KCF allows palette swapping!

CNF configuration file format

• Layering
• Grouping
• Set
• Positioning

LHA Compression

• KiSS dolls always have all their files in a single directory
• Artists compress the files into an archive to distribute them
• LHA: the most popular compression format

Why KiSS?

Nostalgia

• Beloved teenage memory for many a millennial
• My first publicly-shared coding project was a KiSS doll!

"Mariko" by Libby (2001)

Posterity

• KiSS dolls are valuable snapshots of internet history and culture
• Some dolls are beautiful works of art

Nigel (2002) by Kid and Rick Cramer

Unique features

• Different than most current doll-making software
• Layering
• Animation
• Flexibility

Picrew examples

Open specification

• The fact that KiSS has an open specification lets us make a viewer and other tools pretty easily, compared to other doll-making systems.

The Sims character creator

Backend

• Written in Haskell
• Using Fn (fnhaskell.com) web library

Handling the doll upload

• When you upload a doll, Smooch checks to see if it already has the doll cached and if not...
• The most imperative "functional" programming you will see in your life

Parsing the configuration file

• Using Parsec!
• Parser combinators

Test-driven development

• Parsing a CNF is a great opportunity for test-driven development!
• Every time a CNF fails to parse, add a new test!

Example: parsing cels

• Always starts with a "#" and the object number ("mark")
• Optional "fix" value
• Cel filename
• Palette number
• The sets in which the cel is visible
• Transparency value

Putting the pieces together

Cels & Palettes

• First try: cel2pnm
• Coded with help from Mark Dominus at Recurse Center
• A C program that converted cels to portable bitmap files (*.pnm) that could be converted to PNGs with the Netpbm toolset

Cels & Palettes

• Now: JuicyPixels
• Coded by huggablemonad
• Pure Haskell conversion from CEL+KCF to PNG

Palette files

• Easy!
• Read the colors into an array

Cel files

• Get width and height
• Look up each color number in the array of colors until you have an array of colors
• Convert to PNG!

Rendering the Doll

Originally tried PNG <img> elements with absolute positioning

Almost worked!

Problem: drag & drop with overlapping items

browser: You definitely clicked scarf.png!

me: *clicks on shirt that is visible beneath the scarf and purse*

Blue-chan (2001) by Her Mad Hatterness

Trying again with canvas

At first the problem was even worse!

How can our JavaScript know what item of clothing is being clicked?

The browser only "sees" the canvas as a flat image!

me: *clicks on literally anything*

browser: you clicked on the canvas!

me: what part of the canvas??

browser: how should I know?

Solution: GHOST canvas

1. Assign a color to each item of clothing
2. Draw a second canvas that colors each item its assigned color
3. When user clicks, get the color of the pixel that was clicked
4. Look up the item!

me: *clicks on shirt that is visible beneath the scarf and purse*

browser: you clicked on rgb(0,7,93)

javascript: ah, yes, the long-sleeved shirt!

FKiSS

• Event-based scripting
• Everything is an event or an action
• Actions can only happen when triggered by events
• No variables
• No conditionals
• Super simple!

Blue-chan's blink cycle

FKiSS

• Make data types to represent in events, actions, and the arguments for each in Haskell
• Parse FKiSS in configuration files the same as everything else

FKiSS -> JSON

JSON -> JavaScript

In kissDoll.mjs

In kissDoll.mjs

• Actions are just functions
• Most of the actions are methods on a cel or object
• Sadly, if you don't use `bind`, when you return the function and use it later, JS forgets what object to call the method on ;_;

In fkissAction.mjs:

In kissCel.mjs:

• Events are CustomEvents
• Lets us treat FKiSS events mostly like JS Events!

In kissDoll.mjs:

In fkissEvent.mjs:

• So are FKiSS timers equivalent to JavaScript's setTimeout?
• NO :(
• FKiSS timers are weird and I still don't totally understand them

In kissDoll.mjs:

The Future of KiSS

KiSS+PNG

• Most new artists want 24-bit color, no color limits
• Few artists use palette swapping
• So - PNG!
• Can't play on older viewers, BUT -
• Export to CherryKiSS
• Compatible with UltraKiSS desktop viewer

Dolls on Meiker

More tools!

• Make it easy to make dolls
• Add editing to Smooch?
• Or encourage others to make their own tools!
• AND make their tools free and open

More contributors?

• If working on Smooch sounds fun to you, let's chat!