Metal into Paper

I think what started me on the road to this art style was the game Baba Is You, which is really awesome. All of the sprites in Baba look hand drawn, and animate even when not moving between a few different drawings of the same frame. It gives a really cool look, but while Baba looks more like MS Paint, I was thinking more of rough sketches on paper.

I focused on the terrain first, changing it to white and trying out a few different textures of paper for the foreground and background.

To try and make it look more like a sketch I used an outline shader on the terrain, but I feed it incorrect resolutions and sizes, and change them periodically. I tried changing immediately, and also lerping between values. I went with the sudden changes in the end as the lerping looked more like something throbbing. Either way it still didn’t look quite right, but I felt like I was on the right track.

It might be a bit hard to make out in an encoded video made smaller embedded on a web page, but the right hand video below has a subtle paper texture on the foreground and background, while the left had an extreme texture on just the background layer. Also on the right example the sprite used to “cut” into the terrain now has a rough edge, leaving what looks a bit more like sketch marks rather than a smooth line.

With the newer terrain/paper the characters and other sprites needed to change as well. From their cute cartoon look to a more rough sketched look, but also hopefully still cute!

First I did a quick recreation of the player sprites by making it out of vector shapes (look at him he’s just a rounded triangle with legs and eyes) then attacking the edges with a rough eraser. I did this quickly so I could get the workflow setup for creating a character and importing it into Spine, which is the software I use to rig and animate 2D sprites. This lets me have very smooth animations, as well as blending between them for extra smoothness. It also uses skins, an extremely easy method of changing all the images attached to the bones, making changing character/cosmetics very easy to do without having to redo animations.

I only used Spine for the player character however, as everything else in the game would be much simpler by comparison, and not need smooth animation mixing.

I drew three versions of all of the enemy sprites and UI elements using an iPad, and found some hand drawn looking fonts that I could switch between every so often to match the look of the sprites. While this showed the idea nicely (left), I couldn’t find three versions of similar enough fonts to achieve the desired effect. So I did what I did for the rest of the sprites, I drew out a font three times and implemented those (right).

It bothered me that the tunnel outline was static except for the smooth part, the rough sketch line never moved. So I save the location of every “cut” and re-apply them to a fresh “page” every so often. The sprite used as a brush is randomly rotated when it is used, so the rough lines also change around with the rest of the art. You can see the square cut on the exit sometimes stays the same while everything else transitions, because that’s a rectangular sprite being used I can only rotate it so many ways.. and sometimes it picks the same orientation again.

To keep going with the paper aesthetic I thought it would be fun to have my pop up messages be kinds of paper as well. I found a set of post-it notes and notepads and put a parameter on my popups so I can choose which one to use whenever I like.

There are other menus and parts of the interface that I updated for this style which I will show in a future post, such as unlocking new character skins, but for now thank you for reading!

The next part will be a bit more on the UI/UX side of the game.