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.
Process
When working on Powerpuff Girls Flipped Out, my responsibilities included animating characters, creating 3D backgrounds, producing the opening cinematic video, designing visual effects, animating U.I. assets for menu flows, and more. To animate characters for the pipeline, I followed a typical workflow, which is illustrated below.
Character animation pipeline for Powerpuff Girls Flipped Out.
Before breaking down the concept for rigging in After Effects, I would receive a 2D handoff along with a detailed description of the required assets. Once the rigging and scene setup were complete, I would proceed to animate the required clips and preview the animation for our Director and Art Director for approval. After approval, I would export the animation to XML files along with the character assets and set up the animations for use in Unity.
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.
Loading screen preview video.
Flow of title screen to chapter select I would be given from the 2D Art Department. From this concept art I would visually reconstruct, develop, and present my solutions.
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.
Title screen > play button > Buttercup phone sequence > chapter select > stage select > loading screen > tutorial start.
Early concepts of menu game flows seen in videos below.
Flow chart for Powerpuff Girls result screen animations.
Early concept of result screen “big win” animation clip.
In-game footage of stage clear > present select mini game > prize reveal > character upgrade > sticker equip > character upgrade > loading sequence > stage load.
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.
Extracting frames from animatic so I can time my scenes to match video duration.
Once the 2D artwork was complete, I would break down the concept art and set up the rigging in After Effects for animation. For cinematic sequences, I prioritized animating the characters' body movements first and then tackled the lip sync animation as a separate layer. While lip sync is important, it can sometimes be considered less significant than the overall motion of the characters, especially if the motion is captivating on its own. Once the cinematic scenes were approved by both our Art Director and Cartoon Network, I would compress and export the videos for integration into the game engine.