Blog Archives

Quantifying Art

2/20/2016

Have you ever been asked to making something look “more fun?” What about more user friendly, interesting, or even magical? As an artist it can be very difficult to have productive conversations about art or art qualities, qualities like “fun” or “magical” can have drastically different meanings based off of the individual or project context. Not to mention if you’re working with individuals where English may not be their primary language, it can be very difficult to come to an understanding about artistic intent. In this post I’d like to explore this a little bit, and share some of my experience as a Lead Artist working on mobile games.

Quantifying Art really comes into play heavily during pre-production, where you're lacking visuals and trying to establish the artistic direction. So often it feels easy to fall back on broad terms and simplified descriptions, but these can really cause a lot of problems. Not only can it become vague and hard to follow for your clients, but it's also really unfair to the artists that you're working with. People are quick to infer their own meanings and it leads to a lot of misinterpretation. So what can be done? I'm sure there are a lot of different strategies out there, but I'm only really going to be talking about how I approach it. This really isn't mean to be the definitive "how to" but hopefully it should give a little more insight into some new ways of thinking...

I always think it's best to start with a little research, before jumping right into trying to establish your visual target. It's always good to explore what other people are doing and how you do or don't want to mimic them. The basic premise that I've been working under has always been to firstly establish Key Words, and develop my own meaning for those terms (in the context of what I'm working on or evaluating). To the right is a pretty small exercise that is an evaluation of buttons within various mobile games. For this chart I worked off of four key words of my choosing, I'm sure there are others that could be used, but for the sake of this evaluation I picked Iconic, Realist, Fun, and Somber. Before moving forward I then established definitions for those key words.

Iconic
- Flat, no bevel and emboss, monochrome
Realist
- Lots of layers, Lighting and Shadows
Somber
- No Saturation, Low visual effects, Regular form
Fun
- Bright, Irregular form, Colorful, High Contrast

It's safe to say that so much of this is subjective, but you have to try to use your best judgement with these evaluations. Once you've defined and established the key words you're using to evaluate, you can start placing elements along the chart that can help you to start to identify the spectrum. It'll be hard at first but with the more examples you have, the faster you'll be able to really see the gradation you've established between "iconic" and "realistic." With your filled chart, you can then evaluate what you're looking at and pick a "Sweet Spot." The Sweet Spot, in the way that I'm defining it, is a circular spot area on the chart that you can say that you'd like your visuals to fall into. Within this area you can easily see other visuals that match the style that you're looking for. Using this, you should then come up with a definition for your sweet spot and what it means to be in it. This could be specific details about shape, color usage, and other identifying factors you'd like to include. This is definitely not the "end all" of establishing your visual target, but it should be helpful in defining pillars in your game for you and your artists to follow.

Something else to consider... while you may spend a lot of time working on and defining who you are and what you're visual target is, it's also good to really consider who you're not. After you've established your Sweet Spot, defined it, and even have come up with examples of what it means to be in that area... spend some time actually making opposite pillars. i.e. Our buttons do not have realistic lighting, our buttons do not feel thick, etc. Coming up with examples and ways of identifying what isn't your visual target, is also a really good way of helping everyone see the direction your art is heading.

There are other processes I go through in pre-production to establish a visual direction/target, but for now I'm going to cover one other way of identifying a direction that.... might be more complex to discuss than something like a button or icon style. When working on specific brands or game styles, there are potentially broader themes you might want to identify and understand more thoroughly. I describe these themes as Key Values. Key Values, in the way I'm using this term, are major styles/themes that exemplify your brand, product, or game style that you're pursuing. If I was given the mandate to work on the brand Bloodborne, a Key Value I could identify would be Lovecraft.

Once you've established a Key Value, in this example we'll be using Lovecraft, you'll want to identify where this Key Value is prevalent in other forms of media. Find movies, video games, comic books, and other forms of media that feature the same Key Value. If I was evaluating Lovecraft, I'd look to examples like Hellboy, the movie "The Mist," The Skyrim DLC - Dragonborn, Deadspace, the Amnesia games, etc. Look to these examples and search for commonalities among them. What makes this all feel like "Lovecraft."

You'll start identifying elements like :

Physical Transformation
Tentacles and Deep Sea designs
The pursuit of forbidden knowledge

Once you start having these elements you can start to break these down further. What kinds of Physical Transformations? What specifically makes something feel "deep sea?" What does forbidden knowledge look like? Once you're able to start define and break down these elements, you can have a much more definitive conversation about what it means to be Lovecraft.

"It's all about finding your Key Value, and defining the Elements that make up that Key Value."

There are many other areas I'd like to cover but for the sake of this post and keeping things concise, I'll leave it with these few thoughts. Hopefully this was insightful and provides some strategies on ways of discussing art and how you might evaluate these types of things in the future. I may make a post soon that talks a little bit about Visual Priority and how to design visuals that makes it easy for your users to look where you'd like them to look. That's it for now though! Hopefully you enjoyed this post.

0 Comments

Visual Affordance

2/13/2016

0 Comments

When playing a new game on your console or mobile device, do you ever take a moment to think of how much is explained to you? We might complain about lengthy tutorials or long dialog boxes, but we may not recognize there are smaller details that aid us in our comprehension of the game world itself. In this post I’d like to spend some time exploring this, and a concept referred to as “Visual Affordance.” What’s Visual Affordance? Well wikipedia would suggest the following :

“An affordance is a relation between an object or an environment and an organism that, through a collection of stimuli, affords the opportunity for that organism to perform an action. For example, a knob affords twisting, and perhaps pushing, while a cord affords pulling. As a relation, an affordance exhibits the possibility of some action, and is not a property of either an organism or its environment alone.”

Okay, so that can be a bit confusing… Affordance, or Visual Affordance in how we’re referring to it here, is our implicit understanding of how something works due to it’s visual ques.An easy example of this would be a “lock.” When I, as a user, see a lock I immediately understand that I’m unable to access something… that something is essentially “locked.” In the same vein, if I see or find a “key,” I understand that I can now access something I couldn’t access before. These are more examples of recognizable symbols or shapes that have meaning to us. Using symbols or colors isn’t always the best thing to rely on. Depending on the out reach of your audience, some may not have the same background for understanding as others. These types of inferences are based heavily on cultural and life experiences, and therefore may not mean the same things to people living in different geographical locations.

There are other types of Visual Affordance clues that are more subtle than something like a color or a symbol. There are those that rely more on either the user’s subconscious or looking and thinking of how things work… The Room is an excellent example of this. Many of it’s puzzles feature little clues about how elements work and interact with each other. In the example, you can see there’s an area that seems to have been rubbed or filed down by an element dragging itself across it. It’s kind of like the cliche spy movies where you see the rub mark on the ground and know that there’s a hidden door in the bookcase. The best way to describe this type of Visual Affordance is it’s perception based, and relies heavily on observation.

There’s really one last kind of Visual Affordance that I really want to discuss and it’s based off of learned behaviors. In this category I’m really talking about things that are slowly introduced to the player and then become second nature. “I know how to interact with something, because of something else I was introduced to earlier.” In this example from Dead Space, the players are introduced to an object early in the game (the blue circle) that they have to “Spin” to power objects. Later in the game the player is exposed to elements that look similar, and the player must interact with them to solve puzzles in different ways… due to the player’s earlier experiences in the game, they already understand how these items function.

What got me thinking so much about Visual Affordance? Recently I’ve been playing Firewatch and The Witness, and couldn’t help but think about how these games are utilizing this concept. WARNING continuing forward I may talk about spoilers related to Firewatch and The Witness, if you’re worried about this… TURN BACK NOW and call it quits! Otherwise please continue.

Firewatch makes use of Visual Affordance through objects that we already understand or are familiar with. We know how to engage with Walkie Talkies, Maps, Compasses, etc. So in this regard the game feels like a very familiar environment (to some) though it’s use of real life objects. In a more subtle way, Firewatch also guides the user through it’s environment and visual ques. The way flora are placed, depressions in the ground, we instinctively know what a trail feels like and can be guided by it. Either intentionally or not, the lighting and composition usually draws the player’s eye outward and towards the objective, whereas shadowed areas and dense composition makes it easy for me to understand that I shouldn’t go that way. Also…. why is it whenever I see rocks with that bit of white on top of in a video game, I understand that I can climb it? Is it now just a video game norm that we all know about, or is it something else?

The Witness is literally all about Visual Affordance… it might as well be it’s tag line. The way the game is structured helps guide users on the initial onset of the game to explore the island and interact with it’s puzzles. There are clues meant to provide hints to the player as to how to proceed, some more cryptic than others. I really have to applaud some of the uses of visual affordance in The Witness’ puzzle design. When engaging with these puzzles that feature different colored swatches, the player can understand pretty quickly that they have to isolate the different colors from one another. Other puzzles feature this tetris styled pieces. We can quickly recognize these shapes, and after some trial and error, can also understand how it fits within the puzzle.

I find the most interesting use of Visual Affordance in The Witness, that I’ve seen thus far, is it’s use of the hidden “World Puzzles.” In every puzzle that you’re exposed to (that I’m aware of) you have to start at a large circle, make a path, and end on a rounded point. That’s the very basis of The Witness’ puzzle design. The players know these shapes and can understand how to interact with them… and if they are observant enough, they might begin to recognize them in the world itself. This was very well done and a really cool use of Visual Affordance.

The Witness certainly isn’t without it’s faults. I’ve found that several of its puzzles are not user friendly, don’t provide enough information to the players, and are cryptic for the sake of being cryptic. That being said, I completely recognize that I haven’t finished the game and perhaps the way I’ve explored the world has removed me from experiencing elements in the proper order…. but that in of itself could be seen as a fault to the design of the game. The example that I’ll use here are these colored star puzzles that I’ve found in the game. Having found them after the color swatch puzzles, I would assume that it may act in a similar way. i.e. I have to isolate the different colored stars from one another. Yet that isn’t the case at all,and my previous learning experiences in the game didn’t help to further my understanding of this puzzle.

Evaluating how games make use of Visual Affordance, is also in some ways evaluating our own understanding and how we take in/interact with specific stimuli. In any case both Firewatch and The Witness make some very interesting uses of Visual Affordance, in very different ways. I look forward to continuing to discover ways that the Witness is hiding things for it’s players… and me.

0 Comments

Quantifying Art

Visual Affordance

Author

Archives