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.
“Top 20 Best Apps of the Week” App Review
The Guardian UK
We first began talks with the partners of PlayDate Digital at GDC in 2012. As a younger studio, they wanted to match our experience in developing for a younger audience with their experience in promoting products to the same market.
With Hasbro Publishing as the first licensing partner in the collaboration, our team at Graphite Lab began working on concepts for a Play Doh app for kids. Given that Play-Doh is such a flexible product, we wanted to both educate kids as well as work in the unique properties of the modeling compound. Over time, a focus on letter writing surfaced, leading to the focus of the app being the creation of ABCs with virtual Play-Doh.
Around this time PlayDate Digital developed a great relationship with education expert Michael Cohen and the Michael Cohen Group in New York. Michael and his team were instrumental in helping surface the educational potential of the app along with being a second set of eyes on the entertainment portions of the app.
In the early phases of the app we iterated on many different designs for the inputs, interfaces and features themselves. After weeks of testing and revising we started to hone in on the curriculum for the app as well as the scope.
We wanted to take things a step further and create a reward system for completing letters. Hasbro came prepared with tons of wonderful sculpts ranging from Alligators to Zebras – so the decision was pretty clear that we could pair letters with Play-Doh sculpts of the corresponding letters. Granted, there were some letters that didn’t have a pre-made sculpt available so we did have to come up with some custom critters such as the Gorilla, King and X-Ray.
“Well-thought out, educationally beneficial, colorful”
App Review, The Learning Treehouse
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.
Very early versions of the app ran on a Flash framework, which we built a few times while demoing on the road.
After moving the codebase to Unity we could support more complete gesture systems for handwriting.
“Completely transforms the way kids interact with technology”
App Review, Appshappens.com
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.
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.