Sprite Analysis | Pokémon: Top-Down RPG Pixel Art

hello there my name's Brandon and I make pictures out of tiny squares and post them online for fun and I've been searching far and wide for some great pixel art to discuss so for this sprite analysis we're gonna study one of the most iconic Gameboy RPGs Pokemon first released for the Nintendo Gameboy in 1996 in particular I want to go through the design aspects of the top-down overworld style because there's some great examples of how to create small scale environmental objects while maintaining clarity and recognizability so let's get going and see if we can understand the power that's inside this style alright to get started it's important to address some of the specifications of the Game Boy itself as that plays heavily into the approach required for the pixel work the resolution or canvas size of the Gameboy screen is 160 by 144 pixels this breaks down further as being composed of a series of 8 by 8 pixel tiles that actually make up the backgrounds and characters you see in that space so what we're actually looking at is a full canvas constructed as 20 tiles wide by 18 tiles tall again with each tile being 8 by 8 pixels this construction helps constrain the sizing of objects within that space where they generally fill up some exact multiple of that tile dimension such as the 16 by 32 bed the 32 by 24 desk and of course the 8 by 8 repeatable floor tile now I don't know this to be the case but I think on some subconscious level this tile organization must play into the clean aesthetic of this style like our brains are able to somehow register how tidy the size relationships are between each of these objects and the relationship to each other on a grid with modern hardware we no longer have to necessarily consider this kind of sizing but it could be an important thing to keep in mind just from a design aspect nonetheless the other design restriction of course is that the game boy is limited to a four color palette from the original Hardware I believe this is programmed in shades of grey that then appear as a yellowish green due to a tinted screen if you work in a sprite though there's a gameboy preset color palette to achieve this look although I find that it's pretty saturated and dark and actually tends to lose contrast between the two lightest tones for the purposes of this video I put together a custom palette that has a more balanced contrast kind of like that of the black and white look just so it's easy to appreciate the contrast once we get talking about some of these pixel design principles I put the color values on screen here in case you want to use any of these particular color combos and as an aside this is actually one of my favorite things about the idea of gameboy coloring to kind of alter and adapt your own perception of this color scheme and my own opinion on what looks like the very best Gameboy green is always changing but right now I like this set so let's get going and continue onto some pixel work here a few common objects found in the world of Pokemon as we now know the sizing of these objects follows multiples of that 8x8 tiling scheme and since the game has a top-down perspective the construction of these objects is such that we see their top and one of their sides often using lighter shading up top and darker shading on the front face to differentiate these sides of the object there's also a strong use of black outlines for a bold cartoony look that helps give presents to the edges and individual shapes of these objects let's break down how this works with a really simple example if we're making a cube in this style like let's just say it's a box or something we can start by making a 16 by 16 square to fit that tile sizing and then for the top of the box let's use the second lightest tone to fill in a rectangle that leaves a one pixel border around the edge the remainder of the box will be the front face so we'll grab the next shade one tone darker and fill in the rest again leaving that one pixel border around the object edge so this differentiation in tones defines our shading scheme as if there's a light source above the box that's lighting the top of it more than the front face to get the corner edge to pop some more as they do with the Pokemon graphics we can add an edge highlight using that brightest white color the placement could be between the top and front along one edge or around the perimeter of the top for example depending on your own preferences from there it's just a matter of adding some extra decoration depending on what the object is in this case I've just made it into a little air-conditioning unit another thing I've noticed with the Pokemon style is that many objects have slightly rounded corner which helps give a bit soft or friendly look as opposed to sharp and rigid so that can be achieved by erasing the corner pixel from the silhouette and even when making rounded or more complex object shapes it can be helpful to start from this same structure and kind of carve out what you need like if we wanted to make a little barstool in this style we might start from that initial cube and then erase at the corners to add some rounding and define the seat add some highlights for the leg and some final decoration like the edge highlight and a few buttons on the seat taking this approach to building the objects helps keep the purse and shading logic consistent so that everything looks like it belongs together in the world and you don't hurt yourself in confusion trying to figure out their perspective of everything from scratch each time coming back to some actual pixel art from the game there's really nice examples of translating the small details of objects down into this scale for example look at the Super Nintendo hooked up to the TV which in addition to being a nice little self reference for Nintendo fits within is sixteen by sixteen space and to me it's a really great example of sizing a small object based on what can be achieved by an individual pixel in this case the power and reset buttons are conveyed by a single pixel and the rest of the console can kind of be sized and built out using that detail as a reference point another nice touch is the use of the highlight color to define the top of the game cartridge and then again the differentiation in tones towards the front of the console to convey some thickness and perspective and the controller is already enlarged a little to give some room to work with but if there was just a little bit more space another way to translate an object like this into small scale pixel art would be to create the d-pad as a plus sign and build out from there again there's not quite enough room in this case to justify that but still I like how they set the controller at a slight angle I feel like it kind of gives it a more casual feel than if it were all squared off all neat and tidy and I mentioned this in a previous video but another piece of great pixel work in the Pokemon world is the desktop computer in his tiled form here with the table piece it occupies a space of 32 by 16 pixels and makes super effective use of that area again if you were to think about what sorts of details could be sized out from a single pixel the mouse with that single pixel left and right buttons is a great example and the placement of single pixels on the keyboard do enough to convey the idea of a keyboard without needing to be any more accurate than that this is just such a fun scale to work in because the presence or absence of a single pixel in the right shade can literally make or break the readability of an object and if that wasn't enough this isn't even the only computer sprite in the game there's actually a handful of variants that keep it from getting stale with different monitor and screen designs and different keyboards one of the interesting variations is this one here with the monitor set to a slight angle almost like isometric style pixel art we see this kind of thing as well from the cash register in the PokeMart where the price display is angled so that you're able to see it you know it's little touches like this that had some nice believability to these objects and to the environments that there all right let's move on to a few characters what's amazing here is that the character designs of these little sprites all feel quite unique despite the fact that they all fit within the same 16 by 16 space even the little Pokemon sprites which need to convey very specific design features are 16 by 16 and that includes Snorlax who's mainly known for taking up a lot of space on pathways furthermore and again due to the limitations of the Gameboy the animated character sprites could only be made using three shades of color because the fourth color needed to be sacrificed in order to account for a sort of transparency color so even within the limited space and color palette restrictions they've achieved a lot of differentiation in the character designs through ice shapes hairstyles and overall distribution of the available color palette let's take a closer look at I design because I feel like the sizing of a two pixel tall eye is quite a common motif when working with character sizes really anywhere from 16 up to about 50 pixels in height and it really ends up being quite a versatile sizing because starting from the original two pixel rectangle you can kind of experiment with just popping an extra pixel on two different sides of it to create eyebrow or eyelash looks or even shift a few pixels around and mix and match them to suggest different expressions and real quick I just wanted to make a few comments about ground and floor tile designs from this game most of them are quite simple and uses only two tones to create simple patterns and textures and the designs are mostly built within that 8 by 8 pixel tile structure in a way that makes them perfectly repeatable one place with each other one special case here is the fancy tiling of the Polka Center and PokeMart which uses four related 8x8 tiles to allow it to build into a more elaborate pattern alright I think that'll do it for this one if there's a takeaway here I think it's probably just that working down in this small scale can be a lot of fun and things like the sizing and color limitations create these technical challenges that force us to be more economical with our design choices and by embracing those limitations we end up with a unique and characteristic style so thank you to this game for being such a strong reference point for this kind of style that I can learn from these designs and share those learnings in this video I guess you could say in some ways you teach me and I teach you Pokemon ok thanks for watching and take care and keep it square [Music]

Channel: Brandon James Greer

Views: 268,550

Keywords: pixel art, game boy, gameboy, sprite art, tutorial, tile, GB studio

Id: gwF0L55kIgg

Length: 9min 2sec (542 seconds)

Published: Sat Feb 08 2020