There’s no trick to it—it’s just a simple trick!
I wanted to take a few minutes to reflect on an incredibly simple trick that I just implemented in Errant Heart, which I find endlessly amusing.
At the outset of this whole visual novel endeavor we wanted to leverage our experience in animation and comics. And that is to say, we really wanted Errant Heart to be a visually stimulating experience. Of course, that’s easier said than done and has the potential to end up at either end of the extremes—too boring or too distracting/gimmicky.
Some might look to such a task and decide to focus on generating a boatload of special event images. And sure enough, an event image every few minutes would certainly keep up visual interest. It would also result in requiring far more resources and grind everything to a halt (um, more-so).
So we’ve been doing what we can to balance the needs of visual interest and minimal resources. And that has taken many forms—custom menus, image transitions, “paper doll” sprites with multiple poses, expressions, outfits, hair styles, custom in-engine lighting changes and effects, lots of (outsourced) backgrounds with multiple times of day, etc.
In any event, there was a spot near the beginning of the game which was a little devoid of visual interest. It’s just Lira on a boat, thinking to herself. The monologue is important as it’s the reader’s first glimpse at how the protagonist thinks. That baseline serves as an important metric—it will allow readers to understand how Lira evolves as a character later.
Still, was there anything we could do to ratchet up the visual interest during the segment? Well, the character is riding on a boat. And what do boats do? Sink? Um, well, yes, but more commonly, they ply the waters effortlessly—bobbing up and down as they go. Below is what we came up with:
It’s subtle, but I think it’s something that most people wouldn’t expect to see normally. Just separate the background and foreground, add in a little repeating motion in the code and voila!
Okay, okay, on it’s own this is nothing to write home about. But we’ve done our best to implement little touches like this throughout the game to help keep up visual stimulation without seeming too repetitive or distracting. Hopefully it all adds up into a satisfying reading experience.
Coloring Event Images
Hey folks!
It’s been forever since I did a blog; I really tend to be the kind of person who likes to wait until I’m done with something before showing off what I’ve created, but today I suppose I can give you another peek behind the scenes. This time around, I’ll show you a bit of the process we’re using for event images.
Event images have been one of the last big hurdles for us to get through in completing Errant Heart. Unlike the sprites and backgrounds that get a lot of use throughout the visual novel, event images only show up briefly to punch up important moments in the story. They’re a lot of work for something that will only be on screen for a moment or two, but the effect they have is worth it.
In order to get through the creation of all these images, I’ve been trying to streamline the process a little with with a new coloring method.
This sample is one you’ve likely seen in one of our Kickstarter updates, but it was a bit more involved than most, and makes for a more interesting example.
So here’s my quick sketch based on Ron’s description of the scene: Lira on the couch in the living area above the flower shop, with Salima attending to her and Eva and Noel seated at the table in the background.
This mostly served as a placeholder image, as I had no idea what the room was going to look like until it was put together by Owen.
This is the render we got from Owen. The arrangement of the furniture wasn’t what I was expecting, and forced me to rethink my composition—ultimately making me put together something that was more interesting than my first impulse.
With a little help from 3D software, I approximated the layout of the room, and found an angle that I thought would work.
Using the makeshift background, I made a new sketch that would better represent the final image.
I showed Owen my sample, let him know what I had in mind, and he managed to provide another render at the perfect angle.
After that, all that was left was to finalize my sketch, and send it over to Ron for “ink and tone.”
This is an odd part of the process that’s been left over from our time working with black and white screen toned comics. I’ve managed to adapt it to something that works well enough as a coloring method by turning the tone layers into masks for colors.
Rather than using a straight up cel-style look, I use the smudge brush in Photoshop to blend both of the shadow layers a bit here and there to make things a little more interesting.
And this is the part where it all starts to come together. I create “flats” of each area that needs to be a different color. So one for hair, skin, etc. Each one gets filled with a base color.
Once I’ve done that, I use those flats as a selection to cut out the overlapping portion of the shadows, which I then fill with the appropriate shadow color.
I do this for each area. It’s tedious, but faster than some of the alternatives.
Once all of the basic coloring is done, it’s time for some quick touch-up work. This consists of a little bit of airbrushing in some extra shadows and highlights, as well as coloring the line art to give it a more finished look.
And, viola! I mean, voilà! I just repeat this process for every important moment in the story, and we’ve got Errant Heart in no time!?
Hope you enjoyed this little look into the creation of our project. Thanks for reading!
-Mike
The Way of the Universe
So, something that occurred to me is that I don’t think that we’ve really given potential fans, or donors a good sense of the Errant Heart universe. Sure, we’ve provided basic information about the setting and the general focus of the story. But I don’t believe that, at any point, do we impart a very good impression of how the Errant Heart universe operates or how it’s constructed, what are its rules, etc.
To that end, I wanted to make a post that might help flesh that out for anyone who is interested.
A while back, as part of a writing exercise, I wrote up a couple of scripts for a manga, or webcomic adaptation of Errant Heart. Partly for fun (and practice), they were intended to be hypothetical points in the story of Errant Heart that take place after the events of the Visual Novel. They were also designed to be entry points for potential readers—a way in which people could more easily access the universe of Errant Heart and become invested in the story.
And in the interest of giving people a clearer idea of the mechanics of this universe, I’m going to post one of those sample scripts.
This one in particular takes place after one of the four paths in the Errant Heart Visual Novel is completed. It doesn’t necessarily represent the canon universe, but rather, the results of one of the paths that a reader can take. Just keep in mind, that this will likely be somewhat spoiler-laden. Read at your own peril.
Something readers may want to do before going through this script is to glance through our forum post about Errant Heart. It provides a larger overview of all the characters, as well as some other insights into the universe and our creative processes, etc.
Errant Heart manga script sample
Also, that title image is an unrelated place-holder pic from the VN…but yet, still somewhat related to providing potential readers with the flavor of the Errant Heart universe.