What can we learn from the techniques of the Old Masters to help us create more varied and emotionally meaningful gaming experiences? And how must we go about adapting these classical art techniques when we add video gaming's unique element of interactivity?
To explore these questions, this article examines the psychology of shapes and dynamic composition, which are the focus of a series of talks I recently completed around North America (kindly supported by Gbanga, Swissnex, and the Swiss Arts Council, Pro Helvetia). I firmly believe that dynamic composition should be the topmost consideration for developers wishing to shape the emotional experience of their video games. Dynamic composition brings together several topics from my book -- Drawing Basics and Video Game Art: Classic to Cutting Edge Art Techniques for Winning Video Game Design -- and is chiefly composed of four elements:
- Character shape
- Character animations
- Environment shapes
Video games rely on the very same design principles -- perspective, form, value, etc. -- which classical artists employed to create the illusion that the television (or canvas) is a window into an imagined world. These design techniques also serve a second purpose equally applicable to game design, which is their aesthetic value, and application in visual narratives.
A better understanding of traditional art techniques, and video game aesthetics, will lead to richer gaming experiences, and may require a rethinking of established studio structures and the collaborative roles of game designers and artists. Because, as we'll see, making bridges between classical art and video games has implications for game designers too.
We'll explore how these elements work together aesthetically, and finish by applying the techniques learned to game design. But before diving into dynamic composition we'll take a quick look at the basic elements of composition (lines, shapes, and volumes); their psychological affects; and their application in classical painting and composition.
The Psychology of Lines, Shapes, and Volumes
The art world has changed drastically over the past hundred years with the coming of Modern Art. Prior to the 20th Century, artists would follow a tradition of craft and design practice, which had been steadily evolving for over 2000 years for the purpose of communicating pictorial stories. What Modern Art did was to clean the creative slate by deliberately breaking with tradition and classical art techniques. This had the invigorating effect of freeing artists to explore individual styles and new forms of self-expression.
We now find ourselves in a culture that appreciates that you and I will respond to art in different ways based on our unique life experiences -- experiences that inform the way in which we individually interpret and give meaning to the world around us. The inherent ambiguity concerning interpretation is largely responsible for what makes the creative process and art appreciation so mysterious and personal. However the aesthetics of art weren't always studied from this perspective alone. Classical paintings had a definite purpose -- particularly in the context of religious paintings -- and were therefore crafted using design techniques that have a timeless psychological basis, and are therefore easier to define.
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].
As artists, we take advantage of our audience's real-life experiences and the sense of touch, and incorporate these concepts (often intuitively) into our artwork. See for yourself in the above illustration how, irrespective of the design discipline, the circle, square, and triangle, have been respectively integrated (from left to right) into logos, architecture design, decorative pavements, and vehicle designs.
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.
Try to imagine how each object would look if you were to switch shape concepts so that, for instance, the Disney logo was based on the angularity of the Anthrax logo -- a shape concept completely inappropriate for the brand.
These psychological associations with primary shapes allow us to orientate them along a shape spectrum of emotions, against which characters and objects can be measured.
The shape spectrum of emotions should NOT be used as a design formula -- but as a conceptual tool to assess artwork and identify problem areas.
The psychological basis of these shapes means that they are a timeless feature of art, allowing us to find relationships between seemingly disparate artworks, and better understand the aesthetics of video games. Let's take a look at how these basic shapes have been used in classical art to influence the viewer's emotions.
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
In the painting above, Vermeer has used a composition based on a curving line -- giving viewers a visual impression of delicate and continuous movement. Each element -- from the central figure's right arm, to the cloth on the ground -- has been deliberately placed and shaped to reinforce this round composition. Take a longer look at this painting and you'll discover many more composition lines echoing this concept.
Such line-based constructions were designed to be implicit -- the artist's hidden secret -- affecting viewers on a subconscious level. Viewers could then explore the painting seemingly at their own will, unaware of the composition's influence. The impressions these implicit pathways projected were capable of telling a visual narrative in themselves.
Now contrast Vermeer's painting with that of Rubens' Massacre of the Innocents (c. 1611-1612) below. Rather than use a system of delicately curving composition lines, Rubens has based his painting on angular lines to communicate the violent topic of the painting. Rubens has skillfully placed the majority of the male figures in the upper triangle, trampling the females in the lower portion of the painting. However the lines alone describe a collision of forces.
Take a moment to appreciate the complexity and details of both the Vermeer and Rubens paintings. The beauty of classical composition is that it enables artists to reduce complex images to more concise visual statements. Now imagine setting this complex arrangement of visual elements in motion, as in a typical video game, and a simple composition becomes even more necessary to deal with the increased visual noise.
The simpler a visual statement, the easier it is for audiences to engage with your artistic message.
Massacre of the Innocents (c. 1611-1612), Peter Paul Rubens
The type of composition an artist designs -- whether it's delicate or angular, for example -- should reinforce the emotional message of the artwork. Imagine substituting the compositional lines of one painting for the other, applying Vermeer's curved lines to Massacre of the Innocents, and vice versa. What we'd find is that each artists emotional intent would be significantly weakened, with Massacre of the Innocents becoming more elegant, despite its brutal theme.
The Baptism of Christ (c. 1448-1450), Piero della Francesca
The composition of The Baptism of Christ by Piero della Francesca (c. 1415-1492) aligns itself with the straight upright and horizontal lines of the square -- which is located in the middle of the shape spectrum of emotions. Although there are some curved lines within the image, it is dominated by the verticality of Christ, and echoed in the tree, secondary figures, and the horizontal lines of the white dove. This vertical motif is largely responsible for the impression of stillness that we feel when looking at the painting.
A useful analogy to understand the effects of composition is to liken the technique to intonation in speech. Irrespective of the words in a speech, the rhythm and tone of delivery can completely alter the emotional message of what somebody is saying.
Black and Violet (1923), Wassily Kandinsky
With the invention of the photographic camera in more recent times, the emphasis on line-based compositions shifted, as artists became influenced by the way in which the camera registered reality -- in terms of light and shadow shapes. Wassily Kandinsky (1866), who was very much a Modern Artist, did away with representational art altogether and yet his classical training meant he also appreciated the importance of composition:
"The content of a work of art finds its expression in the composition [...] in the sum of the tensions inwardly organized for the work."
- Kandinsky, Point and Line to Plane (1926)
Throughout art history, basic shapes and composition have been a primary artistic tool used to organize a work of art, and shape the aesthetic qualities of images. We should therefore find a way to apply this technique to video games. We have a conceptual problem, however, in translating classical composition to video games: the player.
The above paintings represent a static medium. Although society and cultural tastes change over time, the artwork and the experience of looking at a painting remains relatively unchanged. Not so with video games. There is no one single point of view in video games, because the medium's interactivity allows players to move within virtual environments at will. So how do we go about translating classical techniques from a static medium to the dynamic worlds of video games? The answer, as hoped, is very simple.
Finding a solution for translating classical composition to video games is made simple if we consider the basic components of the technique. Composition is nothing more than the act of combining parts or elements to form a whole. As you will recall from the previous section, the basic elements of classical composition are little more than lines and shapes. If we can identify where these elements are to be found pervasively in video games -- so that the player is always aware of them irrespective of where they are within the virtual world -- we can begin to define dynamic composition, as is applicable to video games.
The answer is revealed if we conceptually take the lines and shapes found in a classical painting, lay the composition down flat on the ground, and treat the image like a top-down map. The lines that we would implicitly trace with our eyes when looking at a classical painting, now become pathways along which we can travel through a three-dimensional environment.
Logo, multiplayer map, and in-game screenshot from the Gears of War franchise, by Epic Games.
The meticulous design that has gone into the Gears of War franchise is an excellent example of translating classical design concepts to interactive experiences. In the top-left we have the Gears of War logo that, just like every good logo should, embodies the experience of the game in one poignant visual statement. The artists at Epic have then projected the skull motif onto their level designs (notice the abstract eye sockets, nose, and mouth of the multiplayer map).
Conceptually this multiplayer map is very close to a painting, in that our eyes can trace implicit lines around the level's corridors without the ability to physically interact with the artwork. However video games go one step further, in that the projection of the skull motif also represents a three-dimensional environment -- visual lines on the multiplayer map, become pathways in a 3D virtual environment.
Pathways within an environment are only one part of dynamic composition. To fully understand dynamic composition, we must take into account the five elements in the illustration above, and their relationships to each other:
- Character shape
- Character animations
- Environment shape
- Player gestures
Player gestures are not so much a part of dynamic composition, which relates to on-screen images. However, video gaming's interactivity means that a player's actions are closely bound to the visual experience, and must also be considered in this context.
Over the course of the next five sections we will examine each aspect of dynamic composition, with the help of our primary shapes: the circle, square, and triangle. We will additionally examine the player's role in a video game artwork, before applying the combined knowledge to game design. We will begin with character shape, and simultaneously explore the narrative possibilities of dynamic character shapes.
Character Shapes and Character Development
The earlier section of this article explored the aesthetic sensations that we associate with primary shapes. In this section 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).
But what if Mario, Luigi, and Wario indeed represented one character that dynamically changed over the course of a narrative? The question relates to the way that we treat character development in video games.
Zelda: Ocarina of Time (1998), Nintendo
Take a look at the screenshots from one of my all-time favorite games, Zelda: Ocarina of Time (1998). The screen on the left depicts Link early in his quest, while the right-side image shows Link after you've helped him battle his way through many dungeons and large boss fights. How do we know that Link has grown in strength and ability during the course of this game? The evidence is not where most would expect to find it -- in the physical appearance of the character -- but in the user-interface. Link on the left has fewer hearts and a single sword equipped; and Link on the right has more hearts and many more weapons and gadgets.
While user-interfaces make sense to experienced video game players, those unfamiliar with the medium rightfully expect to see a visible change in the central character -- as occurs with actors in theatre and movies. Video gaming's treatment of character development is the equivalent of an actor verbally stating, "I am now stronger and more confident!" while his posture and behavior remains the same.
To create realistic and emotionally richer narratives we must begin treating video game characters as real people with a breadth of emotions. As the French Romantic painter, Eugene Delacroix (1798-1863), wrote on the topic of personalities:
"There may be ten different people in one [person], and sometimes all ten appear within a single hour."
- from The Journal of Eugene Delacroix
Lord of the Rings Trilogy (2001-2003), directed by Peter Jackson, New Line Cinema
Delacroix's remark extends to narratives and the fact that characters never start and finish in the same state. A narrative implies that a character has gone through an emotional change, which should be made visible for viewers to comprehend. Frodo's character in the Lord of the Rings Trilogy, performed by Elijah Wood, illustrates how dynamic body language communicates his character's mental and physical state: from mock indignation; to a fevered shuffle; panicked run; and an exhausted stupor.
Grumpy in Snow White and the Seven Dwarfs (1937), Disney. Sequence animated by Bill Tytla.
Disney animators from animation's Golden Age not only made a point of understanding the emotions of the character, but also understanding what the character is thinking. A character expressing its thoughts and motivations instantly appeared more lifelike.
The above sequence is featured in the must-have book, The Illusion of Life: Disney Animation (Disney Editions 1995) by Frank Thomas and Ollie Johnston, in which Grumpy has just received a good-bye kiss from Snow White. Notice how, from right to left, the aggressive angularity in his gestures soften to gentle curves as his temper dissolves.
Such dynamic character animations do appear in games like Resident Evil -- where the protagonist becomes physically impaired when poisoned or injured -- however this has more to do with communicating the character's health stats -- much like a user-interface icon -- than an emotional purpose.
Journey (2012), thatgamecompany
To date, the most successful game to express the playable character's emotions through physical gestures is thatgamecompany's, Journey (2012). In the opening sections of the game, the character has an upright posture and jumps freely and gracefully. But we witness a delicate shift in the character's physical state as we eventually guide it up into the storm where it begins to hunch forward against the pounding winds.
Perhaps thatgamecompany could have included character animations that communicate a sense of fear for the darker underground levels where the player is first confronted by a threat from flying Guardians. This may have made the final flight under blue sky even more cathartic.
The fact that players have a strong emotional empathy for their on-screen avatars will allow game designers to bring more emotional subtlety to video game experiences through increased use of dynamic character shapes. A character's shape can also be adjusted with a costume change; however, its physical posture is the strongest and broadest visual clue to their inner feelings.
This brings us to another aspect of dynamic composition associated with the character, and that is character animations in terms of jump arcs and lines of movement, which we'll explore in the next section.
The subtle gesture of a hand or movement of a character's head are animations which are relatively indecipherable at low resolutions, or when the character is in motion. Animations that are visually more comprehensible include character jump arcs and general lines of movement. Because character movement on this broader scale can be conveniently visualized as lines, we can consider how shaping such animations may affect the video game aesthetically.
When a player presses the jump button in the opening levels of Journey, the character jumps gracefully across the screen (as illustrated above).
The implied line that this jump arc creates -- made explicit by the character's trailing scarf -- is aesthetically aligned to the circular composition in Vermeer's Diana and Her Companions.
Watch the video below -- featuring, Journey, Superbrothers: Sword and Sworcery (2011), and Vanquish (2010) -- and picture a light trail behind the characters as each travels through its respective video game environment. Can you align the animations to the circle, square, or triangle?
You should find that the lines of movement communicate a variety of emotions ranging from delicate and dynamic (curved lines); slow and peaceful (straight uprights and horizontals); and aggressive (angular). In designing a character's movements it's vital to choose lines that complement the emotions you would like players to experience.
As with character shapes in the previous section, we also tend to design character animations with one style of movement used consistently throughout the game. Video games being such a dynamic medium, there's no reason why we can't design experiences that take advantage of the whole range of possible animations to communicate more complex narratives.
A game's camera movement relates closely to character animation -- especially in first person games where it becomes the primary tool for communicating the in-game characters state of mind. In a first person game, we must imagine that the camera represents the perspective of a living-breathing person, capable of feeling and expressing a whole range of emotions.
The video above illustrates two contrasting camera animations: the gentler camera of Halo: Combat Evolved by Bungie, and the aggressive camera of Epic's Gears of War 3. Halo gives the player a feeling of smooth elegance (more so in the earlier games), elevating Master Chief above the edgier, and aggressive movements of the enemy. While Gears of War has an edgy and aggressive aesthetic throughout -- implying that Delta Squad and the Locust Horde are on the same moral level as each other.
These examples highlight the importance of camera animations in the context of dynamic composition. Now that we have character shapes and animations covered, it's time to consider the character in relation to its environment.
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).