E. Darwin Hartshorn: //Boilerplate

Devgame Internship 4: Tiles

In videogames, tiles are used to create large levels with a few small graphics.  Here’s a fantastic example by someone else:

tiles

As you can see, you can create a large variety of backgrounds simply by laying tiles, like this, on a grid.

Continue Reading >>

Medium Must Match Message

This is a good article to read.

Auro wasn’t supposed to be “retro.” To me, the “retro game” aesthetic isn’t just pixel art, but an appeal to the specific sounds, feedback, and look and feel of a specific set of old school games. While it’s true that Auro was an homage to my favorite game art, I never intended for it to be “retro.” I just wanted to make great pixel art, yet it inexorably gets lumped in with the retro aesthetic.
But here’s the clincher. It’s not their fault.

“Retro?” Poppycock! I’ll have you know I’m quite jiggy with it!

The Artist’s Responsibility
Though I never intended for Auro to be a “retro-style” game, what I intended doesn’t matter at all, and it’s 100% my fault for failing to communicate in a language people understand.

As a game developer, time is the most valuable resource a human can give you. Nobody owes us their time or attention. As such, when someone gives us their time, an implicit agreement is made and we are now in debt to that person. We owe it to them to deliver value for their time, and to deliver it efficiently.

I am an illustrator/animator. The kind of value that illustrators/animators are responsible for is distinct among other types of visual artists. We must establish meaningful intent as close to instantaneously as possible. By meaningful intent, I simply mean that the audience has to internalize the concept, motion, emotion, perspective, etc. of a pieceright away. The second the audience asks “how can he bend that way without breaking his spine,” or  “Why is he shooting where he’s not looking,” we have failed them. They don’t owe us the time to look at our work in the first place. They certainly don’t owe us the time to squint their eyes and try to make sense of our work.

Meaningful intent applies to medium as well. In choosing to make our game with pixel art, we have accidentally taken on a war on two fronts. My job was to make Auro’s art polished, inviting, and clear to the audience, not to also educate the audience that pixel art is a deliberate style.

My main point dances around Mr. Reynolds’ point.  The consumers of Auro criticized it for its ‘pixelated’ art, not understanding that it was intentional.  Reynolds correctly places the blame on his failure to communicate, but seems only to brush in passing on how he failed.  The quote, “Auro wasn’t supposed to be “retro.” To me, the “retro game” aesthetic isn’t just pixel art, but an appeal to the specific sounds, feedback, and look and feel of a specific set of old school games,” is the closest I see to an explicit recognition of the issue.

The issue is that the medium doesn’t match the message.

Continue Reading >>

Pixel Art for Programmers: If You’re not Cheating, You’re not Trying (Shading and Colors)

Last week, we left you with this:

Spaz McDragon, Flat colors.

Scaled down so we can see it more objectively.

I’ve gone ahead and done a little more pixel-pushing and jaggy-correcting since then.

Pretty obvious, isn't it?

Pretty obvious, isn’t it?

Now it’s time to add some color!

First thing we need is a set of color ramps.  What’s a color ramp, you ask?  Glad you asked.  A color ramp is a set of two to five colors like this:

GreenColorRamp

 

That ramp defines basically all the shades of green we are going to use, and has a roughly even fade from the almost black blue, to the almost white yellow, with our core green color in the middle.

I define the ramp using a program called Inkscape.  Here’s a screenshot of the file I used:

 

 

Building TheGreen Ramp

First, I use the rectangle tool to draw a rectangle.  Then I hit Ctrl+Shift+F to bring up the color options, and set the rectangle to that nice, green shade I want.

Then I duplicate the rectangle with Ctrl+D, and holding Ctrl, I drag it upwards.  Holding Ctrl ensures that it moves in a straight line.

I change the fill type to gradient, hit the ‘edit gradient’ button , and I change one node of the gradient to my shadow color (dark blue), and the other to my light color (pale yellow).  Then I add a couple of nodes, and change them to transparent.

