CloudKid: A Year in Review 2011

Last January, CloudKid recapped our first full year with a dandy list of highlights. And while 2010 was a killer year, 2011 was doubly amazing. Some highlights include:

  • Finished Fizzy’s Lunch Lab season 2 production
  • Developed & started production on a project with Scholastic Education
  • Nominated for our 2nd Emmy for Fizzy’s Lunch Lab
  • Nominated for our 3rd Emmy for the Pictureka show opener
  • Green-lit for a 3rd season of Fizzy’s Lunch Lab
  • Produced a website and games for the upcoming show, Peg+Cat
  • Hired our first Harvard graduate
  • Moved into a new headquarters in Boston, MA
  • Launched our PBS /US Dept. of Ed. transmedia project, Escape
  • Held our first CloudKid open house
  • Awarded 2nd year PBS /US Dept. of Ed. transmedia grant
  • Landed our first gig with Sesame Workshop
  • Revamped the Lunch Lab website
  • Started production on our 1st original iPad app property
  • The CloudKid team grew to twelve full-timers

2011 was filled with hard work and a lot of fun, but next year is going to be even better. We have big things planned for 2012, and we’re not going to let the Mayans stand in our way.

Lunch Lab Site Upgrades

For the last three months, we’ve been hard at work making big upgrades to the Fizzy’s Lunch Lab website as part of the upcoming Season 3 launch.  This season, we decided to produce less videos and games to focus on making the web experience more personalized and meaningful for kids.  We’re proud to announce the new and improved site launched today.

Some highlights:

  • PBS Kids Go! Login system – save progress and high scores.
  • Leader boards – recognize top scores
  • Fizzy Points – a site currency that rewards kids for playing games
  • Newly designed video player and Food Section
  • My Kitchen section that includes:
    • Custom Kitchen – Kids can buy appliances with Fizzy Points and design their own Lunch Lab
    • Build a Bot – Kids can design their very own helper bot that lives in their Custom Kitchen
    • Magnets – Kids are rewarded with awesome badges for watching, printing, and playing themed content

The CloudKid team put in some long hours this fall to make this happen and the upgrades look great.  We’re hopeful it’ll add a lot to the Lunch Lab experience.  Be sure to check it out and share it with family and friends!

S is for Sesame Street!

It’s official!  CloudKid is going to produce a Sesame Street interactive game (and Android app version down the road).  The animation-heavy experience will feature a well-known character who doesn’t have a single game on the Sesame Street site – we like to think we’re breaking some cool ground. Everyone at CloudKid has been huge fans since we were in diapers, so needless to say we’re ecstatic!

Peg + Cat = Launched!

Today, we’re excited to announce the launch of our latest project: the Peg + Cat pilot website over on PBS Kids! Peg + Cat is a pre-school math show that follows its namesakes, the adorable Peg and her sidekick Cat, as they use math to solve problems of all shapes and sizes in their fantastic graph-paper-backed world. We created the interactive content to accompany the pilot episode and had a great time doing so!  We were very excited when the show’s creators, Jennifer Oxley and Billy Aronson, chose to work with us on this project, and we enjoyed the exciting challenges that the production process brought. This was our first time tackling the process of converting Peg + Cat’s After Effects animated style into Flash animation and games.  We went through a few tests and were really pleased with the results. We hope you are too!

Escape from Greasy World: Done!

Today, we’re excited to announce that we’ve wrapped production on our multi-level game, Escape from Greasy World!  As we mentioned back in June, Escape is a Fizzy’s Lunch Lab math-focused game for the US Department’s Ready to Learn STEM grant.  Everyone’s collective hard work over the past five months has really paid off — the game looks amazing. We can’t wait to share the real thing with you when it launches in September!  In the meantime, here’s a sneak peek to whet your appetite:

Ready to Learn: Escape from Greasy World

Escape From Greasy World

Last week I traveled to Washington DC to present the Beta of our latest Lunch Lab interactive creation, Escape from Greasy World, at the PBS/CPB Ready to Learn Summit.

Escape is a large-format online experience that features one longer narrative that’s connected by mini-math challenges that must be solved to push along the story.  We’ve been working very hard on this 40+ minute experience which features eleven minutes of new animation, six mini-games, and an immersive side-scrolling world.  The premise: When Professor Fizzy and the Lunch Lab gang go missing, Henry and Avril decide to investigate. Using their problem-solving skills, they find clues, solve math puzzles, and uncover intel that unravels the mystery. The beta was well-received and the attendees seemed excited by the larger narrative.

At the conference, all the PBS producers presented their transmedia betas, which were exciting and inspiring to see. The conference also featured great speakers and discussions about children’s interactive media – I am always impressed by PBS’s commitment to meaningful content. The best part of the two days was meeting all of the amazing content producers, researchers, and educators who are working on the RTL project.

Escape from Greasy World will launch in September.

 

