Pinstripes

Halifax has a monthly meetup called the "Halifax Game Collective," where local game developers discuss ideas and collaborate on projects. There is a bi-monthly pageant, where members have one month to create and present a game based on a theme.

From January to February, the theme was "Ghost Stories," and I made a game called "Pinstripes." (Here's a clip from the presentation, courtesy of Adam Hartling: HGC Ghost Story Pageant)

You can play a demo of the game here:

CLICK HERE TO PLAY THE COOL GAME

(Please note: the Unity Player does not run in Google Chrome.)

The link above will take you the level I presented at the "Ghost Stories" pageant. Everything you see was made by me, from scratch, in about 30 days; including all art, animations, and programming. (I was also working full-time, so most of the work was done between 10pm and 3am.) This level was made to demonstrate all of the game's content, so the puzzle is fairly complicated, and makes for a poor tutorial.

The controls are:

A and D, or Left and Right, to run,
W or Up to Jump,
Space bar to possess or eject from a host,
E to throw switches,
Shift to walk, instead of run
Ctrl to shoot the guard's gun (This is a bad idea, but fun).

How to play:

You are a ghost, called Jimmy Pinstripes, trying to escape the prison where you died.

You do this by jumping from body to body, using different hosts to accomplish different tasks. Possessing a guard lets you open doors, for example.

While possessing a prisoner lets you use secret tunnels.

Of course, guards shoot prisoners on sight.

And if Jimmy's host dies, so does Jimmy.

Essentially, the game is a puzzle, based on learning a set of rules through trial and error. The rules for this demo level are:

-Jimmy can walk through bars, and falls through grates,
-Jimmy is pushed upward by fans,
-Jimmy cannot walk through bright lights,
-If Jimmy's host dies, so does Jimmy,
-Guards can open doors,
-Prisoners can use secret tunnels, hidden behind posters,
-Guards shoot prisoners on sight,
-Lightning is dangerous.

All of the characters are made from line renderers, which are flat planes that always face the camera. These lines are bound by a script to a 3d skeleton, which allows me to make complex animations. Object rotations are simulated using texture offsets, and depth is simulated using a tint color where necessary.

That isn't a very efficient way to make characters, but I really liked the effect, and I found the mechanical limitations lead to a compelling art style.

I will add a link to the Pinstripes demo on the top bar, and post content updates when I can.

Thanks for reading, happy jailbreaking everybody!

Enemy Animations

	This handsome devil is the textured version of the test enemy you may have seen in the game demo currently featured in "latest experiments." I wanted to post him here and talk about some of the interesting technical hurdles he presented. As you can see, he has three stages, starting out as a bomb-like object which will eventually fall from the sky in-game to deploy. The "closed state" of his eyes, eyebrows, and hat brim are simply textured on, that way I don't have to cut sockets into the geometry. When he opens up, the extended parts which are concealed in his head will simply obscure their flat counterparts.
	The face and hat components extend using a single joint, the various components are simply weighted differently to extend to different lengths. Four other joints control his flaps and hatches, one for the radial leg hatches, two for the front and side hatches, and one for his tail flap. For his arms and legs, I wanted to use only hinge or pin joints instead of ball-and-socket joints, to make him look especially rickety. I rigged up a special system using aim constraints to automatically orient the extra hinge components; each leg uses only four skeletal objects, so essentially I'm only using the joints which would normally be used for knees and toes. The leg springs are just alpha channel trickery on 8-sided cylinders, and use no extra joints.
	He's essentially designed around old nutcracker soldier toys (because they are truly terrifying), so his jaw is mounted on a single axle with his coat tails, which bobs and swings as he moves around. I had the idea of making him fold up into a bomb while sketching out some simplified body shapes, and for the final design I included reference from old military aircraft panels. I gave him a cannon and wooden mallet hands to keep him looking primitive, and will eventually add smoke particles billowing from his head like a train.

Once I had built a rig to accommodate the stretchy pistons and swiveling pin-joints that replace his elbows and knees, and the mechanisms required to fold him up and deploy him, the animation process was pretty straightforward. Unlike Boot Hat, this guy only needed one walking animation to get around, so technical considerations were pretty light. I tried to make him, jerky, mechanical, and clumsy; here you can see his arms stick at the apex of their swing like a wind-up-toy, and oscillate at a constant speed without easing in or out; both of which are big animation faux pas. To give him a little more character, I added a precarious swaying motion and and had him fling his springy feet around to keep himself upright; aiming for comical, yet menacing. I'm particularly pleased with the way his jaw just swings and chomps loosely on its axle. On top of everything I added a constant shuddering vibration, like he's about to shake himself to pieces. This is inspired by the clockwork contraptions in "The Great Mouse Detective", which frightened me as a child.

The attack animations are both based around a huge, dramatic wind-up, a great deal of mechanical rumbling, then a sudden, reeling reaction that almost knocks him down. Most of this guy's animations center around him almost falling over. In these animations you can see the pin joints working overtime to keep him stable, and the menacing rumble that serves as his idle animation is more prominent. The controls for his arms and legs are very simple, the joint orientation is all automated, and simple enough that it doesn't break easily. The cannon fire requires a huge plume of black smoke for full comedic effect.

This animation is a strong contender for the most fun I've had doing an animation, partially because it served as a wonderful field test for all the strange rigging work I'd done, partially because it's so ridiculous. I particularly enjoy how the animation starts off like some sort of awkward bird hatching from an egg, and ends dramatically, deploying his eyes last.

With an entrance like that, his exit had to be something special; so nutcracker dies how he lived, suddenly, violently, and dramatically. Initially I planned to have him fall apart or fly to pieces, but instead I decided to have him retract into his shell. Eventually, I plan to have the bomb give one last violent shake, and explode. In this angle you can see how his hip hatches work; they open to let his legs in or out then close again, and there's slot that fits around the top pins of his legs.

And that, as they say, is that. I hope it was entertaining, if not actually educational. The current version of the nutcracker can be seen in-game by clicking the "latest experiments" button at the top of the page, though there are a few visual errors I'm still sorting out.

-alex

Not dead, just employed.

Hi there Blog! I am not dead, quite the contrary in fact. My hiatus from studio work has ended, and I've been settling in at my new job with the good folks at Gogii Games .

As I'm still adjusting to my new job and new location, I don't have a great deal of energy left over at the end of the day. This doesn't mean updates will cease on my side projects (life, after all, is all about the electives) but they will be slower since my first priority will be my work with Gogii. I'll try to keep a steady trickle of artwork rolling through. For now, here's a painting of William Hartnell:



Gogii's output is primarily 2D, so my encyclopedic knowledge of photoshop is coming in handy; however my clumsy and uncooperative hands are not. To brush up on this, pun absolutely intended, I've decided to do some painting in my spare time, starting with Will here.

Hartnell was the star of the first few seasons of Doctor Who, and will always, in his own way, be my favourite iteration of the Doctor. He was a grouchy, horrible old man who kidnapped some school teachers (in a stolen time machine which he could not properly operate), and threatened to put them off the ship (into the howling vortex of space-time) whenever they got mouthy about it. Truly, on inspiration to us all.

Also: he's fun to draw, because of his abundant jowls and the way that wig makes him look like a dignified old lady.

-alex

Latest Experiments

Both of my regular blog viewers will notice a new page button labelled "Latest Experiments," which links to a Unity webplayer hosted by dropbox, containing the primordial elements of a game I've been working on.

Progress is slow, as I'm pretty much picking up the scripting as I go, but so far it's been a lot of fun to figure out. For anyone too lazy to seek out the link at the top of the page, click here to check out my progress. (Controls: WASD or arrow keys to move, click to attack, mouse to aim, shift to run.)

It isn't much to look at at the moment, but I recently added the first art assets, namely the protagonist and his animations, whom you might recognize.

Boot Hat's animations, while not in themselves complex; represented an interesting technical puzzle. These are four of the 8 walking directions I made, the others are of course the diagonal directions between these. The character works by pointing Boot Hat towards the mouse, comparing that angle to his current movement direction, and selecting an appropriate animation. To ease that transition; the upper body movement, while staying appropriate for the walk, is very similar in each animation.

The running animation is a great deal simpler. Running offers a boost of speed to escape the monsters (currently cube-sheep things) but sacrifices the ability to aim. Because Boot-Hat orients towards his move direction while sprinting, only one running animation was required. Currently, the running attack just uses the first two stages of the regular melee attack. It works, but can be visually cumbersome. Later I intend to create a dedicated running attack; along with ome other situational elements, such as a death animation.

Boot Hat's attack animations were also an interesting undertaking. He had to be able to use them both while standing and running, which is why the lower body remains motionless here. The animation is layered in Unity so that attack animations temporarily override all animations from the spine up; that way the legs can resume their regular walking or idling animations undisturbed. There are three attacks; the first swing simply swings and returns to idle. The second swing begins with a duplicate frame from the apex of the first attack's swing, performs a second swing, then returns to idle. The third does the same, except picking up from the apex of the second swing. Effectively, if the player clicks before Boot Hat finishes attacking, Boot Hat continues the combo. If not, the combo is interrupted. I was quite happy with these animations; though the secondary animation on the laces had to be cut short. I aimed for a general feel of inexpert brutality; since Boot Hat is a nasty little goblin scout. I may elect to shorten these later, to speed up attack rate.

The game uses a grid-based system I wrote, which you can see functioning in  the game. The squares highlight themselves based on content; player, player range, enemy, enemy range, harmful effect. Player and enemy position are evaluated, for the purposes of attack, only based on that grid. The highlight system looks cooler with the various spell effects than the sword range; but those are for a later update.

I'll compile some proper videos of this adventure in animation in the near future. For now; good night folks, and thanks for reading.

-alex

Iguana Demonstration

Hello dear readers! Today, you and I are going on a journey; a journey into my texturing process and all its wonders. This journey may be perilous, and not all of you will make it through; but don't let that disturb your calm.

It should be noted that this tutorial presumes a great deal of Photoshop, Maya, and Mudbox know-how; and is not an introductory note to any of them. It focuses not on menu commands and shortcuts but on my overall thought process and how it translates to my workflow. Additionally; this is neither a precise nor a complete look into the whole process, but into those parts of it that I felt would be most interesting.

Without further ado; an Iguana, textured in 19 confusing steps.

First off, the UV stamp in photoshop. The particulars of this layout are not important, since you could use the techniques we'll be using on any model. Uvs will be a big concern for this model; since the character is naked there is nowhere to hide a seam.

I also chose to give him varying levels of symmetry to test this workflow on each; the partial symmetry on the head was fun to work with. Due to the cube-shaped nature of his face, it's not possible to see both sides of his face at once; so those are the only part of his face that are overlapped, leaving the top open to asymmetry.

My first step is generally to take the pen tool and block in the base color of the model. Nothing much to write home about here; but we'll be doing some lighting effects later so pick colors a little darker than your final goal. It's handy to start this way because you can pick out a basic color palette and employ it from square 1. (always aim wide around the UV borders.)

Okay, now forget about those colors for a while. Let's talk about scales. Iguanas have pretty crazy scale patterns, but the bulk of each mass is going to be filled with a pattern of sorts. I started by making a tileable scale image, and defining it as a pattern. Then I filled square chunks with this pattern, converted them to smart objects (in order to deform the layer effect) and used the warp transform to bend them into place.

Here we have the basic scales laid out over the UV shapes. None of the seams match up, but all the inland areas will. The scales on the top of the head are distinctive enough on an iguana that I elected to paint them by hand.

This is where Mudbox comes in. By importing the model into Mudbox, along with the rough scale texture, I was able to paint over the broken seams and patch them up. Mudbox doesn't really like doing that at low resolutions; but after a great deal of kicking it cooperated. Initially the difference between this and the previous step is subtle; but a close-up on any seam area will reveal the important distinction.

At this point, I duplicate the layer and use the Nvidia normal map filter (well worth looking into) to convert the black-and-white scale pattern into a normal map. Making creative use of some blurring and layer effects (strokes, outer glow, whatever speaks to you.) you can get some pretty slick results here. This will come in handy later as the basis for our model's normal map; but that's not actually why I'm making it.

Ordinarily, I would employ "bevel and emboss" (or a hand-painted equivalent) to make the scales appear to "bump" even without the normal map; but a dynamic bevel would struggle to match the distortions and rotations involved in this UV layout, and there are just too many scales to paint by hand.

The model above is lit, with the a normal map applied.

Brace yourself, this is gonna get weird.

We'll start by baking the light onto the model in maya, in this case using the batch bake Mental Ray feature. (The normal map can be a little cumbersome to render with symmetry; but the fixes are all case-specific and best kept for another day.) Try to light it in such a way that the scales each have a distinct highlight and shadow. The model above is unlit, and has the baked light applied as a texture.

Now using the same exact lights, remove the normal map, and bake out the lights again. Those among you frail of heart and uncertain of footing; turn back here.

What I'm doing here is duplicating both light maps, putting the top light map into "difference" mode, and merging those layers. Why? Well this leaves us with a map where white indicates the way in which the light of each scale differs from the global light. What use is that to us?

If I select all, copy the "scaleMask" layer, and apply it as the layer mask for the "scaleTopLight" layer (you can accomplish this by applying a blank layer mask, finding it in the channels tab, and pasting the image in that.) Then, select the mask, and use levels (ctrl+L) to adjust the mask to your heart's content.

Basically; what this is doing is removing the global light from the iguana and leaving only lighting for the individual scales. You can have baked-in global lighting, but too much can interfere with your actual lighting later.

That's one way to do it, at least; here's another way that will yield a slightly different result. Delete the new layers, leaving your original lightmaps.

Duplicate your lightmaps, as before; but this time invert (ctrl+I) the "topLight" layer. (panel 1)

Then, put "topLight copy" into multiply mode, and adjust its opacity until the brighter regions of the texture are grey. (panel 2)

Duplicate "topLight copy" and switch it to "screen" mode, then adjust your opacity until the darker regions become grey. (panel 3)

Done properly, with some help from levels or curves, this can yield a very clean result; and I found the resulting 'bevel' effect had less influence from the global light.

Remember, these two methods are both valid; don't do both unless you want to combine them for a different effect.

With me so far? Good; because you ain't seen nothing yet.

I like to use cooler colors for shadows and warmer ones for highlights. to achieve that result on each and every scale, I selected and copied the "flatScaleLight" layer, created a yellow fill layer, and pasted "flatScaleLight" into its layer mask. Now, the brighter a scale, the yellower. [panel 1]

Next, I took a blue layer, applied the very same mask, then inverted it. Now, the darker a scale, the bluer. [panel 2]

For best results, use levels to sharpen or soften the influence of the color. We won't be using these as you see them here, they'll be much more subtle. You'll see.

Your long ordeal is almost over. Next, I baked out an ambient occlusion map; once again using Mental Ray's batch bake command. Not much to say about it, except that its a good way to add weight and realism to even a simple texture.

Next I hopped back into Mudbox, summoned up the long-neglected base color layer, and added areas of discoloration based on some iguana reference images and my own whimsy. The exact assortment of layers here are unimportant; some are in color mode, some in luminosity. It's a zoo in there. I want to mask them all at once though, and merging them would change their appearance, so I throw them in a group.

And, you guessed it, I mask the group; using a layer mask and some of the vector shapes form when I first blocked in my colors.

That mask is well and good; but I want MORE masking. MORE I SAY. To do this without having to modify my existing mask, I can group my existing group, and apply another mask to it. This time, I copy the layer which contains my mudbox-painted black-and-white scales, apply it as a mask for the group, and blur it a little. The result? Now the color, painted haphazardly, appears to have some relation to the scales themselves.

Alright, we're done setting ourselves up now; it's time to assemble those pieces we made.

First, the black-and-white scales, in multiply mode.  [panel 1]

The normal map you should squirrel away for further refinement, and "topLight" and "scaleTopLight" you can use if you wish; but I delete them here; they're just source layers. [panel 2]

Next, the "flatScaleLight" layer can be put into "soft light" or "overlay" mode, as per your preference. [still panel 2]

The colored light layers I put in a group, and I put that group in "color" mode; effectively "flatScaleLight" will govern luminosity, and "colorLight" will govern color. [panel 3]

On top of all that, put your ambient occlusion into multiply mode. Feel the warm waves of self-esteem wash over you as ambient occlusion makes your art better. [panel 4]

Lastly, our finishing touches. Places like the overlapping spines and claws were treated poorly by all the light baking and have to be replaced completely. You can get a long way just knowing a little photoshop; but in the end you still have to tweak your results to get things perfect. Curves layers, dust and scratches, assorted hand painted details.

That said; knowing how to pull off tricks like this can save you hours in the long run; particularly if you had a whole assortment of lizards to texture all in the same style or something. A workflow like this is flexible, layered, and easy to adjust.

Congratulations, weary travelers, on having survived this lesson in lateral thinking and chronic insomnia.

-alex

Iguana Texture

Hi Blog! I missed you too.

So the last few weeks involved moving into a nicer apartment and scrambling to find a new tenant to take over my lease on the old one. The rest of my time has been spent engaged in fisticuffs with Mudbox; which is a handy program even for low-polygon painting, but cooperates only at gunpoint.

I'll take you through the process behind for now here's a quick render of our reptilian friend's color map, just so you don't feel too neglected.

Peace,

-alex

Iguana

On to new adventures! Next up I'll be working on this handsome devil.

I had a pet iguana as a kid, and I've always found them fascinating. I wanted to give this character a lot of personality without humanizing him too much.

His proportions are more or less iguana-like, and I modelled his hands and feet after the strange bone structure iguanas have. More on this guy as he develops.

-alex