csanyk.com

video games, programming, the internet, and stuff

Category: Pixel Art

Pixel Art Chess Set: Communicating function through design

My five year old nephew started learning to play Chess recently, as I discovered on a visit a few weeks ago.  We played two games, and I didn’t have too much trouble beating him, but for a five year old he’s not bad. He knows all the pieces and their basic moves and their relative value.

I thought it would be fun to build a video Chess game that he could use to help learn strategy and how to see the board. So this is my latest project. I’ll be posting more about that as I work on it.

My first step was to design graphic resources. I didn’t want to spend too much time on it, just a basic “programmer art” chess set, that I could use to build the program with. Of course, it didn’t end up that way, and I’ve gone down the rabbit hole designing variations on sets of minimalist pixel art chess men. It’s too fun and fascinating not to.

My first attempt was actually rather good, I thought. I went for 16x16px representations of the classic chess pieces. I drew them very quickly, but was very pleased with my results, particularly the Knight.

I could have stopped right there, but it was so fun to make this set that I wanted to continue exploring and see if I could refine my pixeling technique further.

I decided to search the net for images of chess pieces to see what variety there was, and found a lot of examples of beautiful sets. I started to take notes and to infer design rules for chess men:

  1. Chess pieces are called “chess men” which seems antiquated and sexist, especially given that the most powerful piece in the game is the Queen.
  2. The modern standard chessmen are a design named for English chess master Howard Staunton, and have been in use only since the mid-19th century. A strength of its design is that each piece is easily distinguished from the others, making errors from mistakes in identifying a piece — a problem with other sets — unlikely. Previously, chess men of different types had a less distinct appearance from one another, and were not as standardized.
  3. In a Staunton set, the Knights are the most detailed, ornate, varied, and realistically represented pieces. 
  4. In Staunton sets, there is a standard height order: pawn, rook, knight, bishop, queen, king. (This surprised me, since Rooks are more valued in Chess I would have expected them to be taller than Bishops.)
  5. The pieces are differentiated by their tops. Each type of piece has a distinct, unambiguous shape.
  6. The body/base of the pieces have a common design, to create unity among the pieces in the set.

I tried to apply design choices to my chess set following these insights.

A follower on Twitter offered feedback that the pieces should be different heights, so I tried that. With a 16×16 pixel tile size, I could only shorten the back row pieces by 1-3 pixels.  I also tweaked the King piece by adding a few more pixels to its top, to make it a bit more distinct from the Queen, and moved the Pawn so that it wold be more centered in its square.

I do like the result:

Staunton pixel chessmen

I think my initial 16×16 Staunton set look like they’re in ALL CAPS, while this set is more “readable” by using “mixed case” heights for the pieces.

I wanted my chess game to be focused on usability and instruction. I needed each piece to be immediately recognizable, and not to convey a bunch of extraneous information to the player that has nothing to do with play mechanics. 

My next attempt was a different take altogether. I wanted the look of each piece to suggest its rules for movement. I also thought that it would be clever if the pieces communicated the rules for using them through their visual design.

I ended up being very pleased with this set as well, although I went through many more variations, particularly with the Pawn. This one also came together easily and rapidly.  When your tile size is 16×16 and you’re working in just a few colors, it’s easy to work fast.

Things I like about this set:

  1. The shape of the piece is a built-in tutorial for how the piece moves.
  2. The Pawns still have a pawn-like shape (at least the black pawns; white pawns are “upside down”).
  3. The Knight’s shape may be read as an abstraction of the horse’s head shape of the Staunton piece.

I think out of these variations, my favorites are: P9, Kn2, B3, R1, K?  I’m least certain which King I like.  I think K4 and K5 are my top two, but I also liked the idea of incorporating a crown motif into the design, to signify the King’s special property of being the King.  K1, K2 and K6 were attempts at this, but I think K1 looks too much like a Staunton Rook, unfortunately.

I wasn’t sure which of my designs to use for my final set, so  I posted my sets on Twitter and a pixel art community on Facebook. @Managore responded to my request for feedback by coming up with a set of his own design, which I quite like.

His design was retweeted and liked over 500 times, and received many positive compliments from his followers, many of whom are game developers. One of my favorite indie developers, @TerryCavanaugh, who made VVVVVV and Don’t Look Back, pointed out an physical chess set that had been designed a few years ago which incorporated the same ideas.

It’s exciting to see my idea get picked up and reworked by fellow game developers who are inspired by the concepts I am exploring. So fun! Getting that validation that what I’m working on is interesting to others is very motivating. But it’s particularly good to get some attention from developers whose work I’ve admired for years, however modest.

I’m excited about this project and look forward to working on the program. I have more design ideas that I’m looking forward to getting into soon.

Pixel Art: Admiral Ackbar

Here’s a quick Admiral Ackbar that I did at 64×64.

64x64_Admiral_Ackbar_512

This one was a little more interesting to work on. I started out at 16×16, as I always do, and found that there weren’t a lot of details that I could put on him at that resolution. At 32×32, I was able to shift the eyes, which gave me enough room to add the mouth. When I went to 64×64, I realized that the white space suit he wears needed to be given a little bit of color to allow it to stand out against a light background. I also added some spines to the arms, and irises to the eyes, and nostrils, to give a little more detail.

32x32_Admiral_Ackbar_512 16x16_Admiral_Ackbar_512

Pixel Art: Greedo

It’s been a long time since I did any pixel art, and with the new Star Wars film being released this week, I got the itch to do some more characters from a galaxy far, far away. Again, using my quick/easy minimalist style that I’ve found works well for me.

Here’s Greedo, at 64×64, blown up to 512×512. I’ll probably be uploading some more in the next few days.

512x512_Greedo

Pixel art resources

I’ve been spending many hours today and yesterday playing Javel-ein and reading about pixel art. Javel-ein’s creator clued me into a 16-color palette he used to create the graphics resources for the game. Created by someone at pixeljoint.com named Dawnbringer, it opened my eyes to something I hadn’t given much thought to in my pixel art dabbling to date.

In my pixel art method that I’ve been developing, I have not expended much effort at all in choosing colors. My method has been to use the absolute smallest number of colors as possible. To pick the color, I simply pick “the color” — I don’t give consideration to the context, the lighting conditions I want to simulate, or anything else. To draw the Hulk, I said to myself, “The Hulk is green, pick a green that looks like Hulk Green” so I did that, and then I was done.

I don’t pretend at all that my pixel art method is the best. It is merely a method, and one that I’m able to work in quickly, and achieve results that I find acceptable. I deliberately do not concern myself so much with quality, but with speed. I reason that speed serves me best because with speed, I can iterate more quickly, and iterating will give me the experience that in time will yield an improvement in quality. Also, because I do everything in my games, I have to ration my time and distribute it between designing the game, programming, doing graphics, sound effects, testing, etc. So I don’t have a lot of time, and therefore speed is all the more important. But because my time goes to other things, I haven’t iterated as much as I thought I would.

My pixel art method is very primitive and newbie feeling, but I try to use that as a strength. But that’s not to say that understanding color and using it more effectively would not be very valuable. So far my approach to drawing has been more like a very young child than an artist. I take the fewest number of colors possible, use them iconically to represent the subject with what “everyone knows” is the right color — the sky is blue, grass is green, the sun is yellow, no surprises. For standalone subjects, and for the specific style I’m going for, this works. But when I integrate standalone subjects into a composition, if I want it to look cohesive, and minimalist, I need to give more thought to how I select colors.

Seeing the results in Javel-ein from what a well-chosen palette of 16 colors can make possible, I became very interested in using the palette in the color picker more. Until now, I’ve always just picked something in the RGB color wheel that looked right, but from now on I’ll be giving more thought to my palette ahead of time.

