Bobo Makes a Facebook Debut

Bobo and Social Media

Bobo the Robot is now so cool that he has his very own Facebook page.  Check it out and learn all about where he came from, where he’s going, and what he’s up to this very moment!  Have you ever seen Bobo’s year book picture?  Log onto Facebook and take a peek right now.


Comments Off

Apple Design Awards and Airport Security Don’t Mix

Airport SecurityAs I was heading back to Seattle from WWDC, I was only traveling with a small backpack.  I bundled the Apple Design Award into a t-shirt when I packed that morning, shoved it into my backpack, and forgot all about it when I got the airport.  The backpack went through the x-ray machine and showed up as containing a perfect, black square.

The guy watching the screen from the x-ray machine called for another guy, and another guy, and pretty soon there was small crowd scrutinizing the image.  The backpack came out, I sheepishly admitted to being the owner, and I was taken aside.  When the TSA folks pulled the cube from my bag, it glowed.

Whispers passed over the crowd.  After I explained that the cube is from Apple, the security folks reverently placed the futuristic artifact into its own plastic bin and ran it again through the x-ray machine.  This time, the other passengers got a glimpse of what the commotion was about and, once again, it was the glow of the cube readily visible as it entered and exited the x-ray machine that sent a wave of whispers through the sizable gathering.

Apple Design AwardEventually, the cube made its way back into my bag, but the curious gazes kept coming.  I suspect I will be reading about “intercepted alien technology of unknown origin or purpose” on the blogosphere soon.  What can I say?  Apple knows how to design their products.


1 Comment

Apple Design Award

Apple Design AwardA little over a year ago, a picture of a robot was scribbled on a piece of brown craft paper.  He was named “Bobo”. Last September, that same little robot made his debut exploring the science behind light and delighting children and adults around the globe.

At WWDC Apple recognized the mountain of work and polish that went into Bobo’s adventure with an Apple Design Award.

Bobo would never have become a reality without the incredible support of Apple’s platform and without the excitement and endorsement of the thousands of kids around the world.

Thank you.

Every day, they adopt Bobo and invite him into their lives. Excitement builds curiosity, curiosity powers learning, and learning drives us all forward.  Keep learning.  Keep thinking.  And most of all, keep exploring!


Comments Off

It’s a Sharp, Sharp World…

…or Some Tips on How to Bring Your Big iPad App to the Even Bigger Retina Display

I’ve just spent the the past several weeks updating Bobo Explores Light for iPad’s new retina screen.  It was a tricky problem to solve right, but I’ve learned a couple of tricks along the way that you might find useful.  If so, read on…

The Problem

For vector-based or parametric iOS apps, ones that rely on 3D models or that perform some clever run-time rendering of 2D assets, the retina conversion is pretty straight forward.  All they need to do is introduce an x2 multiplier somewhere in the rendering path and the final visuals will take advantage of the larger screen automagically.  There might still be a couple of textures and Heads-Up-Display images to update, but the scope of these changes is quite small.

My problem was different.

The Bobo app contains well over 1400 individual illustrations and image components that look pixelated when scaled up.  It features several bitmap fonts that don’t scale well either.  When I introduced the x2 multiplier over the entire scene, the app technically worked as expected, but it appeared fuzzy:

Fuzzy Problem

My first impulse was to replace all of the illustrations and fonts by their x2 resampled sharp equivalents.  This line of thinking, however, presented two immediate challenges:

1) I needed to manually upscale 1400 images.  That’s a lot!

Even though the illustrator behind the project, Dean MacAdam, kept high-res versions of all the images in the app, the process of creating the individual retina assets was very tedious:

  • Open every low-res (SD) image in Photoshop
  • Scale it to 200%
  • Overlay it with an appropriately scaled, rotated, and positioned high-res version of that same image
  • Discard the layer containing the original SD image
  • Save the new high-res image (HD) with a different filename
  • Repeat 1399 times

If each image were to take 5min to convert, and that’s pretty fast, this conversion alone would take well over three weeks.  Yikes!

2) I needed to keep the size of the binary in check.

4in1Bobo Explores Light already comes with a hefty 330MB footprint.  Not all of it is because of illustrations since the app includes a number of videos, tons of sounds and narratives, etc.  But a good 200MB is.

Now, the retina display includes 4x as many pixels as a non-retina display.  If I were to embed an HD image for every SD image used in the app, the size of the Bobo binary would exceed 1GB (130MB for non-image content + 200MB for all SD images and 4 x 200MB for all HD images).  That just wasn’t an option.

The saving grace

When I calculated the above numbers, I’ve reached the conclusion that in the case of Bobo, retina conversion was a futile effort.  Nonetheless, I got myself the latest iPad and did some experimenting.  My secret hope was that I could mix SD images with HD images and come up with an acceptable hybrid solution.  My secret fear, however, was that the few HD images would only highlight the pixelation of SD images still on the screen and that it would be an all-or-nothing type of a scenario.

I uploaded a few mock-up images onto the new device, iterated over several configurations, and I was pleasantly surprised.  Not all, but some combination of SD and HD images actually worked beautifully together.  In certain cases, the blurry SD images even added a sense of depth to the overall scene, resulting in a cheap man’s depth of field effect.

I was excited because these results helped me address both of the problems I outlined above.  By being selective about which images I needed to convert, the total number of retina assets I needed shrunk to 692.  Still a large number, but less than half of the original.  Also, the ballooning of the binary size would be diminished.  That problem would not be solved, mind you, but it would certainly help.

Text

Text was the number one item in the app that screamed “I’m pixelated!”.  The native iOS code renders such beautifully sharp text on the new iPad that any text pixelation introduced in the Bobo app stuck out like a sore thumb.  This part was easy to fix, though.  By loading a larger font on retina devices, all of the text that was dynamically laid out suddenly snapped to focus.  Unfortunately for me, not all of the text in the app was dynamically laid out.

Bobo features well over 100 pages of text with images in the form of side articles and interesting factoids.  For the sake of saving time when we worked on v1.0 of the app, we baked some of that text and images together and rendered the entire page as a single image.  This approach really helped us streamline the creation process and push the app out in time.  All in all, these text-images amounted to about 80MB of the final binary, but given the time it saved us, it was the right approach at the time.  Now, however, it presented a problem.

If we were to re-sample all these text-images for the retina display, we would gain ~80Mb x 4 = ~320Mb of additional content just from the text alone.  That was way too much.  But, we *needed* to render sharp text.  So, we bit the bullet, separated the text from its background, and dynamically laid out all the text at run-time.

This conversion took well over two weeks, but it was worth the effort.  The text became sharp without requiring any more space.  At the same time, we were able to keep all the photographs interleaved with the text as SD images.  Because these were photographs that were visually fairly busy and because they were positioned next to sharp text that drew the attention of the eyes, the apparent blurring from the pixelation was minimal.  Additionally, without any baked text the background images compressed into much smaller chunks, giving us about 50MB worth of savings.  That was not only cool, but very necessary.

Home-Brewed Cocos2D Solution

Bobo is built on top of the open-sourced Cocos2D framework (an awesome framework with a great community of developers – I highly recommend it!).  Out of the box, Cocos2D supports loading of retina-specific images using a naming convention.  However, this functionality is somewhat limited.  If all of the images in an app are either HD or SD, this works great.  But my needs were such that I required mixing and matching of the two, often without knowing ahead of time which images needed upscaling without trying it out first.  I needed a solution that would allow me to replace HD images with SD images on a whim without having to touch the code every time I did so.

Way back when, when I was working on The Little Mermaid and Three Little Pigs, I created an interactive book framework where I separated the metadata of each page (text positioning, list of images, etc.) from the actual Cocos2D sprites and labels that would render them on the screen.  This is a fairly common development pattern, but I can never remember what it’s officially called (View-Model separation maybe?).  Anyway, I used this separation to my advantage in Three Little Pigs to create the x-ray vision feature.  Render the metadata one way and the page appears normal; render that same data another way and you are looking at the x-ray version of that page.  Super simple and super effective.

With this mechanism in place, I was able to modify a single point in the rendering code to load differently scaled assets based on what assets were available.  In pseudo-code, the process looked something like this:

Sprite giveMeSpriteWithName(name) {
    if (retina && nameHD exists in the application bundle) {
        sprite = sprite with name(nameHD);
        sprite.scale = 1;
        return sprite;
    }
    else {
        sprite = sprite with name(name);
        sprite.scale = retina ? 2 : 1;
        return sprite;
    }
}

It got a little more complicated because of parenting issues (if SD and HD images belonged to different texture atlases, they each needed their own parents), but this was the core of it.  What this meant for me was that all of the pages, by default, took SD images and scaled them up.  Apart from appearing pixelated, the pages looked and behaved correctly.  Then, I could go in and, image-by-image, decide which assets needed to be converted to HD, testing these incremental changes on retina device as I went along.

There was some tediousness involved for sure.  However, I quickly got the sense of what portions of what pages needed updating and I came up with the following rough rules, that hopefully might come handy to you as well.

Things That Scream “I’m pixelated!”

1) Type

At the very least, convert all your fonts, whether they baked into images or laid out dynamically.  Your eye focuses almost instantly on the text on the screen, if some exists, and the fuzzy curves on letters become immediately noticeable.  By that same token, convert *all* of your fonts – don’t skimp out just by converting the main font that you use in 90% of the cases.  The other fuzzy 10% would essentially nullify the entire effort.

2) Small parts that are the focus of attention

When converted to HD, cogs, wheels, pupils, and tiny components all make a huge difference in giving the app the *appearance* of fine detail even if the larger images, however bright and prominent, are still in SD.  Moreover, because these smaller images are … uhm… small, scaling them up doesn’t take that much extra space, so it’s a win-win setup.

3) High-contrast boundaries

Bobo’s head is a perfect example.  Most of the time, Bobo moves across dark colors with his bright green bulbous head in sharp contrast with the background.  Even though Bobo’s head was relatively large, it begged for a razor-sharp edge on most pages.

Things That You Can Probably Ignore

1) Action sequences

This one can sometimes go either way, but it’s still worth mentioning.  If something pixelated moves across the screen, the movement will mask that pixelation enough so that no one will really care.  However, if you have an action sequence that draws the attention of the eye and the sequence contains at least some amount of stillness, the pixelation will show.

2) Shadows, glows, and fuzzy things

All of these guys *benefit* from pixelation – definitely don’t bother with them.  If anything, downscale them even for the SD displays and no one will be the wiser.  Seriously, this is a great trick.  Anything that has a nondescript texture without sharp outlines (either because the outlines should be fuzzy or because the outlines are covered with other images), store it as a 50% version, and scale it up dynamically in code to 200% on non-retina displays and 400% on retina displays.  The paper image behind all side articles in Bobo Explores Light is a perfect example.  The texture itself is a little fuzzy, but because it is lined with sharp metal edges and overlaid with sharp text, nobody cares.

When All Else Fails…

A few times I found myself in situations where the SD image was too fuzzy on the retina display, but the HD image took way too much space to store efficiently.  What I ended up doing in those cases was to create a single 150% version of the image, and scaled it down to 66% for SD displays and 133% for HD displays.  The results were perfectly passable in both cases.

Final Tallies

When all was said and done and my eyes were spinning from some of the more repetitive tasks, I was very curious to see how much the binary expanded.  I kept an on-going tally as I went through this process, but because of various reasons, it wasn’t super accurate.  When I compiled the finished version, I discovered that not only did the binary not expand, it *shrunk* by a whooping 50 MB!  This whole process took one freakishly tedious month to complete, but in the end the retina-enabled version of the app was significantly smaller than it’s non-retina original.

I don’t know whether that says more about my initial sloppiness or the effectiveness of the retina conversion.  I’ll leave that as a question for the reader.  Nonetheless, the results were exciting and Bobo Explores Light looks, if I dare say, pretty darn sharp on the new iPad.  Check it out!


2 Comments

Q&A with GeekWire

I recently had a chance to connect with John Cook from GeekWire who asked me about Game Collage, Bobo, and the startup world in general.  He just posted our conversation online – check it out at GeekWire’s Startup Spotlight.

Comments Off

One for the Kids!

Way back when, when I was still a wee-little iOS developer about yay high, I created my first interactive book of Hans-Christian’s Anderson’s fairy tales called “The Little Mermaid and Other Stories“.  It came out only a few weeks after the iPad was released and I remember working round-the-clock on the project to get the book out.  Because it was my first interactive book, I needed to spend a lot of energy developing the basic framework – general code structure, run-time page layout, dynamic loading and unloading of assets, etc.  I was working alone on this project so, in addition to the coding, I spent well over half of my time creating illustrations, designing sound effects, editing the content, and, at the very end, creating a short video trailer – definitely not my forte.  Nonetheless, I was happy with the results.  I submitted the app to the App Store and, once it was approved, I watched it go live one sunny Friday morning.

And then I paced.

I was very tired from the effort of the previous six weeks; I squeezed every ounce of creative juice I had in me. I was excited, and very, very nervous.  I don’t even know why.  I do know, however, that I spent most of the afternoon pacing – I just couldn’t stand still.

Yet nothing happened.

The week just before the app went live, I sent dozens of emails to newspapers, review web sites, and popular bloggers announcing the upcoming launch, but every time I refreshed my inbox, I was greeted with a message telling me that I have “no new messages”.  At that point, a wise man suggested I should step away from the computer and go for a walk.  Before I did, I literally hit the refresh button one more time and was rewarded with the following message:

We love your apps.  Thank you!
Zoe age 5,
William age 8 


I almost lost it.  Unbeknownst to them, Zoe and William had given me the justification that I so desperately needed.  I peeled myself away from my laptop to go for the walk and I couldn’t stop smiling.  Mission accomplished.

Since that time, I’ve heard from many more kids and parents and grandparents enjoying the apps and offering me their feedback and suggestions.  I’m always thrilled.  Each time I receive such an email, I’m excited to read it and respond as quickly as I can.  For me, it’s one of the most rewarding reasons of why I do what I do.  And both Zoe and William have a very special place in my heart, because they were the first to let me know that they cared.

Today, out of the blue, I sent an email to Zoe and William’s dad and let him know how much the original email from his kids meant to me.  Soon, he replied:

Thank you so much for the email. William just turned 10 and Zoe is now 7. Each of them now has their own iPad with your app installed. They even take turns reading your app to their little brother Levi (2). Now you have three customers for life. I will make sure they check out your new app [Bobo Explores Light], and I will send you their review (in their own words).

I think you have also inspired William to start working on his own app. He is currently working on his artwork and game rules. I will let you know how he progresses.

Keep up the great work. You have provided hours of enjoyment to William, Zoe and now Levi through a mixture of technology, art and science.


Once again, I am grinning ear to ear and want to send a huge thank you to William and Zoe and Levi and their dad Scott.  You guys rule and inspire me every day!  And, William, I look forward to seeing what you come up with.  Keep it up!

 


Comments Off

Doodle Blast! HD Makes an iPad Retina Debut

After seeing the new iPad with over 3 million (!) pixels, I couldn’t help but take a break from what I was doing and dust off an old favorite – Doodle Blast! HD – to get it ready for the new device.

In theory the task was simple enough.  I had saved most of the original images as vector files, so re-scaling them, while tedious, was fairly straight-forward.  However, the poor codebase was very outdated and in desperate need of a fresh coat of paint.  It took me over five days of round-the-clock work to rip out the old scoring system, add Game Center support, iOS5 Twitter support, replace Cocos 2D v0.7 with Cocos 2D v1.1, and implement selective retina image loading for high-res devices that supported them.

The results, however, speak for themselves.  The pixels on the new iPad are so tiny, that this game more than any other literally looks like a sheet of graph paper that came to life.

Take a look at the following images for comparison.  The first is a 100% scaled version of the tank from the original iPhone game.  The second is that same tank, also scaled to 100%, as used by the new iPad:

Original:

Enhanced for new iPad:

 

The game is now available for only $0.99 (a far cry from all the $7 games for the new iPad) and as one of the DB gamers put it - “Stills don’t do this game justice – you have to play it and control the awesome firepower to really appreciate it.”  Click here to check it out at the App Store!


Comments Off

A rare look at Bobo’s code base

I came across a very cool online tool created by Jonathan Feinberg that produces beautiful word clouds from random chunks of text.  I was curious to see what it would do with a piece of code and so I dug up the base class for Bobo and pasted it in.  To give you some context, the class controls most things Bobo, from his singing and face animation to movement, interactivity, and physics.  It’s a hefty beast of over 1300 lines of code and seemed like a great candidate.  So, if you ever wondered what Bobo was made of, here is your answer:


Comments Off

iPads and Bathtubs Don’t Mix

A friend forwarded me the following story that Ingrid Simone posted on Common Sense Media website entitled “My Kids’ First iPad”.  I had to laugh and repost a part of it – Bobo was almost responsible for a minor disaster that was only narrowly averted.  You can read the entire post here.

- – -

Establish some ground rules. Introducing an iPad (or any tablet) in your home the first time will require setting some ground rules. Even if you have other electronic devices the kids use, you’ll want to think about the questions the iPad will raise. A few examples:

How does iPad time figure into overall screen time limits? In my house, we don’t have hard-and-fast screen time limits. But maybe you’re a one-hour-a-day max family.

Is iPad time now included in that hour? Is it OK to make in-app purchases? We have tips for how to approach this question.

Is it OK to use the iPad without asking first? For us, no. Always ask first.

Is it OK to use the iPad while also watching TV? I encourage my kids to do one screen at a time.

Is it OK to take the iPad into the bathroom? I didn’t think I needed to address this until my 6-year-old son took the iPad into the bathroom so he could continue with the Bobo Explores Light science book app while taking his bath. The iPad was resting on a bench outside the tub, and he reasoned “but my hands are dry.” It could’ve been a disaster, and I could’ve avoided the close call by establishing that rule up front — and of course by making better use of those eyes in the back of my head. (Side note: Clearly this is a thoroughly engaging app! A 5-star keeper!)


Comments Off

3.5 Million Pages Served!

Over 3 Million Server

Today, the bright and sunny offices of Game Collage, LLC were full of administrative hustle and spreadsheet excitement.  Numbers were being added, divided, and added up again, software and hardware calculators could barely keep up with the nimble fingers of their users, spreadsheets were spilling out of their rows… in short, I was working on state taxes.

In the middle of this mayhem, my mom calls.  Because I’m already knee deep in numbers, I crank out a couple of pivot tables to amuse her with interesting statistics and, in the process, manage to surprise even myself.

Since Bobo’s launch, kids from around the world have looked at a cumulative 3.5 million pages in the book!

Wha?!?  That’s.. uh… three… *sigh* I can’t even count that high!  Additionally, kids spent almost 2.5 minutes on every page adding up to a total of well over 15 years! that Bobo has been entertaining the world with science.  Without a shred of doubt, this is my greatest personal achievement to date.

Another interesting statistic that fell out was that people spend on average 20 minutes reading the book each time.  That means folks don’t just pick the book up and put it away, but spend some meaningful time with it.  I’m very excited that the months of work and late nights that went towards creating Bobo ended up being somehow useful to the world.

If you are among those people who have spent a portion of those 15 years with Bobo, thank you!  I hope you enjoyed it and that you’ll spend a few more years with it yet.

Comments Off