Game Environment Composition Techniques!

[astraldata]

Composition of gameplay environments, particularly of the 2d variety, is rarely ever discussed anywhere on the net, so I would like to to attempt to fix that by asking you guys to offer input on any composition techniques you use to design gameplay environments.

I personally use a modified application of the "value-planning" technique alongside consecutive thumbnails to design my environments.

If you have never heard of the term "Value Planning" before, here's what I'm talking about:
http://muddycolors.blogspot.com/2012/08/composition-basics-value-structure.html



Now that you're all read up, I'd like us to please post screenshots (multiple in the same level if possible) of where the concept of "value planning" is applied and executed well and then offer ideas on where or how the 'composition' could be improved or why you think it works as it is.

Let us also think about and discuss how we, as game artists, might even apply other traditional composition techniques in new ways to game environments (and the HUDs and characters that go on top of them) to achieve the same level of control over game environment composition that painters command.

As this is a concept I don't think many hobbyist pixel artists are aware of, it might be worth it to show example shots of games with a higher color-count (i.e. modern 2d games -- even mobile phone games -- rather than just games w/ pixel art) to give us some idea of possible ways and varieties of implementing composition techniques such as value-planning to games, but if you can find good pixel art examples, then, by all means, please post them!

--

One of the biggest issues I had when I first started learning how to do game art was trying to decide how bright or dark to make the characters, props, mid/fore/back grounds, power-ups, HUDs, and so on. This was because I knew that making any one of these aspects too bright/dark/dull/saturated could easily lead to distraction and/or unsightliness without the artist ever really knowing why.

In a painting, the artist doesn't have to worry about a HUD or the character sprite moving around or the screen scrolling to new areas that become uninteresting because they rarely change the basic white/gray/black setup defined in the first screen, leading to visual fatigue. The painter never has to worry about having an onlooker's eyes stay in one place too long or move outside the focal area of the painting because the skilled painter can lead the eye within his static frame's boundaries. To this end, the painter has total control over the eyes of the onlooker while the game artist does not -- this is due to the unpredictable camera positioning in the game world by the player. Suddenly, all the nice "look over here, this is the main subject of my painting" techniques seem to rush out the window in your typical action game, and almost everything you've ever learned about image composition follows it out that window for one simple reason -- there is no frame.


^{Thumbnails of portions of the level with proper values laid out might help with this!}

Let us discuss and show examples of all the specific ways how we might be able to give control back to the game artist when designing 2d gameplay environments (TopDown and SideScrolling) using the classical composition techniques such as "Value Planning" and so on in new and creative ways.

If you have an idea on how to apply these, or a neat technique of your own, please share it! I will share my techniques as soon as a few other people share theirs!

-astral

[wolfenoctis]

Great idea Astral 

Some examples of value planning from Abe's Oddysee:






I'm admittedly not an expert on composition but I think Saturation, level of Detail and and contrast are important considerations as well.

Edit: Nice article btw, Gustave Doré is one of my favorite artists.

[RAV]

Consider that the frame is the level map, and the eye is the player avatar moving in it.
You want to lead the player through the level just as you would the eye through the frame.
And the artist can give incentive for camera movement through the usual composition principles.

You have the logical frame of what forms one flow, there's relevance and dependency, a frame of interests, which becomes the frame of composition beyond physical screen border.

Important is that the leading objects of interest in gameplay should be the leading objects of interest in the art, and that this is communicated not only within a scene, but even from scene to scene. The artist can first translate the level's Priority of Interest into planning composition, maybe through value.

[Cherno]

There is an article about Left 4 Dead somewhere on the Net that describes how even though areas in a map can be large and offer multiple routes, in the end it leads from start to finish, and the next waypoint is more often than not indicated by specific colors and lighting; the doors into a building that leads to the next area will have a light above it, or have a burning garbage can next to it, to it immediately catches attention even in a dark street filled with zombies infected.

[astraldata]

