Serenastudio

Camp Bears

A Virtual World for Kids

Produced in 2011-2012, Camp Bears was the first real-time multiplayer virtual world on the iPad. Designed particularly for kids in mind, it featured beautifully illustrated woodland scenes with customizable bear avatars. Players could wander around the imaginary world and chat with other [real] players using predefined texts and emoticons, play logic games to earn coins, then purchase clothing and accessories for personal expression.



The Onboarding Process

Upon opening the app for the first time, users get to customize a bear avatar and give it a three-part name. In this case, my girly bear is called "Miss Fluffypaws." Throughout the virtual world, this will be the player's identity. Players are given 150 coins initially.



A Safe "Social Network"

With predefined texts and emoticons, players are able to communicate with other bears in a safe setting. We've seen bears work together to form bear pyramids, towers, and even "cliques" where 3-4 players were all wearing color-coordinated outfits. We did not anticipate this, but users found ways to interact with others on their own. It is important to remember that these are real-time interactions among players across the world, which makes the dynamics really interesting.



Mini-game: Cafe Cards

Players enter this game by clicking on the glowing coasters in the cafe. It is a classic memory matching game with six levels, in which you can try to beat your own PRs in terms of moves and time. Players earn coins from playing. Drawing everything for this game, down to the smallest detail (e.g. these baked goods), was a labor of love.





Mini-game: Snowboarding Bear

Players enter this game from the lodge, through the back door. Tailored toward kids who prefer action games over logic puzzlers, this accelerometer-based racing game fully utilizes the iPad's functionalities. For instance, players interact with the game in creative ways, such as "shaking" the iPad to make the avatar do tricks. As the player navigates the slippery slopes, he must also catch the stars, help the professor collect his missing items — all the while racing to the finish line before the avalanche overtakes him! We launched this game as a stand-alone app as well.






Mini-game: 4 in a Row

This classic "connect 4" type game is accessible via the pet shop, as the challengers are karate-trained squirrels of five different belt levels! The first one to win three rounds in a match wins! Featuring cute animations and generous monetary prizes, this mini-game is a user favorite. "4 in a Row" was launched as a stand-alone app as well.





Virtual Currency & Clothing

From playing the mini-games, players earn coins, the virtual currency of Camp Bears. Just as a child would trade in tickets at Chuck E Cheeses for rewards, kids can spend their coins for virtual goods, like clothing for their bears. To do so, they go into the clothing shop, Cubby Clothiers, and choose whatever they want from the shelf "catalog." Tops and bottoms can be color-customized and outfits are previewed on the right before a purchasing decision. If the player does not have enough coins for what they want, we'll let them know and they'll have to modify their choices. Because personal expression is a big deal, special items like hats cost a lot more and are harder to earn. Players are able to make in-app purchases for more coins, and we’ve also given out free coins in the past.



The "Heads Up Display"

The "head's up display", which we refer to as the HUD, is the "dock" or the "menu" of our app — the wooden tabs with buttons and information. I designed the HUD to be as non-intrusive as possible, leaving the bears ample room to walk around. As seen below, we went through a few iterations as we added more features and metrics to display. Though fully designed, some of these scenes and features never made it to the App Store.



Interactive Role-playing Games

In addition to the mini-games, we fully designed and implemented "interactions" where players could bake bread and make smoothies to set on the tables for sale or consumption. By doing such tasks, players earned experience (XP), health (if consumed), and coins (if bought by others). These games were highly interactive, as players had to drag and drop ingredients, mix batter in circular gestures, and roll the roller up and down to knead bread. Though these features never made it to the App Store, they were fun to storyboard and animate.



Sketching a Scene

Prior to Camp Bears, I wasn't a pro at using Adobe Illustrator, I was much more of a Photoshop gal. But after numerous iterations of pretty much everything, I can now produce a new scene within a few days by reusing elements we've already drawn, like foliage and mountains. That's the beauty of Illustrator. Considering that there was one other artist, we shared all created assets to maintain consistent visual branding throughout the entire game.



1. Layout

2. Finalize sketch

3. Outline and fill

4. Add mesh gradients

5. Add detail & background

6. Add final touches


Even after that final screen, I had to make edits to fit our current needs, such as close off the right path and take out the middle island/patch of grass. I also added signs to denote what the buildings were. In a newer version, we even animated a few rocks, plants, and items to give life to the world.


Final Thoughts

Camp Bears was a beautiful product, inside and out. From a visual perspective, it was gorgeous. All of our scenes were hand illustrated on Illustrator, down to each leaf and flower petal. We didn't just keep solids one color, we added gradients and textures and even considered details, like universal lighting. (This was before "flat UI" was a thing.) From a design standpoint, it was observant and thoughtful. Most game avatars move around the screen from one angle or simply walk in two directions (with one reflected). We wanted ours to look natural, so we modeled our bear in Blender 3D and wrote scripts to export it in as many perspectives as we wanted. We settled with eight. We always kept our young audience in mind, so actionable objects glow, close buttons for modal boxes are extra big, and many things are color-coded. We really tried to utilize the iPad's touch capabilities and accelerometer for an immersive, mobile experience, along with the right jingles and sound bytes.

From a technological standpoint, it was ingenious and innovative. Our game supports real-time interactions among players across the world, even over 3G. If someone in China took a step right, everyone else in the virtual world could see that avatar move. If someone changed its bear's shirt color, everyone else would notice. Bears from various places could talk to one another with our predefined set of chats and emoticons. If fact, they did so while looking cute and unique (instead of being just a screen name in a chat room). We divided bear sprites into principle components, so that each avatar's personal look could be composed of a linear combination of components, ordered by their depth or z-index. Therefore, a bear could be this shade of brown and wear that hat, this shirt, these pants (in any colors we assigned programmatically), with really efficient rendering and the proper layering. We even created a synchronization tool to sync assets like rooms, sprites, objects on the client side in order to update on the fly, without having to submit another release to Apple and wait for re-approval.

Even though I'm sad we couldn’t spend more time on Camp Bears, I'm still proud of what our small team of three engineers and two designers has achieved in seven months.





Above is our website for Camp Bears, which I designed and developed within two days.

Project Date

2011-2012

Responsibilities

UI/UX, visual design, illustration, branding.

Notes

No longer available in the App Store.