Why Your 2D Game Art looks Flat

why do some today games look flat and others don't and I don't mean flat in the way that spelunk looks flat because it doesn't really use parallx that much but like why does hollow Knight not look flat whereas a game like likea is comparatively paperlike or to take it further why does grz sometimes feel flat and other times not well I think your first assumption might be that as long as you have Parallax and camera movement you get that depth but take a look at this scene from ab's ay no camera movement but it doesn't look flat we can even look at this scene in likea no camera movement doesn't look flat whereas in this scene it starts to look flat again the reality is that fakeing depth is really about not breaking the expectation of the audience if your camera is static you can shade your asset to look kind of 3D and since the camera doesn't move it will continue feeling kind of 3D but as soon as you start moving the camera now your brain is going to expect objects like this to separate and when they don't we start to realize it's all on one single layer and that realization is the problem we need to avoid this is why you can create a scene like this one from copad with very little movement but you get that small shift as the camera moves and you also have one or two assets that are clearly in front of the character to be fair it also helps having a rotating 3D object in the background now the game feels fairly immersive but in an actual game you generally can't do this you need the camera to move a lot so faking depth like they've done in ab's Odyssey doesn't really work so how should you do it well the principle is the same it's about expectation if something in reality is really really far away it tends to look fairly flat but if it's close to us it looks 3D take this tripod arm pay extra attention to each joint here and this hole if it's close to the camera and I do comparatively small movements side to side each of these joints shift and we get quite a bit of Parallax but if the object is far away from me the same movement will barely create any Parallax it all looks roughly the same this same principle applies to your game a flat asset that is far away doesn't have to distort to look reasonable so a game like run with a fairly zoomed out camera doesn't really feel flat because it looks like we're far away so we don't expect the blocks to look that different as we move conversely if we have objects that we expect to be fairly close to us but the assets don't distort as we move sideways well now we have broken the illusion the object looks flat this is why some things in gits look flat whereas others don't they're drawn the same but the expectation is that this asset should distort whereas this one shouldn't so what does this mean for us well two things first and foremost it's mostly the objects close to the camera or objects that are really big that we need to be careful with fundamentally it also depends on the shape of the object if we have a shape like a sign since that object is flat it won't distort as we move sideways which we can compareed to a bush which is a much more three-dimensional object in this case the bush to the left looks more realistic like it has more depth compared to the bush to the right which just looks like a flat Sprite we expect it to distort and so when it doesn't it feels Splat so we can see in a game like Rayman that the big foreground objects actually don't move that much they add some movement enough to create the illusion of depth but not enough movement to create the expectation of distortion this principle however is quite important for a different reason because when we do our level design we will on occasion have areas like this one where we see this side of the room and the other side of the room at the same time so that we know where to go the problem with this type of situation is that we frankly can't add that much Parallax to the section in between because the seam will break so if we were to try this with this pillar here we add some nice Parallax and well it looks pretty cool but as soon as I walk to the edge of the screen it starts looking terribly and behaving terribly so if I add Parallax it needs to be fairly understated like this now since the layer barely moves at all it won't become awkward as I move from here to here this is something we see in quite a lot of games in areas where they're allowed to Showcase a lot of parallx they do but whenever The Parallax will interfere with the level design they basically reduce The Parallax to almost nothing but now we have a problem without The Parallax in the foreground we're on the risk of the scene looking flat so what can we do well two things the first thing is something we can see quite clearly in Rayman the perspective of each asset makes the scene look more 3D it's all drawn in a sort of diametric projection compared to a profile view of each asset personally I think this view affects readability too much even if it makes your game look less flat because when the asset is angled like this it makes it difficult to judge exactly where the hit box is especially compared to the same scenario where the edge of the asset is exactly where the hit box is but we can see this principle applied even in a game like Hollow Knight each asset is sometimes drown to make it seem slightly more rounded so even if the edge is flat the side of the asset doesn't feel that flat which we can see if we compare these two assets one clearly looks flat whereas the other feels as if it has more depth the next trick is something we can see in AI now I don't really want to go into the discussion of or being 3D in the original game 3D models were render as 2D Sprites and for the purposes of this discussion I just want to look at the Small Tricks we can use to make the scene look less flat so here we have a similar scenario where we can't have that heavy Parallax but in order to mask the flatness almost every single asset moves this generally Works quite well even when using Parallax layers if we take a scam with a big flat foreground layer this basically screams flat foreground but if we add a Shader to it with some movement now we get some of that added Distortion which masks the flatness of the Sprite to some extent when the assets move they kind of stop looking flat the second thing we can see in ay is that whenever the level design allows for strong Parallax it uses it just like here in Rayman or here in ghong it even goes so far as to make a point of regularly blocking the character in order to force the feeling of depth so these are assets that are extremely close to the camera these assets that are close to us generally also lack a lot of information they're blurry and they're darker the reason for this is that if we blur an asset and and make it more of a silhouette we lose the information necessary to evaluate whether the asset is 3D or 2D so just looks sensible so it basically stops feeling flat this is one of the biggest benefits to making your foreground pure black you don't have to draw as much and a silhouetted AET almost never looks flat this is another reason why I generally like adding particle effects at the bottom of my assets if we take this huge tree and then walk back and forth the asset clearly looks almost like paper but if we place it further into the background and add some layers in front of it now it looks slightly less like paper now if we add some particle effects at this bottom section of the tree now the particle effects adds movement which takes attention away from the asset it also highlights each layer thus highlighting the depth the last thing it does is that it masks the flatness at the bottom of the asset and in general the trick of masking flatness becomes quite important for instance I often mention how blurring the background is important because of readability but just take a look at this thing without blur and then compare it to moderate blur if we add information to evaluate the player will evaluate it so we get a flat look in one situation and a less flat look in another as soon as you add information and add expectation you have to add layers and you have to actually add depth and this can actually be an extremely arduous task if we look at this scene in Leica that looks fairly flat the reason this looks flat is that we expect this object to move differently in relation to this object even if that movement is slight which we saw with our example with the gorilla pod but in order to accomplish this you actually to put in a lot of work let's compare this scene to itora the same type of City doesn't look as flat but the reason for this is that almost every single asset is broken up into several layers so this tree is not just one asset it's broken up into smaller assets on different layers in order to create a tiny Parallax effect and thus look slightly less flat this is something Raymond does as well breaking assets like this tree into smaller components in order to add parallx and this leads us into the final question is it all worth it well it depends making your character slightly less flat by drawing them in three quarter View and ensuring that the shoulders shift back and forth is something that makes your game look less flat with basically no drawbacks in a similar fashion setting a context where flatness doesn't feel off is something that also basically has no downside like this scene which doesn't feel terribly flat even though it is because the scene is basically composed of stone blocks so we expect it to look like it does which is something that run also benefits from but as soon as we get into a lot of the other tricks then we suddenly have to make some considerations splitting up individual assets to Great depth is extremely timec consuming adding shaders and particle effects to every single asset can absolutely ruin your performance and hiding information in the form of blur or silouettes works for creating the illusion of depth but if we look at this scene which I created to talk about uniqueness if we slap a dark foreground and blur onto this scene now it suddenly feels a lot less unique that is it basically went from gr to hollow Knight without redrawing the scene at all so at that point I think for most of us it becomes a question of picking and choosing some tricks are worth it and other tricks are not thanks for watching bye

Channel: Nonsensical 2D

Views: 23,019

Keywords:

Id: OGeLEK6g34A

Length: 9min 10sec (550 seconds)

Published: Sun Mar 31 2024