The Bullet Animation – Vector Graphics

In my previous post, I showed you how I sketched up my characters to bring them into a digital format.

The problem is that they were still unsuited for animation in Synfig. I had to convert them from raster images into vectors. But how? Enter Inkscape stage left (inkscape.org). I had downloaded this on a previous occasion, toyed around with it and put it away because I had more pressing, important issues to attend to. Work is like that. Anyway, I’m happy I revisited it because it’s the bee’s knees. It can convert bitmap images into regions for you, it can apply paths in layers, it can fill with gradients and stroke with different styles, and you can even muck about with opacity and geometric shapes and…

Awesome, so…

So, I inserted the image into Inkscape as a layer, with the result as shown. Yeah, it looks scrappy, but it does get better. Working over the lines into paths, I traced over the top of the lines. Then I noticed that Inkscape has a layering facility. A bright idea struck me (I still have the mark) and I worked at breaking up the image into logical parts.

AssassinVector1After a couple of faces, I got into a pattern of figuring out all the different layers and regions of the eventual picture and added each of these as a separate layer. So, in the example of the Assassin here, there’s the hat, the glasses and his coat, along with the scarf. Furthermore, he has skin and hair and, on the skin, he will have skin in shadow and skin in light (Think old school, silver salt photography).AssassinVector2

The skin will appear underneath the hair and the hair underneath the hat. Get the idea?

With each of these as layers, it was then only a matter of sketching out the relevant outlines over the top of the picture to create paths. These can then be drawn and/or filled however you wish. To make life easier, I set the opacity of each layer as 50% so I could still continue to use to the underlying sketch as a guide.

I recently discovered that I could achieve the same thing if I locked the sketch layer, placed it at the top, and set the opacity of that layer to 30%. Eh, Pot-ay-to, Pot-ah-to. Got there in the end.

I chose not to have an outline on the regions, preferring instead to let the colours do the work of definition. I like line art, but after a bit of experimentation having lines on and off and with different thicknesses, I opted to go for fill only.

Darn it, now that I look at that partially coloured sketch, I kind of like the scruffy black-lines and washed up colours. Kind of like water colours. Storing that one in the back of my head for next time.

AssassinVector3Continuing on, filling in layer by layer, I ended up with the images that I could then use within Synfig. I reckon I could’ve spent longer but I had time limits imposed on my venture. After all, I’m supposed to be writing Hampton Court Ghost.

These images can be exported as .svg files, and can be used as scalable vectors in a bunch of programs. InkScape has a bundle of really cool features that I haven’t had a chance to play with yet. I was going to get all fancy with some of the plugins I did get to play with (there are some really cool plugins!) only when I tried to import the resulting svg file into Synfig, there were some issues. For example, importing regions that had bits knocked out them, like doughnuts, came in as filled.

I’m not overly sure, yet I think there’s a slight disparity in Synfig when importing SVG files in the current iteration, but it’s not a show stopper. I’ll get onto the topic of importing into Synfig in a later post.

Neat, huh?

ForemanVector1There you have it. I repeated the process for my various characters,  even for the Tester (who didn’t make it into the reel) and ended up with the pieces that I needed, ready to go. This really was a neat way to get my faces ready for animation:

Oh, whoops! I made the Foreman’s hair too dark. That’s OK, just select the hair and change the fill, adjust the hue, the lightness, the saturation.

Drat! I made him too small! Not a problem, being a vector, it’ll scale up or down without any loss in quality.

Blast! I needed a larger chin, the hat’s too short, the eyes are all wrong, I want scruffier hair. All good, just grab the path tool and add, remove or tweak the points until you’ve got it the way you want it.

That’s one of the beautiful things about this: You can add more layers to add more detail, add more points to define a better edge or, conversely, remove points and layers to simplify and posterise. I got into a rhythm of defining small paths, using the union option to join the regions together, then simplifying the path to get to a more cartoon-like style.

Creating the slug and the shell of the Bullet was the easiest of the lot. Being geometric in nature, Inkscape’s path tools made short work of it. I added another layer for the casing, and created a couple of ‘shines’ but left the gradients to be added after I imported it into Synfig Studio.

In my next few posts I’ll go through how I approached animating the scenes, you know, the ones I did way back then, and some of the problems I came across.

The Bullet Animation – Conception

