LIBRARY: Tutorials Reviews Interviews Editorials Features Business Authors RSS Feed

Creating Interactive Games - Cine Bingo

CreativeCOW presents Creating Interactive Games - Cine Bingo -- Adobe After Effects Techniques Editorial


Los Angeles, California
CreativeCOW.net. All rights reserved.



There's nothing that says "old people" quite like Bingo. But what if Bingo got a shave and a shower, and you took it to a nice place for once, maybe the theater? Last year, my company, Psychic Bunny, got just that chance.

TimePlay Entertainment hired us to help produce "CineBingo," a fusion between a bingo hall, a TV game show, and a roller-coaster ride. We certainly hadn't ever done this kind of game before - hardly anyone has. So how did we get the job? And more importantly, how did we get the job done?

My company's motto used to be "Psychic Bunny: It's Actually Pretty Hard to Describe What We Do." Which usually gets a laugh whenever we hand out our business card, and sometimes, when we're lucky, a very understanding head nod. Yes, we make commercials, short films, and promotional videos. But we also create interactive DVD games, user interfaces for gaming through instant messenging, and card games to teach negotiation skills.

For years, people have been telling us that we're just too diverse for our own good - that we should concentrate in a few key areas. The reason we've held out this long is that we believe that everything we do is truly tied together - the graphics bone is connected to the interaction bone, and so on.


JUMPING IN THE LIMO

Another reason we've produced so many different types of projects is that we decided a long time ago to say "yes" to things we were interested in, regardless of whether we were confident we could do them, regardless of whether we knew if it would be worth it down the road. It all began with two of our founding partners, Doug Spice and Asa Shumskas-Tait, standing on a street corner in Hollywood.

A limo pulled up at a red light, and the door opened. Inside was a throng of girls, probably either on a sorority night out or a bachelorette party. They called out to our two young heroes, and beckoned them to get into limo with them.

Asa and Doug looked at each other, stupefied, and their immediate answer was no. It would be too silly to jump into a limo full of strange women in the middle of the night.

And they've regretted it ever since.

American Bingo

In 2006, Psychic Bunny changed its mantra to "Always Jump in the Limo." And while that's gotten us into trouble a couple times, it's the foremost reason that we had the experience necessary to land the CineBingo job.

Heist


HOW WE GOT THE JOB

The time was 2007. TimePlay Entertainment was playing it fast and loose in the game of interactive cinema platforms. They had already originated the CineLynx platform, a turnkey system for playing interactive content in social venues such as cinemas, live theaters and cruise ships. For their new flagship product, they wanted to blow Bingo out of the water, and they needed a company to help load their media cannons full of nautical references. They decided on Psychic Bunny for two reasons.

The first was that they had already hired University of Southern California professor Chris Swain as a creative consultant. Our interactive director, Jesse Vigil, had been working with Chris for years on projects for the Institute of Creative Technologies. Swain knew us primarily for our writing and game design skills, and recommended that TimePlay talk to us about the CineBingo project.

"Oh! I've worked with them before!" said one of the TimePlay executives, and she had - back when she used to work for one of our clients, MGA Entertainment. She knew us primarily for our production and animation work, for the DVD games and promo videos we'd made for their Bratz and Miuchiz properties.

Suddenly with TimePlay, it clicked - here were the perfect people for the job. We had the graphics and animation skills to create all the full motion video needed for the game, and the interactive experience to know what on earth we were doing.

Cinebingo 1

We were hired to produce all the graphics, animation, sound, and music for the game. And, because all of these pieces would have to be coded into the game engine to see if they really worked or not, we were hired for that, too.

Cinema Bingo 2


THE CINEBINGO EXPERIENCE

Pay for a ticket, find your seat, and a wireless touch screen is already waiting for you. After everyone logs in with their ticket number, the CineBingo logo flies onto the screen with a burst of music, the game show host walks out, and tells you that the first game is Bingo.

He explains how to mark your Bingo cards, how many Bingo cards you get, and how to cycle through them on the handheld device. The numbered balls start flying on the screen, and just when you're one number away from winning, the words "Bingo Called!" slam upon the screen. The person sitting right next to you just won. Aren't you so sad and depressed?

But not for long! The crowd votes to play a word game rather than a memorization game, and you end up winning. The scoreboard comes up, and your name is right up there at the top. You won an iPod shuffle!

After playing another few rounds of Bingo, as well as a few other PrizePlays like Heist, Foto Finish, and Puzzler, it's now time to go home. You're starting to get a little emotional about this. Can't the good times just keep a' rollin'?

And then you remember with relief that this isn't the actual game. It's just a walkthrough you're reading in Creative COW Magazine.


GETTING THE JOB DONE

So, we've just landed our biggest job yet. Now what?

Since Psychic Bunny is a small company addicted to low overhead, we expand and contract based on our workload. When bidding for a job, we always put feelers out to see who is available, so that when the client says "Go," we can flip the switch and the machine starts churning right away. We actually hired our sound designer from an ad in the COW's Jobs forum!

Because we put a lot of time and effort into the bidding process, we had a pretty good plan of action from there. With the contract phase, we had also made a list of deliverables, which was a good place to start building our asset list for the project.

We began with the general shape and feel of the game. We looked at what kind of bingo design was already out there, and decided to scrap everything. Regular bingo was just too tired. That, after all, was the reason we were making this game in the first place.

Our creative director for this project, Doug Spice, had the idea of creating separate spaces for each of the different games within CineBingo, and zipping from place to place to visit them all. TimePlay latched onto this concept right away, and we started pre-visualizing balls of light that zoomed from place to place to become the logo of each different game.

Our workflow was now beginning to cement. For each mini-game, the first thing we created was a logo design. This was a good starting point, because a logo contains a style, a palette, and a suggestion of movement. From these, we could draw out the rest of the elements to match.

Asa sketched out some of the logos by hand, and others were begun in Cinema 4D by our designers. While we were waiting for comments on one batch of logos, we would start on the next batch. Once a logo was approved, we started developing the other elements for that particular game.

(You can see throughout this article, including the title graphic, how each logo represents a unique design scheme.)

We started with just the 3D elements. Our designers got the basic shapes and movements down in Cinema 4D, and exported these as animatics - storyboards in motion. Once Doug approved, we sent these movies over to our programmer, to use as placeholders to script the game. As long as timings didn't change, he would easily be able to drop in the final animations later.

This kept the workflow moving without too many bottlenecks. Bottlenecks, as you know, are no fun when you are drinking the fine, fine juice of interactive cinema gaming.

After the 3D elements were done, our designers exported the objects and camera data to After Effects, where we added the colorful backgrounds, Trapcode Particular-generated sparklies, and overall "magic."

Once the animation was gussied up and approved, it was exported as uncompressed QuickTime video for processing with Bink (a codec designed for games), and then dropped into the CineBingo game engine.


THE INTERACTIVITY

To make sure that all of the graphic elements of a game linked up perfectly, we built them all as one long sequence, with a handful of different loop points. Point A would play to point B, at which point you could loop infinitely between point B and point C. Then you could transition from C to D, at which point you'd hit another loop.

When designing games to be fluid like this, you have to be careful to understand the gameplay. Because you can skip from any point within a loop, you don't want to upset the audience with a jerky transition.

Game Graphic 1
Glowing Background Game Graphic

You can imagine how this kind of interactivity might be a challenge to someone who only focused in motion graphics or animation. Commercials, after all, never have to loop back on themselves.

But just as a film director has to "see" the film inside her head, we had to visualize playing the game just by looking at all the pieces, and imagining how they would play off each other, in all of the different ways that they might fit together. We fortunately had a lot of experience with DVD games, where loop points and flow charts are very important.

Game Graphic 2
Animated Bingo "Balls" Game Graphic

One of the last steps in the process was one of the most important - designing all of the buttons and screens that the audience would actually interact with on their handheld consoles.

The challenge was that TimePlay had already locked in the layout of all the screens we would be designing. Because of our experience in user interface, we knew we would need to create a hierarchy of readability, so that audience members would always know what they were expected to do, and where they were expected to look.

Game Graphic 3
Racetrack Game Graphic

Since we didn't have the use of layout to create this hierarchy, we used color, shadow, perspective, and type to make everything as intuitive as possible.


THE GRAPHIC DESIGN

We also ran into some interesting design issues for the games themselves. The world we created was so stylized and ethereal, that it was a challenge to represent the real things, such as cameras, playing cards, and racing horses, that needed to be incorporated into the game.

And of course the bingo balls. If all we had to do was recreate the look of a regular bingo-house pingpong ball, our job would have been a piece of cake. But now, tied to this world of glowing lights, revolving orbs, and atmospheric backgrounds, what should a racetrack and bingo balls look like?

The answer we found was that, instead of trying to mold a bingo ball into something else, we had to take everything down to its essential concept, and then build it back up ourselves as if bingo balls had never been invented. Our lead designer on this project, Luis Gonzalez, was an amazing visionary in accomplishing this.

One cool thing we could do was to make alphalayer transitions over everything - not really something you can do with film or video. Since everything was being encoded in Bink, we had the ability to start transitions from completely translucent, and end the same way, which really helped to mask hard cuts and create the fluidity we were aiming for.


SOUND AND MUSIC

We really wanted to capitalize on using the theater's 5.1 surround sound capabilities to make this an immersive experience. To help us create the maximum impact, we partnered with iPost. Doug instructed them that, while the visuals might look a little modern at times, this was really meant to be a magical place with more natural, flowing sounds than, say, a Transformers movie.

We had two opposing goals for the music of CineBingo: to be recognizable, and to be fresh down the road to keep the game from getting stale. We accomplished this by using an original score for the theme of the overall show, and licensing music for the game loops , which would allow us to switch them out later. For this we turned to Music Kitchen, who were able to loop their musical arrangements to match our media, and keep a big smile on their face while they did it.

Although the colorful, sweeping graphics suggested a grand, symphonic score, we decided to go with a more contemporary sound, in order to hook a general audience. The resulting mix of music, sound effects, and visuals really made the game pop.


BINGO!

Once we got into the rhythm of creating the game, TimePlay was so enthused about the way things were going that they doubled their order, and added more minigames to the mix.

In total, Psychic Bunny had to deliver over 3000 individual elements for this game, from HD movies, to handheld screens, from ball calls to trivia questions. TimePlay is now in the game-testing stage back in Toronto, and working with various licensors, club chains, and bingo halls in the UK. Happily, there are also talks about bringing the game to the U.S.

Looking back, if we weren't skilled in motion graphics, we would never have gotten the job. And if we hadn't done any work on DVD games, we wouldn't have had such a grasp on branching and looping game flows. And if we weren't also a film production company, we wouldn't have been able to direct the sound and music as well as we did. And if we hadn't also designed user interfaces for online games, the handheld screens we designed would not have been as functional.

In other words, if we had specialized in one thing like everyone had told us to, we never would have been ready to take this job. But projects like this are the future of our industry. With all the renewed interest in 3D and interactive realities, we're starting to see that people are thirsting for new experiences, and the media companies that are going to thrive in this new environment are the ones that are ready to try new things.

You can't be an expert in that "new thing" before it has been invented. But when the opportunity arrives, you can be ready to jump in the limo.


UPPY-DOWNY

All the games start from a neutral state. From there, they can go anywhere. The Host can take us to the scoreboard, or to play Bingo, or to any of the Prizeplay games.

The concept of navigation between games is that a CineBingo ball whooshes us from place to place, and becomes everything we need it to. "Flight" videos transport us, and sparkles hide the cuts between them.

In the Flight video shown here, the CineBingo ball flies us through the logo and a laser field, where it bursts into a ball of light. Arrows fly in and around, transforming it into the Uppy Downy logo.

This was actually one of the logos in the game that underwent many revisions. The letters had to be thick enough to be substantial in this 3D universe, but also not appear clunky. Once we got to the animation of the logo, however, our lead designer on this project, Luis Gonzalez, had it all wrapped up.


cine bingo graphiccine bingo graphiccine bingo graphiccine bingo graphiccine bingo graphiccine bingo graphiccine bingo graphiccine bingo graphic



Rick CastanedaRick Castañeda
Los Angeles, California USA

After majoring in Creative Writing at USC, Rick co-founded Psychic Bunny, a hybrid medio studio in downtown Los Angeles. His short films have been to SXSW, Japan, Canada, and soon, Romania. Rick's newest web series, "Coma, Period" has also just been launched. You can find him in COW forums for After Effects and related plug-ins, as well as posting offerings in the COW's job forums.



Find more great Creative COW Magazine articles by signing up for the complimentary Creative COW Magazine.



Related Articles / Tutorials:
Adobe After Effects Techniques
After Effects: Animated Guitar Strings with Plexus

After Effects: Animated Guitar Strings with Plexus
  Play Video
Using Rowbyte Plexus (the 3D particle system plugin for Adobe After Effects) and Trapcode SoundKeys in After Effects, Gardy Raymond demonstrates how to create animated guitar strings that distort in time with the music.

Tutorial, Video Tutorial
Gardner Raymond
Adobe After Effects Techniques
IK Character Animation: Walk to the Beat 2: The Walk Cycle

IK Character Animation: Walk to the Beat 2: The Walk Cycle
  Play Video
In this second tutorial on animating an IK character Andrew Devis shows us how to create and refine a walk cycle with our IK controlled character such that it walks in time with the music we had set up in the previous tutorial.

Tutorial, Video Tutorial
Andrew Devis
Adobe After Effects Techniques
Character Design and Animation in AE: Part Two

Character Design and Animation in AE: Part Two
  Play Video
In part 2, Rob Mize presents the After Effects work flow he uses to bring to life the character created in part 1. By keyframing shape paths, Rob demonstrates how we can not only animate the character's features, but her speech as well.

Tutorial, Video Tutorial
Rob Mize
Adobe After Effects Techniques
The Beauty of AE Shapes: Top 10 Features Countdown

The Beauty of AE Shapes: Top 10 Features Countdown
  Play Video
Rob Mize offers his Top 10 Countdown of the features that make AE shapes such a versatile compositing tool. Rob highlights the functionality of these features and demonstrates just how practical shapes can be in your production efforts.

Tutorial, Video Tutorial
Rob Mize
Motion Graphics
Neat Video: Removing Noise and Grain from your Footage

Neat Video: Removing Noise and Grain from your Footage
  Play Video
In this video tutorial you will learn how to use the Neat Video plug-in for multiple applications. Although demonstrated in After Effects, the work-flow is essentially the same for all these applications: After Effects, Premiere Pro, Final Cut Pro, Motion, Nuke, Fusion, Vegas Pro, etc. This powerful but simple to use plug-in can clean up noisy footage by applying a sophisticated and advanced algorithm to work out what's noise and what's details in your footage and then remove just the noise. This is done by profiling the noise properties in an area of a video frame without visible features. Once the noise has been profiled, Neat Video is guided by this profile to reduce and eliminate noise while not touching the video details. Although mostly automatic, Neat Video still leaves you with total control over the amount of filtering you apply and even offers optional sharpening (without sharpening the noise) should you wish it.

Tutorial, Video Tutorial
Andrew Devis
Motion Graphics
The Modern Guide to Nonlinear Editing and Living

The Modern Guide to Nonlinear Editing and Living

In this article from the Creative COW Magazine, Tim Wilson discusses nonlinear editing and our ability to create meaning from our experiences that changes everything.

Editorial
Tim Wilson
Motion Graphics
A Non-Linear Career

A Non-Linear Career

An FX veteran's unexpected, non-linear career path, from puppetry to painting, to ILM and beyond, offers insights into the art and business of film creativity - and a killer reel.

Feature, People / Interview
Tony Hudson
Adobe After Effects Techniques
Media Management Nightmares? Game On!

Media Management Nightmares? Game On!

Here's how one team turns 14 hours of raw footage on the latest games into a 30-minute TV show every week, 40 times a season. In this Creative COW Magazine article Dustin Lau discusses some tricks for high end digital media management.

Editorial
Dustin Lau
Adobe After Effects Techniques
Improvising Visual Effects

Improvising Visual Effects

On-set circumstances changing fast? Improvise! In this Creative COW Magazine article Mark Allen discusses how he overcame the complications in a recent short film production by improvising the visual effects.

Feature, People / Interview
Mark Allen
Adobe After Effects Techniques
Ask Bob and then stand back

Ask Bob and then stand back

If you don't want to know, don't ask. Bob Zelin is one of the industry's straightest shooters, and he'll tell you how he's seen things work during his 30+ years in the broadcast trenches.

Feature, People / Interview
Bob Zelin
MORE
© 2016 CreativeCOW.net All Rights Reserved
[TOP]