EPTArt Break: My First Tileset.
In previous blogs I've mostly focused on the programming side of game making, but this time I'll be talking about art. Recently I was away from my development computer and was unable to get any programming done. Determined not to lose momentum on this project, I spent the downtime shoring up my art skills a bit.
Once I returned, I decided to continue with the art thing and start making some art for my game. By adding some polished art to the game, I'm hoping that I can start to feel out some final decisions in term of tile sizes and scale. I want my tilesize, which will later influence my character size, to be something that I feel comfortable working with. If I choose a tilesize too big, I won't be able to produce art myself and that will slow things down dramatically; too small and my game will struggle to look good.
Art Choice
Given my lack of art skills, my choice of style is pretty limited. I'm going to go one of two ways: pixel art or simplistic vector drawings. These are the only two mediums I feel at all comfortable with, and my lack of art skills means my 'style' in each medium is going to be very limited. Personally this isn't much of a choice; even though I feel like I can make passable vector art, I feel more comfortable working in pixel art, especially when it comes characters and animation. I want to keep it simple so I'm going to be intentionally limiting my color palette for each object I draw. No set limit or anything like that, but I'm going to make each color really count if I can.
Getting to It
I decide to start with 32x32 tiles using a 2x scale. So each tile is 64x64 pixels on the screen, but drawn at a resolution of 32x32. As a self imposed rule, I want each tile to look good at 1x and 2x so I can change my mind about the scaling later. My first goal is to create a working tileset, or at least a few tiles for a tileset.
In this case I decide to start with a sewer theme. I have some ideas about the theme and setting of my game, but it's not concrete. I feel comfortable making a sewer tileset right now because it's not going to immediately put me in a specific setting. I can tie sewers into several different settings and it features more simplistic shapes that seem like a good way to get my feet wet in art.
First up is a basic ground tile, I decide to have a brick floor with some of the rocks showing underneath. I'm also using Super Metroid's style of fading the tiles to black rather than filling in artwork for every inch of the foreground. Being a sewer theme I start with a drab green tinted color, a highlight of that same color, and black. I quickly sketch out some bricks and give them a dithered highlight. The rocks I start by sketching out some basic rock shapes and filling them in.
![[image loading]](http://i.imgur.com/zIpNe3K.png)
Sketching out my first tile.
The sketched out rocks are filled in with shading and highlighting as I go. I'm using 6 colors total that span from a highlight to black. I could use more colors, but I know from what I read that this should be plenty when used properly. The pure black is used only for the bottom fade-to-black area, and isn't used for any of the actual art. In most cases a very dark shade can get me further than pure black will. The trick is to really get everything you can out of the colors you select. In the case of my rocks I can create a shading effect by shifting the tones. What serves as a shadow for the higher up rocks becomes the highlight for the rocks deeper down. By reusing colors I can really get a nice consistent looking tile.
![[image loading]](http://i.imgur.com/TeHdMdU.png)
A fully drawn ground tile.
Another small trick is something I picked up from Metroid Fusion and Zero Mission. I give the top of the tile a red tinted outline instead of a black. This gives the foreground a little extra pop, and when the game is in motion it's barely noticeable. I darken my red more than what you see in the video below, but I may brighten it up a few notches later on.
In practice the red gives the game a nice pop without being overbearing. Keep in mind this is a Game Boy game stretched out on an emulator.
It's at this point I get some artistically inclined people to lend me some advice. From them I learn two important things about my tile; the middle section is pretty ugly, and my tile is too monochromatic. In my newbiness I've used colors that are all the same hue and only vary in brightness. The result is something that feels really flat and looks like it belongs on the game boy.
The solution is to use a better range of colors. The highlights are warmed up and given a more yellow-ish hue. The shadows deepen into first a darker green then a blue-ish shadow. Immediately the effects are noticeable and things are looking a lot better. I'm still using the same six colors, seven with the red highlight, but it's a better six colors. I also give my tiles a bit of a re-arrangement and create a few different ones using the same starting form I had.
![[image loading]](http://i.imgur.com/pjaQBVG.png)
Much better, the progression in hues make the tiles stand out a lot more.
I'm feeling pretty good at this point. I'm going to give the entire layout more variety as I fill in the background and add some other details. This should help to add some more color variation as things go along.
Getting these tiles to tile has been really easy. Since the design is so chaotic all that I've had to do is put a little effort into sewing up the seems between adjacent tiles. I have a lot of possible connecting tiles, but the rocks on the boarders can be filled in multiple ways allowing me to mask the tile seams and create a more fluid look.
Conclusion
Happy with the results overall, I've gone and built out more tiles including a ramp and both sides of a pit. There's still some clean-up to be done, highlighting the edges of the ramp have proven to be difficult, and I have some dithering mistakes to fix, but overall it's progressing well. I've also put the tileset into my game and rigged up a test level so I can see things in motion.
![[image loading]](http://i.imgur.com/lqoi3Ax.png)
See the whole image here.Hopefully as I improve I can produce art faster. Right now progress is constant, but slow. I'm especially nervous because my top-left lighting means that I can't just flip tiles horizontally. I need to flip them and redo the shading for them to look right. I'm getting more comfortable with my art program at least, and progress does seem to be speeding up.
Not bad for my first real attempt at art. I know there's a lot of improvements I can make, and I'd love to hear critiques*, but for the first time I feel like I've made art that's good enough to actually get me somewhere. Next up will be some basic enemies and anything else I want to craft for a basic 1-1 level.
I'd also like to thank both Keith Burgun and Kayin for helping me with my art. You should go play their games, they're quite good.
Recommended Reading
A great pixel art introduction.
Vector Art Tutorials for Programmers
*Though there are some known issues: the messed up dithering on the right, there being only one wall tile right now, and the ramp's having too dark of an outline.
