Archive for the 'Programming' Category

Whoo.. Progress update!

It’s been a lonnnnnng time since I’ve posted anything. Studying at DigiPen really takes all the time away from you. :(

Awesome HDR with tone mapping (uncharted 3) also features gamma correction

However, since I’m free now here are some screenshots from my latest game project :D . We’re really aiming big game here, real hardcore “current” gen stuff (not “next” gen, mind you).

This game is still in development and I’m sure it’ll be awesome when its done. I played the role of Technical Director/Graphics Programmer on the project, leading all technical development with an iron grip (heh heh). But, I am truly blessed with awesome an awesome team that works fantastic together, thanks for everything guys!

Swarm Trailer

Check out the game I’ve just completed! It was a submission for a school project and the result of 3 months of hard work!

A Robust C++ Interpolation Animation System

I’ve recently spent a great deal of time working on a 2D renderer/game engine as a hobby when I came across the need to add interpolation for my animation system. Studying other animation solutions like greensock (for flash) and tweener I was inspired by the relative ease of use. Hash tables to modify attributes of the interpolated object and specification of tweening effect as a parameter made tweening a quick and painless process.

e.g. In greensock:, 1, {x: 100, y: 100, ease: Back.easeOut})

Of course, such a solution is not possible to completely replicate in C++ due to its limited support for reflection. But before I begin discussing a viable solution for the C++ language, here’s a basic explanation on what interpolation is! According to wikipedia: interpolation is a method of constructing new data points within the range of a discrete set of known data points, but as far as multimedia/real-time programming is concern, interpolation is mainly used to generate the in-betweens of 2 points for animation subsystems (or anything that requires some kind of movement really).  Extrapolation is an extensition of interpolation where points are calculated beyond the range of values, this is often used for pridictive movement algorithms in online games and, unfortunately, is beyond the scope of this article.

Now, the most basic interpolation formula goes as such:

Position = Initial Position + (Final Position - InitialPosition) * Interpolation Range
where Interpolation Range is a value from 0 – 1.

The rate at which Interpolation Range changes controls what “type” of interpolation it is. For example if Interpolation Range increases steadily (constant increase) the type of interpolation would be described as linear. Interpolation Range usually uses time to drive its value, hence producing the effect of animation (movement over time).

Here are some visualizations of interpolation range:

With that explanation out of the way, lets get into the real implementation details! The system relies heavily on the use of function pointers to specify the interpolation type. This method produces:

  • clean and simple looking code
  • a unified interface for interpolation
  • easily extensible framework for user animations

Firstly, the function pointer declaration:

typedef float (*AnimationType)(float);

We will implement different types of animation using the AnimationType declaraction as a base for the function. The parameter represents the unmodified time value (0-1). The function returns the modified time value (interpolation value). The function provides a quick prototype for defining functions that calculate interpolation based on time.

The next step in implementing the system, is to come up with some basic interpoolation functions (using the AnimationType prototype).

float linear(float time)
    return time;

float quadraticIn(float time)
    return time * time;

float quadraticOut(float time)
    return time * (2 - time);

// you can simply add more types here in the future and not feel the reprecussions!

Alone these AnimationType functions are not very useful, so the next step is to create the unified interface that uses these functions.

float interpolate(AnimationType animationType, float start, float end, float time)
    return start + (end - start) * animationType(time);

// additionally you can choose to add helpers for commonly interpolated types such as vectors and colors:
Vector3 interpolate(AnimationType animationType, const Vector3& start, const Vector3& end, float time)
    return Vector3(
        interpolate(animationType, start.x, end.x, time),
        interpolate(animationType, start.y, end.y, time),
        interpolate(animationType, start.z, end.z, time));

Color interpolate(AnimationType animationType, const Color& start, const Color& end, float time)
    return Color(
        interpolate(animationType, start.r, end.r, time),
        interpolate(animationType, start.g, end.g, time),
        interpolate(animationType, start.b, end.b, time),
        interpolate(animationType, start.a, end.a, time));

And lastly, using the system would be as simple as converting your current time to a range of 0 – 1 (currentTime/totalTime) and then passing in the various parameters:

float time = currentTime/totalTime;
Fireball.position = interpolate(&linear, Dragon.position, Hero.position, time);

Hope this has been useful! Feel free to comment on how this system can be improved in the comments section. :)

Skeletal Animation in 2D (Part 2: Construction)

Okay so here’s an update on my implementation on skeletal animation in 2D… Basically… it works! :D

Above are some screenshots showing skeletal animation working hand in hand with the scenegraph I programmed for Project Warpy. These are some of the first development screenshots I’ve actually posted and although I’m not supposed to reveal game-play, I should be able to release screenshots as long as they do not reveal game-play (such as these).

Okay so first things first, how does the skeletal animation actually work:

  1. Create skeletal animation in maya
  2. Export to .X format
  3. Parse .X format with XNA’s X importer
  4. Custom processor to serialize bones and animations
  5. Parse bone transformations and convert to scenegraph
  6. Animation controller updates the bone nodes
  7. Interpolate between keyframes
  8. Attach sprites to bone nodes

Voila! This technique closely mimicks rigid binding and requires some knowledge of matrices and hierarchical transformation.

So before you can get any bone animation working in 2D you’ll need some kind of hierarchical system (in my case, a scenegraph). I create “nodes” that contain position, scale and rotation and use the following formula to obtain a transformation (in world space).

transform = Matrix.Identity;
transform *= Matrix.CreateScale(new Vector3(scale.X, scale.Y, 1));
transform *= Matrix.CreateRotationZ(rotation);
transform *= Matrix.CreateTranslation(new Vector3(position.X, position.Y, 0));
transform *= parent.transform;

transform represents the transformation matrix of the current node in world space. It is created by multiplying the local scale, rotation and translation followed by its parent’s transformation. This is done down the hierarchical chain (with parent first multiplying its transformation, followed by its children) just prior to rendering. The result is nodes that translate, scale and rotates according to its parent’s transformation, in layman terms, when the parent moves the child node moves in accordance.

Because bones are usually stored with transformations relative to its parent bone its easy to adapt it to such a system and therefore the only thing I do in the model processor is read in bones and animations and decompose the matrix into translation, rotation and scale (as used later in the application described above).

// process the bindpose matrices..
for (int i = 0; i < bindPose.Count; i ++ )
    Vector3 trans, scal;
    Quaternion rot;

    bindPose[i].Decompose(out scal, out rot, out trans);

    float rs = (float)Math.Sqrt(rot.X * rot.X + rot.Y * rot.Y + rot.Z * rot.Z);

    // make sure we dont get a divisable by 0 error.
    if (rs == 0)
        rs = 1;

    float z = rot.Z / rs;
    float angle = 2.0f * (float)Math.Acos((double)rot.W) * z;

    this.bindPose.Add(new Transform(new Vector2(trans.X, trans.Y), new Vector2(scal.X, scal.Y), angle));

I also store a list of parents for each bone, so I know how to parent them after they are loaded:

IList<BoneContent> bones = MeshHelper.FlattenSkeleton(skeleton);

foreach (BoneContent bone in bones)
    hierarchy.Add(bones.IndexOf(bone.Parent as BoneContent));

Once these values are stored the skeleton simply has to be reconstructed using the nodes in the scenegraph.

// contains a list of attached joints.
joints = new List<SkeletonJoint>();

// constructs the bones straight away!
for (int i = 0; i < data.bindPose.Count; i++)
    SkeletonJoint joint = new SkeletonJoint();
    joint.position = data.bindPose[i].translation;
    joint.rotation = data.bindPose[i].rotation;
    joint.scale = data.bindPose[i].scale;

// go through that list again to parent joints..
for (int i = 0; i < data.hierarchy.Count; i++)
    // check if this is the root joint..
    if (data.hierarchy[i] == -1)

