The Art of Glass

My Stained Glass level editor is nearing phase 1 completion (phase 1 is having a saved level that the characters can interact with.  Additional phases will add additional features as the game needs them).  But my art assets are insufficient to create the lonely, haunted forest I want for my test place.

 A block of Stained Glass defined.

The collision data for the block.

Those pictures are fairly representative of the graphics I have so far.  I have grass.  I have leaves.  I have rocks.  But brooding, dead forests need random chunks of tree.  Otherwise they would be called brooding, dead fields.

So, as I make the tree bits, I'm gonna walk you through the process I use to make the graphics for Stained Glass.

My preferred tool for making 2D assets for videogames is Anime Studio Debut.  It lets you make some pretty nice vector graphics with varying line widths, then rig them up to deform them.  And it's fairly cheap, at forty bucks a pop.  It's the tool I used to make this animation of Sonic the Hedgehog walking.

But for Stained Glass, I shall be using Inkscape, partly because I intend to farm out some of the work and Inkscape is free, and partly because Inkscape is more suited to the kind of stiff look that works so well for stained glass.

That's enough intro!  Now the how!

Most of the drawing is done with what I call the pen tool, even though there is at least one other tool on the palette that could called a pen tool.  So, I've highlighted it for you:

Looks like a needlepoint.  My favorite flavor.

The way you use the tool to draw is super-simple.  Just click to add a point, which serves as a corner for your outline.  Click and drag to add a point in a curve -- the direction and distance you drag will define the curve.

Before you start drawing your background bits, it's helpful to have a sense of scale.  What I did was I drew a rectangle, scaled it to the size that the character would be by manually typing in the values...

Up here.

... And putting a sketch of the character inside the rectangle.  I turned my nun away from the camera so that I didn't have to draw a lot of detail to get a sense of her -- she's just there for scale, after all.

The bluish square in the background is also for scale purposes:  Each 'block' in my level is meant to take up a cell of that size, though the parts are allowed to stray outside the boundaries so that they will overlap and, to a degree blend together.

Right.  I'm going to delete my rocks and grass and stuff, with maybe one remaining piece to serve as further reference.  Then we'll get started.

I decided to leave my biggest rock chunk and one grass chunk, since they both add something to the information I need to drawing tree bits.  Next I Google spooky trees and forests, and search DeviantArt as well, until I have an idea of the parts that I want.  Let's draw a part.  I'm going to start with a trunk.

Pen Tool.  Click for corners, click-and-drag for midpoints on curves, and click in the starting node to finish the outline.  Here's what I got:

Tree Trunk, or sack of potatoes?  You decide!

Inkscape defaults to creating the shape without filling it in, so we are going to have to change the fill setting.  Every time.  Press Ctrl+Shift+F to add the fill panel.

Inkscape thinks Shift comes before Ctrl.  Silly Inkscape.

The two little boxes I've highlighted are the solid-color fill, and the linear gradient fill buttons.

A word of caution:  Please, for the love of Thomas Goldsmith Jr., do not touch either the linear or radial gradient buttons unless you are a trained professional.  Nothing screams "programmer art" like a gradient.  In general, a player will look at a videogame resplendent with inexpertly handled gradients and wonder why it isn't freeware.  Unless it is freeware, in which case, he won't wonder.

He didn't mean 'peppers', but 'peepers'.

You need new eyes.

This is is not to say that a gradient, in the hands of a pro, can't look good.  For instance, here's the sexy, sexy logo of my old, dead company, which is composed almost entirely of gradients:

This is what skill looks like.

But even I don't use gradients lightly.  If you look at my DeviantArt gallery, you will find that my 2D art is mostly gradient-free.  If I didn't paint it or draw it with a pencil, it will be solid colors, plus a single shadow or highlight color for each.  And if you stick to this rule, even programmer art can look like you paid a professional artist at least five bucks for your work.

With that wordy, yet necessary warning about gradients, I am now going to ditch my own advice because I make this look good.  Or, more specifically, because Stained Glass makes this look good.  A light, barely noticeable linear (not curved!) gradient will enhance the stained glass look.  So go ahead and click that linear gradient box, and the edit button that magically appears beneath it.

First thing you want to do is click the down arrow on the bar that says stop[insert random number here] and pick the stop that has checkers behind it.  We do not want our gradient to fade into transparency.  So I punch the number 255 into the number box by the bar labeled 'A' for Alpha, and then start tweaking the dials until we have a light gray fading into a slightly darker gray.  I use gray because the game itself will color the graphics, and I want the same graphic to be used for multiple colors.

Aah... 

Okay, I'm done ego-stroking for a couple of minutes.

Once you have a gradient defined, you can just select it in the future to reuse it for other objects, which helps keep everything consistent.

Here.

Now, as you can tell from my picture, above, my tree-trunk's gradient is going sideways.  I want it to be moving top-to-bottom, light-to-dark, at a slight, mostly vertical angle, so that there is a sense of proper lighting and three-dimensionality to the scene (for the most part).  After all, real stained glass images try for a certain amount of realism.

Sometimes...

There's a tool that gives us handles to click and drag around to change the orientation of the gradient.  I call it... the gradient orientation tool!  It looks like a line with two squares, and a gradient behind it (weird, right?).

I click that tool, and re-arrange the gradient until I'm happy.

Now comes the fun part.  For everything except flat ground, I add a white highlight, which gives the object a sense of mass, and mitigates the programmer-artyness of that infernal gradient.  The rock below our trunk/potato-sack is a good example of the look we are going for.

First, I grab my arrow tool at the very top of the tool strip.  Then I select the trunk.  Then, I hit Ctrl+D.

Imagine the last screenshot here, but without the red arrow and outline.

If you've been following along at home, it will look like nothing happened.  But nothing did not, in fact, happen.  Ctrl+D duplicates whatever item is selected.  We have ourselves a second trunk, exactly like the first, sitting on top of the first.  Dig?

Now, we click the menu option for Path, then Inset.  This basically alters the outline of the duplicate path by pushing it in so that each segment of the outline is about the same distance inward from where it was.

Mini-Me, no, we don't gnaw on our kitty.

For the slightly more Inscape-Savvy out there, who are wondering why we don't just shrink the shape, which would admittedly work pretty well for our potato-sack, a quick demo of what happens with more complex shapes:

Admittedly, the worst part is that Inkscape's default font is Comic Sans.

Now we go over to the fill sub-window (still conveniently accessible under Ctrl+Shift+F if you closed it), and change the fill to flat-white, then the outline tab, where we change the outline fill style to "There is no fill-style," which is the 'X'.

Behold, my super-professional highlight!

The line-free, slightly-smaller, white blob is the tree-trunk's highlight.  But we don't want the highlight to cover everything, now do we?

The next step is grabbing the pen-tool again, then outlining all the parts of the highlight that we want gone.  The parts that are supposed to be relatively in shadow.

In a dark forest, that is arguably the whole trunk.

Now for the magic.  I make sure the shadow outline is selected.  Then, holding shift, I click the highlight.  This should select both objects.  Now I press Ctrl+"-".  That is, Ctrl, plus the minus key on the numeric keypad.

Behold:  the shadow has been subtracted from my highlight!

Now it looks not like a potato sack, but a trunk!

Or bacon.

Now, I select both the trunk and highlight either by Shift+clicking or clicking and dragging a selection box around them, and then hit Ctrl+G, which groups them together as a single object, which I can drag around to anywhere on the screen.

K.  In like manner, I shall now verily populate my graphic set with foresty things.

Stuff.

That's enough to be going on for our sample level.

There is one last thing or two we need to do before we can use this graphic.  For an explanation, let's go back to our sample block:

That never gets old.

You will notice that in addition to the interior lines between the pieces, there is a heavy outline around the block itself.

This is not exactly true to the subject matter.  Stained glass typically has only one width of line between the pieces of glass.  It is a stylistic choice I have made for two reasons:

1) It unifies slightly mismatched pieces, making them look like they were actually fitted for each other.

2) The heavy outline will allow the player to tell at a glance what is a character, what is a bit of background he can walk on, and what is just scenery.  In short, it is there because without it, the dozens, if not hundreds of small pieces in the scene would make the scene confusing and difficult to play on.

But, for the same reason we can't just scale pieces down when making the highlights, we can't just take the same graphics we use for the game, scale them up in-game, and paint 'em black (which was my initial instinct).

Fortunately, there is an opposite to inset known as outset.  (Crazy, right?)

The outline effect is accomplished in game thusly: first, the program goes through and draws all the heavy outlines.  Then, it goes through and draws all of the graphics themselves over the top.  This way, the heavy outline surrounds the whole lot of pieces, but doesn't separate the individual pieces themselves.

Which means we need to export two different sets of graphics, one being the outline, the other being the interiors of the pieces.

So, here's what I do.  Step one:  Hit Ctrl+Shift+L, which opens up the Layers toolkit.  Then, I hit the plus button in the Layers toolkit to add a new Layer:

I pick "Below Current" to place the layer below the current one.  Then I select all of my objects and hit Ctrl+C to copy them into the clipboard.  

Then I click the little lock next to my current layer, to disable editing on it, and select the layer below.  Then I press Ctrl+Alt+V.

Ctrl+Alt+V is Paste in Place.  Normally, when you paste an object into Inkscape, it puts it in a different place than where you copied it, which is why we just duplicate items most of the time.  But using duplication across multiple layers is a pain in the tuckus.

Now that we've got all our stuff on a new layer, I make sure everything on the new layer is selected, and I hit Ctrl+Shift+G a few times, which Ungroups the groups, which is important for our next step.

Next step: Select everything and hit Ctrl+"+", which is the opposite of Ctrl+"-"  It joins the objects together.

Then I hit the outset button, located conveniently next to the inset button.

I outset it twice, and change the fill to solid black.

Lookin' good so far...

This is well enough, but I add one more refinement, which in my opinion helps with reason 1 for doing the heavy outline.  If the outline is uneven (which it almost never is in actual stained glass), it will help conceal the irregularities in layout of the pieces.  So, with the outline still selected, I hit Ctrl+L, which simplifies the outline, removing a few of the nodes on the paths.  Viola:

It's a subtle difference, but it adds quite a lot.

Now, I draw a rectangle that covers all the graphics I want, hit Ctrl+Shift+D, which brings up the Document Properties dialogue, hit the Plus button next to "Resize to Object or Selection", hit the button that appears that says "Resize to Object or Selection," and delete the rectangle.  Bam.  Our graphic is ready to export.

See those little eyes next to the layers?  Those little eyes define whether the layer is visible.  By turning off the visibility of all the layers except the art layer, we can export the art without the outlines or any of the reference material.  By turning off the visibility of the art, and turning on the visibility of the outlines, we can export the outlines without the art or any of the reference material.

Now all that's left to do is import the graphics into the engine and see how they fare.  

Update:  The grand result: