General => General Discussion => Topic started by: astraldata on October 27, 2015, 09:02:13 am

Title: Game Environment Composition Techniques!
Post by: astraldata on October 27, 2015, 09:02:13 am
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 (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!

Title: Re: Game Environment Composition Techniques!
Post by: wolfenoctis on October 29, 2015, 04:51:50 am
Great idea Astral  :y:

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.
Title: Re: Game Environment Composition Techniques!
Post by: RAV on October 29, 2015, 10:32:46 am
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.

Title: Re: Game Environment Composition Techniques!
Post by: Cherno on October 29, 2015, 01:01:33 pm
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.
Title: Re: Game Environment Composition Techniques!
Post by: astraldata on November 08, 2015, 11:33:09 pm
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!

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.

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.
Title: Re: Game Environment Composition Techniques!
Post by: RAV on November 09, 2015, 03:51:42 am
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.

Title: Re: Game Environment Composition Techniques!
Post by: astraldata on November 11, 2015, 12:09:23 am
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!

Title: Re: Game Environment Composition Techniques!
Post by: RAV on November 11, 2015, 12:56:44 am
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.
Title: Re: Game Environment Composition Techniques!
Post by: astraldata on December 13, 2015, 11:16:53 am
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? D:


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 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 (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:

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.

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.

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.

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! ;D), 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?
Title: Re: Game Environment Composition Techniques!
Post by: RAV on December 13, 2015, 01:18:50 pm
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.
Title: Re: Game Environment Composition Techniques!
Post by: Ai on December 14, 2015, 01:18:41 pm
Wow, thanks for taking the time to explain that astral. It's really the first conception of 'communicating meaning' I have seen that seems to be actually constructive, rather than making the learner into a product in a factory of 'knowing things that I the authority am handing down to you'. It helps me to see meaning as something slightly more than a kind of instrumentally-useful delusion, which is helpful on both a personal level (doing things that are important) and a idea-communication level (try to make and introduce open systems of ideas, rather than depending on people to simply accept or reject some set of assertions comprising a pat story)
Title: Re: Game Environment Composition Techniques!
Post by: astraldata on December 15, 2015, 04:05:16 pm
Ai, I'm thankful to know my thoughts were helpful to you! :)

To digress a little, I have struggled with conveying this concept of 'meaning' in art for a long time, and despite knowing it intuitively, conveying 'meaning' always seemed so subjective -- something seemingly so invisible -- and yet at the same time, so prevalent, but also essential, in impactful works. I knew that to apply any sense of meaning (and therefore impact) to one's work, it was impossible to outright 'tell' a person the meaning in any direct way, especially where that meaning was complex or seemingly obscure and specific, and expect the observer to appreciate it as fully as it was intended -- discovery is essential to true appreciation. Purposefully convoluting or avoiding simplicity in a work is equally as bad though, as it inhibits discovery in the observer (the example piece is simple but also impactful due to the meaning it held being deceptively simple, but turning out to be heavily complex).

Many regard true 'art' as some lost secret that only long-dead masters and certain other divine beings understand. To these people, you just have to take long walks in the park and practice drawing/painting/etc. everyday and it will soon come to you how to be an 'artist' and convey deep meaning to others in your work (which is a total load of BS, as indicated by my previous post).

As much as I love art with meaning, I personally come from a background of game art more than traditional art, and for all intents and purposes, game art relies on one's ability to develop individual assets as quickly and as effectively as possible with a quality level relative to that of the importance of the asset versus the time you have to produce it. With this as a standard for your work, conveying true 'meaning' in art tends to take a backseat, so even to skilled artists it sometimes feels like you're a machine churning out piece after piece for an overlord client and/or art director. That being said, even in game art, the core issue with creating art assets is still being able to communicate effectively, which means that you are a more effective artist if you can offer 'meaning' in your art that will allow your observer to arrive at his or her own conclusion as to what it is you were trying to represent (while also offering them everything they need to do that in such a way that they arrive at the conclusion you set out for them.) And although everyone experiences stuff just that little bit differently, there will always be a clear commonality in how each person experiences a thing when that 'thing' is communicated well. Not to mention that being able to communicate meaning more clearly makes the art process more fun -- even when applied to things as seemingly mechanical as game art / asset development -- because your art assets can tell a whole (seemingly invisible) story that the main narrative, with all of its fancy exposition and nice character animations & special effects, simply cannot. All in all, communicating meaning is a very powerful and far-reaching ability -- and it will make anyone a better artist to be able to do it well.

PS: @RAV -- If you wouldn't mind, would you care to share what you mean with us? How does Kishotenketsu apply there? I'd love to hear!
Title: Re: Game Environment Composition Techniques!
Post by: AlexHW on December 15, 2015, 05:44:37 pm
I like this Kishotenketsu concept, astraldata.
I was thinking more about it and I while it is nice to think that it offers a way to convey a story without conflict. I don't think that is what it does.
Conflict has to be interpreted. It can't exist without having relativity. I would say that Kishotenketsu actually creates conflict, because the twist(ten) introduces a seemingly different & contrasting idea that must be interpreted. Ketsu is the interpretation of the conflict. The Ketsu then becomes an example of how to handle conflict, and the reader/viewer learns from that example. By learning from examples on how to interpret conflict, they become more capable of doing so on their own. So those who are more comfortable with Kishotenketsu may have exercised their ability to interpret conflict, and thus it may seem to them like there are none.
So the way I see it is that, Kishotenketsu has more of a relationship with the reader/viewer- the sole purpose of the story becomes one that teaches the reader/viewer on how to handle conflict. The conflict is created, and then the sides become blended together.
Am I misunderstanding it?
Title: Re: Game Environment Composition Techniques!
Post by: Conzeit on December 16, 2015, 06:58:19 pm
Oh, Astral thank you for continuing the conversation! I love making halfassed stabs at something I have felt experientially but have no framework to work with, and then have someone give me a framework to use on said thing, sooo pixelation =) LEARNIN!  :D

