Powerpuff Girls

The Powerpuff Girls Flipped Out

This game had a unique requirement where the user could change game modes by flipping their device during gameplay, from landscape to portrait mode, which meant that every asset had to be created and considerate of both orientations. The "Sugar" mode activated a puzzle game that was playable in portrait device orientation, while the "Spice" mode activated a brawler game in landscape orientation. Each mode presented its own set of challenges, such as setting a different tone between the modes of gameplay. To address this, the puzzle mode playable character animation in a more relaxed style, while the brawler mode had the Powerpuff girls drawn in dynamic action poses. I then added motion that reflected their posture's tone.

A nice writeup about the game can be found here, by Kotaku.

User Interface

I had the opportunity to animate various screens and sequences for Powerpuff Girls Flipped Out, including the loading sequence, title screen, user flow, and tally screens. The process began with a review of concept art and a detailed explanation of visual operations and flow. From there, I would strategize how to create the necessary assets and animations to work seamlessly within the Unity game engine, always keeping a minimalist computation approach in mind. Once the assets were assembled and animated, I would generate previews for sign off from our Director and Art Director. If approved, I would package the assets into a prefab and send them to programming.

The video showcased on the right-hand side features gameplay footage of the final product for Powerpuff Girls Flipped Out. As seen in the footage, the title screen was a combination of 2D and 3D objects. The sky in the title screen changes from a blue sky to an orange, speed-line looping screen with Buttercup's phone appearing once the user hits the play button. Once Buttercup activates her GPS-app, the chapter select loads, and the player selects Townsville, activating the stage select menu. Initially, only Stage 1 is available, which the user selects, followed by a loading screen sequence before transitioning to Stage 1.

Character Animation

The majority of animation work for Powerpuff Girls Flipped Out was completed using After Effects. Drawing inspiration from the show's existing animations, I aimed to recreate a similar feel for the game. Personally, I find it enjoyable when games based on popular intellectual properties include references that enhance my overall experience and meet my expectations for the product.

Planning Animation

• Establish character attributes

  • Attitude

  • Weight

  • Speed

  • Strength

  • Sound

• Establish a hierarchy of movements

  • Blocking animations

  • Timing

  • Polish pass

Cinematic Animation

I recall that working on the Powerpuff Girls cinematics was a smooth process due to our established workflow. It would begin with the Art Director and Director creating the cinematic animatic, which would then be approved by Cartoon Network. Next, I would receive the animatic to create a shot list and determine the number of frames required for each shot. This helped me gauge the amount of time I had per shot to convey the intended action. While the 2D Art Department worked on final art for the scenes, I would set up the scenes and folder structures in After Effects.