The Night Before Beta: How Scary Close We Are To The Finish Line

May 16th, 2008

4:56 A.M

Yes, We’re Still Alive…

Hey you misfits! How are things? Going swimmingly I hope.

I’m sorry we’ve neglected you lately, but quite frankly, the road to final is an arduous one and we’ve been busy beavers over the past while. My apologies. I’m so sorry that I took time out of creating Matinee and other Kismet sequences to talk a bit about what we’re working on!

But let’s talk about something cool. Let’s talk about characters. Truthfully, we haven’t revealed much about the look of Hench over the development cycle. Part of it was the amount of work equaled the blog being pushed back. But the other part is in our cel-shaded art style. Before I unveiled the style of the game, I wanted it in-game first, with the proper lighting and cel-shaded techniques that Thomas Kobelsky was so kind in providing us with last post.

When you think of an Unreal modification, a certain expectation pops up in your head. It looks and feels a certain way. What we’ve done is a modification of not only gameplay or camera, but visual style as well. Trust me, these characters don’t look anything like a typical Unreal 3 modification!

As you can tell here, our style is very different! This is our main character, Hench, holding his demonic ghost-eating sack (which unfortunately has no texture on it in this picture). We decided to use the Krall animation rig from UT3. The crouch run of the Krall really was in-line with how we wanted Hench to move. As Thomas mentioned in another post, the cel-shading on the characters is custom. Thomas got help from many sources, but ultimately he tweaked his own numbers to come up with a dynamite style.

This is our Food Ghost, Mercedes. She is called the food ghost because her energy feeds Hench’s master. When Hench delivers these ghosts to his Master, her energy is consumed and the Master ‘grows’ and uses the environment of the train yard to do so.

Mercedes is designed to have the appearance of a little girl, lost in the etheral world. Hench’s job is to capture and feed her to his Master, so naturally, like a child, she is devious and hard to catch.

And now we come to Jet, our harasser ghost. This guy is looking to stop you at any cost. When Hench is parading around the train yard with a sackful of ghosts, Jet will actively seek you out, stun you, and release any ghosts you had in your sack. A tad menacing, don’t you think? Jet is designed to be the foil to the player. He is what prevents the player from capturing Mercedes ghosts. We have a ghost to achieve the objective with Mercedes, but Jet is the opposite of that, and provides an obstacle for Hench.

Now we come to Tank, my personal favorite enemy. His single objective is to get to the Master and drain his energy, thus making him hungrier. He is pissed because he has an ax in his head, but his beef isn’t with you, but with your crazy Master. Tank will ignore you completely and go straight for the Master in the hunt for his power.

Tank is primarily designed around a rhinoceros and I personally dig the design by our Creative Director, Mark N. Barker. In fact, he created (or helped create) the designs of our characters and they definitely fit with our style.

The only character left is the Master. He is Hench’s master and he you must feed ghosts to him. This picture shows the general idea of the Master becoming built using elements of the environment, like train cars, steam engines, and other things you’d find in a train yard. Once he has some crazy flames and debris swirling around him, he’ll look really awesome and massive.

Well, that’s all I really got for ya at the moment. Check back for more updates post-Beta and closer to the Final date!

Cheers,

Kyle Jensen, Project Manager

How We Created Cel-Shading in Hench

Well, here’s your post-alpha update from the Misfit Interactive 3D Director.
Kyle wanted me to write this over the term break, but here I am, sitting in the airport during my 3 hour layover in Calgary on Sunday, and I’m just now starting to type this out on my laptop.

Some of you may wonder about the general art style of the game “Hench.” Well, sorry to disappoint, but Mark’s article should probably cover that better than I could. What I’m going to tell you about is how we implemented our chosen art style. Using the Unreal 3 Editor, it was quite a challenge to get a working CelShader for our game. As you may already know, we’re using two different types of cel-shaders in our game; one for our environment, and a completely different one for our characters.

