Making of Roxie's Doors
OCG Studios - we develop amazing and beautiful apps.
app development, games, edutaintment, entertainment , app ontwikkeling, interactief, interactive, ebook, storybooks, children's app, kinder app
page,page-id-3325,page-child,parent-pageid-3369,page-template,page-template-blog-large-image-whole-post,page-template-blog-large-image-whole-post-php,ajax_fade,page_not_loaded,,qode-theme-ver-10.1,wpb-js-composer js-comp-ver-5.0.1,vc_responsive

Making of Roxie’s Doors

“Doors” is a book from famous American illustrator and writer Roxie Munro. It has received numerous recommendations and awards. “Doors” is a lift-the-flap book with hidden objects. Behind doors, cupboards, train interiors, the space station, sailboats, and other spaces are objects you can find and worlds to explore. There are more than 50 flaps to check out and to look behind. We thought “Doors” would make a great app, with a lot of extra possibilities and interactivity. But it is going to be a tedious and difficult task. We analyzed each page carefully, decided what we could do with it and how we were going to do it.

Each page was analyzed; after that we could start working on dissecting the book digitally. For this “Making of…” we took the train page as an example. First we’ll show you the original page.
We wanted to give the book depth, whereby you can move your ipad and you see different sides of the train. We wanted to animate certain things, and we wanted the doors to open and close. On the next image you can see the train page in pieces; each gap has to to be filled in digitally or redrawn by Roxie.
When each and every item was taken out and put in different PhotoShop layers, we could start putting things back together. Since we wanted to be able to move from left to right and from top to bottom, we had to draw much more than was in the original book. When we took a person out of the original drawing, we had to recreate them back into the image.

All the different digital items and scenes we dissected have to be put together again. Since Roxie draws each illustration by hand, the original pages with depth do not have a real perspective. Simply building the page in 3D wasn’t the way to go to stay close to the original artwork. But since we wanted to give the pages depth and 3D, we had to find a solution. The solution was as simple as it was tedious – rebuild the scene in 3D, but transform everything to fit the original artwork. Sometimes this means that a simple room gets a really weird shape in 3D , just to follow the original artwork. See the picture below for an example.

Besides depth we also wanted to give it some animation and movement – a train rides the rails, a boat rocks, a space station floats. With the train, for example, we wanted the train movement, but also a moving background. Once more Roxie made some new drawings we could use as a background. 3D in combination with some good old coding brought it to life. The train rides, the background moves. This really brings life to the original book.

Now the pages are built in 3D, the pages move, but we needed more. We wanted to add interactivity and movement to parts of the pages. We already took them out digitally, but now we have to bring these parts to life. The same way all animations are made, by cell animation. Each movement is a different image, again a tedious task, but it greatly enhances the experience. Trunks open, dogs bark, lights flash, horses move. We added three choices for reading the text: voice-overs of a man or a woman, or a read alone option. In combination with more than 100 different sounds, the experience becomes complete.