My Painting Style (Patreon)

What spooky old mansion would be complete without old paintings all over the walls? Stuff like portraits of dead people from the old days and landscapes of places that the homeowner may have traveled to. In older Murder maps I just found paintings on google images, but for Murder 4, I wanted to create images from scratch. Real life paintings wouldn’t match the art style of the world, anyway. In this very visually-oriented blog post, I’ll show off my methods and progress.

Before even getting started, I set some goals for myself:

1. Set up a system where it’s easy to edit the paintings along the way as I build and update the world. I need to be able to quickly and easily replace the images, resize the frames, etc to make my life easier. I also might want to replace the images for stuff like holiday events.

2. Make custom images and don’t just copy stuff from google. This part is definitely the most fun. Not only will I not be… uh… breaking copyright law, but I can make them anything I want. Strange or funny portraits? References to my other worlds? No problem!

3. Use a “painterly” style that matches the colorful, low-poly, strongly shadowed style of the rest of the world. I plan to do some hand-painting and also some automated image effects to achieve the perfect look.

In older maps, I used one rectangular frame and stretched it. This time, I would start things right by making a variety of shapes and sizes. This way, the edges of the frame have a nice, uniform thickness, no matter how long or short the frame. I also made some oval-shaped frames. They use the same texture as the rectangular frames-- I segmented a rectangular frame and bent it to make a curve, a very similar process to how I made the twisty blocks for Marble Puzzles.

Notice that the frames include a wood texture for being “blank”. The frames and paintings will be on two different materials and meshes. I just need to put a square (or circle) inside each frame.

In the unity project that I usually upload my avatars with, I grabbed an outfit I like and set up a little photo studio and took a picture with a proper pose, aspect ratio, and framing that sorta matches some 19thcentury portraits I found on google images. Another thing I noticed about these types of photos is that they always have this kind of dark, drab, cloudy background. After removing the blue Unity camera background using the color picker tool and feather selection, I made one of my own using some of the procedural noise and blur filters in my image editing program.

Then, to make the painting effect, I used an old trick I learned randomly years ago. Take the smudge tool and smudge the original image around. With a high drag rate and sharp brush, this is basically the same thing as using the color picker, picking a color, and then dragging using the paintbrush. By clicking and dragging to smudge, you’re basically just picking and drawing a color. There are also some other benefits- using a larger brush, you can drag multiple colors at a time in a sort of “strip” of color. You can also smudge transparency- this is just like using the eraser tool. I basically just smudged the entire image, painting along the edges of shapes and doing circular motions in large patches of color. You can kind of see the brush strokes, and overall the entire image looks a bit blurrier. Since the original screenshot from the Unity camera is actually very pixelated from the lack of anti-aliasing, I knew I painted over every surface once there were no sharp pixels left. While editing this source image I keep the same aspect as the painting frame. It’s not a perfect 512 pixel square, but this should get stretched internally by Unity when it imports the png file, which is fine.

For landscapes, I make an “original” image (in a very loose sense of the word) by editing together a bunch of other photos, then doing the same painting effect!

I look forward to much more speed-painting. I’ll try to post more images as I work on them in the #backstage-pass channel on discord.