Some Pixel Art

Some random art I’ve created while making B.LAST

 

image

image

image

image

Well my mostly done game engine is being rolled back to 50%. I decided to update the character look to fuel some inspiration. In doing so, I realized that there are more things I want to incorporate into the game engine. Next step, implementing the new stuff, code cleanup, and I have to keep working on the graphics. Here’s some arts that preview the new look.

image

image

image

image

 

 

 

image

image

image

image

 

image

 

image

image

image

image

 

It took me a little longer than I care to admit to figure out how to rotate pixel art without losing pixel quality. Most programs will anti-alias anything you attempt to rotate and blur the edges. If you’re trying to create crisp pixel art, that means you’ll end up re-drawing your pixels for every character rotation that’s not on a 90 degree axis. Or will you?  I designed a way to rotate pixel art without losing that crisp pixel quality. It seems obvious now, but at the time, I was stumped.

I’m using an old version of Photoshop 7 that I purchased MANY years ago so the technique should be adaptable to most modern image editing software. Also, it should be a HUGE time saver for pixel artists once you get the technique down. Here goes:

1) open your existing pixel art.

image

2) Increase the canvas size to allow for rotation without cropping the top and bottom of the graphic.

3) Increase the image size using “Nearest Neighbor” sampling. Make it huge. I went with 2000x2000px for this example.

image

The nearest neighbor re sampling will enlarge the image and retain the pixel look.

4) Rotate the enlarged image.

image

Anti aliasing will occur, but it will be minuscule relative to the huge image size.

5) Crop the graphic to the image width and height.

image

6) now re-size the image again using nearest neighbor sampling. You’re shrinking it back down to match your existing pixel art. You can probably use the Pythagorean Theorem to mathematically determine exactly what size to downscale to. I’ve gotten a feel for it after a few tries and re-size it slightly smaller than the original pixel height without math. You should get something that looks like this:

image

As long as you scale it back down using the nearest neighbor sampling, you’ll have a reduced image at the new angle that retains pixel sharpness and doesn’t have to be re drawn.

Pretty cool, huh?

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We make crunchy, sour games.

%d bloggers like this: