I've figured out how to draw the characters and define their poses. I've created backdrops and actors which can move around a scene, and I can copy and make destructive changes to scene to represent the flow of time from one panel to another. It's time to finish it all off with Comics and Panels.

I'll start with Comics, since they are real simple. Basically, they are just an array of panels. That's it. You can declare how many rows of panels are there (which will affect the size of the comic) and give it a name. Comics are stored in an array so that they are processed sequentially and in the correct order, since each panel and each comic makes destructive changes to the Scene.

Panels are similarly simple. They have three main components:

1. Panel attributes. You can declare where on the panel grid the panel goes, as well as making the panel's size larger (two panels wide, for example).

2. The current scene. This is copied from the previous panel and then changes are made to it.

3. The panel's focus. A scene is undoubtedly larger than a single panel, so the panel has to know where to point the camera. The panel can focus on individual actors or at the spot directly between two actors or at a specific x and y location. Since actors are positioned according to their feet, the focus on actors actually attempts to focus about 30 pixels above the actor's stated position. A panel cannot focus outside the boundaries of the backdrop.

In the JSON data file that defines a panel, you'll see a section for "sceneUpdates". Basically, this is a list of simple commands - each command being an array with the first element a string that describes what the command is and each additional element being a parameter. These commands are read, in order, during the panel creation, and they will perform tasks that either make changes to the panel's scene or to the panel itself. This is in "data_init.js", but it really should be somewhere more appropriate.

The commands are:

• focusOn [ACTOR] - Focuses the current panel of ACTOR.

• focusBetween [ACTOR1] [ACTOR2] - Focuses the current panel on the spot halfway between ACTOR1 and ACTOR2.

• focusAt [X] [Y] - Focuses the current panel at a specific X,Y location.

• shiftFocus [DX] [DY] - Move the current panel's focus DX,DY pixels.

• focusOnSpot [SPOTNAME] - Focus the current panel on a specific sweet spot.

• changeBackdropState [KEY] [BOOL] - Set the backdrop default KEY to BOOL.

• actorFlip [ACTOR] - Turns an actor around from its current state.

• actorMoveToSpot [ACTOR] [SPOTNAME] - Moves ACTOR to a specific sweet spot.

• actorMoveTo [ACTOR] [X] [Y] - Moves ACTOR to a specific X,Y location.

• actorShift [ACTOR] [DX] [DY] - Shifts ACTOR DX,DY pixels.

• actorChangeLayer [ACTOR] [LAYER] - Changes an ACTOR's layer value.

• actorReset [ACTOR] - resets an ACTOR's template to XXX_DEFAULT.

• actorApplyState [ACTOR] [STATE1] .. [STATEN] - Applies templates STATE1..STATEN to ACTOR's template.

• actorSetSprout [ACTOR] [KEY] [SPROUTNAME] - Change an ACTOR's sprout key to a new sprout name.

• actorSetVisible [ACTOR] [BOOL] - Sets whether or not an ACTOR is drawn in the scene.

The big missing part of this comic creator is the ability to set the word bubbles directly. Because of the way the panels are rendered (double pixel size), putting in the word bubbles would need to be a second pass after the render scale is returned to 1x1 pixel size. Because of this, I'd need to maintain the character's head position within the panel between the panel render pass and the bubble render pass, such that I could make the bubbles point somewhere in the right direction.

I have not put a lot of thought into how to do the bubbles. It seems like it would involve a lot of counting characters and breaking strings up into oblong text shapes, then drawing the bubbles around them. However, with screen real estate at a premium, I'm not sure I could create an automated bubble system that could work without obscuring background details or fitting text into a readable way. The most obvious solution to this is to have bubble templates with the bubbles pre-drawn, and simply select them in the panel loading phase.

Beyond that, the next biggest step would simply be to cut out all my characters into sprouts and backdrops and build a repository of props to build comics from. It's kind of mind numbing work. All that pixel counting! I guess a better approach would be to start with one or two characters and slowly add more over time. Unfortunately, because I'd have to break down the characters and redraw various bits of them, there is no automated way to do this.

(If I didn't keep the heads and hair separate and just focused on poses + facial expressions, I could potentially cut down on a lot of work. I wouldn't need to redraw bodies without heads, just erase their facial expressions. Ultimately, since I share a lot of content between bodies, it would mean more work. For instance, the vampire knights share the same bodies but have different heads. And Hechter's body is just a slightly recolored Maxim body. By separating head from body, I can save on the amount of poses I need to measure pixels on).

Another thing I think would be worthwhile is to create a backdrop creation helper. A large majority of the similar areas in the comics I made use a standard backdrop with a few changes made. For instance, all the castle rooms use the same background. I just change the doors or add paintings to the wall. Being able to do this with Backdrops and prop could store dozens, if not hundreds of different backgrounds - even procedurally generated ones - with a single image. It'd be a real nightmare to count pixels for the position of every single possible object, but a helper app where I could manipulate the props using arrow keys and then spit out a JSON definition of the scene would be really useful, I think.