@wolfenoctis
I completely forgot about Abe's Odyssee!! -- that game was brilliant in not onlly its value structure, but how it lit or dimmed the character for cinematic effect, all according to the feelings they wanted to evoke in the player for that particular scene. It's worth mentioning that they used the foreground and background playability to cinematic effect while you were walking on one or the other to show other characters' actions at a safe distance -- all without interrupting your gameplay. That game was genius. Thanks for bringing it up!

@Cherno
I'd like to see that article when I have some time. Sounds like a simple application of applying either lighting and/or movement contrast to draw the eye in the same way one might use a dot of higher saturation to draw the eye amongst more otherwise dull-looking colors. Not a bad technique to use movement and bright saturated colors (such as in the burning barrel of trash example) to draw the eye. That explains why you'd be able to see it through a crowd of moving people/zombies -- especially in an evening or night setting.

@RAV
To be quite honest, viewing a game level as one big frame was the exact way I first looked at composition of game environments for 2d games -- but then I had a thought -- if you've ever zoomed out and looked at the levels from any of the original NES games (for example, Super Mario Bros.), you'd notice that the levels look quite boring from an artist's perspective -- despite being very cleverly designed (after all, did you know the very first level of the original Super Mario Bros. game is a tutorial on how to play the NES? -- and you'd have never known it by just playing it.) -- there were only 3 blocks that made up the environment, a cloud and a bush that were identical, and a fence, hill, and tree to make up the entire overworld (and some seaweed stuff). To create the kind of visual interest to take you through 8 four-level worlds with that kind of tileset at your disposal required some clever tricks in how you paced your visuals.

This leads me to believe that doing a lot with only a little is of the utmost importance in level design and composition. After all, in a really catchy song there isn't a lot of actual] /variety/ in it if that song is destined to become an earworm ("B-b-b-bird, bird, bird. Bird is the word").

The mind thrives on repetition and rhythm, but without the appearance of repetivenes being hidden in something that seems, overall, a lot more interesting -- i.e. the harmony of that song's funny premise against that catchy tune, or in the case of the original Super Mario Bros., the wide variety of challenges you face across widely different layouts with well-paced visuals. So, in the end, that all-too-familiar idea of needing a frame with interestingly-painted backgrounds all over the place goes out the window in the face of a well-put-together 'tune' of repeating visuals like the original Super Mario Bros. game offered up.

[RAV]

The concept of using a limited set and repeating patterns is natural to Pixel Art, and the idea of a frame and composition never conflicted with that, like it doesn't with a level or song as equivalent. The difference however is that a piece of art is usually experienced in its whole at once, while games and music are a sequential journey (aside animation). But in a way, even the eye prioritizes visuals and undergoes a little journey, just a lot faster. And we have a wholesome memory and impression of experiences in retrospect anyway.

A good song has a greater "story" structure in which the sectional tune plays out its part, the tiles or tunes are still functional part of a composition of the whole. That for me is the level of game, song of album, or frame of animation, with every distinct smaller part in a greater sense and flow as a whole. That is the difference between random generated levels and custom designed levels. So for me a frame simply is a means of bringing order to the whole as much as in every part, than just a pile of things. And that this better definition to the experience is more enjoyable.

The question we have then is, how well can a designer's level be the artist's frame? And that depends on how well they can make their goals align. Since games exceeded the constraints of the first Mario, a lot more efforts have been put into exploring that, making a level a wholesome artwork in symbiosis to play design, instead of having the art just supply little building blocks, to be used for another creativity of different interest in the greater scheme of things. However, if we extend the understanding of frame beyond even a level but the whole game, you can see how artists have always tried to construct a greater meaning through the progression of different tilesets, and an overall unifying design direction. The maybe quickest way for the artist to give more unifying sense to the layout of assets today is through applying lights and layers. But even just selectively creating custom assets for the very most important key locations can give a lot of structure and character to a level made of repeated patterns otherwise. So there's plenty of compositional strategy to discuss in that as well. As much as the relation between aesthetic layout and functional layout of patterns.

