Bringing Play-Doh and Hasbro publishing to the App Store

Little ones learn their ABCs using ‘virtual’ PLAY-DOH modeling compound with this delightfully interactive educational app from Graphite Lab and PlayDate Digital! PLAY-DOH Create ABCs application is designed to help children develop the essential skills required for reading and writing. Using this app, children will learn to: recognize letters, write letters using proper stroke order and associate letters with sounds.

The Engine Under the Hood

Early on we developed a proof of concept to evaluate the animation potential of Play-Doh sculpts using Flash and the Starling framework. The demo came together just a few short weeks and we had the basics of a drag and drop stickerbook to share with the client. However, when it came time to decide on an engine to deliver the entire product we knew we would need more flexibility and support from the chosen engine. We selected Unity3D which required some 2D plugins to deliver the complete product. While there were some drawbacks to this choice, overall it provided the proper foundation on which to build the application, as well as preping us for a cross-platform release on both iOS and Android.

In order to explain how we constructed the different screens in the game, it is best to conceptualize a play being performed in a theatre. Unity 3D is the edifice of the theatre. The NGUI plugin allowed us to build a set for the stage, and properly sort all the 2d elements like actors on a stage. Then we brought the play to life using the PlayMaker visual scripting plugin, as well as custom game scripts and systems.

The Handwriting System

The handwriting system was a robust creation by our lead programmer. He created a tool that allowed us to trace letters in Unity’s play mode (which normally doesn’t save any changes) and re-construct the trace data in order to save our letters. Each letter had a certain number of strokes, and nodes placed along the path of that stroke that restricts how far the player can stray from the nodes while tracing the letter. These nodes also have to be traced sequentially in order for the letter to be properly formed. This allowed us as much or as little accuracy in tracing as we wanted to require.

We understand that younger players lack the motor skills to trace letters perfectly, so we ended up erring on the side of being more generous with the accuracy required from the system, so that tracing letters was more forgiving for our young audience. After all, our goals with the title are to expose very young players to their letters to help them learn their ABCs, versus enforcing far more rigid rules of penmanship that come into play around ages 6-9.

Meet the Doh-Dohs!

As the game developed we continued to add on features in order to solidify the connection between the handwriting, the crafting of objects and the playful scenes that can be made with those objects. Roughly mid way through the development we were approved to include the newly launch mascots for Play-Doh – the Doh Dohs – into the app as cheerleaders within the experience.

Crafting the Characters

The different objects in the app really bring life to the experience and were an important part in making the connection between letters kids are writing and the objects they represent. Our team had a lot of fun working with many of the existing sculpts that Hasbro provided, but also had the challenge of creating some completely new objects such as the Gorilla, King, and X-Ray. So, we got our hands dirty and generated a bunch of different types of each object passing them through a review process at Hasbro to get them approved for use in the app.

Squish It!

We also saw a very important need to squish these objects within the app somehow – after all, Play-Doh is about squishable fun! We drafted demos of several different approaches to achieve a squishy effect for the doh to test what worked best. Ultimately, we settled on a method that required us to create multiple squished states for each of the 26 objects using real Play-Doh. This increased the content needs considerably as we needed to create the objects using real Play-Doh, then partially squish them, take a picture with a camera, then squish the object a little  further, repeating the process until 3 squished states were captured.  We set up a custom photo studio in our office and took individual snapshots of objects in each state in order to assemble the final squish sequences.

Dynamic Color Tinting

Since each object had multiple pieces that could be individually colored by the user, we had to find a way to get the best and most consistent tinting possible in order to remain true to the Play-Doh branded color guide. Of course, if you apply a red tint to a blue shape, you will get a different hue than if applying the same red tint to a green shape – so we had convert all objects to gray-scale first before the game engine added the dynamic color tinting. This way, the tinting process was consistent with the brand guide no matter what color the user picked.  Therefore, we had to find a way to capture the sculpt using a camera, while keeping as much color contrast as possible before converting to gray-scale in Photoshop. After sever tests, we found that creating each object completely in Orange Play-Doh and then converting to gray-scale gave the best contrast.