As well, I spent a few hours and created a few palettes for Paint.NET so I can select from a collection of pre-defined, general purpose palettes. I have Dawnbringer’s 16- and 32-color palettes, and several that I made for simulating the NES, Atari 2600, and Gameboy. I plan to try to use these for a while, to see how I can adapt to a constraint of a pre-defined palette of so few colors, and what that will teach me as a pixel artist.

From my reading, I know that there is a lot to creating a good palette, and I’m not yet experienced enough to do so, but I now know enough to start trying. It’s encouraging to read that even well-regarded, accomplished pixel artists struggle with selecting just the right colors for their palettes, and that it is not just me because I’m “not really an artist”. This is something I can learn, and get better with, and I just have to work at it.

In the course of learning, I need to keep a notebook for ideas and references. I figure sharing it publicly will only help to improve the quality of what I find. I don’t really have much original to say on the subject yet, so this is mostly a dump of links to interesting articles, discussion threads, and resources.

Pixel art communities

Pixel art tools

There’s a ton of them. I primarily use Paint.NET so far, but there are many others I’ve yet to try. I’m too lazy right now to put hyperlinks for all of them here, but you can find them by google.

  • Paint.NET
  • GraphicsGale
  • Pickle
  • PyxelEdit
  • GrafX2
  • Aseprite
  • GIMP
  • ProMotion

Palette Choices

Some very interesting forum threads on the philosophy and method of building up a palette.

  1. http://www.pixeljoint.com/forum/forum_posts.asp?TID=10695
  2. http://wayofthepixel.net/pixelation/index.php?topic=8110.msg92434

I’ll add more to this as my reading continues.

Pixel Art: Star Wars characters

After the Ohio Game Dev Expo, I felt like doing some pixel art exercises, so I did these.

The style I’m employing here is chunky minimalism, so I’m not striving for a lot of detail. Rather, I’m going for the least amount of detail and work to make a recognizable character. This style enables me to work very quickly (it took me maybe 20 minutes to do the entire set) and emulate a resolution and palette constrained system like the Atari 2600.

I could definitely add more detail, and especially shading, to improve the depth and likeness. It would slow me down considerably, but would be worth it if I was interested in prettier pixel art, not emulating the look of a classic console. Properly speaking, for a preliminary pass, they are acceptable as far as the recognizability criteria goes, but most of them have palette challenges, mainly due to light color on light colors. If I was going to do something serious with these, I’d work on them more to address those issues.

I did these up at 64×64, and blew them up to 512-wide to display on the web site without having to scale them up.

R2-D2

512x512_R2D2

C-3PO

512x512_C3P0

Luke Skywalker

512x512_LukeSkywalker

Obi Wan Kenobi

512x512_ObiWanKenobi

Han Solo

512x512_HanSolo

Chewbacca

512x768_Chewbacca

Princess Leia

512x512_PrincessLeia

There are so many different characters and costumes that I could keep doing Star Wars pixel art pretty much endlessly.

Pixel Art: Boss Borot/BoboBot

pixel art "BoboBot" by Chris Sanyk 256x256px

Notes:

  1. I actually had to put a face on this one!
  2. Bobobot was the comic relief in the Mazinger Z series. This robot actually had facial expressions that changed according to the pilot, Bobo’s mood. This image, I think, makes him look a bit expressionless and almost zombie-like, in contrast with the cartoon’s very human-like expressions. It’s so difficult to capture emotion and expression and personality in just a few pixels, which is why I’ve refrained from trying to draw them.
  3. Generally, I feel that it’s better to go abstract and just convey the impression of the overall person, rather than try to convey facial expressions at the resolutions I’ve been dealing with. This serves as a good example of why. It would take a great deal of fine tuning and high-resolution finesse to get the nuance in the expression just right. If it’s critical, it is worth it, but it is a lot of extra work, and takes a true artist to pull off well.
csanyk.com © 2016
%d bloggers like this: