Friday, November 1, 2013

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

Thursday, June 27, 2013

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

Sunday, May 5, 2013

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

Tuesday, April 2, 2013

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

Thursday, March 28, 2013

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

Sunday, March 3, 2013

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

Saturday, March 2, 2013

Trade Nations

Another big project I worked on at Bight was "Trade Nations" for facebook. It was an interesting experience; I had been working on 3D assets but was sucked into the 2D team with almost no experience in that field. The educational value of that project was immeasurable: I learned about painting, pipelines, flash, GUI design. I got to work on pretty much every aspect of the game, and contribute huge amounts of artwork.

Everything in Trade Nations was made in photoshop and exported through flash; most assets were painted at enormous sizes and reduced. I only have a few of the source files in my posession, the rest are just screenshots.

I worked on so many assets that it is difficult to remember which ones I made; and to make matters more complicated I would often get rough assets from other artists, or completed assets that had to be animated, or fixed in some way. I've made an effort to post only artwork I distinctly remember creating from start-to-finish.

Resource Stages:



One of my biggest tasks was to create varying stages of resource camps, which could be unlocked as the player leveled up. Each of these had to animate differently, and change in appearance as it's animations were depleted. Each of the camps had a different worker guy too, and I did all the walk and idle cycles for all the re-skinned workers.



The first-stage camps I just had to modify and add stages of decay to; the rest I did from concept to completion. Above video taken from the game featuring most of the camp stages. (and yes, the final-stage sheep are Llamas, and I still can't believe I got that approved.)

Speaking of Llamas:


The quarries were probably the most intricate ones animation-wise. Here's a closer look at them



Decorations and Buildings:



The meat of Trade Nations are it's decorations and building upgrades. Above are all the animated decorations I can remember making; sadly there were a few cool ones that never quite made it into the game. Another big feature of the game was the 'premium' assets, which cost real money. They were always more fun to work on, since they were the most flashy, exciting props; but less people got to see them.

(The cat's sprite flipped every time it animated; this Gif does not do that.)

Here are some of the more mundane props. I was on statue and shrubbery duty for a week or so.



I was responsible for most of the fences and roads; they were an interesting undertaking from a mechanical standpoint, since they had to change appearances depending on their proximity to other props. This was a layering nightmare for me, and a minor inconvenience to the programmers. They turned out pretty neat though.



 And here are some sightly larger pictures nabbed from the build menu icons.



Aaaand speaking of icons,

Icons:




I made all kinds of icons for the game, it was weeks and weeks of icons. This is but a fraction of them.

User Interface:



The entire HUD was to be overhauled for an upcoming release, and all the visual concepting, heated brainstorming, and countless revisions were done by my co-worker Karyn and I. We both spent so long cooperatively hating this interface that I can no longer remember who did what; so here are some shots of the various menus.





It's a pretty decent system though, worth taking a look at in-game. There's lots of devious places where we swapped the typical location of "Okay" or "Cancel" with "Share," to get people to post things to their walls.

And that concludes this trip down memory lane.

-alex