Looking Out To Sea

It’s not what any sensible person would call usable, but I’m now announcing the appearance of ComicBake, which is what I’m calling my app for creating web comics.

ComicBake is a CLI tool for making web comics. I shall demonstrate a quick example to let you understand. (This example also appears in the source repository so you can actually recreate it too.)

Example Comic: The Conversation

The first thing you need is an image, preferably with characters who can do some talking. I’ve chosen this image from Flickr of two people having a conversation. I don’t know who they are but it’s a nice photo and it’s suitably licensed so I can manipulate it as I please.

Then you need a script file which tells the compiler all about the action in the scene.

-- A Conversation
-- A Series of Examples
-- 05 September 2009
-- Dougal Stanton
 
-- Photo CC-licenced from:
-- http://www.flickr.com/photos/clairity/154640125/
 
Scene 1. <scenes/conversation.png>
 
Woman: This is just a simple demonstration.
 
Man: Is that because it breaks
     with anything longer?

Ignore the first half-dozen lines as they’re just commentary (though I plan to use them in the future). The important points to note are:

1. The scene description (including file path to image)
2. The dialogue.

There are two characters here, and we can easily tell who is who but the computer needs more help. Next up is an image map, which associates names with co-ordinates:

<img src="conversation.png" width="500" height="306" border="0" usemap="#map" />
 
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Dougal Stanton -->
<area shape="rect" coords="46,29,108,88" href="woman" />
<area shape="rect" coords="426,9,494,73" href="man" />
</map>

This is just the raw file produced by The GIMP when you use its HTML image map feature. The link name for each area (href="...") doubles as the character name. Thankfully you’ll only ever have to do this once for any given image.

Pull all that together and you get:

Getting it, Using it

The code is in the usual place:

darcs get --partial http://www.dougalstanton.net/code/comicbake

To build it use the cabal-install tool. This sets the default install to be your home dir rather than system-wide:

cabal configure --prefix=$HOME --user
cabal build

That should get all dependencies except for gtk2hs+cairo, which is a real pain and something I’m planning to abandon before long. The best bet is to see whether your distro has a package for it…

Running it is simple. It only take one argument, the script file. So if you want to execute the example script:

./comicbake example/conversation.script

This will save a frame1.png into the current working directory.

Bugs

I’m still in active hacking at the moment — not even really alpha as it’s a bit of a mess. But I figured that if I didn’t release something now I would forget about it and it would disappear eventually. Which would be a shame because I think it’s quite a neat idea with some interesting potential.

• The most obvious problem is that if you give it anything more than a couple of speech bubbles to place it can’t find space for them and bails out. The error message you see will be: Prelude.head: empty list. This needs sorted.

• The Diagrams package I’m using is not as suited to the job as I’d hoped, for two reasons. One is that I can’t know how big my speech bubbles will be before I place them, so I’m using conservative guesswork which has so far been quite successful. But it’s not a solution.

• The other problem is that accurate placement of the resulting objects is something that the Diagrams package doesn’t do very well. It doesn’t think in terms of absolute pixel sizes, so things tend to grow and shrink depending on the space needed.

• There are a lot of similar-looking tuples littering the code which should be more strictly separated. It would make the code easier to read and reason about, and the type checker would help me more.

The first thing I need to do is sort out my bubble placement algorithm which is clearly not as effective as I’d thought. Then I’ll be replacing Diagrams with GD, I think.

After that there are “to do” items which may happen if it falls easily into my schedule.

• Neaten up the script parser some more to allow multi-paragraph speeches and some unnamed characters to represent narration or offstage voices.

• Make the script preamble more explicit. At the moment I don’t use the author’s name or date or any of that stuff yet but it’s there for the future. It would be better if they existed as named fields rather than just being free-form.

• Write a proper parser for the image maps. I’m currently depending on Neil Mitchell’s TagSoup library for simple HTML parsing. But as I’m already using Parsec elsewhere it seems foolish to depend on them both. Why take two parser frameworks into the shower?

• Proper command line support. Multiple arguments, let the user choose filenames, maybe some help or useful error messages.

Later on there are some things which I would really like to do. These are actual features which are pretty neat:

• Stitch the various scenes together in some formation, eg 2x2 or 3x1, so they can be published as a single unit. The author name and comic strip title obviously become more important at this point as it brings all the images together into a story.

• An alternative that is also pretty good is converting the same story into a flickbook comic, using anim gifs or similar to show the progress.

If anyone has any good ideas just say so! Also if you want me to actually explain how it works I’ll make a detailed post later. Hopefully when it’s closer to working! :-)