How Did You Do That? ‘The Robot Factory’ App by Tinybop

You might recall the debut of How Did You Do That?, a series focused on how mak­ers cre­ate the things that we love. Nan­cy Liang kicked it off by shar­ing her GIF-mak­ing process. Now, I’m pleased to present some­thing total­ly dif­fer­ent — the mak­ing of an app! Brook­lyn-based com­pa­ny Tiny­bop just fin­ished their newest cre­ation called The Robot Fac­to­ry.  It’s an opened-end­ed build­ing app that lets kids make, test, and col­lect robots. How fun!

As with any app, there’s a lot of mov­ing parts. I spoke with three peo­ple involved in mak­ing The Robot Fac­to­ry hap­pen (although there were many oth­ers): Tiny­bop CEO Raul Gutier­rez came up with the con­cept; Owen Dav­ey illus­trat­ed the app; and Leah Feuer was the project man­ag­er. They all have tasks that were inte­gral to mak­ing the app hap­pen, and they’ll help give us some sense of how The Robot Fac­to­ry was created.

Coming up with the concept: Raul Gutierrez

Brown Paper Bag: What did you do before you found­ed Tinybop?

Raul Gutier­rez: I was work­ing in Hol­ly­wood on film and lat­er in the start­up world on the web, but always at the inter­sec­tion of art and tech.

BPB: After you had the ini­tial idea for The Robot Fac­to­ry, what was the first step towards mak­ing the project a reality?

RG: Prob­a­bly the orig­i­nal inspi­ra­tion for the app was an Apple ][ game called Pin­ball Con­struc­tion Set. I remem­ber think­ing back then, “Build­ing pin­ball machines is cool, but it would be so much cool­er to build robots.” I was part of the first Star Wars gen­er­a­tion. All the kids back then thought that when we reached the 2000’s the world would be full of robots. Maybe this app is my small attempt to make that imag­ined future a lit­tle more real.

The first step in actu­al­ly start­ing the project was build­ing a com­pa­ny and sur­round­ing myself with lots of smart cre­ative people.

RG (answer con­tin­ued): We kicked off this app at the end of 2014, it wasn’t the first app we tack­led because we want­ed to have the right team in place.

We choose the artist [Owen Dav­ey] for this project because we knew he loved robots too and we loved his art. To kick off we cre­at­ed a mood board full of robots to inspire him (50’s and 60’s Japan­ese robots were a big influ­ence). Our engi­neers are all obsessed with physics based ani­ma­tions, so they dug into the project. By physics-based ani­ma­tions we mean that when robots move, it’s not just a pre­canned set of frames, we actu­al­ly con­nect objects and define their physics so they move togeth­er in real­is­tic ways. We even attach sounds to joints so that things creak and whir cor­rect­ly as the bots speed up or slow down.

BPB: This app has so many unique and seem­ing­ly-end­less pos­si­bil­i­ties for build­ing robots and hav­ing fun with them. How did you come up with it all?  What type of research was required, and did that inform or change any of your begin­ning concepts?

RG: We start­ed with con­tained idea. “Let kids build robots with few restric­tions and bring them to life. They’ll enter a world and want to run. Robots just want to run. The bots will work or fall apart depend­ing on their physics.” We didn’t want to define things too much so that kids could fill spaces with their imaginations.

Every­thing else came out of that. Our artist had to cre­ate a sys­tem of inter­lock­ing parts and a world to run in. Our engi­neers had to fig­ure out how to make the parts move real­is­ti­cal­ly and fit togeth­er as a whole, and lat­er to run and jump and fly… Our sound design­er designed an entire tiny uni­verse of sounds for this lit­tle robot world we created.

RG (answer con­tin­ued): The hope is that kids don’t notice any of the tech. They just want their robots to come alive. Hear­ing kids’ sto­ries after they play­ing with the app is super sat­is­fy­ing. They give their robots names. They invent back­sto­ries. They make con­nec­tions that have lit­tle to do with what’s on screen. But we’ve giv­en them the right tools to give form to their imaginations.

This is just the begin­ning for this title, the MVP or Min­i­mum Viable Prod­uct to use the term of art. We have so much more we want to add and already have a ton of cool new parts on deck. I can’t wait to get them out there.

BPB: What tools/programs/websites etc. do you find help­ful when working/creating The Robot Fac­to­ry?

RG: I always start with pen and paper and try to pull togeth­er inspi­ra­tion from wher­ev­er I can find it.

Creating the illustrations: Owen Davey

BPB: What did you use as inspi­ra­tion for your robot characters? 

Owen Dav­ey: It was essen­tial­ly a mix of all the real robots that have actu­al­ly been built in the real world (some fact is stranger than fic­tion, believe me), inspi­ra­tion from loads of sci fi films/ tv and com­put­er games, and then my own imag­i­na­tion cre­at­ed by my inner child. The robots weren’t designed as whole indi­vid­u­als, but rather indi­vid­ual pieces that could cre­ate the max­i­mum num­ber of dif­fer­ent styles of robots. If kids (or adults want), they can attempt to recre­ate some­thing rem­i­nis­cent of their favorite famous robot, or can instead just run wild with their own ideas and see where it takes them.

BPB: How did you cre­ate your illus­tra­tions for use in an app?

OD: I tend to work in Pho­to­shop. Many peo­ple cringe at this and think I should be using Illus­tra­tor, but I’ve been using Pho­to­shop for over 10 years and it’s sec­ond nature to me. I can work in Illus­tra­tor, but I tend to freeze up a lit­tle bit and I’m nev­er as hap­py with the result. I usu­al­ly start my illus­tra­tions with sketch­es, scan them and then use them as a guide. It helps keep the process more organ­ic for me, and helps keep some of my artis­tic sen­si­bil­i­ties, rather than homog­e­niz­ing my work.

BPB: What was dif­fer­ent about pro­duc­ing illus­tra­tions for an app? Did it change the way you nor­mal­ly work?

OD: Oh my word. It is real­ly tough! Every­thing you cre­ate has a knock-on effect. You draw an arm that looks cool and if you’re doing one image then great, you’re done. In an app, you then have to draw it from the side. sug­gest how it might work from in front or from the side, come up with some col­or sug­ges­tions for it etc etc. One of the tough­est things was try­ing to work out how the pieces would fit togeth­er too, because you con­struct from the front, but use your robot from the side. So if you put a head on a body in the cre­ation bit, does it sit cen­tral­ly / to the side / on the back etc. in the world? It was very dif­fer­ent to my usu­al work process but nice to hur­tle myself out of my com­fort zone.

BPB: What did you learn from illus­trat­ing The Robot Fac­to­ry?

OD: I don’t often do such labor-inten­sive col­lab­o­ra­tion with most of my work, so it was a good one for that. Every­thing I illus­trat­ed influ­enced oth­er peo­ple who then did stuff to it, then it came back around to me and I need­ed to edit, enhance or add to what I’d already done and then the whole process would hap­pen again. I usu­al­ly have a few amends to make with each illus­tra­tion I do, but this was a con­tin­u­al­ly evolv­ing beast that need­ed assess­ing and reassess­ing. That is def­i­nite­ly a new skill I have learnt to embrace.

Bringing it all together: Leah Feuer

BPB: What is your role as a project man­ag­er? How many peo­ple did you work with to see The Robot Fac­to­ry to completion? 

Leah Feuer: As a prod­uct man­ag­er at Tiny­bop I am a map mak­er, a fun­nel, an inter­preter and a herder of cats/mother of drag­ons. I worked with 20+ peo­ple to get the app into the wild. The core app team was ~10.

As map mak­er, I draw out every­thing from the next fea­tures that need to be imple­ment­ed in The Robot Fac­to­ry to our long term prod­uct roadmap. Some­times I’m chart­ing unknown ter­ri­to­ry: explor­ing what dif­fer­ent con­cepts might look like as apps and how they fit into the Tiny­bop universe.

As a fun­nel, I’m lis­ten­ing to ideas from the team and beyond and fig­ur­ing out which ones make sense for us to explore fur­ther. It’s real­ly impor­tant to have both a buck­et full of ideas, and a paired down achieve-able set that the team can focus on tack­ling. I inter­pret ideas into fea­tures and things that can be imple­ment­ed by the team. I also do a bit of lan­guage inter­pret­ing. Some­times devel­op­ers speak a dif­fer­ent lan­guage from design­ers, kids a dif­fer­ent lan­guage from investors, etc. Keep­ing the lines of com­mu­ni­ca­tion open and clear is an impor­tant part of the role.

BPB: How did your team take Owen’s (non-ani­mat­ed) illus­tra­tions and turn them into some­thing that’s engag­ing and interactive?

LF: This was a super cool part of the process. We knew we want­ed each robot part to come alive in dif­fer­ent ways and affect how the robot moves in the world. To do that we had to:

Remake Owen’s art in Uni­ty out of a lim­it­ed num­ber of basic shapes to save space and improve app per­for­mance. Almost all Robot parts were made by com­bin­ing pills and cir­cles and like these:

LF (answer con­tin­ued): Design a flex­i­ble, smart sys­tem for con­nect­ing robot parts, so you can make the robot of your dreams. We end­ed up using “con­nec­tion points” (sim­i­lar to joints and sock­ets) on each part. We care­ful­ly placed the points on each part and added a few rules about how they con­nect to pre­vent super wonky things from happening.

LF (answer con­tin­ued): Ani­mate the parts, so they come alive in the factory

[KGVID width=“775” height=“436”]https://www.brwnpaperbag.com/wp-content/uploads/2015/04/speed.mov[/KGVID]

[KGVID width=“775” height=“436”]https://www.brwnpaperbag.com/wp-content/uploads/2015/04/circularhead.mov[/KGVID]

[KGVID width=“775” height=“436”]https://www.brwnpaperbag.com/wp-content/uploads/2015/04/EyeDisguise_Anim.mov[/KGVID]

LF (answer con­tin­ued): Use physics to make the robots move in the world and respond to dif­fer­ent obsta­cles. This was a huge chal­lenge, but when we start­ed to get robots that could actu­al­ly walk, fly and fist bump, it was real­ly amazing.

[KGVID width=“775” height=“436”]https://www.brwnpaperbag.com/wp-content/uploads/2015/04/4bananapeels.mov[/KGVID][KGVID width=“775” height=“436”]https://www.brwnpaperbag.com/wp-content/uploads/2015/04/learningtoflysm.mov[/KGVID]

LF (answer con­tin­ued): Add sounds for each part and the var­i­ous ways and speeds at which it moves.

Give the robot emo­tions and a voice. Each robot makes sounds based on its mood (hap­py, sound, bored, hurt, etc.). We designed some of our own sounds and let kids add their own too!

A lot of things did not go accord­ing to plan dur­ing this process — parts not stay­ing togeth­er, robots jit­ter­ing or float­ing instead of walk­ing, etc. They real­ly did seem to have a life of their own at the end of all this.

[KGVID width=“775” height=“436”]https://www.brwnpaperbag.com/wp-content/uploads/2015/04/youdroppedsomething.mov[/KGVID][KGVID width=“775” height=“436”]https://www.brwnpaperbag.com/wp-content/uploads/2015/04/blooper-cut-sm.mov[/KGVID]

[KGVID width=“775” height=“436”]https://www.brwnpaperbag.com/wp-content/uploads/2015/04/derpod.mov[/KGVID]

BPB: What kinds of tools/programs were used to bring The Robot Fac­to­ry to life?

LH: So many! Here are some that come to mind:

Paper, pen­cils, mark­ers, cof­fee, google docs, scis­sors, white­boards, robot mag­nets, HipChat, piv­otal track­er, rice crispy treats, proto.io, the inter­net, Pho­to­shop, Drop­box, ser­vo motors, micro­phones, pro tools, clicks, beeps, a Roland Juno 60, Uni­ty and a bunch of cus­tom tools we made for Unity.

Thanks, ya’ll! Now every­one — check out this beau­ti­ful app and down­load it from the iTunes store.