Unity3D : Turn Sprites Into Cardboard

At the last game jam, a team made a game where scenery elements were cardboard cutouts. I thought it would be really cool to have a script in Unity that would add a cardboard border around any sprite on the scene. Here are some games that have cardboard aestetics.

At first, I tried to use Unity's LineRenderer component to simply add tickness to the perimeter of the sprite but that didn't work out since Line Renderers are designed to always face the same direction, to display a billboard line that always face the camera, for instance. The remaining solution was to procedurally generate a mesh a round the sprite perimeter. This perimeter is defined by the points on a PolygonCollider2D component since it automatically generate the points around a sprite. This way, I didn't have to engineer that part myself. Here's the result.


Setup instructions

  1. Download the Cardboarder.cs script and add it into your Unity project.
  2. Add a SpriteRenderer to an object on the scene.
  3. Add the PolygonCollider2D component to the SpriteRenderer object. It will automatically shape itself around the sprite.
  4. Add the Cardboarder script component.
  5. Fill out the Materials on the Cardboarder component. The Cardboard Line Material should be a material with the cardboard texture (don't forget to set the wrap mode of that texture to Repeat in the import settings). The Cardboard Face Material should be a simple material that supports a solid color.
  6. Tweak the other parameters on the component as needed.
Texture used for the cardboard perimeter

Texture used for the cardboard perimeter

Room for improvement

  • Since these are based on SpriteRenderer components, Unity cannot cast or receive shadow from these. The Cardboarder script could turn the SpriteRenderer into a mesh or allow the use of Quad Mesh as source.
  • The Sprite perimeter is based on the shape of the PolygonCollider2D. That means you cannot make a folded cardboard. It would be useful to design a Unity Editor tool to create custom 3D shapes like the tree in the above Paper Mario: Color Splash screenshot.