Hand-made clay graphics
Published 5 years ago
A route from physical to Unity3D
Me and Peter started Clayburger with a clear vision. Making games with hand-made clay graphics will be our way of doing things. Currently, we are finalizing our first mobile game Hopply. It is a fast-paced casual endless hopper.
We created main game characters during one late afternoon in our kitchen. After we were finished, the Play-doh was everywhere. One would expect that game developers do not spend time making sure kids don’t eat too much clay. I was wrong about that. My two-years old son couldn’t miss a chance to intrude our creative session.
When we decided it was time to show Hopply to public, we wanted to be smart about how we do it. We brought a lot of Play-doh to London’s Pocket Gamer Connects. Our proposal to conference attendees was like this: “Try our game and then if you want, you can make your own character from clay. If we like it, we might use it in Hopply. And you don’t get paid of course :)”. People loved that deal. To our big surprise, a lot of times the characters were just awesome. Cute, funny, creative. We ended up with 73 original models.
Much bigger challenge was converting the actual physical objects made from clay to game assets. For Hopply, the goal is to separate character from its shadow and background.
Before explaining, let me give you an analogy from my experience with recording gospel in church. If you need to separate choir from background, it goes like this:
  1. Put a choir singers in place and mark down where they stand.
  2. Start recording gospel with background music. Let’s call it REC-ALL.
  3. After you are satisfied, hit “record” again, but this time all singer have to stay quiet. REC-BG corresponds with “just background” recording.
  4. Now you have everything you need and your result will be: REC-ALL minus REC-BG.
Simple… but not easy. As our game itself :)
In a nutshell, the equation goes like this: All = Character + Shadow + Background. Peter put together a nice bunch of code and scripts to handle it almost effortlessly. Our algorithm follows these steps:
1. First, you take two pictures: with and without character on the constant background. Typical color of background is green or blue. It is good idea to keep constant also lightning conditions. At least don’t switch on/off lights :)
2. Since it is nearly impossible to keep exact brightness anyway, you match the two pics.3)
3. Now the difficult part:
  • For each pixel you compare HSL difference between pics and decide (with a tolerance) if it should belong to character, shadow or background
  • Detecting character is clear: there is completely different color in first image, or the color is brighter.
  • If color hue in first image is the same, but pixel is darker, it is shadow. Intensity of shadow can be computed from the lightness difference.
  • In the last case (colors are identical), you detected background.
4. Based on character and shadow maps generated in previous step, you can cut out character and separate it from its shadow.
Here you can find few cheats how Peter made our algorithm even more robust and with better results.
  • Chromatic aberration is usual companion and you get rid of it first.
  • It’s good to slightly blur the pictures to an extent before going through all pixels in order to reduce most of the noise.
  • Moreover, it makes sense to shrink the images a lot before generating character and shadow map. It has similar effect like blurring - reduces noise. But mostly, we want to keep the script swift even with processing 24megapixel originals.
  • These shrink maps can be used for processing final image in full resolution quite well, but you need to be careful around character edges.
  • Nevertheless, it often happens that some rogue pixels stay in maps. So our algorithm tries to figure out whether neighboring pixels belong to the same map (character or shadow). If not, the pixel is removed from its map.
We found it interesting that blur radius, resizing, color tolerance and other variables are correlated and can be managed by a single input parameter.
I hope that sooner or later we might integrate this algorithm directly to the game and give an option to play with their own hand-made characters to every Hopply’s player. Yeah! Cool! Fantastic! But not in the first version. Sorry for that.
However, right now, we give a unique chance to all of our fans. They can make their own hand-made clay character, put it in a box, and ship it to us. Please see our instruction video:
Other Projects
Peter Knut