Hectic Harvest Game Process

In honor of Earth Day, we decided to give  y’all a look at the process of our latest game, Hectic Harvest.  This farming game was a lot of work and brought along a whole new set of challenges we hadn’t  faced in our game design process.

From the beginning, we had the challenge of setting our game apart from the dozens of online farming games.  We researched farming-style games and took note of what was working and what wasn’t.  In the early part of development, we had planned to have Henry and Avril serve as the main characters, and the user would control them on the farm.  When we began the design documents, we realized that it would be difficult having the Labbers walk from plot to plot on the farm without stepping on the plants.  We tried to brainstorm various game screens scenarios, but nothing seemed to work. Finally, one of us chimed in, “Wouldn’t it be awesome if they could just float from plot to plot” – it was our Eureka moment. Rather than using the Labbers, we decided to feature a character that does float – Mixie-Bot.  From that point on, Mixie was our farmer, and it actually worked out for the better.  With Mixie, we were able to introduce inventive gadgets and contraptions, so she could make mundane farming activities (i.e. watering and weeding) pretty awesome.

From the get-go, Mixie comes equipped with a handful of helpful gadgets, but as the game progresses and the player earns more money, they can visit an “upgrade store” and purchase add-ons for Mixie.  These upgrades were designed to help speed up farming production, allowing the player to plant and harvest a larger crop for a higher cash reward.  Some examples include a faster watering nozzle, rocket boosters that speed up Mixie’s traveling time from plot to plot, and larger upgrades such as the “Lady Bug Brigade” that eliminates all pests on the plots of land.  We realized that the larger upgrades were game-changers and made the game more fun and significantly easier.  When testing began, we only planned to have two large upgrades for weeding and pest removal, but watering (which is used more than any other action) didn’t have a large upgrade.  Near the end of production, we decided to add the “Mega-Water” upgrade, which allows Mixie to summon a rain shower to water all your plants at once. This late addition added A LOT to the gameplay.

Two more challenges that we faced were determining the point system and difficulty of the game.  When we design games, we always try to keep our audience in mind – kids.  We can’t create games that are too difficult for us to play or kids will definitely struggle. With this in mind, we spent weeks tweaking the point system. Originally, users won points and money.  Points were used to determine which ribbon you’d win and the cash reward was based on the number of points you accumulated. This system became confusing for us, so we decided to remove the “points” and focus solely on the cash reward.  The monetary values that the player earns in each level would also determine the ribbon won.  The money they earn in each level rolls-over into their “bank”, so they can earn enough and save money to buy the more expensive “large upgrades”.  Once the point system was figured out, we had to determine the target goals for 1st, 2nd, and 3rd place in each level.  We went through many rounds of testing and received a large spectrum of results.  Some people scored really low on levels where other people were coming back with huge numbers.  So, how was this happening?

We discovered it could be a number of things.  In the game, each farming action is signaled by a visual alert icon, which is accompanied by a timer.  From the time the alert pops up, to the time Mixie arrives at the plot, this time meter slowly expires. If the timer runs out before Mixie gets to the plot of land, the plant dies – This gives the game a sense of urgency and creates the fast-paced feeling.  In addition, if the action is completed before the halfway mark on the timer, the player receives bonus points.  We noticed that some people would immediately start planting seeds on every plot of land, and furiously send Mixie from plot to plot, but even if users were diligent, most of the actions would be completed near the end of the timers – resulting in less money earned. The best method is not to plant as many seeds as possible, but rather to plant a smaller crop and complete the actions before half of the time expires. This strategy will result in more bling.  We took both styles of play into account when building the point system for each level.

Replay-ability was also something we took into account.  We didn’t want kids to become frustrated for not earning high dollar amounts or ribbons, but we also did not want them to fly through the game and not want to replay it.  So, throughout the testing process we came upon a successful point target system for each level.  To get players interested, the 1st place ribbon is easily accessible on the first few levels. The later levels become more difficult to earn the higher ribbons.  This will make the player have to replay for a number of reasons: to earn enough money to purchase the expensive upgrades, and also to use those upgrades to try to reach the 1st place ribbon.

The fast-paced style of Hectic Harvest did present a handful of challenging game-glitches and bugs. We spent weeks testing and tweaking to ensure the final game had was flawless.  We definitely put a lot of thought into this game, and had to do a lot of problem solving to make it a success, but we also learned a great deal along the way.  Hopefully, all of our work paid off. Take a look at the visual process below and then, get farming!

Seamless Audio Loops with Flash

Most of the games that we create use looping audio, either for music or as a sound effect. One of the limitations of the MP3 audio format is that it adds a fraction of a second of silence at the beginning of a file. For most audio this is tolerable and imperceptible, however, if you need a perfect loop for something like music, then you’re going to have to find a better solution.

MP3 Waveform

