A Quick Postmortem for Faust: Scene II

by Meagan

About a month has passed since the release of Faust: Scene II, my short kinetic novel adaptation of Goethe, so now I'd like to share a few thoughts about my first ever solo gamedev experience.

Engine

I built Faust in the visual novel engine Ren'Py, which I learned to use specifically for this project.  In fact, this was the first time I'd ever attempted to code.  Thankfully, Ren'Py is extremely beginner-friendly.  With its intuitive structure and the support of the VN dev community on Tumblr and Lemmasoft, I was able to put together something reasonably polished despite having no prior programming experience.  I will definitely be using this engine again in future projects.

Art

"An exercise in creating visual novel art assets more than anything."

It really was.  And I learned a lot from it.

In past gamedev projects, I've mostly served as an environment artist due to my more painterly and semi-realistic illustration style.  Flatter, more stylized character sprites and vector UI elements are very much the norm in visual novels.  Therefore, my main goal with the visuals in Faust: Scene II was to see if my oil-painting-inspired art style could translate well to an overall "look" for a game - encompassing not just the backgrounds, but the sprites and UI as well.

I like to think I was mostly successful in this.  At least, the look of Faust: Scene II has some promising aspects with a few improvements to be made:

I experimented with exaggerating the hands and head size on the sprites somewhat to make the expressions more readable.  In the end, this probably isn't necessary, so long as the expressions are different enough from one another.  (I actually ended up resizing the hands smaller late in development, because they were looking too awkward.)  It's also occurred to me that, as much as I want to save time, I'm going to have to redraw the noses occasionally - especially with the more contorted expressions.

The relationship between the sprites and the background needs to be addressed as well.  Namely, I need to be more conscious of how the values interact.  With no dark ink lines separating figure from ground, it's easy for the character sprites to get lost.  In future projects, I'll want to paint my sprites in higher contrast - brighter highlights, darker shadows - so that they "pop" against the backgrounds.

Regarding the UI, "painterly" UI elements are definitely doable, though I'll use different Photoshop brushes next time.  The one I was using on the textbox frame got kind of pixelly on the smaller shapes, and it's awkward.  I'll keep using imagemaps for the title screen and menus for sure as well.  The static nature of imagemaps makes it a pain to make small changes to your screens on the fly, but the creative freedom they allow more than makes up for that.

Conclusions

Overall, my biggest takeaway from this by far was, hey, I can make a game!  Releasing Faust: Scene II feels like an important milestone for me as a first-time solo gamedev.  What's more is, the thoughtful feedback I've received from players has been incredibly validating.  This series of small ego boosts is really motivating as I progress.

But enough rambling.  I look forward to continuing my work as a one-woman VN studio alongside my freelance career.

Faust: Scene II is available for free download (PC, Mac, and Linux) on my itch.io page.

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.

Sunrise Postmortem: Part II (Background Art)

by S.

Sunrise's cutout-style animated intro

As NaNoRenO takes place only over a month, I had to be careful how I portioned my time. I wanted to create painted sprite art, but I also wanted to animate the background art. In order to have both, I adopted a simpler cutout style for the background art. The 2D style allowed me to create background art more quickly, but also allowed me to easily make multiple movable layers that I could then animate or remove, depending on the needs of the current scene.

Overall I went for a retro collage look, because collage is one method of combining flat graphics with highly rendered images. This combination is also the opposite of the typical visual novel, which generally uses simplified character art on highly rendered background art. I was curious how the reverse would work. (NaNoRenO is a nice time to experiment).

Once I settled on the approach, I began with the most intimidating background first. In this case, the plane. All of the -punks are about technology (steampunk, cyberpunk and so on,) and dieselpunk is no exception. To be true to the setting, some form of dieselpunk technology had to be incorporated. Hazel-Bun (one of my collaborators on Sunrise) suggested a plane:

Sunrise: Shiye's Work Room. It has several layers that can be animated or removed.

Whenever approaching a subject I haven't drawn before, I spend some time studying and practicing . Since I hadn't drawn (any?) planes before, I spent some time sketching WWII planes from reference to get the feel for the proportions of a plane. This later helped when creating preliminary sketches for other scenes that used planes (there are three in Sunrise).

Sprites with halftone outline

Integrating with Sprite Art
In order to make the character art look like it belonged on the background art, I created halftone outlines for the characters. Unfortunately, these outlines tended to flash when ATL (Ren'Py's Animation Transformation Language) was applied. I worked around it for some characters, but with some of the sprites that I coded in early on, such as James's, the outline still flashed every time the character spoke. Next time, I would make any outlines part of the character sprite rather than a separate silhouette.

Unfortunately, there was no time to go back and rework background or sprite art, so if I tried something as an experiment (like the halftone outline), I would lose too much time if I went back and fixed it. In my personal work, I might make several variations on any give piece. (I made five variations on the Tell a Demon textbox until I was satisfied—with Sunrise I only had time for two.)

Sunrise Postmortem: Part I (Sprite Art)

by S.

Sunrise Sprite Breakdown

The above image shows the basic stages of sprite construction in Photoshop. Sofia was the final sprite I painted, and by that time I nearly tossed the drawing stage altogether and went straight to the underpainting stage.

The approach I took with the Sunrise sprites is actually very similar to the one I use in order to paint the Tell a Demon art: a drawing, followed by an underpainting, followed by a final overpainting (example on my Tumblr, here). This basic process, by the way, is pretty similar to that of the Renaissance masters.

CGs? What CGs?

Prior to Sunrise, I was a slower digital painter, probably due to the fact that I did not have clearly defined steps before. Or, not clearly defined like I had for my traditional art. Although I spent more time on the sprites than any other part of the process, I was surprised at how quickly the Sunrise sprites went. Each one took about three evenings, including the expressions, despite that some expressions required me to re-paint significant portions of the characters' faces.

Although I painted the expressions on transparent layers, I painted the poses on an opaque layer. Later on, I cut out the sprites using masks made in Illustrator. I find this to be a faster and more forgiving method since it allows me to easily change the contours of the character and I don't have to worry about accidentally painting on the wrong layer.

Overall, I felt like my work and working method improved over NaNoRenO. Hazel-Bun also helped here by drawing concept sketches and character designs to work from and offering me feedback on the look of each sprite as I painted them.

One problem I stumbled across was the painted style. I used two Photoshop brushes for the character painting, and as a result the brush strokes look very digital. I prefer to combine digital and traditional textures for this reason, but in future I would explore using different digital tools so that the digital look wasn't so overt. I would also prefer to spend some more time on the characters; Sofia, as the last sprite I painted, began to look a little more stylized than the others.

Sunrise Postmortem

Sunrise: A Dieselpunk Fairytale

Sunrise: A Dieselpunk Fairytale, is a visual novel created for NaNoRenO, a visual novel game jam. It's a story about Sofia, a noblewoman who is struck by a curse just when court politics are getting dicey for her and her fiance, Shiye. (Read more about the story or download here).

I'll cover my part (or most of it) in the following posts:

Part I: Sprite Art

Part II: Background Art

Part III: GUI & Design