Jamming for Equal Marriage: Our War Everlasting

by Aviala

I participated in a short game jam a couple of weeks ago; the jam for gay marriage. The jam only had 3 submissions in the end, but mine was one of them.

Download Our War Everlasting here.

Our War Everlasting is a short kinetic story about two soldiers who must face the horrors of war together. As the jam name suggests, the story also includes a romance between the men.

For such a short and interesting jam I wanted to make something a bit experimental. The illustrations are mostly in just red, black and white and the strokes are thick and loose. There are no sprites, only CG's and text. I challenged myself to create as much art for the project as possible, and ended up with about 30 full screen illustrations.

Overall, the jam was a wild ride. I stayed up 24 hours making the game on what was supposed to be the last day, but then the jam got extended, which is great because I wouldn't have been able to finish it in the original deadline. So, I slept a few hours and started working again.

I'm pretty happy with what I managed to do in such a short time (mostly) on my own. I couldn't have done it without the support of my editor Shaples, though. She cheered me on and made sure the story was as good as possible.

Our War Everlasting was an interesting side project, and it's the first visual novel I've ever released. It's not perfect, but jam games never are. I'm a bit sad I didn't have time to include choices but even though it's a perfectly valid option, I'm not going to go back and add any. It's time to move on and continue working on Skyfish.

Five Things about Background Art

by S.

At the moment I am steeped in Tell a Demon background art, so I thought I would write my thoughts about background art in general, including some of my past experiences (and errors).

1. Telling a Story

Background art can say a lot about the characters who inhabit it, whether it's an interior or exterior.

All exteriors in Tell a Demon and Asher, for example, are intended to give hints about the world, from the old stone foundations to the altars visible on every street corner. 

From Tell a Demon (Demo).

Background art in a visual novel takes on the role of background description in a regular novel; where a book might tell you about the street altars, the design of the theater, and the style of doors most popular in a fictional city, the background art does that in a visual novel without having to tell you.

Background art can also be integrated into the story or gameplay: such as in adventure- or hidden object- type scenarios. For instance, one of the backgrounds in a visual novel I worked on, Sunrise, had an airplane that could be added or removed. It later played a key role toward the end of the story.

2. Contrast in Style

It's important that characters stand out on the background art. One way to achieve this is through contrast in style.

It's fairly common to see a visual novel with cartoon characters on painted backgrounds, but the reverse also works to make the characters pop off the background:

From Sunrise.

Here the background art is abstracted, flat, and saturated, in contrast to the realistic, painted, and less saturated character art.

The difference in style doesn't have to be so dramatic, but even a slight difference, such as a change in line quality, can help make the characters stand out.

3. Contrast in Value

From Asher, god this art is old.

One issue I had with the painted black and white art style of Asher was getting the character art to stand out no matter where it was placed on the background art. I found that backgrounds with a wide range of values (light, middle, and dark points) often had places in which the character art blended in or disappeared!

To counter this problem, I made the backgrounds a middle-grey to light tone. I also upped the contrast in the sprite art, exaggerating highlights and shadows to establish more contrast.

This can be a problem with color art, too, and it helps to occasionally look at the artwork in grayscale to check whether or not the image holds up in black and white. This is important when designing for a wide range of viewers, since a shift in color that looks fine on one monitor might be difficult to see on a monitor with poor color calibration, and what looks distinct to one person's eyes might be indiscernible to someone with, say, color blindness.

4. Remember the Textbox

I'll admit to having a mild obsession with the textbox. I have thought of putting it at the top of the screen, where it would be out of the way. I have thought of using a subtitle style and doing away with it altogether. It seems like I often have to choose between hiding something important or adding more art (which is time-consuming) to get around the Textbox Problem.

Some of my early attempts were simply poor planning and Asher's background art was generally awkward as I figured out what I was doing, and it suffered from several art and textbox clashes:
 

Actually, the textbox is there to cover up the spoiler.

I came up against this problem with the Sunrise sprites, too. Because the sprites took such a long time to paint, it was difficult to add poses. Fairly early on in the story, a bird cage was required. There are two natural ways to carry a bird cage: from the top, or by holding it at the bottom*. While the latter would avoid the textbox issue, it would require significant repainting. However, the bird cage is only held like this for a brief period of time, and the character inside it has her own side sprite to compensate, so I settled on minimally repainting one arm pose to get the bird cage to work.

Sometimes you just have to cut your losses.
From Sunrise. Text by Hazel-Bun of Cherubim Scribes.

Ever since Asher, I draw my background art thumbnails and sketches with the textbox. Anything important has to go above that point and it's easier if it's planned in advance.

5. Focal Point

Some more recent Tell a Demon background art

If there is an aspect to the background that you want to draw the reader's attention to, create a focal point. Here, the converging lines and lighting draws the attention to the center of the composition.

This doesn't have to apply only to items in the background, but can be used to make the characters stand out on the background:

Callista from Sunrise.

In the above screenshot, the darkest part of the background is behind the lightest element (the character), creating a high contrast focal point. There is also nothing to compete with the reader's interest (read: this background is boring). Sometimes it's better if some backgrounds do not draw attention, because focus is then placed on the character art.

It's also worth noting that if a character is placed on a background which is very dark, it's better if it's not a flat #000000. One thing that can add extra polish to a VN are custom light and dark screens that match the overall feel and texture of the visual novel.

*You could also hold it from the sides, but then the bird of prey inside might take a finger.

Release: "Faust: Scene II" kinetic novel now on itch.io!

by Meagan

I'm happy to announce that the short kinetic novel I've been putting together in my spare time is finally complete!  Faust: Scene II is available for free download on itch.io.  (Link below.)

http://meagantrott.itch.io/faust-scene-ii

"A kinetic novel-style illustration of a scene from J. W. Goethe's Faust in which the characters happen to be women. An exercise in creating visual novel art assets more than anything. Text adapted from Martin Greenberg's 1992 English translation."

You can also read a little about my dev process here on Art of IF:

• All Female Faust: Gendering Goethe
• Mephistopheles’ Sprite: Reinterpreting a Familiar Character
• Developing a Realistic/Semi-Realistic VN Sprite

Developing a Realistic/Semi-Realistic VN Sprite

by Meagan

In my previous post, I described the research process I go through when designing a character.  Continuing in that vein, I wanted to share the steps I take to make the character sprite itself.  Consider this a digital painting tutorial of sorts.

1.  Sketchbook 

Another ugly phone photo.

After some experimenting, I decide on a pose that represents the character's personality in some way and draw a very basic contour sketch.  I like to do this step in my sketchbook as opposed to Photoshop, because my hand has more freedom of movement on paper than when I'm working with my (really small) tablet.  It's just a personal preference.

Next, I either scan or take a photo of the sketch so I have a digital copy of it.  Quality doesn't really matter, so long as I get the whole sketch and there aren't any obvious distortions.


2. Digitize 

My next step is to paste the digital copy into Photoshop and trace the outline as a new layer over a toned background.  The background can be pretty much any color, but I usually go with a medium to medium-dark neutral.  It's just for color reference.  

It's generally a good idea to make this "master" image significantly larger than what you'll need for the actual game sprite.  It's just nice to have big art assets around in case you need larger images for promotional materials later.  For example, Mephisto is around 2000 px high here, but her resized game sprite is only 800 px high.

At this stage, I make any necessary adjustments to the outline, correcting proportions, etc.  I also add in the smaller details like fingers, hair, and facial features.  (The facial features go on their own layer, so they can be easily swapped out for different expressions!)  On my Faust: Scene II sprites, I experimented with exaggerating the faces and hands, so that their expressions would be more readable if the game is played on a smaller screen.

