29th March 2018

Creating Comic Strips

Early on when we defined the Mercury Blue roadmap we decided that not only would a comic be a great way to help get the punters in, but would also allow us to fill in gaps in the storyline, fill in character backstories and keep the fans entertained between episodes. The concern was being able to crank out comics regularly without stretching our resources too thin.

We managed to establish a relatively quick and easy process for this, so I thought it might be interesting to go through it with you and demonstrate how you don’t have to be Stan Lee in order to achieve something that looks polished.

Storyboard

The first thing we usually do is sketch out a story line and a story board, frame by frame. Stick figures will do fine. We try to keep each strip 4-5 frames long so readers get a “quick fix” and don’t have to spend more than a few moments of their valuable time to get their weekly update 🙂.

Scene Creation

Next, we need to create the content based on the storyboard. For this, we use Unity (and a couple of tools I’ll go through). This is where it pays to have a nice library of models and environments to choose from either via internal sources or the asset store directly. If you don’t, and you don’t have the cash to buy the perfect asset – no problem. There are still plenty of free stuff on the Unity store you can utilise to help get the job done.

As part of this step, we put together a new scene for the sole purpose of setting up a single camera/screen snapshot that will become a frame in the comic strip. Where possible we’ll use one of our pre-rigged environments, complete with lighting and characters. This assumes of course that you have your game characters rigged with blendshapes (facial gestures). Emotions shown through facial manipulations are crucial, so having blendshapes set up with typical emotions such as “happy”, “angry”, “surprised” etc. can help speed up this process.

Another “must have” tool in my opinion is one that allows for either forward or inverse kinematic positioning of the limbs. We use the Unity tool “Skele” for this and
it’s a real time saver. It allows you to pose your character the way you need them in your shot within seconds.

Filtering Effect

Once we have the scene looking pretty and the camera positioned the way we need, we’ll take a snapshot and import it into paint.net.  For those who are unfamiliar with this tool, it’s free to use paint tool and can be found here at https://www.getpaint.net/download.html and it’s extremely powerful (and stable) for a free paint tool.

Once loaded, you can apply an ink filter under Effects > Artistic > Ink Sketch. This will give you a nice hand-drawn toon outline effect to your scene. There are some sliders that you can use to tweak the settings and you can get a pretty nice effect with a bit of trial and error.

Text Bubbles and Annotations

The last step is to add the speech bubbles. To do this I’ll import the “inked” pic to Inkscape, a free to use vector tool that can be found here. https://inkscape.org. This tool is great as it allows you to create not only your custom text and annotation bubbles, but scale and positioning over the top of your comic as well.

So there you go – our comic strip creation process in a nut shell.  I guess this could be construed as cheating, and while you may not get quite the same quality as traditional hand-painted graphic novel designed by a pro – it certainly gets the job done and allows us to concentrate our efforts on our primary activity – game development! 🙂