Alex. I can see what you mean, but honestly a twist doesnt have to be conflict. it can just be mindblowing twist a-la M Night Shamalan. Conflict happens when there is an opposing force, and it hinges on the character's expectation to overcome it, while a twist by itself is shock value, a one off. This is why movies based solely on twists dont work on a second viewing, because the cat is out of the bag, like a magic trick it holds no interest anymore. I think the stairs image is a good example again, you are not surprised the second time you view it, but you still feel for the guy because the image speaks about his mentality and how he cant overcome his opposing force, his own psychology, so it still holds interest. I think the ketsu part saves kishotenketsu from being cheap reveals is the ketsu, if you cant round it all up at the end and make a coherent whole statement, it was not a story after all. I think I'd have to see more examples of kishotenketsu to know wether it avoids conflict or not.

The Kishotenketsu concept reminds me of setup-punchline as well.
EDIT: more than setup punchline it reminds me of essay structure. Thesis-antithesis-thesis. only with required development for the thesis after it's introduction. it's got a bit in common with shakespeare's 5 act structure as well.  I think all these structures to deliver ideas have a lot in common, but vary slightly because of the specific thing they deliver.
oh boy. I'll have to rumiate on it some more to bring more into the conversation
Title: Re: Game Environment Composition Techniques!
Post by: API-Beast on December 20, 2015, 03:14:41 pm

You mentioned that single art assets themselves can have meaning, as someone who's background is in Game Art too I would be very interested in seeing a example of that.

The way I see it each art asset is a small puzzle piece, no more, no less. It itself has very little meaning, the meaning starts to show when all these puzzle pieces are combined into a picture by the player. Another analogy is facts, a single fact has no meaning, but as you collect facts they become interconnected and you understand more and more of the story.
Title: Re: Game Environment Composition Techniques!
Post by: astraldata on December 26, 2015, 08:32:23 am
I like this Kishotenketsu concept, astraldata.
I was thinking more about it and I while it is nice to think that it offers a way to convey a story without conflict. I don't think that is what it does.
Conflict has to be interpreted. It can't exist without having relativity. I would say that Kishotenketsu actually creates conflict, because the twist(ten) introduces a seemingly different & contrasting idea that must be interpreted.
So the way I see it is that, Kishotenketsu has more of a relationship with the reader/viewer- the sole purpose of the story becomes one that teaches the reader/viewer on how to handle conflict. The conflict is created, and then the sides become blended together.
Am I misunderstanding it?