We looked at all the alternatives that searching Google had to offer (i.e., special exporting software, fancy AS3 runtime code, etc) and after all this it seemed the best solution was also the easiest. If you import raw audio such as a WAV or AIF file into Flash Professional and embed the sound into your SWF (either as a timeline loop or with an exported class), it will not add the previously mentioned bit of silence. We call these undocumented Flash gems, “Flash magic”.

This is good news except that it’s a pain to manually import each audio file into an FLA and then export if all you need is a SWF. We created a Flash plugin (also called extensions or commands), which automates this process. Select a raw audio file, choose the bit rate and file name, then presto, SWF created. No need to save an intermediary FLA or fuddle with publish settings. The SWF file that’s been created is special in that it only contains a single Sound object with a class name that matches the file name. For instance, if the SWF file name is “gameplayMusic.swf” there would be a single AS3 Sound object with a class name “gameplayMusic” inside the SWF. We can then create a special loading utility for these types of sounds (see AS3 code below).

The only downside to this method is that you can no longer stream in the audio, which would save on up-front loading. Instead, the entire SWF needs to be preloaded before you can have access to the Sound object.

The Generate Audio Loop tool can be downloaded from the secret Tools section of our website.

Here is a sample utility for loading the Sound object.
[cc lang=”actionscript3″]package com.cloudkid.util
{
import flash.media.Sound;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.Event;

/**
* Utilities for dealing with sounds
* @author Matt Moore
*/
public class SoundUtils
{
/**
* Load a sound for an external SWF
* @param The path to the SWF file to load
* @param The callback when the sound has been loaded
* @param The name of the sound class (defaults to filename without “.swf”)
*/
public static function loadExternalSound(url:String, callback:Function, className:String=null): void
{
if (className == null)
{
className = url.substring(
url.lastIndexOf(“/”),
url.lastIndexOf(“.”)
);
}
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(
Event.COMPLETE,
function(ev:Event): void
{
var s:Sound;
try
{
var clazz:Class = loader.contentLoaderInfo.applicationDomain.getDefinition(className) as Class;
s = new clazz;
}
catch(e:Error)
{
trace(“Error: class doesn’t exist ‘” + className + “‘ in ‘” + url + “‘”);
}
callback(s);
}
);
loader.load(new URLRequest(url));
}
}
}
[/cc]

And a sample implementation:
[cc lang=”actionscript3″]function onSoundLoaded(sound:Sound): void
{
if (sound == null)
{
trace(“Unable to load sound”);
return;
}
sound.play();
}
SoundUtils.loadExternalSound(“drive.swf”, onSoundLoaded);[/cc]

Freestyle Fizz Process

We’ve being really busy over at the CloudKid HQ finishing up production on the second season of PBS Kids’ Fizzy’s Lunch Lab.  Our most recent game, Freestyle Fizz, launched a couple weeks ago, so we thought it’d be fun to give you all a little behind-the-scenes peek into the production.

We were very excited to start production on this game because it was our first side-scrolling experience in which the user controls the character, Professor Fizzy in this case.  But, we didn’t want to create just another roller skating game, so we decided to add a little something extra by creating a series levels and unlockable outfits, and we had a lot of fun designing flashy costumes for Fizzy (See below).  The animation component also proved to be more challenging to accommodate multiple outfits, but it  added a lot to the user experience and re-playability of the game.  And although Freestyle Fizz is a roller skating game, it still had to convey the main curriculum goal – healthy food decisions.  Each level has three good (and bad) foods that Fizzy needs to collect (and avoid) in order to hit killer tricks and get higher scores.

Freestyle Fizz was definitely a challenge  in terms of game experience, unlockable items, and animation but we’re really happy with the result.  And for some added excitement, we threw in a little “easter egg”.  Think you can find it?  Hint: Level screen, classic 80s code.  Check out our visual process below, then go play the game!  Good luck!

Supermarket Mania Process

We’re proud the announce the launch of our latest Fizzy’s Lunch Lab game, Supermarket Mania!  The development was a ton of fun, so we decided to give a sneak-peek into our process.

From the get-go, we wanted to produce an interactive “board-game”, but PBS was hesitant due to past experiences with similar games.  Needless to say, that made us even more excited to tackle this project.  We set out to create an experience where kids navigate the supermarket, collect Fizzy’s ingredients, and checkout before Fast Food Freddy fills their cart with junk.   The curriculum goal was to educate kids about food decisions through a variety of challenges: fresh vs. processed foods (Factory vs. Farm); nutrition labels (Food Label Fun); and food identification (Find the ingredient).  In addition, we spent a lot of time researching supermarket signage and artwork to create an experience that brings the shopping experience to life.

Supermarket Mania was our most complex game to date because it includes dozens of UI screens, a NPC (computer challenger), and well-over a hundred audio files. In the end, we’re thrilled with the results.  Check out the visual process below.  Then, go play it.  Enjoy!