Visual Movement & Level Flow

An experiment in applying the rules of visual flow into paper map design.

May 6, 2016

3 Min Read

This blog post was originally published on Ryan Darcey's blog, Making Moves.

During my second year at LucasArts, I was fortunate enough to land a spot in one of their continuing education classes on photography taught by ILM veteran, Joel Aron. In addition to furthering my passion for the art form, I learned a lot about composition and visual movement. In a previous post, I discussed how developing a paper map palette helped create some unique designs during the development of Star Wars: First Assault. In addition to this practice, I tried incorporating what I learned about visual movement in my photography class to my paper map designs with the hypothesis that visual movement would translate nicely to player movement in a level. Sound weird? Lemme see if I can make sense of it for you.

WHAT IS VISUAL MOVEMENT?

First, let's review exactly what visual movement is. Instead of me trying to stumble through my own definition, here's one I pulled from the internet that does the job.

In fine art, visual movement is used to guide the viewer through the piece. Lines, shapes, color, depth and hierarchy can all be used to guide the viewer from one point to the next – at a glance. Visual movement is more commonly known in the graphic design world as ‘flow‘.

Also, since I'll mostly be referencing composition's influence on visual movement, or flow, let's make sure that's clearly defined..

In the visual arts—in particular painting, graphic design, photography, and sculpture—composition is the placement or arrangement of visual elements or ingredients in a work of art, as distinct from the subject of a work.

Traditionally, great composition will conform to the rule of thirds or the golden spiral. So, maybe if my paper map does, too, then there will be great player flow through the level? Only one way to find out!

"GOOD ARTISTS COPY, GREAT ARTISTS STEAL."

That's Pablo Picasso for you, and if he's not above stealing, neither am I! So, I collected images of some classical paintings that have really strong composition and I started leaning heavily towards Vincent van Gogh's landscapes. There was just something about these paintings that made them instantly shapeshift into paper maps in my head. Here's a quick sample. Maybe you can see what I'm talking about?

Not on enough drugs to make the leap yet? How about these pieces from Hiroshige? I think it's a little easier to project a paper map onto these images. Also, turns out Vincent van Gogh was heavily influenced by Hiroshige's compositions.

You with met yet? How about we choose one of these images and put my hypothesis to the test.

IF (GOOD_VISUAL_FLOW == GOOD_LEVEL_FLOW) THEN...

For my first attempt at exploring this process, I chose Hiroshige's Plum Park in Kameido. It's the one in the middle just above. With a quick flip of the image and a day or so of hammering out some details, here's where I landed on this Payload paper map.

So did it work? Honestly, I don't know yet. This is as far as I got. Star Wars: First Assault never shipped and I didn't have a chance to explore this process on Halo 5: Guardians since I solely focused on Systems Design. Do I think it'll work? Yeah, I do, and I'll let you know for sure when I ship my yet-to-be-announced indie game :) Maybe you could beat me to it, though? Holler at me on Twitter @Ryan_Darcey if you get a chance to try this out yourself!