It's probably worth mentioning here that I like to fill in the main shapes with a solid "base" color.  With sprites, this often helps a lot with transparency issues that I'll talk about later in this post.  I usually paint the base color for the skin something drastically different from what the final local color will be.  This helps give the skin more depth, so to speak.  Skin is made up of multiple translucent layers of tissue, and I try to emulate this in the way I paint it.  Having a red or purple-ish hue as your first layer can mimic the look of blood and muscle under the skin.



3. Adding clothes

I hadn't drawn her codpiece yet when I took this screenshot, I guess.

This step is pretty straightforward.  I sketch clothes on a new layer or a few different new layers. This allows for easy experimentation with different outfits.  It's also important if you have a costume change at some point in the story.


4. Painting

When painting, I tend to work back to front, doing the "underneath" stuff first.  I guess this is a carryover from my oil painting training and probably doesn't matter as much with digital.  I also erase or blend in parts of the outline as I go wherever it makes sense.  Again, remember to paint the face on its own layer so it can be easily swapped out.


5. Handling expressions

That creepy effect when you turn off visibility on certain layers...

To make things easier for myself, I like to paint parts of face that aren’t likely to change much on their own layer so that they stay consistent.  Here you can see how I did that with the nose, chin, and jawline.  (Yes, in real life these parts will in fact move slightly as a person's expression changes.  Keeping them the same in a game sprite is a time-saver.)  

Another trick I use with expressions is creating an extra copy of my first one and pasting it in place to use as a reference.  Drawing on a new layer directly on top of your reference helps you anchor your eyes, mouths, etc. so your facial features aren’t floating around.  For example, the corners of the eyes should always be located in roughly the same spot.  Otherwise, your eyes are going to look like they're moving up and down the face in a way that doesn't really make sense.



5. Checking transparency

Before patching.

After patching.

Sprites need to be at least mostly solid so the backgrounds don't show through conspicuously when you put them in the game.  As such, one of my final steps is to turn visibility off on the background and look for spots where the white/gray checkerboard pattern is really obvious.  I then patch these areas by creating a new layer behind everything and filling the transparent spots with the same color as the toned background I used.  I don't bother filling in the edges of hair when I do this, since thin clusters of hair appear translucent in real life.

After that, it's mostly just a matter of cropping and resizing to game dimensions.  Done!  

Adapting Photographs for Background Art

by S.

Sometimes you have to cut corners to finish a project in time. Here's a quick step-by-step tutorial on adapting photographs for use in a visual novel.

1. Pick carefully, or shoot your own photographs

These photos came from a trip to the Painted Desert from a few years ago. I'm pretty sure at that time I only had a regular point-and-shoot. Anyway:

1. This photo doesn't have a very dramatic light scheme, nor a strange viewpoint. It wouldn't be difficult to put a sprite on this one.
2. The horizon line is too low.
3. There are too many dramatic lights and shadows, which might compete with the sprite art.
4. The light here is too extreme, and the perspective is strange and a little warped.
5. This one could work, but that fence at the bottom creates a big, high-contrast bar of shadow. If I really wanted to use this one, I could try lowering the contrast, but the vertical line in the middle of the composition could still be distracting.
6. I'm not sure why, but visual novels that use photographs often use pictures of the ground, or the ceiling, or looking down at a bed. This can break immersion because it usually creates such an extreme contrast between the perspective of the sprite art and the perspective of the background art.

Number 1 is selected. The soft lighting and location of the horizon makes it a practical choice; it's not likely to compete with the sprite art.

2. Crop and find the horizon.

When adapting photos to sprite art, it's useful to have sprite art or concept art as a frame of reference—something as a color and height guide. In this example, I'm taking Shiye's sprite from Sunrise and adapting the photo to work with his sprite. He is painted with a fairly limited, very warm color palette, so even a muted photo like this contrasts too much.

The grainy texture of the photograph isn't helping, either. However, the perspective of this photograph and the fact that the sprite is already pretty realistic makes this adaptation easier than if I happened to be using cartoon sprites.

3. Filter

To fix that contrasting texture, I apply a filter. Photoshop's default paint daubs will do, but for the sake of example, and because paint daubs isn't very overt, I've used an oil painting filter here. Ultimately, all you need to do is reduce some of the photographic texture. Surface blur might also work.

So, after applying a filter, you're done, right?

Nope. One of the most common mistakes I see is too heavy a reliance on filters. While having a nice painted look to the background art might help, it's not everything (it's not even the most important part).

