Pixel Art Class - About Pixels For Games

every single time you look at a screen key information is designed to stick out I want to sort of break down like what it means to make to make picks a lot in a video game that's separate from just making picks alive so let's go to the top examples from the last year or at least let's go old time why be so why be so constrained let's check out everything that there is here's a perfect example of some pixel art it's definitely limited in its palette it's definitely limited in its resolution to the point where you can see individual pixels and it's using a shader something you would see in a video game engine used to make animated water now we can see there are like very bright spots that are definitely still sort of like a pixel art in that they are single pixel details this is something that I would say is closer to what you would call like high bit pixel art suitable for like modern video games you can see that there are repeating layers that are being used you can see that there is a static background there animations that loop this idea of reusing pixels of reusing assets to communicate what you're trying to do is like integral to fix a lot it's a really good example of what you would call like a high bit pixel art now there are elements of this that I would say sort of break the some of the principles of pixel art you can see like this texture on the bottom is seats you can sort of get a little bit lost because there's almost like a gradient shadow on the seats that go down that you can't really appreciate at a pixel level it may just be that the palate is really really dense but seeing this sort of like blur I think the tracks a little bit from the effect this is not in 2019 this is not about especially if you're making games so obviously my tutorial today is about pixel art specifically making games in 2019 is not about how pixel art your game is right you can obviously make multiple different kinds of games with great with you know varying amounts of commitment to that because aesthetic what matters is that it works right in this case I would say it does work so making a good image more important than making something that is true to some sort of pixel art I don't know commitment another really great example of pics a lot you can see how limited the palette is and you can see how here certain details are really really only representable at the pixel level right this sign with this checkerboard pattern here this is called dithering and in often times in pixel art would use this technique to average a color out so the two colors went did it when checkerboard like that gives you an impression of a color that sits in between those two colors but here the example is actually I think to literally show you a checkerboard pattern on a sign they it's kind of interesting because it's sort of like very absolute in how it how it reads whereas these other parts here you can see the colors are sort of more blended and natural this image obviously is not something that you would really think would be suitable in a pixel art game mostly because of the the perspective and depth when we talk about video games especially if it picks alive your perspective is locked and is generally not one that is has continuously 3d you don't you generally never see lines that go from the horizon to the foreground because if you needed to move the camera at all how would you mini play those lines when we look at Super Nintendo games and and back the perspective is almost always fixed right in Mario Brothers we have side-scrolling so you're looking at 2d your side on a whole genre of platformers and games are based on this perspective is fixed perspective we have top-down examples where you're running left-right there is depth but it's it's not really true depth the sprite has always the same size you never see the sky but at least you have free freedom of movement on the ground we have games like Fire Emblem it's a little bit different here this game sort of straddles two perspectives you've got like the top down in the map view and then inside of battles there are these Sidon sprites so you can obviously video games are just software so you can do whatever you want and then we have isometric so I got lucky there I just sort of pasted some stuff and medicine up for the last gamut of different perspectives so isometric would be another one which is somewhere between top-down and Sidon you know you've got basically four different angles that you that everything could be positioned at as far as characters again it's similar to top-down except you do get this sort of a little bit more depth how you actually control a character and how you reuse graphics again coming back to that idea video game graphics for the most part are very expensive to create and were most expensive to create in these times back in before the 2000s and so the idea of reusing and you can see it here I mean with these 2/10 you know if this game was drawn with perspective this tent would not look the same as this tent which means they'd have to be drawn twice the idea of the constraint of the actual platform it kind of puts a fork right between pixel art that's just art and it's just supposed to be sort of the same as a painting and pixel art that's used for an actual software you know purpose like what else can we really like think about when it comes to video games that would differentiate video game graphics from like just part they're really obvious one that sticks out to me is like so we've got input but also communication and I want to talk about this sort of in broad terms before I go too deep so bear with me for just a minute video games first and foremost even though they are entertainment they entertainment software come when we look at video games every single time you look at a screen key information is designed to stick out right and it's no different these design principles that you would call on and no different from if you were designing a website a sign or flag any other kind of image that's for communication purposes so when we talk about like designing pixel art for a video game things like color choices how you style your game elements are hugely important to how well that game plays and reads visually I would say like here's a hot take I don't think Mario stands out very well in this image the shade of brown versus the sky they blend like almost too well the red and green don't pair well together and the silhouettes kind of muddy now Mario is iconic I'm not gonna take shots at him you're like it's the only the the plus side is that this is the only red thing on the screen obviously this is a part of a screen shots there's other things he would say on screen but what's also important is not just the character but the colors that are being used I think this coin block stands out amazingly well Ruby wise says would a black outline help Mario that's exactly what I wanted to just talk about there are a lot of techniques that have been developed over the course of video game pixel art to help highlight or isolate elements because those elements are more important it's a prioritization exercise when we talk about images and specifically the readability of images one of the most important things is really contrast coming back to that Atari example you know the thing that is the most standout thing you could possibly draw would be a white rectangle on a black square and in the context of pong you know it's super clear that this rectangle is here and not somewhere else if you know that your player 2 or whatever and you're on the right-hand side you never have a question about like where your paddle is right or where the ball is now obviously these sprites are so low res that you wouldn't be able to recognize that there were paddles necessarily so if you were to like look at this as a still image you might not understand this is a video game but that's a problem for 1960 not a problem for 2019 why is this why does it stand out so well it stands out so well because it's high contrast your brain is designed to basically process images to find things that are different from other things it's like object tracking if I made this really really low contrast it's actually hard for you to look at but it should be it is for me or even more shallow this becomes really hard to look at and when I'm working with low contrast pixel heart Sam look I'm working on backgrounds I find that I struggle my eyes actually get really sore because they they strain to tell the difference between the colors and this isn't just a question of of brightness it can be a question of tone as well if you have two colors that are in the same have the same brightness and have the same saturation but only slightly have different hues those are equally difficult to tell apart right that might hurt your eyes as well looking at the trying to find out the difference between this grain it's blue it hurts my eyes to look at Ruby wise says as a very partially colorblind guy it can be a struggle that's right and so this very quickly like red and green typically we talk about colorblindness tend to be two colors that we think of as of red and green its opposites right we think of this color and this color and we spoke about this before right spoke about red green and blue as being like completely isolated in the spectrum and completely opposite each other but what that means is that your brain processes them as equal full red and full green are both full you know what I mean so having them next to each other even when you aren't colorblind I find could be quite garish the only difference is which parts of your which parts of the cones and the rods look at them but those cones and rods both pick up a full signal so then your brain has to make a distinction between the kinds of things that are looking at rather than the value of those things which I think must be harder for some reason but we won't go too far into it what's important though is that from a usability standpoint and if you were to make production software you would know about this stuff if you if you work on web design legibility is hugely important so outlines there are one technique that we can use to basically draw a distinction between things and outlines really handy and it's an insanely popular technique in pixel art because of the following well well let's take Super Mario good example now in later games you can actually see the outlining becoming more relevant or Super Mario Brothers 3 on the NES versus the original Super Mario Brothers sprite you can see they've actually started to incorporate those outlines to make Mario more distinct let's say we're looking at good old Super Mario Brothers I'm gonna make a new layer in a sprite and I'm just gonna place a blue background behind Mario okay now Mario stands out well you could probably find a color that Mario stands out really well yeah in this case the sprite is really bright the background is really dark so Mario stands out quite well however if I was to put Mari in a really bright scene it becomes a little harder to look out especially if it go to the woods those middle tones because Marie himself is sort of like more middle bright than fully bright if we look at the at the brightness of his actual sprite we look over here on the left hand side 60 percent brightness here it's like 50% brightness on the red so middle tones will be conflicting because they're the same brightness as Mario however if we were to give Mario an outline and in a sprite that's really easy because you can just press shift o and get one and you can make it a full outline or an outline that's just sort of gonna miss those corners here let's use the one that's going to miss the corners here you know you can imagine you know a night sequence and a day sequence you're still gonna be able to see Mario very clearly because even in the day sequence where he's gonna get drowned out there's this barrier right this black heart line that we've given Mario so that he's always in high contrast with what is right next to him and as we talk about games with you know additional colors and we've got you know underwater levels and we've got learn lower levels the outline gives us and I just gives us an easy way out to create contrast that's one tool in videogames that we that we use a lot of so it's all about contrast and I would say salience so selective color sometimes even selective shapes so for example if you have a game where the main character is a ball and all of the environment is made of squares that would be another thing that stands out that creates this idea of focus or priority there and there are multiple ways of being able to like isolate things on the screen if you've played and this is not a pixel art game but if you've played cuphead there is a color that is only reserved for one purpose and that is pink for parrying whenever there is something pink on the screen you can jump on that thing to do like a parry attack and so in a video game context is very useful because for the player you just tell them well everything pink is variable and that's all they have to remember there's no additional mental work that has to be done hey pal thanks for watching and thanks most especially to the patrons and twitch subs who support this channel in my game dev project insignia to find out more click the links in the description below and if you liked this video tell youtube by clicking the like button and then YouTube will tell me and then I'll make more videos that's nice

Channel: AdamCYounis

Views: 94,754

Keywords: game development, pixel art, game dev, game, video game, indie games, stream

Id: 1yB3qQf391U

Length: 14min 29sec (869 seconds)

Published: Tue Mar 10 2020