Fairly OddParents, Dexter's Lab, Powerpuff Girls…what do you call this style? CalArts? Flat? Nickelodeon and Cartoon Network of early 2000s? I haven't found a word yet. I studied the art of these three shows specifically for my indie game Trap Labs. The end result ended up being more of a blend between FOP and Dexter's Lab. PPG's style was a lot simpler compared to the them, more kindergarten… for lack of better word
This is Vicky's surprisingly normal room from FOP. It encapsulates a great deal about the style.
Asymmetry
This makes or breaks the style. Notice how nothing is of perfect shape. Shapes are always skewed, no parallel lines, no perfect squares or circles. Look at the floor boards, something that should be a simple repeating pattern but is instead unevenly distributed.
This is problematic for games because games tend to use tileable assets. Things like floors, walls, and over environmental assets tends to repeat to build up a scene. For Trap Labs it was extremely problematic because the maps and pathfinding are based on a grid system. So unfortunately, I must break the asymmetry rule for many assets. But all is not lost. It tends to not break the style as long as there is asymmetry within symmetry.
For example, the floor tiles are square, but the lines are not. In addition, they are rotated randomly as the level loads, creating random asymmetry. This is similarly applied to other traps and interactive tiled elements.
Ideally, creating the "perfect" asymmetry environment for Trap Labs is possible. It would require dynamic mapping of individual assets to their square alignment, and a complex mapping system to support this underneath. Hey, it's my first game. If things go well perhaps I'll do it for Trap Labs 2?
Environment Color Schemes
Vicky's room is in the violet color space. In fact, pretty much every room in FOP has a specific governing color. It applies not only walls and floors but also the objects in the room. Trap Labs follows this design philosophy. There are 4 phases in the story mode. Each phase has a distinct color scheme. Here are the early color studies for each phases:
The color studies needed to be established early during development in order to feel a sense of unity and establish consistent tone/mood throughout the game. Only after which you design the objects, traps, interactive game elements that fit this theme. What often happens I get excite about some specific object that I wanted in game before establishing the overarching theme. Then in the end the item doesn't visually fit, and the whole scene falls apart. A lot of time, objects and rooms looks great on their own, but when put together it doesn't work at all.
Here's are final results of the color schemes.
Every level in the story mode of the game is a trap obstacle in the middle of the room. The window scenery is particularly important. Not only does it need to work with the color scheme, it makes the scene more dynamic through the ambient animations because the player will be spending majority of their time here... dying. So having a pleasant window view is important :P
Various character clippings from FOP
No necks
LOL I bet no one noticed in FOP right? People rarely have necks, even when they do just smoothly flows into the body. It makes everyone look more cartoonish and humorous. For a more serious, "teen" show like Danny Phantom where character proportions are no longer so exaggerated, necks are a common place.
Ok it's not a key characteristic. But it's a funny segue into characters designs. They are more liberal as it gives them more personality. There are still rules one must follow otherwise the art goes off-style extremely quickly. For example, child proportions are more exaggerated with giant heads and small bodies, while adult proportions are more normal. All eyes are simple blobs. And unless a specific animation calls for it, they are always facing the side. Here are some of the original character designs in Trap Labs:
One common tactic to generate a character is to start from a "chunker" of simple shape. For example, a rectangle with Sheen the Teen. A triangle with Zayne the monkey. A long semi-circle with Olivia the grandma. Also notice how the designs deviate from the shows. The child character are more reminiscent of FOP designs while older people and animals are more reminiscent of Dexter's Lab. So the end result is more of a blend of the two styles.
That's all for now! There's actually a lot more to the style so if you have any questions just ask below. All art and animation in the game are made with Adobe Illustrator, Inkscape, and Flash/Adobe Animate. Everything is vector.
Now, it's time to plug my game. Trap Labs is a unique action puzzle that releases on iOS and Android TODAY!. Believe it or not it was inspired by StarCraft. There were these UMS maps called bounds that were based off repeating patterns. Just like StarCraft you can play online with friends for freeeeeee! (Ok I lied you get to demo a bunch of the levels for free. There are no ads and just 1 in-app purchase to unlock the full game. I'm not EA).
iOS - Android - Steam
Please support the game!
Meet the artists:
@kirakirakat
Freelance artist/animator that worked on Rick and Morty, and various indie games
@Mister_Crits
Freelance artist/animator that made Fairly OddFortress (look it up), and runs his own webcomic
@gruber_music
Juno nominated composer that created the vibrant soundtrack
@TrapLabsGame
Me, the creator of Trap labs. I make games and complex software. Secretly, I'm PART, the unibrow robot in the game. I don't actually have a unibrow but my eyebrows a extremely thick.