One of the best ways I have begun to understand and communicate with game designers is by adapting the best practices I’ve learned from 2d art into the realm of games. The most useful art techniques aren’t so much rigid laws as they are new ways to get you to honestly look at what it is you are creating and communicate why it is or isn’t working. They are methods to keep you from becoming myopic and getting you to see your creation from new angles in the hopes of making it feel truthful. When trying to pitch an idea or new take on a part of the game I am working on, this ability is crucial.

Be it the idea of regularly stepping back from your creation, working general to specific, or even the 12 principles of animation, each can translate almost 1:1 towards game development. But there is one best practice that hit me like a bolt of lightning when I learned about it in art school. So much so that it became the first thing I looked for or noticed when critiquing someone’s work. Yet, I hadn’t before tried to relate it to game design.

Tangents

There are multiple ways a tangent can occur, but what it boils down to is when two objects on different planes, when displayed in a 2d manner, share the same edge line. This causes the eye to lose any sense of depth in the image, resulting in an optical illusion that flattens out that area of the image.

I have adapted a drawing of mine to illustrate what a few different types of tangents look like. Up first is the original drawing in which I was mindful of tangents.

Here now is a version that has more tangents than a Foghorn Leghorn monologue.

At first you might not see much difference, but I’ve highlighted many of the problem areas, doing my best Hollywood plastic surgeon impersonation.

The circles denote places where two object’s contours collide next to one another (such as his right heel against his left leg) or even share the exact same line (such as the right leg’s quad leading into the front of the groin). These create the illusion that instead of one being more forward or back in space, each now reside side by side because they share the same edge.

The arrows highlight places where contours are drawn in parallel to another close by (such as his right upper arm) essentially creating a flat pattern or shape, instead of a volumetric form.

Also notice that these can apply beyond the just the character’s own internal space, but also with the background and the picture frame, such as with his right toe sharing a contour with rock and his left foot butting against the bottom edge of the picture. All of these may be subtle, but each weaken the structural integrity of the drawing the same way being slightly off key can weaken a song.

Applying Tangents to Game Design

 

Think of your game’s mechanics. Is there one that is more important than others yet it is often overshadowed by them? For instance, you are making an FPS in which kicking open a door feels more powerful than the melee attack. Most likely opening a door isn’t as viscerally important as being able to attack in close combat, so you have now created an edge case between two separate actions of different importance competing for the appropriate attention. Maybe you are making a 3rd person game where the roll/evade mechanic moves at a faster overall rate of travel than the run. When the player now rolls through the entire game, you have created a tangent between those two movement mechanics and which should be in the foreground of player movement, and which should be in the background.

The same can be said of the world or characters in your game. Is your main character’s abilities or personality getting lost or becoming redundant next to an NPC’s? I know I was taken aback in Mario Kart Wii when each driver no longer possessed stats, but instead they were assigned to the vehicles. All the characters, which I had previously identified with based on their differing playstyles was lost, creating a tangent amongst all of them. What about primary vs secondary items or weapons? In Assassin’s Creed I never feel a need to change between all of Ezio’s weapons beyond just wanting to look at some new animations. The edge of each weapon’s purpose is shared from one to the next. All are equally useful and as such none really stand out. Tangents are the mortal enemy of depth.

The idea of core and secondary tenents are something that every developer is aware of, but defining where one can stop and the other begins can become tricky and is often the victim of feature creep, wanting to make every feature overpowered and awesome. And that is where you begin walking into the minefield of tangents.

Avoiding Tangents

This goes hand in hand with the animation principle known as staging. A great way of finding out the strength of your staging is by creating a silhouette  of your creation to find out if it can read in its most basic form.

free 3d model to demonstrate the power of using silhouettes. Notice how each part of the pose can read well enough when its shaded, but in silhouette the character’s right thumb touching the body flattens out any forward depth the arm has. Also notice how his back left arm appears shorter than the other arm because the elbow is not staged in a way that it breaks up the overall arm shape. The back ear can also be mistaken for the character’s eyeball since its shape and location matches where the eye might be. All of these add up to a feeling of flatness, even in the shaded model.

Tangents are something you need to be aware of when laying out the overall vision and then again when you are polishing and adding in the final details. Define your main components early, like you would lay out a drawing. Think roughly how they fit together, and when two begin to butt too close to one another, either pull them apart or allow one to overlap and cover the other. It is when you allow both to do the same thing that you create a tangent. Even worse is when you create arbitrary instances of one working over the other which results in a weird Venn diagram style tangent.

It is then important when polishing up each section that you stay aware of everything else that is going on around it. Be aware that adding in a new detail or function could create a tangent with something else in the game. If so, you then either decide how to move them apart, or which is more important and supersedes the other. Which belongs in the foreground and which should fade into the background is something the player should inherently feel while playing the game.

Like all art however, tangents aren’t an absolute, just a best practice. There are certainly artists that use tangents to create their own unique visual language, leveraging the optical illusions they create to attract the viewer in new ways. I’m sure the same can be said about using tangents to create a complex game system with a high barrier of entry to attract a specific audience. Or to create an unreliable narrator style mechanic to challenge the player. But both would take a masterful touch to pull off without feeling broken. Know the rules before you break them.

Much like adapting other artistic principles to game design, a lot of this is second nature or part of another rule game designers are more likely to use. But when artists can begin to take the terms they already know, and can communicate them in a ludic nature, a greater understanding across disciplines can flourish.