Now that the skeleton is built (in your scenegraph), the only thing left to do is animation! I will be releasing an article describing keyframe animation and interpolation in part 3 of the article. Hope you enjoyed reading this.

p.s. This article has been left intentionally vague, sorry for not publishing complete code samples but there shouldn’t be a problem implementing this if you get the theory! :P

Input Action Mapping

One interesting way to generalize input in games is known as action mapping. Basically instead of keys (or buttons) being pressed or released, objects react to when actions are “pressed” and “released”. The largest benefit of using this method when programming input for games is when your project requires input from multiple devices (or support for multiple devices in the future).

Actions are generated from device handlers and propagated to game objects for evaluation. Device handlers handle input device events (such as key press/release) and create the corresponding action.

This worked especially well when developing Project Warpy for the XBOX/PC as debugging on the PC requires keyboard input, while the XBOX only accepts controller input.

Here’s a quick snippet on how you can implement this into your own games:

enum Action

class KeyboardHandler
    void onPress(char key)
        if (key == LEFT_ARROW)
        if (key == RIGHT_ARROW)

    void onRelease(char key)
        if (key == LEFT_ARROW)
        if (key == RIGHT_ARROW)

Of course, this is not very useful if you only need support for 1 type of input device. But… say I wanted support for the XBOX 360 controller.

class ControllerHandler
    void onPress(Button button)
        if (button == DPAD_LEFT)
        if (button == DPAD_RIGHT)

    void onRelease(Button button)
        if (button == DPAD_LEFT)
        if (button == DPAD_RIGHT)

This works for any device (or device library for that matter) as long as propagateKeyPress and propagateKeyRelease are called in the right place and because the game objects react to the Action enum, no extra coding on the game object side is required.

Skeletal Animation in 2D (Part 1: Concept)

Sometime last year I was playing the game patapon for the psp. Impressed by the fluid animation I tried to look for the technique utilized by the game to perform it’s character animations. I guess my search terms must have been wrong because I couldn’t find any viable results. Half a year later I stumbled across Patapon DS a homebrew version of patapon for the DS, and this post, in particular, caught my attention.

After examining the animation technique presented in that post, I was left thinking: “This seems awfully familiar” and before I knew it I decided to try skeletal animation in 2D (like patapon). My first experiment consists of loading .X models (with only bones exported) and using these bones as entities in a 2D scene graph.

So here’s the motivation factors of this technique:

  • Easy to deploy (Information on bone transformation and .X file format easy to obtain)
  • Easy to create content (No special animation tool or file format required, just a .X exporter)
  • Easy to integrate (Since bones function similarly to parent-child scene-graphs)

This technique, if successful, will be utilized in project warpy for enemy animations.

Hierarchical Based Systems

Programming complex game scenes often leads to very large and unmodular classes. During my years as a game programmer, one of the systems I’ve discovered to solve this problem is Hierarchical Based Systems. In fact, some languages are even centered around this ideology, namely flash as3!

Structure of a Hierarchical System

So what exactly is a hierarchical based system? Well simply put, a scene is divided into nodes where each node is a useful object that “exists” in the scene. One can say nodes are modular logic code. The basic rule of a node, in my opinion, is that it must have a parent and a set of children. The node first runs it’s own logic followed by all its children logics. Therefore just by calling the root node’s logic functions, all its children (and their children too) have their logics called automagically.

Here’s an example of a game component:

class Component
  std::list<Component*> children;

  void addChild(Component* component)

  void removeChild(Component* component)

  virtual void update()

  void _update()
    for (std::list<Component*>::iterator i = children.begin(); i != children.end(); i ++)

This class serves as a template, where inheriting classes just have to modify the update() function. The framework programmer then calls _update() to update the object and all its children down the hierarchy.

As if this wasn’t useful enough, nodes can further improve coding in games by providing the platform for scene management techniques, such as scene-graphs and octrees. But more on that another time. :P