Next I move the whole thing down so that the gradient rectangle covers the green rectangle:

BuildingTheGreenRamp2

And I line up five little squares underneath it and eyedropper colors from my navy-to-ivory-by-way-of-green gradient.

The best part is, all I have to do to create a corresponding ramp for any other color in the character is change the color of the green rectangle itself, then re-eyedropper the colors:

BuildingTheRedRamp

 

This keeps the shading looking consistent across the character.

So why use blue and yellow instead of black and white?  And why only five colors?

The answer to the first question is that light is seldom pure white, and so there is usually a sense of progression in real life from the color of the light, to shadows which seem to be the opposite color (such as yellow and blue).  Using this progression makes the characters and objects in the game world seem rooted in their world, as opposed to seeming like stickers slapped over a separately-painted backdrop.  It is also more visually appealing than a straight-up change of shade.

Here’s the final set of ramps for the character.  Note that all the ramps share first and last colors.  Note also that there are only fourteen colors total.  If we are wise, we will not even use all fourteen!

FinalRamp

 

Right-O.  If you import the graphic with the ramps into GraphicsGale, you can just pick the colors right off the ramps, then flood-fill the relevant areas on the sprite.  Let’s see how Spaz looks after this:

Spaz-McDragon-Flat-Sprite3

That’s not exactly an improvement, and the colors may need some tweaking, but let’s see how shading goes first.

Right:  Here’s what not to do.  Do not pillow-shade.

Pillow-shading is when you work inward from the borders, from dark to light.  Like so:

Spaz McDragon Pillow Shaded

“But that’s not so bad,” you may say.  And indeed:  this was sloppily put together because of time constraints.  A more lovingly pillow-shaded sprite would look even better.

But it would still look like a shaped pillow, when it could look like it had depth.

So how do you know how to shade it if you’re not naturally artsy?

If you aren’t cheating, you aren’t trying hard enough.  Observe:

First, I fire up Blender, a free 3D modelling, animating, and rendering suite (and yes, I will be running tutorials on 3D, though probably not for a year or more).

Next, I start adding various shapes.  If you type Shift+A, a menu of things you can add pops up.  I’m going to pick Mesh–>Cube, here.

Hitting tab puts you in Edit mode, allowing you to edit the cube.

Hitting Ctrl+R puts you in loopcut mode.  Move your mouse around until a purple line appears around the middle of the cube, then left click, then right click.

Cube Loopcut

 

The loop should be automatically selected.

Spaz is a crescent shape, so I hit G (for Grab), and Y (for ‘Constrain to the Y Axis, which is forward/back in Blender’), and move my loop forward a little.  Left click confirms and puts the loop back down.

Cube Into Crescent

 

By the way, you can rotate the view with the middle mouse button.

You can hit A to un-select the loop, and holding Ctrl, left-click and drag a lasso to select the points you want to manipulate.  In this case, I want the top set.

Then hitting S allows you to scale your selection by moving the mouse and then left-clicking when you’re happy.  I’m going to scale it down, deselect all, grab the bottom, scale that down, and move it back (once again, G for Grab, Y for Constrain to Y axis).

Just as G grabs, and S scales, R Rotates, and like the other two, you can constrain it to any axis using the X, Y, and Z keys after you hit R, and you confirm the rotation with a left click.

Now I press Shift+A again, and this time add a cylinder.  I scale, move, and rotate it until it forms Spaz’s forehead ridge.  Pressing Shift+D creates a duplicate, which I rotate and move until it forms the ridge on the other side.

Adding Eye RidgesNo need to be exact here.  We’re not trying to create an awesome model.  That would take way too much time.

A pair of cones becomes horns.

Horns

 

A cone scaled way down in the X axis becomes spikes.

Spikes

 

And a cylinder with one end scaled slightly down becomes a cute little pig nose.

Nose

 