I realized only a few months ago that, whether I like it or not, promotion is a part of being an independent author. Like the saying goes, if you don’t blow your own trumpet, no one else will do it for you. So this next series of posts could also be titled, “How I learned to blow a trumpet”.

A big shout-out and thank you to Erman for giving me the inspiration to make a video for The Bullet. His suggestion to make an animation sparked in me a memory of a former interest. I had, back in the days of bulletin board systems (BBS’s, remember those?), 2400 bps modems and 5 1/4″ floppy drives, dabbled in animation and music, but my experience was frustrated by the poor interfaces (ASCII based), slow 286 CPUs, no sound card and a small hard drive.

It’s 2015, and we’ve come a long way, so, I considered, maybe I’ll give it another crack. I put my digital pen down and started poking around on the net for ideas and software. Good thing I had a decent supply of coffee! From low level to high, I considered my options. Not wishing to delve into 3-D modelling, nor draw every frame / cell by hand like I did back in the good ol’ days, I skirted past those options and settled on Synfig (www.synfig.org). A couple of demo videos on YouTube later and I was convinced.

The next problem was figuring out which book I was going to pick on. Almost immediately I decided upon The Bullet, since it gave itself nicely to 2-D animation, what with the old-skool Steampunk thing going on, and a couple of scenes jumped straight into my head.

Inspired, I got cracking.

Of course, there’s more to it than that. My next few posts will relate the process I took to get from an idea to the screen.

After playing around with Synfig for a bit, getting a feel for how it operates, I turned my machine off and picked up a piece of paper and a real pen. I’m a big fan of pen and paper for ideas. I’ve tried using tablets and styluses and finger scrawls but, in the end, I just end up frustrated. There’s just something about the freedom that nice paper and a good pen affords.

Anyway, although it sounds obvious, I had to take a step or three back and decide what it was that I actually wanted from the video, what the message was, how it was to appear, how long it would be, how the viewer was to see it. Important stuff. Boring stuff. Stuff that was getting in the way of actually making something. Yet I knew that it would be fruitless if I didn’t plan properly.

I had these grand ideas whirling around in my head, some stupendous, others just stupid. A full-blown twenty-something minute video just wasn’t feasible. What was this video for, anyway? Telling the entire story? No. Reading out a slab or two? No.

It was to be a short promotional video, enough to give a feel for the book without giving too much away.

To this end, I opted to keep it simple.

I’m not a fan of videos that go on and on, or have a massive lead-in time, so, doing a virtual demo inside my head, I whittled the scenes down to four or five to fit within a self-imposed timelines of roughly a minute. To visualise the scenes and test the timing, I scrawled out a timeline on some paper, complete with markers to indicate where things happened, and worked at it (scrapping some unnecessary scenes) until I got it down to a concise flow.

The end result is fairly consistent with what I ended up with and I think that this planning stage was crucial to getting this thing off the ground. Of course, a video isn’t really a video if there isn’t sound included. I marked out a few key sounds that needed to be included, pointed out roughly where they needed to go on the timeline, and put them on the back burner. But I’ll get onto the sound and the music in a later post.

There was a lot of squeezing here and poking there, to make sure that each scene was given a fair go. In the end, I used the conceptual stages of the book, rather than the chapters as I had originally planned, to create the scenes. A great deal of emphasis is placed upon just the creation of the Bullet, so this would naturally require a lot of detail, thus the first three scenes are devoted to the genesis and refinement of the Bullet.

The confusion and chaos on its journey was going to be almost a minute long but, in the end, I got it down to twenty odd seconds. Why? Because this wasn’t a movie; each detail of the Bullet’s journey didn’t need to be exactly plotted. Instead, the feel of the story was what was needed. So players like the Boss, the Courier and the Tester aren’t shown, but this isn’t really an issue, in fact, I think it was necessary. Too much detail can be as bad, if not worse, than not enough.

Finally, the realisation of the Bullet’s destiny, and its relationship between the Assassin and the Target, was to be the climax. Of course, there is no mention of who exactly the Target is, since that would be skewing the reader’s opinion, so I had to be careful not to put too much emphasis on the character’s visuals outside of what might be gleaned from the book.

In the end, I wound up with a bundle of pages, the first and neatest of which is shown below. The others look a lot like this, only there’s a lot more furious scribbling, crossing out, annotations, arrows (lots and lots of arrows) and times.

BulletScenes

In my next post, I’ll show you how I got my characters onto the screen with the aid of pencil and paper.