Implementing the Environmental cel-shader was a slight challenge to figure out, but after getting some much appreciated help from Lanh Doan, Pieter Parker (of GD10) and Chiyo Lai, I was able to create a very distinct looking CelShader. The way this was done is basically tricking the engine into showing and hiding certain polygons of the Static Mesh. I would create a Static Mesh in 3DS Max 9, unwrap all the UVs and all the fun stuff. But before I started to texture the mesh, I would select all the polygon faces of the mesh, Shift+Drag the mesh so it created a duplicate of the mesh, then I would position the duplicate exactly on top of the original and then Detach to a separate object. Doing this, I had two of the exact same meshes in the exact same space. Kinda redundant, eh? Well, after selecting one of them, I’d then select all the polygons of that mesh, Extrude by Local Normal with an extrusion height of 2. This gave me one mesh that was slightly bigger than the first one. After again selecting all the polygon faces of the larger mesh, I would invert all the normal’s so that facing towards us would be the back of the polygons. With that mesh still selected, it was time to unwrap the UVs for that mesh. Opening the UV Editor in Max, I would select all the UVs, and scale them down so they were very small, and move them off to the side so I could deal with them later. Exiting the UV Editor, I would then attach both meshes together, and enter the UV Editor once again. This time, I would have two sets of UVs, one regular size, and one tiny size off to the side. Selecting the tiny sized ones, I dragged them into the grid-space and put them way up in the corner (usually top right) and out of the way of any other UVs that I wanted textured. Using this method of making a cel-shaded mesh is not very efficient, as you can tell. It forces us to use twice as many polygons as we would like, but it also gives us a nicer CelShader.

How it works is that the back side of a polygon does not get drawn when it is rendered in an environment, so you can see through the outer “shell” of the mesh. Using some very fine texture work, this outer shell is colored black while the rest of the mesh is colored whatever colors we felt worked in our color pallet.

Now you have the construction of the Mesh, so I will now go through the texturing part. Since Unreal 3 is able to use Specularity and Normal Mapping, we decided to use those features to give our meshes some very fine detail. Rendering the UVs onto a 1024×1024 template, I brought the UVs into Adobe Illustrator CS3 and began fill coloring the UVs. In the top right corner (or wherever I had put the second set of tiny UVs) I put a single tiny spot of black to cover those UVs up. Using black there gave us the black outline on the Static Meshes in the game. When I was happy with my color setup, I brought the Vector image into Adobe Photoshop CS3 into a 256×256 canvas. Since I was converting Vector shapes into Pixel images, I had to sometimes manually re-color a couple pixels that mixed color incorrectly. This gave us a flat color texture on our meshes, and we needed something a little extra to make it look truly beautiful.

Opening the original 1024 UV template, I began to set up our Normal Map. Thanks to Chiyo Lai, I got almost all of my textures from http://www.CGTextures.com (Amazing site, check it out). I won’t go through this process, because it’s pretty self-explanatory. After I had my Normal Map layout that I wanted, I saved it as a Targa format (.tga) and imported the image into CrazyBump (Amazing software) and created a Normal Map with that. Going back into Photoshop that I kept open, with the Normal Map layout still open and in separate layers, I deleted the layers that would not produce any specularity, like wood for example (unless you’re playing Bioshock :P), and only keep shiny surfaces in there, with a black background. Saving this as a Targa format as well, I used this as our Specularity map. I know that is not how specularity is used in the real world, it’s usually black and white instead of color, but using this gave our game just that little bit of extra when you’re looking at meshes.

Now you know the whole process of how the Static Meshes were constructed, I’m going to go through how our Characters were made. Being a team of only four guys, and being the smallest team in our class, we tried to find ways to make our workload less intensive than it already is. We outsourced our main character, Hench, to Paul Patko to model, and he did an amazing job of it. Kudos to him. The Food Ghost, code named “Mercedes,” we outsourced to Mohit Punia, and he also did an amazing job of creating such a key character to our game. The Special Ghost, code named “Jet,” we outsourced to Dan Bittencourt, which looks great so far, albeit incomplete. The Attack Ghost, code named “Tank,” I modeled myself. I’m not going to toot my own horn or anything here, but I believe he came out very well.

