If you've played an old arcade game like Pac-Man and Donkey Kong, or some recent indie titles like Hotline Miami, SuperBrothers: Sword and Sworcery (more on this game later), Terraria, Starbound, Retro City Rampage, Papers Please, Cthulu Saves the World, Super Meat Boy, Gunpoint, and loads others, then you know what pixel art is.
Ta-da!
That is the first boss from the original Legend of Zelda on the NES. It's not mine. I claim no responsibility for it. But it is pixel art, and it is cool. It's also relevant to when I actually started getting into making pixel art. About a year ago, before I went off to college, me and some good chums were playing Garry's Mod, a lovely game about screwing off and doing whatever suits your fancy at the time, and one of my friends began to tell me how much he loved the Zelda series, as he did every time we chatted. Then, he said, "Hey, wouldn't it be cool if someone redesigned the first dungeon of Zelda as a map for Garry's Mod?".
And I, having started to dabble around in making maps for Garry's Mod, said, "I could probably do that.".
And so, I made it.
Looks pretty decent. It's got the dark, gloomy nature of a dungeon, with all the retro feel of a 8-Bit video game from the 80's. The textures look pretty nice as well, mainly since they were taken directly from the dungeon itself. Have a look and compare:
My recreation looks pretty close to the actual thing minus the enemies and the basement room near the top. And, of course, it's 3-D. But, you might notice if you look close enough at the textures that I had no idea how to make pixel art properly. You see, the whole idea of pixel art is that you are working with pixels, which are tiny. The problem is, the standard resolution for textures in Source Hammer Editor (the program that allows me to create maps for Garry's Mod) is 512 x 512, which means that each texture is 512 individual pixels wide and 512 individual pixels long. Attempting to recreate something as blocky and abstract as that dragon up there, or even the wall and the floor tiles when starting at a big resolution is an exercise in masochism.
So, you don't do that. Instead, you start small at, for example, a resolution of 25 x 25, and draw in pixels with either the brush or the pencil tool in photoshop (pro tip: the pencil works better). In my case at the time, however, I simply cut out the individual tiles of the floor and walls from that map up there (which were a resolution of 16 x 16 pixels) and pasted them into Photoshop. Then, I simply upscaled them to 512 x 512.
Or not.
Here's the issue with upscaling from small sizes, it looks like shit. As you can see, the sharp edges of the pixels become blurry and yucky. This wouldn't be acceptable in a Nintendo 64 game, let alone Garry's Mod.
So, being inexperienced and too lazy to go look up on Google how to make proper pixel art, I went into Paint.Net and started a long a complex process of getting the textures to look cool without having to constantly redraw everything as I went up in scale. And this was the result:
To be fair, in game they don't look too bad at all. But this is not how you are supposed to make pixel art. The process for making pixel art properly is actually very simple. You still start at a small size like 16 x 16, and you still upscale to a bigger size.
"But you said that doesn't work!"
Actually, it does.
The problem with the blurriness when you upscale is not because of upscaling in general, it's how you upscaled which is the problem. When you go into Photoshop and go to Image>Image Size in order to resize the picture from small to large, the last option you have is Resample, which is how Photoshop resizes the photo. The default setting for this is Automatic, which is wrong for pixel art. Change your resample to Nearest Neighbor, and then try resizing.
Muuuuuuuuuuch better. Nearest Neighbor resampling gives you wonderful sharp edges perfect for pixel art. And that reminds me, I should probably go back into the map and change out the materials for the better ones. But as for you, now you can start working on your own pixel art! But before you do that, let me show you some of mine:
These are two fighter jets that I came up with for a 2D Space Shooter tutorial project in the Unity Engine. Take a stab at which one is the enemy fighter.
This is the asteroid that the player would have to avoid in the space shooter. It looks like Kryptonite -- which is perfect for killing off overpowered superheroes.
My first humanoid creation. He looks like Finn from Adventure Time.
I don't know why I created this dude. He looks kinda cool though.
This is Clockface. He was inspired by Tickety Tock from Blues Clues. You'll be seeing him again pretty soon.
This is Shadow Snake. He was based off that one annoying as Hell boss from Zelda that pushed you off his arena and made you throw your controller in a rage. Notice how you can play with transparency to achieve a certain effect.
And last but not least, this is my handsome mug! Look at that derpy smile! I swear to God, this is pretty accurate to how I look in real life. Also, one technique I should probably mention is that to achieve the illusion of depth with pixel art, such as with the nose, you use slightly darker tints of the base color in order to make it look like there are shadows being cast on the object in question. Basically, you're imitating how light would be cast on it if it were an actual object.
And that about wraps it up for today. Next time, I will be telling you about the music and sound effects that I have made. That will be fun!
Also, I know I have already said it, but I cannot stress enough -- THANK YOU FOR SUPPORTING ME!!!!! Everything people have done, like reading this blog, donating to or sharing my GoFundMe campaign (which is here for those of you who didn't come from the campaign) means the world to me. I like doing what I do, and I would like to keep doing what I like doing, so all this support is greatly, GREATLY appreciated!!! Thank you for stopping by and reading this and being the wonderful people that you are! I'll see you next time!
