Composition in gaming

As video game designers it's important that we appreciate both modern and classical standpoints on aesthetics, although classical techniques are of more practical benefit to us as artists and designers. We can begin by examining the root of visual design, in the form lines, shapes, and volumes.
Because reality is so visually complex, professional artists conceptually reduce objects to simple lines, shapes, and volumes, to simplify the task of rendering reality. This abstraction is something that is familiar to 3D digital artists working in such programs as Maya or 3ds Max, where each object -- whether it's a figure, an environment, or a prop -- will start its life as a primitive shape. Aside from the practical benefit of simplification, these shapes have been consistently associated with the following aesthetic concepts throughout art history:

• Circle: innocence, youth, energy, femininity
• Square: maturity, stability, balance, stubbornness
• Triangle: aggression, masculinity, force

Why we associate these shapes with their corresponding aesthetic concepts has to do with our real-life experiences, and the sense of touch. As kids, much of how we understand the world around us is first learned through touch. By feeling our way around and comparing textures, we quickly develop a mental shorthand for visually assessing the general characteristics of objects based on experience.

 

Picture the above three wooden objects -- the sphere, cube, and star -- placed on a table. Now imagine shaking that table. The round sphere would begin rolling around -- demonstrating its dynamic properties -- while the cube would stay in place. Now imagine somebody throwing the sphere and star towards you for you to catch. You'd instinctively hesitate to catch the star, even if you knew it wouldn't harm you, based on your learned response to sharp objects, in contrast to soft and round shapes.
Note that a curved line can be represented as a circular shape, or spherical volume; a straight upright or horizontal line, as a square, or cube; and an angular line as a triangle, or pyramid. [For convenience, I will refer to each group by its shape].



The dynamic curves of Disney's logo, which references the circle, are echoed in the curved pattern of a beachside promenade -- encouraging us to visually and physically experience the objects in a dynamic way.
The upright lines of the square give us a sense of stability in the form of pillars fronting the National Gallery in London; and echoed in the straight lines of the Range Rover, designed to elicit feelings of safety, and sophistication.
While the edgy triangle is embedded in the logo of thrash metal band, Anthrax; as well as Frederic C. Hamilton building in Denver, USA; and the aggressively sporty lines of the Lamborghini.

  

Lines, Shapes, and Composition in Traditional Art 
Classical composition is an important application for primary shapes, employed by the Old Masters to influence the aesthetic qualities of an artwork. What is classical composition, and why is it such an important artistic tool?

Classical artists would compose their paintings upon a system of lines that were designed to guide the viewer's eye around the image. These line-based compositions helped to organize elements in a painting -- making the image easier to read. But, as we know, primary lines and shapes also have an aesthetic value, which relates to a composition's second purpose.

Diana and Her Companions (c. 1655), Johannes Vermeer

Massacre of the Innocents (c. 1611-1612), Peter Paul Rubens

Character Shapes and Character Development
Now we will look at how these shapes can help us make sense of various character designs in the context of dynamic composition. The characters in Nintendo's Mario games make for great examples for this application.

Nintendo characters from left to right: Mario, Luigi, Wario, Bowser, and a Goomba 

How would you describe Mario's personality? Perhaps: dynamic, youthful, positive. It's therefore no surprise to find that everything about Mario's design is based on the circular concept -- from his spherical torso, to his round moustache.

Luigi's supportive, brotherly personality can also be evidenced in the verticality of his figure, which references the rectangle in contrast to Mario's round shape. While Wario -- and almost every enemy within the Mario universe -- is aligned to the aggressive triangle.

In actual fact, what we're looking at is the same character! The artists at Nintendo have simply taken Mario's body and dialled the forms to be softer or sharper for different aesthetic effects based on the circle (Mario), square (Luigi), and triangle (Wario).

Character Shape Versus Environment Shape

 A character's surroundings are a key part of dynamic composition because the environment normally takes up much of the visual frame. (Please note that environment here also includes secondary characters and enemies.) We can respond emotionally to characters based on their shape and animation alone, however it's only once we see characters in an environment that a narrative emerges.

The illustrations above represent a character (purple) in an environment (green). A circular character in a circular environment (top-left) exhibits a sense of harmony because the character's shape is echoed in its surroundings. The echo gives us a sense of home, suggesting that here is where the character belongs. We also get a sense of harmony if both the character and environment are square, or triangular (lower-right), although the change of primary shape gives us a different aesthetic sensation.
We get a sense of dissonance when character and environment shapes contrast each other. A circular character appears threatened when placed in an edgy environment (top-right); while a triangular character appears the threat in a soft and rounded environment (lower-left).

Lord of the Rings Trilogy (2001-2003), directed by Peter Jackson, New Line Cinema

 These concepts of harmony and dissonance can be seen in the Lord of the Rings Trilogy, where we have the good-natured Hobbits on one side of the shape spectrum of emotions. Everything about them references the innocent, youthful circle: from the curl of their hair; their rounded shoulders and shirt buttons; to the round Hobbit holes; and even the curves of the landscape. At the other end of the shape spectrum we find Sauron, who is aligned to the aggressive triangle: from his sharp fingertips; to the triangular volcano on the landscape.
This contrast of primary shapes allows us to reduce the story of Lord of the Rings to an abstract visual narrative using basic shapes, which sees the round Frodo and Samwise leave their round home to journey to a threatening, angular landscape, before returning to the safety of home.

Super Mario Galaxy (2007), Nintendo

As with the Lord of the Rings film trilogy, the Super Mario Galaxy series of games can also be reduced to an abstract visual narrative. We have the spherical Mario in his spherical world filled with triangular enemies. It's the player's role to help Mario clear the galaxy of triangles to restore a harmony between Mario and his home environment.

Journey (2012), thatgamecompany

 Journey is a great example of character-environment harmony using triangular forms, which are echoed in the playable character's shape and throughout the landscape. Interestingly, the non-aggressive nature of the game's experience could have been rendered using sugary, rounded forms, but the game's design is all the better for going against conventions by creating a contrast between the character's edgy form, and its delicate movements and jump arcs.