Creating a CelShader for these characters was a very long and drawn out task to complete. Creating CelShading in such a realistic rendering engine as Unreal 3, there was a lot of time spent in the Material Browser. Our first CelShader, courtesy of Lanh Doan, was a very simplified shader.

Unfortunately, we decided to find a more complex shader tutorial to try on our own. I was told to check out Hourence’s website, and found a very fancy CelShader on there. Borrowing from his example, I recreated and altered it slightly to look a little better.

But, it still didn’t look quite right. I decided to jump into the Unreal 3 forums provided by Epic, and created a very hot topic on there regarding CelShading.

Many people came out and shared their concoctions, and we finally settled upon this last shader.

It is very complex, very confusing, and very easy to break. But one big advantage it had was being VERY light on rendering instructions. Being the awesome professional that I was with the Material Browser by then, I debugged the shader and found out what options to tweak. I also removed a lot of stuff that I felt wasn’t needed, or just plain didn’t have any effect on the shader (from what I could tell. I had only been using the Material Browser for about a month, so I was still very much a noob to it). I also tried to look into how Material Instances worked, and I decided that I liked them very much. Changing a few values, we were able to change the colors of the Material Instances, and basically apply the same Material to a character 5 or 6 times without being extensive on the rendering instructions. With that taken care of, we were able to bring out characters to life in our game. Having a different CelShader on the Characters and Environment really helped to make the characters pop out on screen, and be the main focus of the player, with the environment providing obstacles.

Well, there you have it. The entire rundown of what I did to make everything 3d in our game come to life.

Thomas Kobelsky, 3D Director

‘Hench’ Level Design - 2nd Iteration

2^nd  Level Iteration Journal

March 28th, 5:35PM

Well a lot has changed and it’s been some time before I’ve updated this. The level has undergone rapid iteration and great change.  This has been due to level feedback from mentors, classmates and discussions among the group.  We have moved away from the square format we were employing in our white box in favor of a more organic shape to create interesting flow and paths.

We have also received feedback that having interesting vertical elements for the player to strategically use to gain ground on the ghost and ultimately capture them. To facilitate this we have placed more steam launchers to allow the player to return to the upper levels and focused on linking all parts of the level between their vertical scales.

One of the interesting things the vertical aspect of the level has raised is our ghosts speed and path finding. We have always been designing the ghosts to move through the level as if it was a maze. They will not leap over objects and will instead take the long way towards their goal.

One issue this raised was how fast should the Ghosts run in relation to Hench? Should they be slow plodding easy to catch targets or should they in fact be almost as fast as Hench? On the one hand if they are considerably slower than Hench the player can easily manage and capture the ghosts making the game play more about points and management and seeing how to make that fun. In the other, if the ghosts are able to move quickly and Hench has to use his environment to his advantage by cutting corners and going over top of obstacles. This focuses the game play more on the skill of the player and the fun of the chase. We are going to attempt to find a balance between the two of them and through play testing and user feedback we hope to tweak and polish this to a perfect mechanic.

Now that the level has changed so too have the areas. This breakdown illustrates some major parts of the level and some of the visuals we will be using to help the player recall where they are in the level. Items 8,9, and 10 are exits to the level and are only indicated because they will static meshes of tunnel entrances (blocked) and gates (closed). I will have to post some of the fantastic work my teammate Thomas has been doing on creating these unique objects and the amazing cell shader he is applying to them.

Cheers,

Braden Bahen, Level Designer

‘Hench’ Level Design - 1st Iteration Journal

March 10^th, 4 PM

So the first week done and the first whitebox built! I’m nervous, excited and I don’t think I fully realize how much work I have ahead of me. Our Game Design Document describes our level as such:

“Our game takes place in a train yard maze where a horrific accident has warped the train yard into a nightmare of twisted metal and broken machinery. Your master is trapped inside an object at the center of the train yard and must be fed the spirits of the train yard in order to break free of his prison.”

Using Gizmosis as inspiration for Level Design I started creating the mazes. One of the issues we face is that train yards are quite a challenge to make interesting. They tend to be laid out in a very one directional manner and don’t have many levels of height and interesting shapes. Another issue we faced is that we want the player to visually be able to keep track of what is going on in the level at all times no matter where they were. I’ll actually do a breakdown of our level.

 

The level is divided into four sections all bordered by the upper level catwalk.

-The Catwalk serves as a lookout platform and access to the Jump Pads in each corner

-The Collapsed Building area is filled with large debris piles that both the players and ghosts scramble up. Partial walls still stand.

-The Repair Area features lots of overhead catwalks and platforms filled with tools and technology. Cramped quarters, multiple height levels, hoists and lifts, and office buildings.

-The Refueling Area is the most undamaged part of the train yard. It still has complete trains and undamaged water towers.

-The Train Wreckage is where the train yard has suffered the most. Twisted train cars, half submerged, rust and decay. It’s like a bomb went off here, sending freight cars flying and shattering stone and mortar. There are one or two large heavy duty cranes that have fallen over.

-The walls bordering around the catwalk will be large brick. There will also be cranes that have crashed down on the wall but it was strong enough to hold.

*Note* The Gates are closed. The marker is there just to indicate from where the trains come and how the tracks should be set up.

 

Design Goals:

- To create a unique arena that challenges the player’s abilities. Give them challenging paths to follow that will allow them to rapidly catch ghosts.

- To allow the player the maximum amount of visibility we can give them through level design but at the same time creating interesting paths and viewpoints.

-To make the Master a centerpiece and try to have him on screen at all possible times.

-To give the player a sense of speed and motion as they dance and jump over the trainyard.

Things we want the player to be doing:

- Chasing the ghosts throughout the train yard

- Spotting ghosts nearing the master or hiding off in a corner (from long distances away)

- Using the steam vents to rapidly get back to the Master to defend him and to drop off ghosts to feed him.

- Jumping and running on top of train cars and debris to catch the ghosts. This will allow you to move much faster than the ghosts.

- Using the upper level to quickly scout out the level.

How will we hopefully accomplish both:

- Design mesh placements to allow the player to bound around the level and hopefully avoid touching the ground when possibly. Map out paths and play test running on top of the train cars and other objects in the level.

- Limit the ghosts to the ground. Make it so that they can’t jump and it will limit their movement to a very grid like pattern. Because the player will be able to move on angles this will assist him in catching the ghosts.

- For the Master and visibility issues, I will be creating three levels of height.

When a player interacts with a jump pad they will be at the 3^rd height level. This high up level will have no static meshes in it and most of the game will take place in the lower level of height. The highest the player will ever reach is up to the Master’s waist at full growth.

The 2^nd Height level is for large objects such as water towers and for the catwalks. From this level Hench can jump out onto various paths and meshes down on the 1^st level to chase down ghosts.

The 1^st Height is where the maze is located. All sorts of obstacles and debris get in your way as you chase the ghosts. Jump up to the flatbed car decks and leap across to other objects to help navigate the mazes easily.

Cheers,

Braden Bahen, Level Designer

What is a Hench? What is Hench About?

Hey all,

Firstly, for all those who visit the site, sorry for the lack of updates! We have been so driven to get our vision off the ground that this took a backseat to the madness. But I assure you, it will be more frequent from now on!

Before I jump into what we’ve been doing in the first weeks of production, I’d like to point out a few things about ‘Hench.’

1. ‘Hench’ is built using the Unreal 3 Engine
2. You play as an evil henchman who must collect ghosts to feed to his Master
3.  ’Hench’ has a cel-shaded, dark and twisted art style

For a more details about ‘Hench’ visit the About ‘Hench’ page on the side.

Very shortly, we will update you about the challenges of learning the Unreal 3 Engine, learning how to make cel-shaded look in Unreal 3, level design, art styles, and game mechanics.

Cheers,

Kyle Jensen

Project Manager for Misfit Interactive 

Flash Game Update!

Hey all,

We are very excited to say that our Flash game is technically done. But it isn’t quite as visually the way we want it.

Here is a screen of an earlier build:

Our game mechanics for ‘Gizmosis’ is based upon collection and defense. You must defend the Master Gizmo, seen the in center, against the oncoming widgets. At the same time, your Master Gizmo is constantly losing energy, so you must also capture green widgets to keep your timer up. The red widgets act as the progression through the game. You need to capture a certain amount of red widgets to progress to the next level.

This type of defending and collecting works similar to a mash-up of Pac-Man and Tower Defense. If you sit around the Master Gizmo, you will fail because the red enemies needed to progress will stick to the outside of the map. If you are too aggressive, it opens up the Master Gizmo to attacks from the blue widgets, so the player will need to incorporate differing attacks as they move through the game.

Stay tuned for a final build game and more screenshots!

- Kyle Jensen

Project Manager

Oh, these teammates of mine..

Hey, all:

Just a quick overdue recognition on this Flash project:

• First off, Mark, our Creative Designer for the project, is freakin’ amazing.
• Secondly, Thomas Kobelsky, our Technical Designer, has worked his tail off to help Mark with scripting, animating enemies and it pretty much the jack-of-all-trades in this project
• Lastly, I feel lazy compared to those two! They are awesome.

I just felt I needed to give a shout-out to those two in particular who spent countless nights working through scripting issues, when Flash decided it wanted to play hard-ball. As well as the effort they put into getting the game functional at all. Nice work, gentleman.

Braden and I have done quite a bit of work ourselves, but we both recognize that these two poured their heart into this game, Gizmosis.

Kudos, guys.

- Kyle Jensen

Project Manager for Misfit Interactive

‘Gizmosis’: The Night Shift - Part 1

Well, well, well.

It’s January 25th 26th, at 2:10 am and I’m still at school, working with Thomas Kobelsky (TK). Well, working about as well as can be expected at this hour.

So far, we have come along way in our Flash project in mere weeks. After all, we need to get a fully functional Flash game done in less than 4 weeks now. It’s pretty intense stuff, considering we didn’t know a thing about Flash the start of the term.

Our game, ‘Gizmosis’, is an old-school arcade inspired title, where the player must defend a central object from certain enemies as well as capturing other types of enemies. You see, the player must defend his central object, so the object can survive. But at the same time, the player must capture other enemies in order to sustain the central object, to feed it, if you will. Very much in the style of old arcade titles; we hope ‘Gizmosis’ mixes two very distinct styles of play together into a simple, fun package.

Our game’s art style is rather abstract; with many inspirations coming from ‘Geometry Wars.’ The main player, as well as the enemies, are shapes rather than organic characters. Given that, we plan to give this game a very retro, neon look. Very much like it’s straight from the 1980’s.

Just some standard shapes, added some strokes to the outside, as well as Gaussian Blur, and voila - one enemy art asset. From there, we would simply take it into Flash, animate it to do certain movements, and add some Action Script to the enemy so it has proper collision against walls, the main character, or other enemies. Very fun, cool, and simple; just like our Flash game is going to be! (I hope!)

But, I’m done rambling on. I need some sleep.

That and TK needs to stop making vector characters in Illustrator. Poor, TK.

Cheers,

- Kyle Jensen

Project Manager for Misfit Interactive

Development Blog: Up And Running!

Well, here it is.

The mother of all blogs; or at least that’s what I tell myself.

I’m Kyle Jensen, the Project Manager of Misfit Interactive. We are a group of students in the Game Design program at the Vancouver Film School. Yes, we will make games for a living. Exciting, I know!

We are currently in the pre-production phase of our project tentatively named, ‘Hench.’ I wish I had more time to go over the details about the game, but suffice it to say, that we are almost ready of unleashing the idea.

That, and it is 4 am here. And I haven’t slept yet. Yeah.

So, in short, this will be a development blog about the game ‘Hench’, and our Flash project, ‘Gizmosis’, how some design choices were made, trials and tribulations, you name it!

I’ll update this blog often, so prepare to read, because I love to write.

Cheers,

- Kyle Jensen

Project Manager for Misfit Interactive