To be honest, I think you're close with your understanding, but the thing that separates the 'twist' in eastern vs. western story-structure is that, in the east, conflict is not necessary to have a story. In Japanese, and in other similar cultures in the east, it is very common to observe that a thing is simply what it is -- a thing -- and that 'thingness' is celebrated over there. While that seems 'boring' to western culture, the 'thingness' of a thing, being as authentic as it can possibly be, is the essence of substance and truth. While 'ten' is generally used to throw an idea into the mix that isn't expected -- the purpose of the 'ten' aspect as it is used in eastern storytelling isn't to make a story more interesting or more palatable to the audience as much as it is to help promote their understanding of the subject from less obvious and more telling angles -- in other words, teasing out that 'click' or 'aha' moment that everyone enjoys feeling when they finally put together a seemingly 'hidden' meaning and/or relationship that was actually already there all along. It is the idea of creating an understanding that was just beyond reach in which you were able to make the jump (with a little help from the story) on your own that makes Kishotenketsu so effective. Conflict, or any sort of perceived (or actual) contrasting setups, is actually a byproduct of that goal and should never be the focus, or otherwise you run the risk of breaking the suspension of disbelief you worked so hard to create in the development phases of 'ki' and 'sho' when you arrive at the 'ten' portion of the story.

I know it's subtle, but it's very important to keep in mind that, as Conceit hinted at, there are underlying truths that make the work more long-lived than a simple "does the guy save the girl, or does the bad guy kill her?" sort of setups. For example, the fact that she dies because she's attracted to the guy out to kill her while the good guy risks his neck for her, even after warning her and then being ignored, changes the overall nature of the story towards more universal truths, perhaps about blindness and ignorance and a potentially rationalized 'love' on the guy and girl's part -- things that aren't very easy to put into words -- leading to something that's deeper than a simple reveal of the plot twists to the audience, and also to something that 'you have to see to understand' when you share it with your friends -- versus, of course, 'it's just another guy with a superhero complex who just needs to get laid' sort of story that you can easily convey to anyone.

