Saturday, April 29, 2017

Composition in thirds

A common practice in both photography and art is to mentally divide the composition into both vertical and horizontal thirds when arranging elements, and using these thirds to loosely inform the placement of certain elements. It's common to see objects of interest placed around the intersection of two of the lines, for example, or to set one's horizon line along one of the lateral lines. This scene from Beneath a Steel Sky shows an interesting composition in which the vertical divisions in the composition run roughly down the first and second thirds lines, dividing the picture up evenly, and the placement of the walkway is along the second horizontal third.

The junction of two thirds is an excellent placement for the cockpit of this craft in Space Quest 4 - it's clearly the most interesting object in the scene. We can also see that the landscape is nicely divided into thirds vertically - the top third is sky and distant rock formations, the middle third is the flat path we walk on, which basically doesn't push beyond these lines, and the bottom shows the supporting rock structure and other stony features.

In this scene from Full Throttle we have two focal points - a door that we have to get through and a fuel tower in the distance that we're trying to reach. Here both are placed on opposing thirds - the tower on the intersection of the first thirds, and the door on the second thirds. This balances them both nicely - putting both on one side of the image, or both at the top or bottom would make the scene's weight feel shifted away from this even placement.

This shot from Quest for Glory 3 shows a similar idea but in an opposite configuration - the placement of our hero is around the bottom left third, and the placement of the throne and its occupant is centred around the top right third - even wrapping around it in an L shape that leaves most of the top middle third free to show the throne. Notice also that the pillar runs along the left third - in fact, the whole image feels like it's rather neatly divisible into thirds.

In this shot from Space Quest 5 we can see something similar - not only is Roger's face placed right on the top left third, but the surrounding landscape appears to have been composed into neat thirds. The right third has an organic pillar running down most of the way, ending two thirds of the way down, the bottom left third is take up almost entirely by another organic pillar's descent, and the middle third is reserved for the distance (and another figure, in a different colour).

This backdrop from The Dig also has stone features dividing the scene - the left and right thirds taken up by tall stone structures - as well as a sky that takes up the top third, but also here the centre third has been lit up warmly compared to the structure around it. This entire scene may have been actually drawn with a grid of thirds, so neat is the composition.

I get the same feeling from this scene in Kyrandia 2 - not only is the haystack placed around the bottom left third, but the top of the stack fills the middle third, the bottom (and its shadow) the bottom third. The top left third seems to be all cliff and trees, with the top left third trees and sky, and the top middle third a mix of all three in an interesting way. The path exists in the bottom third, with a fence running right along the third line, and the forest on either side of the middle third changing right around the third lines. It's not possible to know for certain if this was drawn with a grid, but the image certainly benefits from the clean, balanced composition.

This shot from Simon the Sorcerer feels the same - the owl on the top left third, and the land, trees and sky around it divided neatly into thirds. Each third here, too, feels like it's own little micro-composition, making this composition somewhat reminiscent of the layouts of traditional landscape painters, even if the actual execution is more whimsical here.

The same is true here in King's Quest 6 - each third of this scene seems to contain a very specific element - the sky in the top left, then a small plateau in the top middle and a more distant forested hill in the top right. The middle left has a wrecked ship and stones, then a short cliff and path, then the curving edge of the path and a shrub. The bottom left is sea and wreckage, then the main stretch of winding beach, and then finally a grassy mound in the bottom right. It's fairly neatly divided among these thirds, despite the shapes still feeling organic and varied.

Something I particularly like in this scene from Willy Beamish is how lighting helps divide the composition. Notice how the tree on the right side of the image is in shadow in the top and bottom thirds, and lit in the middle, how the fence is shadowed in the right and left thirds, how the shadow of the centre tree's canopy sits right along the third line. Probably my favourite feature is how dynamic features cut off the bottom third - fence and bushes in the bottom left, shadow in the bottom middle, and flowers and wheelbarrow in the bottom right. The bottom third feels like it's been divided extremely neatly along this line, but the varied nature of the shapes and features doing this dividing means it feels much more natural.

This scene from Full Throttle uses lighting nicely too - the bottom third is dark, with the division along the third line being highlighted in the warm yellow coming from a light source that stops around the left third division. It's a simple trick, but helps to define this section of the composition nicely, and does so in an unobtrusive way.

It's interesting how very organic forms can be grouped into neat compositions, too. The rounded hills of this section of King's Quest 6 seem very loose and rounded, but when viewed against a grid of thirds, it's clear that they have a clear, fairly even cutoff point along the first third line - almost as straight as the stone pathway that ends right along the second third line. Notice here, too, how the knight pieces group with the sections of fence to block in the left and right centre thirds nicely.

One last point of interest to me is the idea of how we view a composition. In the standard gameplay view of Dune, it's clear where the scenery is and where the interface is - and here the composition can be considered to be divided up into thirds extremely neatly. The bottoms of the banners, the floor, the pillars - it's all divided up quite squarely, with the interface not part of the scene.

When talking to a character, however, the scenery is obscured. This seems to bring the interface into the composition, with the actual scenery just being a framing device. This being in mind, I like to think that we can measure the composition of a scene across the whole interface, not excluding the bottom section, and of course we can see that the most important part of any character - the eyes - is right on the top left third here. An interesting consideration, if nothing else.

Thirds in composition aren't a perfect way to get a strong layout, nor are they a necessary tool, or even usable in every composition. They are, however, visible in many, many scenes, and a great way to help balance a composition out evenly. Rather than adhering to the 'rule of thirds' for every composition, I think it's mostly important to be aware of them, and know that many artists do use them, and that their use has helped artists with their compositions for centuries, yet still remains effective today.


Mark said...

hey mate, love the blog. Super interesting to see all these graphics broken down in this way. Graphics for your own game look
pretty sweet too.

Ben304 said...

Thanks Mark, glad you're finding these posts interesting! :D

Rubén López said...

Thanks for the post, very enlightening!

By the way, how do games usually apply the thirds rule when there is scroll?

For example, in presence of horizontal scroll, it is easy to still split vertically in three chunks, but horizontally not so much, since you never know which slice of the background might be visible. And aligning things to the intersections becomes impossible, or is there some trick for that?