Visual Novel background asset creation
In this post, I want to share my experience creating the backgrounds for the visual novel "Nobody Closed the Sarcophagi." You can play it for free here: https://dontsaycat.itch.io/nobody-closed-the-sarcophagi
This was my first visual novel, so I made several noob mistakes.
Initial mistake: composition!For the crypt, I initially imagined a composition that placed the focal point —the coffins—at the bottom of the background. I hadn't taken into account that in visual novels, the bottom is often hidden by the text box gui, so the focal point must be placed at the top of the composition.
Keep the gui on a layer, to check that composition will work in the most part of the game.
Here the text box cover my focal point, meanwhile the top doesn’t contain any interesting element
At this point I started over again, also because the project leader wanted sarcophagi in the crypt and not wooden coffins.
3D Block outTo better explore different compositions and viewpoints and to have a good perspective and shadow guide, I created a 3D block out, modeling simple geometric shapes with Blender.
In the next step I took different screenshots from blender, and opened them in photoshop to paint over them, adding lights, lineart, shadows, marble textures, tiny details.
Refine
In the end I fixed some perspective, using Lazy Nezumi plugin in Photoshop.
Then I adjusted values, adding lights on the room surface and on focal point.
I also added a noise filter layer in overlay mode to have another texture and making the image less polish and “digital”.
Checking background values for readability and mood
During every step I keep the navigator open in photoshop, to have a small thumbnail of the image where I can always check the readability of the image through values.
Another useful tool to check is the values diagram (shortcut CTRL + L). It shows the distribution of tones in the image. As you can see, the diagram is concentrated in the left area, that means the image has more dark tones than midtones or light tones. It makes sense for a mysterious mood, but don't let your hand slip away. You can fix the balance of the values sliding the arrows in the bottom.
The version with closed sarcophagi is related to a happy ending, so I added more light on this version to convey a more relaxed mood.
Checking background interaction with gui and characters
The background values must work in the image alone. But they also need to work when the background interacts with other elements such as gui and characters.
The current composition works with gui much better than the first one with coffins.
Characters must stand out, and interact with the background in a balanced way through values and colors.
A useful trick is to check the image without saturation, in black and white, to spot immediately if some element is not readable at first sight.
Export format to optimize loading
We developed the visual novel in Renpy and people could play the game in the browser.
At first I exported every background in png format. But to keep size small and speed up in-game loading, all images have been exported again in webp format.
Re-use of assets and layer organization
We had only one month to finish the game and I needed to maximize every asset I drew, so we decided to use this background for the game menu, story moments, flashbacks, ect.
I need different elements (such as the lids) on separate layers to create little variation starting from the same image (sarcophagi opened, closed, ect.).
For the flashback I create a new layer filled with yellow/brown in color mode
I re-use assets for the ballroom background too. I draw a single scene in big size, and I already know that some area will be hidden by people at the party. The hidden part, zoomed, become a new background.
