Howdy folks! Our second production blog post is about sprites and how we generate characters, props and locations in that old school, 8-bit style.

We start in Photoshop. Zooming in close, I work around 800%-1200% zoom, although Photoshop can go a close as 3200%.

Click to Enlarge

Below, you can see the actual size of the pixels I generate compared to the size (via zooming) at which I draw.

Click to Enlarge

Using  the pencil tool and the eraser tool (mode set to pencil) I can then begin drawing whatever is needed. I do what I can to avoid leaving trapped, negative space pixels (I call these “orphans”) as they will cause me trouble in the vectorizing step (more on that in a bit). Below, you will see two Keikos (“Keikoes?”). The one on the left, I made the mistake of leaving an orphan, while the one on the right, I added a nearby color (or at least a color that made sense).

Protip: While working on sprite art in Photoshop, be sure to set your Image Interpolation settings to Nearest Neighbor. This prevents Photoshop from anti-aliasing your layers should decide/need to rotate a sprite or (god forbid) enlarge or shrink a sprite. You can find these settings in Photoshop under Edit>Preferences>General, or by hitting CTRL(CMD)+K.

Click to Enlarge

When I’m finally ready to begin principal animation, I drag the needed sprites from Photoshop over to Flash. Flash places what I had selected on the stage in the form of a Bitmap. It’s a crappy, unusable bit of data that I can’t use until I select it and tell Flash to “Trace Bitmap” which will convert it from a raster image to a vector image. I have the Trace Bitmap function bound to Shift-F8. Notice the settings.

Once the bitmap has been transformed into a super rad vector element in flash, I have to remove all orphans (remember those?) Any white space must be cleared away before I can select a character. This is insufferable sometimes when I work on Jamie’s pixels because he wears a white lab coat and I forget to fully encase it within his outline pixels.

After killing all the orphans, I then select the character and hit F8 to turn those newly minted shapes into a Symbol. Symbols are collections of objects like all the pixels that make up a character, and are used in Flash to make life easier for the animator. More on Symbols, Objects and Flash in a future blog post.

I label objects I’m turning into a symbol, putting the character’s name first if the sprite is a character, otherwise, I put PROP or BACKGROUND followed by what the object is. This lets me organize my symbols per character, or props and backgrounds.

And that’s how we get characters, backgrounds, props and effects to look 8-bit.

Thanks for reading,
-M.S.

Hi, everyone! Mike Szymanski, here. This is the first entry in what I hope to be a long and rapidly updated production blog for the show Level 20-Something. I hope to chronicle the highs and lows of our quest to become a “thing-on-the-internet.” We’ll be delving into, not only the technical aspects of making the show, but also what we’re doing to promote the show so that, eventually, we can do this for a living.

Our first production topic is the Animatic. An animatic is nothing more than a series of images or slight animations used to plan out a video or animation sequence. It’s basically a storyboard that moves, or can be thought of as a sketch of the final video.

I don’t create animatics for every scene or episode; I use them primarily for complex sequences that require meticulous timing or are very action heavy. They can also be used to weed out inconsistencies or to address where a character should enter or exit a scene, or even just which camera angles I should use for conversation scenes. Below is the animatic for the montage sequence from Level 20-Something S01 – E06.

Since montage sequences are closely tied together with the music, I sent a soundless version of the animatic (created in flash, but exported as an mpeg so that we can pause, rewind or fast forward) to Chris Voris, one of the musicians for the show, to score it. Having a visual reference for his musical cues lets him get a better idea of tone or mood and also for timing. He then sends back a rough of the music, played over the animation.

I then generate all the sprites and backgrounds I need (a process to be described in a future blog post) and then basically “trace” the finished sprites and animations over the animatic layers in Adobe Flash. I snip apart different bits of the music he sends me to make slight adjustments to the music or animation for timing purposes. Below is a screen cap from episode 3, with the background layer removed to reveal the animatic layers below it.

Click to Enlarge

The end result of our combined efforts looks like this. You’ll note a change in music at some points, the animatic helped work out which parts of the song should be played and when, as well as a few animation changes that needed to be made. The music was also changed a bit to be more chip-tuney, so as to tie all the parts together.

You can actually play both videos at the same time to get a sense for how the timing changed, but I recommend muting at least one of them to maintain your sanity.

Creating animatics can be time consuming, but the final product will turn out that much better. It took roughly 4 days to create the animatic for episode 6, and roughly 7 weeks to get the entire episode completed.

Thanks for reading,
-M.S.