And that’s all we really need.

Hit tab again to switch into Object mode.  Then add a plane.  The plane is going to be your lamp, so grab it and move it above and in front of the character, and rotate it to face the character.

Lamp

 

Up at the top of the screen there’s a drop-down box that says  “Blender Render”.  Click that box and change it to Cycles Render.

Cycles Render is a raytracer that simulates bouncing light.  Now we just need to tell it what each object needs to simulate.

Right Click your mock-up character to select him.

There should be a panel on the right.  Click the button that looks like a glass sphere.  That’s the materials button.

Changing Render stuff

 

And hit the button that says New.

That’s all for Spaz!  Now the lamp.

Right-click the lamp to select it, and hit the button that says New again.

There should be a button that says “Diffuse BSDF”.  Click that button, and select “Emission” from the box that appears.  Then click in the box labeled “Strength”, and change it to 60 or so (think strength of a light in Watts.

Now smack the button on the bottom left that looks like a white sphere:

Display Type

 

Select “Rendered”.

Rotate your view with the middle mouse button until you get the angle you want for your game.  Viola!  Blender has given you a reference for how the lighting will work on your character.

Cheating with Blender

 

Back in GraphicsGale, using your Blender Screenshot as a guide, select one, and only one, shadow color for each shadowed area, and fill in shadows in similar fashion.

Shading Spaz with Blender

 

Lookin’ good!

The sprite is excellent as-is.  In fact, some games use this two-tone style to great effect.  Hyper Light Drifter uses a two-tone style that’s even flatter, and it looks gorgeous.  Of course, HLD has a very muted, faded look to it, whereas I’ve always been more of a chiaroscuro guy myself.

But I’m going to go ahead, make a few more tweaks, and just barely break the two-tone rule (but with a light touch).  Mostly adding detail (like nostrils and pupils), and fixing bits and jaggies here and there.  The eyes and horns are supposed to be shiny, so I went and added highlights to ’em.  And here we are:

Spaz McDragon Shaded

So, for comparison: Lines, Filled, Flat, Pillow-Shaded, and Final:

Spaz from Sketch to Final

Ah, but we are missing something, aren’t we?  Where are Spaz’s wings?

The wings are going to be created and animated separately so that we can have Spaz flap around with very minimal effort on our part.  Which gives us next week’s subject for Pixel art for programmers: Animation basics.

 

 

 

 

 

Pixel Art for Programmers: Silhouette and other improbable French words.

Programmer art.  It can be awe-inspiring (Like anything by Dean Dodrill or Derek Yu), it can be messy-and-sketchy taken to an art form by way of awesome thematic unity (I refer you to the work of James Silva), or it could be utterly awful, an eyesore beyond all eyesores (names withheld to protect the guilty).

Odds are if you are a mad code-monkey set on a life of fame and fortune as a lone-wolf developer, you fall into the last category.  Me?  I can draw.  I was an artist before I was a programmer.  I’m not brilliant, but click that link and check out my deviantArt page — if you are looking for art tutorials, odds are you would consider hiring me to do your art.  Provided you had the money, and the style was right, of course.

(And hey, if your game is truly awesome, and I have a reason to believe it will get done, contact me at the email on the About page, and we can talk turkey.)

I think I can help you out.  I’m a decent (but not fantastic) programmer, and a decent (but not fantastic) artist, and with these two skills, perhaps I can serve as a bridge between programming and art so that you can walk across my burly1 shoulders to the promised land of awe-inspiring (or at least awesome thematic unity) programmer art!

Let’s do this crazy thing.

So, my next series of games, the Super Crossover Arcade series, is going full-on retro with pixel art because I can make pixel art look good at a relatively fast pace.  And over the course of several tutorials, I’m going to let you in on all of my dark secrets, as I can’t find many decent tutorials out there besides Derek Yu’s.

The first dark secret is the power of the silhouette.

Continue Reading >>