To further elaborate on the lack of necessity of conflict, in the example I gave above, the 'ten' could be that the guy is killed by the bad guy when he tries to save her (despite being ignored), leading him to be at fault almost as much (if not moreso) than the girl -- or even the bad guy! The 'ten' (which, in this example, actually eliminates the conflict in this story altogether, rather than simply resolving it as most would expect) offered alongside the rest of the story development gives the overall story a more long-lasting shelf-life (or short-lived, assuming the 'ten' was absent or poorly executed). In the end, the characters could suck, the writing could suck too, but as long as there is still some human-level understanding reached from the combination of all the parts (the guy's part, the girl's part, and the bad guy's part) in the story, Kishotenketsu is probably present in some form. In the end, conflict wasn't necessary as the guy didn't save the girl, and further, it was a moot point anyhow since he was killed -- so the story is no longer about him saving the girl, but it instead it became about you, making you think about how and why things ended the way they did, meaning that it is your story now -- and that is exactly what makes it transcend simple plot devices, like, in this case, conflict itself, while still keeping the story 'interesting' in the end. If it were a movie, you could rewatch it a second and a third time, and you may come to a different conclusion about why the guy should or shouldn't have gone to save her every single time, but just like in art, the perception you want to convey vs. the one you actually convey depends upon how strong you are at communication via your breadcrumbs of understanding to allow the audience to come to the conclusion you want them to. Bottom line is, conflict aside, Kishotenketsu is about effectively communicating an authentic and universal understanding through some medium. Generally, the understanding you wish to convey is only possible when you communicate it on a level of truth and authenticity that anyone can see and feel (sometimes that truth even has to be a little dirty) -- but to convey authenticity like that, you have to actually understand it on a level you can also put into physical form! Helping the audience come to an understanding on their own by providing them the tools and resources to do so is a skill that requires many skills, but the most important of which is the ability to cut through to the most base and experiential level possible to actually see the subject from every angle possible from both above and below (and never just from your own pov [or those similar to it], because those views will only make it more difficult to see more truthfully) -- From that point onward, you can determine what it is you want to actually say about the subject once you have gained the ability to actually see.

(As a side note now that that's out of the way, I forgot to mention earlier in this post when speaking of another 'form' of Kishotenketsu in the example story, the 'ketsu' in the above example would likely be 'mixed' with the 'ten' just after the 'ki' and 'sho' exposition are complete since, the 'understanding' in this example story can almost be reached in very nearly 3 parts (but not completely!) instead of the usual 4. I say 'almost' because the 'ketsu' and 'ten' concepts are not actually merged, they're just tightly coupled -- the core concepts of 'ten' and 'ketsu' are still completely there functionally, regardless of the form the exposition takes that masks their presence by allowing them to happen almost simultaneously.)

@Mr. Beast
It wasn't anything complicated. As it's fairly obvious that most of your game assets are, by default, supposed to further a game's story/lore/world/etc., individual assets can tell their own individual stories as well. Kishotenketsu, since it is about communicating effectively in a way that teases an understanding out of its audience, allows one to use virtually anything that can communicate to tease that understanding out. A simple example is a sprite character's posture and appearance -- he's confident because is back is straight (ki) he's determined because his eyes are straight ahead, even with weird girly-looking eyelashes (sho), but he has the body of an ugly yellow sponge-with-a-face that wears a dumb-looking hat and having tiny stick arms (ten), which tells us he's unaware of his appearance since he's obviously somehow ready-to-go-at-a-moment's-notice like any other go-getter superhero with an overly-positive attitude (ketsu). This art asset offers meaning to all of those who gaze upon him because there's an underlying thing there in your head that says "this guy is totally stoked -- but why? He has nothing to be stoked about, right?" and yet your audience, as players, secretly feel encouraged by the effort you, as the artist, put into making him so true to his own personal uniqueness, leaving them with a sense of meaning from nothing more than a simple drawing that puts forth clues to who he might be, making them feel stoked themselves to play as him. Even the story itself couldn't tell you why he stands the way he stands or feels the way he feels about the world -- only the asset itself can truly (and most effectively) convey its own meaning (indirectly) through visual clues that tie together their invisible story. This generally helps you to arrive at an understanding about their character (even a tile in a tileset is a character, after all!) deeper than you would have if they had been told to you explicitly through dialogue and cutscenes in the story itself. These tiny stories always have their place, and they are personal and private to each asset you create, making them very effective at communicating an understanding of themselves. And, by extension of these tiny personal stories arrived at by way of Kishotenketsu, the world you're building becomes much more rich and substantial, making it a million times easier to relate to, and also to understand!

(I apologize in advance if this doesn't make sense -- I might have to approach this again when I'm not falling asleep at my desk. Maybe I can condense it into something more readable tomorrow... D: )
Title: Re: Game Environment Composition Techniques!
Post by: API-Beast on December 26, 2015, 07:10:52 pm
This reminds of what Feng Zhu is teaching about concept art in this one hour long video (https://www.youtube.com/watch?v=fww9L7XH8Qg&index=7&list=PLvNv1kRvuSwLYS2CkHTDS6-zVKSoUYzJO).

He doesn't talk about meaning, he doesn't talk composition either, just about designing "cool stuff". Copying something existing 1-to-1 is boring, e.g. something we are 100% familiar with does not make good concept art. Something that is completely new and foreign is just "weird", and puts a lot of people off. In between those two extremes is what he calls the "Goldilocks Zone", which is the "cool" stuff. People can relate to it, but it's also new and original and thus exciting.

He then talks about how designs can be created that fall into the "Goldilocks Zone", he does that by combining two familiar concepts that aren't seen together, usually. For example, he takes the pyramids in Egypt and puts them into a snowy tundra. Or he takes spiders and "reskins" them to be mechanical and bigger and he gets spider tanks. Or he takes a train and turns it into a budding city.
Title: Re: Game Environment Composition Techniques!
Post by: API-Beast on December 27, 2015, 01:42:03 am
Let's distill this down:

For example, everyone should be familiar with the concept "robot" and "sadness", but we are rarely reminded that those can be interconnected, and thus drawing a sad robot provides some sort of meaning.

Pictures are limited to displaying only a limited amount of connections, but other art forms such as films, writing or video games can develop these connections much further, capable of creating deeply nested networks. In this case we can speak of "depth".
Title: Re: Game Environment Composition Techniques!
Post by: astraldata on December 27, 2015, 05:19:59 am
Yep, applying 'ten' to a concept is a great way to achieve an interesting take on it while also expanding the concept with, perhaps, backstory to help establish (ki), and develop (sho), an initial visual design into a harmonious visual concept that makes sense and is relatable (ketsu), but also remains understandable when you apply the twist (ten) to the design as well.

In the idea of the spider tanks, for example, the 'ten' would only make sense if there was a functional (real-world) advantage to the tanks being on spider legs. In this case, form follows function can applied particularly well if you're creative enough, and even inspire real-world designs if you're authentic enough too. I can think of a few real-world functions that would allow a spider-tank to be particularly advantageous, for example. However, for them to be appealing -- I mean /really/ appealing -- they must also work well enough to continue suspension of disbelief.. even in unrealistic settings and situations.

The idea of taking ordinary stuff and turning it into something fun and interesting is essentially the core of what a concept artist does, imo. No offense to Feng Zhu intended here (amazing concept artist!), but to use vague terms like "Goldilocks Zone" to describe something between "cool" and "relatable" is kind of a cop-out. At the same time though, many really great artists (or maybe even /most/ great artists!) don't really /know/ how they do what they do quite specifically enough to explain it. Instead, a lot is intuited, and a lot is learned, but to pass that knowledge on to others, you need to be able to verbalize it.

In my opinion, to make something "relatable" /and/ "cool" simultaneously, you don't need some vague and mysterious idea like the "Goldilocks Zone" concept you mentioned, being that it's only real 'use' is to a master artist who already knows how to employ it -- you simply need to develop that human/real-world element in your work, no matter if your work is a book, a movie, a drawing/painting, completely abstract or cartoony, or even if it is inanimate like a tree or a building, or whatever -- you /need/ to be able to characterize it somehow, and the way to give something character is by offering that 'ten' or that 'twist' to make it unique enough to be its own thing while also retaining the fact that it also makes sense why it is (visually or inherently) who (or what) it says it is. In the end, it needs to be understandable and relatable by way of its characterization, at least in order for it to be appreciated and taken seriously for what it is. That's it's shelf-life, as mentioned in my previous post -- and it's not something one would want to overlook when offering a concept to the world that the world will also appreciate. In the end, people /always/ love a good character-driven story. It doesn't even truly matter what the context is -- if the characterization is smart and clever, the work (be it a concept, a story, a song, a picture, a sprite) will always be well-received.

Digressing a bit though, but I do highly agree that copying something 1:1 is quite boring to the viewer. On the other hand, it is also boring to the artist as well, so most people, I feel, only do it when they have little knowledge of the subject. This is, frankly, why I think so few people practice life-drawing or reference-drawing when first starting down a professional path to doing art. It sets one waaay back in their art ability to not have a solid visual library in memory to work from for whenever you need a twist in your subject to form a concept, but you're not as familiar with the given (and potential) subjects you're trying to combine as you might have liked to think you were before actually trying to draw them.

So, some friendly advice to other artists who might be struggling with boredom in reference images -- You will need a visual library to be able to put the 'ten' into your concepts as effectively as someone like Feng Zhu, for example -- so try inventing parts of references/subjects you're drawing using your existing visual library in your head, and try only to understand the parts you don't have any ideas for twists on by drawing them as you see them. This will give you the ability to learn to see a thing as it is, while also flexing your creative-memory muscles in accessing the library you already have more quickly, teaching you to churn out ideas as fast as you can draw them. This will prove invaluable to you as a concept artist, or even as a game artist, since it allows you to learn to see and be creative simultaneously.

This is how I do it -- but your mileage may vary. Give it a shot and tell me how it goes! :)
Title: Re: Game Environment Composition Techniques!
Post by: astraldata on February 14, 2016, 09:16:06 am

Been thinking a lot about game level composition (as indicated by this topic apparently), up to and including procedural level generation (I was recently introduced to "No Man's Sky" thanks to this!), and my journey led me to a very insightful blurb about the UbiArt engine that brought me back to this (apparently almost dead) topic to share another quick (but amazingly overlooked!) technique with you!

The Origin of the UbiArt engine is in Procedural Content Generation.

Yep. You read that right. It was originally built as a fast way to create 2d game levels.

"No way!!" you say? "Yeah! Rayman Origins didn't include any procedural art!"

Well... I beg to differ. According to the article linked after this paragraph, it was originally built as "a visual pattern generating-based engine" as a continuation of what they were doing with Beyond Good and Evil 2:

http://www.gamasutra.com/view/feature/6562/the_evolutionary_process_of_.php (http://www.gamasutra.com/view/feature/6562/the_evolutionary_process_of_.php)

According to Michel Ancel (the guy who started the UbiArt engine), "Artists make some patterns, like samples, and we use them to quickly model levels, as to have a forest, for example."

This tiny sentence says a ton about the idea (and the creative mindset!) behind this amazing engine -- but most importantly -- it says what the engine actually does!

For those who haven't figured it out yet -- the UbiArt engine creates procedural art by using an algorithm guided by work produced by the hand of an artist.

Although, in and of itself, this is not entirely new, it is the way procedural generation is applied to level generation here that is quite interesting. I'll get into that in a moment.

In English Please!

To put it simply, everything in the Rayman games' environments since Rayman Origins has been produced to be as modular as possible. This means the same setpieces can be used multiple times in multiple places in multiple ways -- and when you add in a lighting system that allows 2d art to appear 3d lit, colorized, and then add customizable fog to give depth, and then vertex-colored sprite assets that blend with the light and have nice normal maps, allowing them to be stretched and scaled as well as rotated -- you have a system that lets the exact same assets be used hundreds of times without ever feeling stale. BUT, when you design a system that essentially creates your lush backgrounds FOR YOU -- you've got little work left to do aside from producing some nice assets and dropping them into the game!

Okay, so that probably doesn't explain what I'm trying to get at clearly enough, so I'll try to point out some (admittedly well-hidden) artifacts of this procedural process. Let's take a look at this image with the house-looking things near the coffins:


As you might notice, the general level theme is these houses and stacked coffins. However, less noticeable is that the houses you see, as well as the piles of coffins and wood are heavily repeated (even in the same screenshot there!) and, even knowing this, you still have to look really close to determine this because there's lots of mirroring, scaling, and general color changes going on all over in that image that the one 'unique' house/mausoleum/whatever on the far right of the screen is just enough variation to fool your trained eye that you're looking at a nice painting thanks to the amount of use each of the elements have when combined with the various options available to them. This engine even has areas of light/shadow/colorization it can overlay on top of things to break up the hues and create separation, adding variety using very few elements. An artist's dream indeed.


In the forest portion of the image above, you will see that, although there are other bits and pieces scattered about between them, there is a single large tree used repeatedly across the image (hint: it is the most detailed and in-your-face tree there) and yet, somehow, it just doesn't register in the brain that it is repeated at all. Although this image is labeled as concept art, judging by the previous in-game image, it is highly likely the game engine would produce these trees at random intervals where there is terrain (using said algorithm, which is strangely missing from the UbiArt demonstration video on youtube -- that portion seems to have been cut out of the demonstration entirely).


The rocks in the icy world above show the most visible seams in the system when the BG rocks behind the action transition to the darker machine-looking blob above them. This indicates to me that there was an algorithm at work here moreso than an artist's hand in particular. The plain-looking rocks would have been the swathe the computer generated overlays upon -- overlays that were originally placed by an artist into some sort of template most likely. These overlays of machines and flags over the rocks would have been spaced and scaled randomly by the computer, while the artist would have only needed to select an area that needs a particular template, and the algorithm would generate the randomized assets following the template specified by the artist using something akin to Perlin Noise to shift stuff and scale it according to the original artist's settings. The artist placing it would just pick a region where it is necessary to use that area (such as the generic rock repeating texture with some stuff overlaid on top of it, shifted around semi-randomly, following the noise settings in the template.)

This is, of course, my own theory based off what I've seen of the UbiArt engine, and gleaned from images like the ones above. Unity has a plugin that attempts to mimic the functionality of the platform portion of the UbiArt engine, and does it pretty well from what I've seen. However, it is the amazingly detailed-looking backgrounds that make Rayman stand out so much. That being said, an engine like the UbiArt engine takes a lot of the tedium away from you when it procedurally generates portions of the game world visuals out of your assets and designs while still allowing you to go back in and tweak them to be exactly what you're after. I'm pretty certain there's some sort of rough "fill out the level" algorithm leveraging templates akin to the ones I've mentioned used in these very large, very detailed (fast-moving!) levels. I highly doubt a level designer slaved over art assets to fit just perfectly in that section where that first platform falls when that big thing is chasing you.

Just my two cents. Feel free to add on to or take away from my ideas here -- I'd love to explore them more if anyone's interested.

Rules of Procedural Generation -- No Man's Sky

I mentioned "No Man's Sky" at the beginning of this article because it is a game that takes Procedural Level Generation to the next level (pun intended -- don't hate.) It is another interesting way to use an artist's touch to generate not only levels, but worlds, using rules in the form of a pyramid to generate content vs. rules in the form of a tree or heirarchy. This interesting approach could also be used to design levels, perhaps in a similar way to Rayman (which, I feel, might have already been done as my theory stated above), but if it hasn't, it'd be a hell of a way to make and decorate levels very quickly.

Just some food for thought. :)
Title: Re: Game Environment Composition Techniques!
Post by: RAV on February 14, 2016, 01:09:44 pm
I like that you keep adding perspectives on this topic. You mentioned before what's great about patterns. We also discussed what's cool about making levels feel more wholesome in design. And this procedurally assisted workflow kinda blurs those interests, you can work very pattern oriented without looking much like that. The more diffuse properties of HD painted photoshop art make it flexible and forgiving enough to work well along that.

So let's see how that fits with pixel art. First we should try determine how much a clear recognition of patterns in pixel art is of similar satisfaction alike to the clarity of a limited colour palette. Can we have clearer patterns and colours, yet still enough unique variety? And as far as productivity is concerned, how much are manual or procedural mutually exclusive? Maybe there is a very manual workflow that has some kind of procedural property, in orderly control. Does the control of pixel art only bog you down? Does it make you necessarily unproductive? Is there a relevant creative opportunity in it? Is pixel art technique merely an implementational means to a greater vision of art, or can pixel art be a greater vision of itself? And is even boiling art down to pixel art a more meaningful creative challenge than just cleaning it up? Is there a design by pixel, or only a down to pixel. Is it shallow or deep? Is there a ceiling to your growth as pixel artist, can you only have a greater growth as artist? What's the priority of your potentials? Testing extremes, try an abstract piece, eliminate all art knowledge but pixel art technique. Can you think just pixel art, play pixel art, and still be excited and fulfilled?

In the past, we did pixel art for different reasons. The art was in not looking constrained as pixel art. For example, back in the day, there was no other way to look photorealistic than by pixel art technique. Nowadays we have plenty of much more straightforward alternatives to that. Pixel art no longer needs to look like something else. You just do something else. Rather what people try now is making something else look more like pixel art. And what does that "looking like" pixel art mean? Not a pixel art that tries to not look like it, but a pixel art that pronounces itself. This is the weird dichotomy we are facing today, and why many modern pixel art interpretations seem in some way a regression, compared to what was considered cutting edge pixel art before. Other than surviving as a challenge of itself, it advances in other ways, we are searching for what pixel art makes sense doing, in a way better than before, though not better in every way, since you don't depend on pixel art for that.