Critiquing Game Visuals: Common Problems and How to Solve Them

[Music] hello thank you i'm allie overton and i want to talk to you about common problems in game art and how we can solve them so this talk is going to cover some game out basics because it's for those of you that don't have a lot of experience with game art and are introducing it to your games we're going to talk about critique the way we can treat things instinctually and some ways that we can do it traditional and apply that to practical game critique also going to talk about vocabulary probably terms you've heard but maybe that you haven't thought about as well as you could have and so we're going to go over some examples so let's start with an example of an example so you're looking at your game and you're noticing that your character isn't as visible as you would like it to be against the background what tools do you have at your disposal to make your character more visible what is your player looking at instead of your character things to think about well let's start with critique critique is a tool for finding the strengths and weaknesses of an image so in our instinctive way we critique things as we'll see an image and we'll immediately judge it you have an opinion the first second you see the picture and then you justify your opinion you might say something like this picture's no good because that i think is a cat and that's not a cat's face so this can be valid there's plenty of times when this does merit valid feedback but you might see an image like this one and offer the feedback that it's too blue and so with that you or your artist fix it bam it's green problem solves or is it really maybe what you meant was there is more colors needed so it's important to know what you're looking for when you're critiquing an image so in traditional critique there's a four step structure you start by describing it so literal description of content you look at an image and you say there's two people one of them is holding a pitchfork they're in front of a building they're both looking pretty frowny um and that sort of thing very content based and then you analyze if this is a piece of traditional art you might talk about how it was made with acrylic and what type of tools they made if it's digital art you might tell them that it's made in photoshop and you can tell by the pixels um no matter what type of art it is you talk about like the way that color is used way contrast is used and then you interpret this is the sort of thing that people like to joke about when they're critiquing art they're like yes splatter painting is fascinating but what does it mean and there is some element of what does it mean to interpreting but it's more about what did the artist intend uh maybe the spotter painting really was just to get out some anger maybe this portrait is a portrait of two people it's very realistic based on who they are or maybe it's a commentary on small town life what do you think the intention of the artist was and then now that you've collected all of this information you can judge you know how it was made you have an inkling of why it was made and so you can determine if it was effective so in that portraits was it an accurate portrait in the splatter painting do you think the artist feels better now like so how does this apply to practical critique for gamer well there's one key difference but most of the fundamentals are the same and that difference is that you get to define your own goals this is your game you know what you want to do with your art you know what sort of thing you're trying to get across there's a few goals that are very common in gamer one of them is portraying information you often want your player to be able to tell at a glance where danger is you might want to get control their focus similar to information you want them to look at something in particular a face a dialogue it's very hard to get players to actually look at dialogue and then there's emotion some games this doesn't really affect them too much but there's very genre-based games like horror and others that trying to get across emotion with your art is very important to them and then style style can be a variable thing maybe you are a solo programmer and your style is going to be minimalist and simple because that's within your skill level or maybe you working with an artist who's incredibly talented and you want to show them off maybe marketing is a goal of yours and you want art that supports marketing and might go viral on twitter whatever your goals are now that you know them and you've established them and they can vary from these and include these and others you can determine the effectiveness of your visuals so in these they make their information very clear using bright colors and interesting shapes so you can immediately read that something is dangerous in dream daddy they use detail and color and are natural inclination to look at faces to draw your eye to the character as well as a really large text box to make people actually look at the text and then in limbo they have interesting silhouettes and desaturated colors that make you feel the spookiness factor even more and in bastion they intentionally have a more elaborate style that is very memorable and interesting but not necessarily a requirement for their game play so with that what where is this image succeeding what can we change about it and what tools do we have to improve it well art vocabulary this is how we talk about the tools that we have to influence our visuals there's a bunch of common ones so let's start with color you've probably heard of it so when we talk about color we might say that something is blue and we want it to be a blue thing but blue could be blue or blue or blue so it's proper to be more specific it's much more helpful so we usually talk about value because value is one of the great ways we can make contrast individual value is the light and dark in an image the gradient from brightest white to darkest black and set hue is next it's ignoring saturation and value hue is basically color as we're learning as a kid it's the rainbow red orange yellow green blue purple and then saturation is how gray or vibrant something is this is regardless of hue and value some people think saturation is also influenced by value but they're completely separate from each other so contrast can be between any of these elements value contrast like i said is one of the most effective ones but it can also be a contrast of hues or a contrast of saturation chess is an example of contrast of value it's the lightest white versus the darkest black checkers is an example of contrast of saturation very red very vibrant versus desaturated black and chinese checkers is a contrast of hues where you have only differentiation between hues and not in value or saturation so when we talk about color it's important to try and talk about all of these elements individually it's more valuable to say i want a light bright sky than it is to say i want a blue sky on its own so composition there's a whole lot of elements to composition and art but one of the ones that applies to gameplay the most is density high density visuals are chaotic busy and noisy density is basically just how much stuff on the secret is on the screen so if there's a bunch of stuff there's a bunch of stuff you got to pay attention to they can make your visuals feel more closed in they can make you feel frantic but they can also make your player space seem more alive and vivid and full and density can be either in the amount of content or in the detail of the content so in enter the gungeon the amount of content they have because it's a bullet hell inherently is a more high density visual they try to lower the density of the visuals in the background to make it more clear in bastion they actually increase the density of their visuals to make it a more full and immersive environment to add more detail to the art style low density is the opposite it's open it's minimal it's airy it's easy to follow your eye through the space and see things clearly it can also have the risk of looking unfinished or unpolished especially if you're doing a very minimal game thomas is alone is a very minimal game that avoids this con this problem because it uses texture and lighting to fill in the lack of density that the gameplay offers on the other hand the mortician's channel is fairly dense in terms of interactability on the screen whereas it's lower in detail which allows you to see what's going on more clearly and then there's style style we often talk about stylized versus realistic but we also end up talking about cartoony and cartoony is a bit of a trap word it means a lot of different things to a lot of different people so it's important to be more specific break things down into their elements so talking about color again you might have very saturated colors and these are really good for giving moods in a scene long dark offers a much more of a wondrous feeling for its colors whereas games that have more realistic covers colors give you a more sense of weight to your choices and your actions you feel like the things that you do in the game should have more real world repercussion line is one of those aspects of cartooniness that you might talk about but it's a very graphic sort of thing it helps delineate things from their backgrounds you do it a more realistic game it's very notable um and if you remove line from a visual that you might say is more stylized it really emphasizes the mood of a piece pointing more towards hue and value choices than towards uh the overall stylization and then proportion with funny proportions you can stylize them to a point where a character's head is as big as his body and that will make things more cheery and funny but on the other hand if you have more realistic proportions in an otherwise stylized style you end up having more immersion into the mood of that character you think of them as more of an elaborate fully fleshed human and then there's light and shadow zelda covers a lot of these through its games you can have absolutely no delineation of light and shadow or you can have flash light and shadow or you can have large gradations of light and shadow whatever of these elements color line proportion light and shallow that you use they can be anything and stylized and realistic it can be very stylized color with very realistic shadow you can have line on extremely realistic things but the most important thing is to be intentional about your choices make sure that they all go together and are cohesive in pokemon sun and moon the character has a large head and it's about the same size as their torso and because of the level of stylization throughout the rest of the style it makes a cohesive piece but if you have a more realistic game and you have a giant head it stands out a little bit weird now in lara croft's big head mode they did that intentionally but if you do it on accident nobody's going to take your game seriously so that was a lot but let's talk about some examples so that example we talked about before we can pretty quickly tell that it's not a high density environment so that's not a factor in controlling the focus there's no frequency of detail that's distracting us from the player but so we can go to our color things what in the color spectrum is affecting this well hue there's a delineation of hue between the character and the background so that's not the problem but the real thing is value if you take away the hues the saturation and look at it in grayscale you can immediately tell that the character doesn't stand out against the background so it's good to up the values make the character more of a high contrast focus and that'll pop out more against the background immediately it's a lot easier to see what's going on and focus on where you want to where you're on the player so that's that in value and if you compare it to the original it's a lot easier to see what's going on all right so in this game this is the sort of game where you're trying to light up a whole grid of networks but right now you can see the lit parts very easily because in the hierarchy of value they're very bright they're the only thing that contrasts heavily with the background but in this sort of game what matters is not just the lit parts also the dark parts it's important to give each piece of information in your games the same level if they matter the same amount so if we bring the dark parts up in value to match it's a lot easier to get the information you need because you need both parts of the puzzle to solve it before it was not the same level in the hierarchy and you couldn't focus on the information you needed to solve the puzzle so here is it before it's hard to focus on the dark parts that you need that information to solve the puzzle and now it's a lot easier to balance it so you can add contrast in hue to solve that problem all right so this is the sort of thing that happens when you're like i want a really bright colorful game and you're extremely literal about what color is and your saturation is just max trees are green sun is yellow heroes have red hair and it's all as bright as possible um so just cool it with your saturation basically you can do things to make your game interesting without just making it as in your face as possible and like an ms paint drawing be made when you're 13 years old so if you calm down your saturation you can make more interesting less literal color choices they tree trunk can be purple whatever it's more interesting and less literal and it catches the eye as much but it's not quite as painful and if you still want to go even further you can be even less literal stylize your colors even more and do something a little weird and people will find that very memorable but not painful and then so you can have something that people like at the end of the day so visual clarity this can happen when you're trying to reuse assets especially to minimize the amount of art labor you're doing like you get something in the asset store and you just recolor it you have a green ally and a red enemy but if you're colorblind these enemies look basically the same to you and there's ways to work around that like value contrast works for everybody if you make adjustments to help with people with visual impairments it helps everybody delineate things better not just people who are visually impaired so other options are to like see you can immediately tell that it's more different for everyone other options are to include symbology not just in character design or faces but if you have a particle effect that's red when it's good and green when's bad add some sort of symbol like stars or angry x's to delineate symbolically what's good or bad so that everyone can tell what's going on more easily so you can see that this is easy much easier to see for everyone whether or not you're colorblind all right one of the challenges of 3d lighting is when you put a light in your scene and you realize everything is still too dark so just keep upping the intensity of the lighting this is really common and people are getting first into 3d art or making 3d games so uh most engines and 3d renderers have an environmental light or a sky box which you can increase the lighting and value of so that you have a flat level of light it makes your shadows less dark it decreases the overall contrast of your image and lets you do stuff more intentionally instead of accidentally having black value shadows distracting from the art that you're trying to port across and then once you do that you can use color and using a warm color can give you more of a narrative experience like candlelight instead of the intense high white that makes you feel like you're in an office and then you can also use color other ways to just affect the mood make things feel magical make things feel silly or spiritual or just fun this is it before and this is it once you try to do lighting more intentionally instead of just trying to light it enough that everyone can see and some fancy backgrounds so you have a game you put a fancy background in it and now nobody can stop looking at the background and they're not paying attention to your player anymore so it's another thing where there's value contrast problems there's more value contrast in the background than there is in the player this is also a density thing there's a high density background and a low density player but that's also a type of contrast or contrast of densities can also be valuable so that's not the worst part the worst part is the value contrast being more interesting in the background so if we drop down the value contrast make it more of a mid-tone the player comes out but it's also good for the player itself to be more high contrast because you want to be able to do a lot of things with your backgrounds you want them to be able to be diverse if you make a high contrast player it can be more intentionally put against a low contrast background and you can have a wide variety of low contrast backgrounds you can also solve this problem by having a light player against a dark background but that gives you less options for the diversity of your backgrounds you can also do a dark player it's a light background but that leads you to end up making the same choices in your environment art for the rest of your gameplay so that's what it was like originally and this is our revision you can immediately see that the player is a lot easier to pick out against the content all right too cute is a thing that happens a lot in art people have a lot of opinions about what level of cuteness they want in their games and there's a lot of elements to cuteness that it's kind of vague and confusing one immediately obvious one about this one is that he's a very saturated green zombie against a spooky background so if we drop down the saturation immediately the mood the style that you're going for comes across more effectively but there's also the other elements of stylization we talked about one of which was proportion big things like weird proportions big heads big eyes make things feel a lot more cute very quickly so we shake down the head more creepy and we can also shrink down the eyes once again so you have your green guy who's not the creepiest he could be and then you desaturate him adjust his proportions and he gets a lot creepier very fast less cute alright so there is a lot going on here and that's pretty typical for game visuals like you trying to get a bunch of stuff in maybe it's not as cohesive as you planned maybe you didn't make a plan from the beginning and there's you're kind of overwhelmed so the thing to do i think first is take away the gameplay aspect and focus on your backgrounds just like before this is a very high density background with a lot of value contrast if we lower the value contrast you can immediately put more stuff in the foreground that will pop out more you can see this with the spiderweb but the spiderweb also doesn't need to be a high contrast item it informs the gameplay and it's an interesting storytelling element but it's not important to the gameplay so you can reduce that as well and now when you put things back on the screen it's a lot easier to see what's going on and understand what's happening so now that we've resolved the background problems let's look at the characters there's actually a lot of good stuff happening with some of the characters in this each of the butterflies has a unique pattern and a unique color so no matter what color impairment you might have you can still tell based on the pattern that they're different and they have hue separation for each player to recognize them as well but now that we've adjusted the background to more of a medium tone the spider is a lot harder to see and pick out so we want to do a value adjustment on that spider so it pops out make it darker you can see it a lot better and we also made the eyes a different hue with hue contrast between the spider's eyes and the environment is now greater so you can pick that out and in games that are static where you have static elements you can also do something like the light in the background to increase the contrast it's harder to do in open world games but if you have a 2d game it's something that you can use all right so if we bring back our bullets uh like i said earlier bullet hells have a sort of inherent density challenge so we need to do what we can to make it clearer so these bullets have a delineation strategy that's super common in the means the kids do which is you have a white object in a black outline or a dark outline it's purple in this case but now that we've changed the values of the image now we have darker values we don't need a dark value around a white object because the white object is already brightest it confuses things like the hitbox and where things would land if you were playing so it's better to make things bright you can see where the bounds of the bullets are a lot easier and figure out what's going on more easily and you can have a color association between the bullets that the boss produces and the boss itself if we go to the player bullets it's a lot easier to delineate the bullets from each other now already because the yellow is very different from what they are looking like but we'd like to give the player as much information as we can so why don't we color the bullets to match the player more information is always good we want the players to know what's going on and then we want to delineate the bullets differently between the players and the boss even more and you can do shape for that just like i talked about when i talked about color blindness but you might want to reserve unique shapes for special weapons or power ups so you can just use size to tell the player that a bullet is friendly or an enemy if it's a small bull it's a friendly bullet and that makes it a lot easier to see what's going on there's less visual density there's more open space between things and you can figure out what's happening a lot more easily so this is what it looked like before and this is what it looks like now so we talked about critique how we do it instinctively and a good way to think about it for actual game development we talked about color and composition and style and how those affect our game visuals and we applied it so hopefully you can now apply these to your own game visuals but every game is different these solutions that i've used are optional solutions you can use a lot of different strategies with the elements i've talked about to solve gameplay problems and solve like your goals for your games and figure out what suits your game best thank you i'm ali thank you thank you ali if you have a question for ali please come to the mic in the middle of the aisle there um i will get things started myself this is this is awesome stuff and a lot of info how do you communicate this stuff when you're working with other you know within teams uh you know if someone gives you that it's too blue or something like that do you give them a whole you know half an hour type talk or you just give them a a small piece of this well i'm hoping i can just link them to my talk in the future yeah uh but usually you try to ask questions back so if somebody's like it's too blue you just ask do you mean it's too saturated do you mean it you want it to be a different color i just try to use the knowledge that you have to ask them and lead them to the correct solution any questions hi thank you for the great talk thank you um so i definitely paid attention to the owl my eyes slide because i'm working on a very colorful platformer and i probably can hurt some people's eyes so that was great and think about that how would you think about styles very colorful bright saturated styles that like nintendo uses what kind of tools might they use or might think about something like that to be able to hit that kind of toy like fun approach without hurting people's eyes so the question is how to use bright colors successfully without hurting people's eyes well basically you are more aware of saturation as vivid as those sorts of games tend to seem they have various levels of saturation that makes the colors more compatible you might have a red and a green on screen together as well but you won't put them on the same character and that makes it a lot safer so you use the sort of density and minimal minimalist space separation between elements so that if you have the highest of contrast colors they're not next to each other like mario is red and blue and luigi is green and blue but neither of them are green and red which are the most huge uh hue and color saturation contrast that you could have hi um have you ever dealt with like highly complex machine models like how would you so i work in a company that has very like a small team but we do very complex objects so have you ever had to deal with stuff like say a car like taking apart breaking it down like they are very realistic but how would you kind of manage this styling in that uh in in what way it's tough because we have to maintain like product integrity but then we also have to do artistic so i don't know if you guys have ever had to deal with that with like hey make this thing look cool but not too realistic sorry i just didn't know that's a vague question so you're asking how you can make detailed machine models look stylized in an interesting way yeah well it depends on what elements you're allowed to play with based on your thing i'm working on a game where i make a lot of weird planes but they're not anywhere in the realm of realistic we just do a bunch of strange shapes and play with color palettes to make them stick out in unique ways so it depends on which parts of your game or visuals you're allowed to play with if you can stylize your color it's always a really fun way to work with stuff and make things more interesting okay i actually have i guess a more specific question have you ever had to deal with um like conflict with preference over certain color palettes that's a very common color palettes are super opinion based that's the sort of the thing where you play test it and see where it's effective because no matter what situation you're in there are always people of different opinions and you think about your target audience and what they are most likely to want to see okay thank you all right thanks all right i think that's that's going to wrap things up please make sure you fill out your email surveys to give ali some feedback on our talk uh thank you so much ellie you

Channel: GDC

Views: 28,748

Rating: 4.9455252 out of 5

Keywords: gdc, talk, panel, game, games, gaming, development, hd, design, art, game art, graphic design, visuals, critque, artists

Id: Dm24XyRPMwg

Length: 28min 4sec (1684 seconds)

Published: Thu Jul 01 2021