The word frame has many synonyms, and I personally think that searching for a frame of operation makes more sense than not, it gives the artist more opportunity and purpose. It's a concept as basic as context or scope. The frame creates a workspace for the artist in the first place, without it there is nothing to work on. Well, actually, a missing frame in the greater scope just reduces the work frame to that of tile or sprite. But what the artist would seek is trying to expand the frame to work on. The patterns in macro and micro are not mutually exclusive. Finding working frames is the goal, because the frame is the solution, not the problem. The frame enables compositional technique to begin with.

[astraldata]

After studying your post more carefully, I see now that you were not referring to 'frame' as in relation to the level being viewed as a giant 'canvas' but were, rather, trying to imply that the 'frame' be percieved as an image in and of itself, whether that image, or 'frame', be a tile, a group of tiles, or an entire level, all depending upon the scope in which you're working at the moment to design.

To help others understand your suggested approach to 2d level design (from an artistic point of view -- not from a gameplay perspective, since there's plenty of those out there) a bit better, here's a more concise version of the approach you suggested (correct me if I'm wrong here!):

Find the type and number of independent drawings (e.g. tile-chunks) you need in your level design to create unique moments throughout the linear experience of the level, and fill out the rest of the level with less-important bits such as rocks, grass, trees, etc. (while periodically varying them with simple alternatives, or even simple lighting and shadow variations, in order to keep these areas from being too repetitive).

This is an excellent suggestion, and a very good formula that can actually transcend pixel-based or even 2d games when applied correctly.

In all actuality, games tend to consist of these micro-to-macro and macro-to-micro art assets, be they 3d, 2d, top-down, or overhead. Whatever the perspective, the same large-to-small and small-to-large progression rule applies.

Take Super Mario 64's levels as an example of the large-to-small / macro-to-micro approach:

Super Mario 64 -- Applying the Macro-to-Micro Design
Let's think of a game level like the ones in Super Mario 64. This is a game with almost completely custom everything in its levels. The micro/macro rule RAV hinted at still applies in 3d because there are still art assets / elements that are considered more "macro" -- such as the pyramid in the desert level -- versus the more "micro" and easily-overlooked elements -- like the sand dunes in that same level -- while some elements exist somewhere between the two -- for example, the quicksand portions of the level, which are both prominent, but also repetitive and used almost everywhere in the level that the designers didn't want you to go -- almost all gameplay objects tend to exist in this category, and therefore shouldn't be considered as part of the static level art design imo.

Something interesting to also note in that desert level though, is that roof-floor open-air structure with those columns, located on the right-hand side of the level by the pokeys (cactuses). This asset would be more "macro" than "micro" because it is never used again in the level and sits on its own very specific spot of prominence in the level -- and yet, it isn't meant to be a point of interest in the level at all. Why? The designers placed the structure here to give the player a much better sense of progression through the level.

It's not important, but it's sort of prominent -- although it nowhere near compares to the prominence of that pyramid in the distance, or even the maze thing with the rolling mummy-blocks. Bottom line is, the structure isn't used for decoration -- it was used solely to signify that the player reached some sort of progression in the level (athough, it could still have been used to offer up a bit of story or a hint at the level's backstory). The fact that it's almost completely isolated, it could appear sort of enigmatic in the level if it weren't placed in such a way that the player is all but forced to encounter it. Solely because of the fact that it isn't isolated (level-progression-wise), and is still connected to the main level-progression, is the structure in the desert able to be ignored as you proceed through to the maze area. The fact that it is visually distinct, however, makes you feel you've reached a new place and discovered something new, despite the distance from the start point of the level being very short. That visual contrast provided by the large-to-small visual element conceptualization keeps the level visually fun and interesting as you progress, leaving unimportant (micro) details to the realm of repetition and/or visual obscurity.

The m&m Rule
We could call this prominence-to-obscurity approach the (if you will) "m&m Rule" to approaching a game level's art design by macro-to-micro. The m&m Rule would state:

"A game level's visual variety must be derived from the perspective of important elements (macro) first, to repetitive or unimportant elements (micro), in chunks, based around the rythmic progression through the level, one chunk of experience of the level at a time."

It is in defining what these 'chunks' look like, with the elements available to us by way of the macro-to-micro view of our design, that we can decide how much micro-to-macro variety we need to fill out the level design, in order to keep it from becoming repetitive or uninteresting. Games like Mega Man 2 on the NES, would use vertical breaks in the side-scrolling of the stages to vary the look and feel of otherwise repetitive art assets. Just imagine what those games would feel like if the levels moved horizontally the entire length of the world and if it didn't break those screens up with some single-screen sections alongside scrolling camera sections -- in a way, the camera acted as an art asset in and of itself, in that it was used to break up the level and then provide a sense of progression, in the same way that structure was used in the desert level mentioned above in Super Mario 64!

Quite interesting to think that level design art assets don't always have to be drawn, isn't it?

Thanks for everyone's replies here~! I'd love to hear more ideas on the art of game world composition!

[RAV]

That's a very good analysis, astral. It's why I took interest into your topic.

Another thing we can try look into is the classic subject of Architecture.
What's interesting here is its intersection with tech, design, art.
It very much always had to deal with similar problems we have in games.

Not only does it try to create functional space, but visually interesting as well,
with the problems of form and function conflating instead of conflicting.
There gotta be some more nuggets of wisdom in its literature.

[astraldata]

Gawd. I have been so busy lately! Didn't intend to leave this topic hanging in the wind! Let's rectify this situation, shall we?

--

Has anyone ever heard the concept "Kishotenketsu" on here before?

In short, it is a technique that has strong implications on storytelling and general communication.



Kishotenketsu

Kishotenketsu has its roots in ancient chinese poetry, but it really shines when applied to writing / storytelling, particularly eastern storytelling which sidesteps any 'need' for conflict altogether within any story using Kishotenketsu. Obviously this is completely unlike western storytelling where experienced writers insist you "MUST" have conflict or the story becomes meaningless. However eastern storytelling utilizing Kishotenketsu creates a meaningful story without any conflict being at the root of the story by instead developing the story as an interconnected web of ideas to convey and/or learn about rather than as a meaningless series of small independent chunks of painful struggles that consume time but offer very little reward for sitting through it all. This lends more maturity and meaningfulness to the story as a whole, making it also more impactful because it isn't about the struggle anymore -- it's about the experience we go through -- during and after things -- whether there were any struggles or not.

Although imagery and writing are different in form, their goals are really the same at their core -- they exist to tell something to the observer. That being said, just exactly WHAT they are meant to tell is solely up to the artist/writer -- and noone else.

As with anything you tell someone else, they can either listen or not. However, whether or not they listen generally has to do with how much they understand of what you're saying. What matters most to ensure they have every opportunity to understand you is to offer them words and concepts they already understand. This will help you to communicate more effectively with them.

Of course boredom tends to get in the way when you're discussing things they tend to think they understand already. This is where the "ten" aspect of "Ki-sho-ten-ketsu" comes into play to combat such notions of expectations. In this context, "ten" means "a twist, or to twist" and it applies to the aspects of "ki" and "sho" in which "ki" offers some context or an idea, then "sho" takes this idea and develops on it, adding just enough to get you thinking you know what's going on, and then "ten" is applied to throw a completely unexpected and seemingly "out of the blue" twist to the idea you really thought you knew from the development of the original idea, and then finally, "ketsu" clears up any confusion that might have arisen by "pulling it all together" and showing that what it was you just witnessed really does make sense. And just to be clear, "ten" is not a simple plot twist, but is instead a completely unrelated thing that at first doesn't make any sense up until the final relationship of all three other aspects is revealed in the "ketsu" portion of the technique.

Now you might be thinking "what the hell is this guy talking about?" and rightfully so -- we're in the "ten" portion of my idea's development (and as such, you can start to see that we're transitioning to the "ketsu" portion because you're starting to see that Kishotenketsu can apply to more than just writing a story -- it is very versatile -- it can even be applied to learning a new or strange concept more effectively, as is the case here!)

Kishotenketsu in Visual Design & Imagery

Kishotenketsu can also be applied to visual design. Imagery is as much a way of communicating an idea as writing is, and to be able to do it effectively in a single image is a huge testament to your artistic prowess -- as much so as the ability to be concise is to a writer -- the ability to communicate very complex ideas with only a few words is highly sought-after in the writing communities. As such, it should be the same in any artistic community as well.

I will share with you some hints at how one might apply the concept of Kishotenketsu to communicate imagery more clearly -- but to do so, I'm going to borrow an image by Pawel Kuczynski from Conceit's post over in another thread (here: http://wayofthepixel.net/index.php?topic=19189.0), which I found perfect for this post:



Now that you understand Kishotenketsu, it should be pretty easy to break apart the code yourself -- but, for those who haven't gotten it just yet, I'll give you a run-down of the image in terms of Kishotenketsu steps:

"Ki"
You start with a nice, freeing, sky with clouds which indicates a sense of a free-spirited and open world. This is the idea context of the "ki" that you're initially presented with.

"Sho"
Next you are presented with a tiny bit of a wall and a ladder up leaning against it leading up to the top of the wall and the sky -- so at this point, as far as you can see, all the rungs on the ladder are in tact, and you're thinking "oh, that's nice, someone could climb that ladder and enjoy the nice breezy sky, so who's going to climb the ladder?" and that's when your eyes move down the image. This is "sho" and is where the initial idea seems to be developed further and substantiated with more details describing the context or state of the inital idea better.

"Ten"
You begin to feel disturbed because you notice at first some rungs are missing on the ladder. Then you notice that it's a very TALL wall. Then you notice there's a guy down there warming his hands by a fire with no way back up the ladder. This is the "ten" or the unexpected twist from left field and out of the blue. It doesn't make any sense just yet to your mind.

"Ketsu"
You look around trying to make sense of the situation and realize that there's not just firewood laying on the ground by the guy, but a saw too. That saw tells you he cut his firewood from the ladder rungs himself, leaving himself no way out. Then your mind naturally wants to know "why? why would he do that??" and then you realize that he simply wanted to be comfortable in his deep hole, behind his wall, with no way out. It is reminiscent of a guy who, for whatever reason, buries himself in short-sighted goals while simultaneously isolating himself from the rest of the world, and especially, his own freedom, inadvertently imprisoning himself with his own short-sighted comforts. A classic but invisible danger to us all -- which makes it all the more dangerous. This is "ketsu" in the sense that the objects and their arrangement relative to the eye tells a very impactful (but invisible initially) story of their relationship to one another, leading you to tie-up the pieces yourself (while giving you all tools to do so), making your overall understanding and impression of the image, alongside the artist's attempt at communicating that impression, the "ketsu" in Kishotenketsu.

Summing it all up

To be able to apply Kishotenketsu masterfully in your art, as is the case with this piece, is more important than drawing well (as is proven by this picture) and the ability to make the 'story' you're trying to tell progress from one side of the canvas to the other is a great way to display Kishotenketsu in your art. Please note, however, that it is not the ONLY way to apply this concept to imagery.

There are ways to apply this to animation, to comics/manga, to character designs, to poses, to architectural designs (see, RAV? I haven't forgotten you! ), and even level designs and layouts, which has actually already been done before!

Anyone want to think up examples of ways they might be able to apply Kishotenketsu to other aspects of game art and imagery, maybe perhaps through game environment design and/or composition in some form?

[RAV]

A lot of cool food for thought in here, astral. It also reminded me of how to visually present problems of gameplay directly, like riddles, in a similar structure of "story" clues.