Hi all. Richie here. I participated in the 31st Ludum Dare compo this past weekend, creating the game Peter Padder Pauleypop. I was excited to find the game written about in Killscreen and posted on Warp Door this week! Below is my art post-mortem, which can also be found on the LD site.

 

Greetings jammers. In lieu of a standard post-mortem, I thought I would discuss how I made the visuals for Peter Padder Pauleypop.

The Art

The art seems to resonate with those that have commented on it. I attribute this to two intertwined factors, scanning in and drawing on paper.

Scannning In

I think a flat cut out look is inherent to scanned in art when approached in a certain way.  I also like the contrast in overall flatness in the game to the volume of individual drawings. Once images were scanned in, I looked for ways of playing up the flat cut out nature through parallax and subtle movements, combined with layering images over one another.

Drawing on paper

I have a style when I doodle. It is not an intentional stylistic decision, it is just how I enjoy to draw when I am drawing for the sake of enjoyment. Because I have done this for so long, I am very fast at sketching out images and building up layers of ink. I have not as of yet figured out how to replicate this with my tablet, so by deciding to use this style for my game I was forced to scan but also knew this meant I could generate a decent amount of art in a small amount of time.

My pipeline

Here are some sketches I drew and then scanned into Photoshop.

Here are the images combined in the game with some animation effects applied in code.

Process of creating the pier

My first idea was to have the character climb the large floating structure. After an hour of playing around in code, I scratched that idea as too ambitious and instead decided I needed a pier for the character to walk on (the idea of fishing came later).

Here you can see the initial sketch I drew in my sketchbook.

Once the drawing was completed I scanned it into Photoshop, erased out the background, did additional drawing/shading work, and kept the off white color silhouette behind the line drawing to give the cut out look.  After that I pulled in some elements from the large structure, did some copy/paste/transform effects, and had the bridge I wanted.

A quick tangent on resolution

The scanned images were dropped down significantly in resolution. Additionally, certain images had to be of a much higher resolution because of the zoom in/out feature.  So the large structure and clouds are at or below 1080p, however because the camera zooms in on the pier I needed a higher res image, so I also duplicated some of the background structure and added detail.  This layer sat on top of the lower resolution portions of the large structure and hid them from view.

Here is the bridge/pier in Photoshop with some of the background structure and some added parts to the pier.  It is now game ready.

The final step was to pull the image into the game and line it up properly with the large structure.

Cell animation

I don’t have a way to do cell animation outside of the computer, nor do I have any experience in it. So for the main character and the other animations, I was forced to do them in Photoshop. Here is the walk cycle of the main character.

I used a simple hard brush and crosshatched to try and match the effect of the scanned in art. In the future I would like to create brushes to achieve this effect, which can save time.  For the tongue and fish I was a bit more creative, as time was running low. So I would copy and paste parts of other hand drawn images into the drawing to build up depth and detail.

Closing Thoughts

I am happy overall with Peter Padder Pauleypop.  I would like to play around with the experience some more and see if it goes anywhere.  Link to Ludum Dare page