4. Tying it All Together

To tie everything together with Sunrise, I made a texture using charcoal on a piece of sketch paper, then scanned it in. This is the texture in normal mode, 100% opacity, with the Sunrise color gradient applied (just to show you the colors; the texture should be applied grayscale). It was used with everything in Sunrise: the background, GUI, and and the sprite art. It helped tie things together with a consistent texture.

This is how the texture looks when applied to the photograph:

That already makes a big difference. When  applying the texture, I used a layer set to Soft Light at 45% opacity. Depending on the texture, you might want to use a different setting and level of opacity, but for this purpose, these settings are fine.

Next, I apply the Sunrise gradient map. It is set to Color mode at 35%. Here is how it looks:

Now it looks a bit like a vintage postcard, which happens to be exactly what I'm going for.

5. Finish

Text from Sunrise

The Sunrise backgrounds also had a retro charcoal border. This is how the above background and sprite would look in-game with both textbox and border applied.

6. Some Variations

Here, a variety of filters are used. Beginning at the top left, the first is filtered using Paint Pro 3, the second is the original photo without filters, the third is Photoshop's default paint daubs, the fourth is a watercolor filter, and the final is an impressionist filter.

The watercolor and impressionist filters might work a bit better with cartoon characters, but the simple paint daub filter is all you need for this style of character.

So, no fancy tools needed (you might even be able to do all this in the GIMP, in fact, but that's a tutorial for another time). However, you may want to check out Creative Market to find a filter that matches your sprites' art style in particular. (These were filters that came with some design bundles I had purchased).

Pros of Photo Backgrounds

1.  It's fast
2. It can be cheap (my $99 point-and-shoot, for instance; although many phones can take decent photographs, too)
3. The results can look good, when done well
4. It works really well with photorealistic/painterly sprites
5. It can be great for placeholders that convey the right mood before committing to paying for, or making background art

The Limitations of Using Photographs:

1. You have to visit the location, or purchase stock photography
2. Generally, it takes taking dozens of photographs to get one good one
3. Highly outlandish fantasy or sci-fi settings are out, unless you happen to live in Narnia or outer space. In fact, any extra or fantasy elements still have to be hand-painted or photo-manipulated
4. It still takes time to manipulate a photo to match cartoony or highly stylized sprites
5. There is less overall control of the composition, especially if you have limited photographic resources

This is one of the actual BG's that went into Sunrise. It would be impossible to find a real-life scene that resembled this image exactly, and that's one of the benefits of a custom composition.

This background...

1. tells the story through multiple layers that can be added or removed to fit different scenes
2. reveals the personality of its occupant through the items and decor
3. is compatible with cutout style animation
4. has custom colors that are designed to work with the sprite art
5. however, took much more time (and it would take even more time if I went for a painted or photorealistic look)

Finally, it is absolutely possible to take photographic images and rearrange and manipulate them to tell a story much like you might with a hand drawn background, but at that point it becomes an artistic medium in its own right, and no longer a time-saver.

Story text by Hazel-Bun of Cherubim Scribes. Screenshot from the visual novel, Sunrise.

Mephistopheles’ Sprite: Reinterpreting a Familiar Character

by Meagan

Mephistopheles and four of her expressions

The Faust legend, and thus the character of Mephistopheles, has been around for centuries – Goethe wasn’t even the first to write about it.  So my challenge in designing Meph’s sprite was this:  How do you take a character that has been reimagined countless times over hundreds of years and really make it your own?  While I’m not sure I can answer that question definitively, I’d like to share a little of the thought process I went through in creating Mephistopheles for Faust: Scene II. 

Preliminary Research:

Source

My first step was to pull up my preferred search engine and do some visual research.  If you want to make something a little different from what’s already out there, you have to know what’s already out there, right?  Look at what others have done.  Think about what works and what doesn’t, what you might want to pay homage to, what you want to deviate from.  (It was at this step that I found out it’s actually not uncommon for Meph to be played by a woman in modern performances of Faust.  Pretty cool.)

Next, I consulted my source material.  The first thing Meph does when she shows up in this scene is describe what she’s wearing, so clearly I had some imperatives when designing her outfit.  I needed to include at least gold braid, a sword, and some kind of hat with a feather in it, and red should be the predominating color.  From here, I had some decisions to make about the costume’s style.

Period Costume, But Not Really:

Source

While vaguely medieval in setting, the Faust legend draws on sources from several different time periods.  I wanted to reflect this in Meph’s outfit, so I researched historical clothing from the 14^th, 15^th, and 16^th centuries.  Most of the designs I found, however, I felt were way too impractical for her character - especially the women’s clothing!  I settled instead on a RenFaire- ish look for its theatricality and visual appeal, taking some cues from rapier fencing costumes.  This would allow her to move around a lot, theoretically (I imagine her as a very animated person), and help the sword make more sense.

Designing a Demon:

Source

I wanted Meph to be a recognizably feminine and maybe even somewhat pretty humanoid, but with something a little “off” about her.  So keeping with the medieval theme, I looked to some medieval and Renaissance artwork depicting demons for ideas.  Temptation of St. Anthony paintings were really useful for this.  It surprised me how often demons are shown as these reptilian or even frog-like creatures.  Playing off of that, I gave Meph’s skin a greenish cast with sharp highlights for a subtle slimy look.  I’m also really in love with the classic goat-like concept of a demon – horns, cloven hooves, and such.  Given that Meph’s wearing a large hat and you only see her from mid-thigh up, though, none of the typical features would be visible.  My solution was to give her goat-like ears.  I sketched out a couple options, since goat ears are actually pretty varied. 

An awful photo of my sketchbook taken with my phone.

I got really attached to the big floppy ones at first.  They were really different from the usual depictions of goat-like demons.  However, I was worried they’d take away from her face too much.  The faces on both sprites needed to be highly visible to show the changing expressions clearly.  For this reason, I went with the smaller, pointy ears.

The Final Result:

The finished sprite in-game.

In the end, my hope is that all this piecing together of ideas and elements from different sources will result in something fresh.  Meph was actually my first attempt at a VN character sprite, so definitely a learning experience.  I'll be writing more about my sprite art soon.  I've got a couple of digital painting posts in the works that will break down my steps for actually drawing the sprite.

Sunrise Postmortem: Part III (GUI, CC0 Resource)

by S.

For the Sunrise GUI, I began by mocking up the GUI shapes and overall design in Adobe Illustrator. This allowed me to work out the composition for each screen and quickly test the color scheme and font choices. The color scheme changed drastically, in the end I only kept the orange for the hovered buttons.

Top, from left to right: main menu, save/load, say screen.
Bottom, from left to right: settings, credits and extras gallery.

 After I had the overall shapes down, I could print them out and use a lightbox to transfer the shapes to charcoal paper. The finished textures looked like this:

Top: Main Menu. Left: Screen Decoration.
Bottom Left: Textbox. Right: Texture Border

This is how the textures look when applied as masks to the main menu:

The Sunrise GUI is now available for download, with most assets released into the public domain. More information through the link:

Download

The GUI, Postmortem

Overall the GUI went by much more quickly than I expected it to. I went for a simple approach and tried to keep all of the main features in the default Ren'Py GUI. This is an improvement over past GUI design for me. In Asher, I hid the quick menu up at the top of the screen where it was almost invisible! However, Ren'Py's default GUI is actually very user-friendly, and that's something I want to preserve where possible.