Light is vertical scrolling platformer with focus on the preservation of light. The goal is to reach the end of the level before the light reaches zero; along the way, the player can pick batteries which will recharge the light’s battery.

The game incorporated a number of techniques that I learned during a 2D graphics course taught by John Pile at Champlain College. The techniques consist of particle effects, shaders, parallaxing, animations, interpolation, and more.


    Light was developed using XNA 4.0, and it’s configured to run on both the PC and the Xbox 360.


    As a graphically focused game, gameplay is limited to the preservation of light and the search for an exit. Navigation consists of walking and jumping. At one point during development I prototyped a climb function, which works but needs improvement before it’s added game.


    The following images show the basic concept before development started. The only features that remain incomplete are the enemies and elevators. Since the project was used to demonstrate 2D graphics techniques, enemies were not critical; however, if I decide to continue working on this project, enemies and several additional game objects will be added.



    During the development of Light, I built an in game level editor. New levels can be constructed in-game on the PC or Xbox 360 using a keyboard or gamepad. The editor is configured to expand infinitely in the vertical direction and with some minor modification the levels can be expanded in the horizontal direction as well.


    Important Editor Functions:

    • Cycle through tiles
    • Set tile position
    • Set tile rotation
    • Set tile depth (0 to 1)
    • Quickly place tiles
    • Increase/Decrease rows (vertical height)
    • Change background color
    • Change levels
    • Save levels

    The editor uses the tiles pulled in from the games texture atlas. Here’s a subset of the tiles contained in the atlas:


    Levels are read in and saved out to XML files. The level XML files look something like:


    The editor currently functions as indented, but the addition of a GUI interface would simplify the level creation process. Currently the only way of viewing tiles is by cycling through them one by one, it would be much easier to scroll though a visual list that presents multiple tiles at once. Providing menus and mouse input in addition to the keyboard controls would simplify some of the complex keyboard and gamepad input.

    Light Shader

    The following HLSL shader is used to create a gradient circle around the player. The size of the circle will changes according to the remaining battery power.

    uniform extern texture screen_texture;
    sampler screen = sampler_state
        Texture = <screen_texture>;
    float radius;
    float2 center_coord;
    float4 PixelShaderFunction(float2 tex_coord: TEXCOORD0) : COLOR
        float4 color = tex2D(screen, tex_coord);
        float current_radius = abs((pow((tex_coord[0] - center_coord[0]) *
            1.77777777778, 2)) + (pow(tex_coord[1] - center_coord[1], 2)));
        current_radius = sqrt(current_radius);
        if (current_radius < radius)
            color[0] *= 1 - (current_radius/radius);
            color[1] *= 1 - (current_radius/radius);
            color[2] *= 1 - (current_radius/radius);
        else if (current_radius > radius)
            color[0] = 0;
            color[1] = 0;
            color[2] = 0;
        return color;
        pass P0
            PixelShader = compile ps_2_0 PixelShaderFunction();

    Battery Particle Effect

    The core of Light is the preservation of the battery power. Batteries have been placed throughout the levels to refill the player’s battery. When the player collides with a battery pack the shell of the battery breaks away leaving the battery power. The visual feedback for the shell breaking is generated using a particle effect:

    acceleration_multiplier : member float // set to -= 0.001f
    sprite : Texture2D     // set to preferred image (e.g., one pixel white line)
    direction : Vector2    // set to random direction
    position : Vector2     // set to random position around emitter origin
    velocity : Vector2     // set to zero
    acceleration : Vector2 // set to direction * acceleration_multiplier
    rotation : float       // set to zero
    rotation_rate: float   // set to random / 2.0f
    initial_scale : float  // set to 1.5f
    final_scale : float    // set to 0.1f
    initial_color : float  // set to White
    final_color : float    // set to White
    age : int              // set to random between 0 and 10
    fade_age : int         // set to preferred particle duration

    For more particle effects, see my previous post.

    Character Animation


    While developing the game I didn’t have time to create a character walking animation, so I used a circle that gradually rotated to demonstrate the functionality. The animation will change according to the characters current velocity. While cel animations work well for simple animations, a more robust skeletal animation system would allow for more flexibility. When I have more time, I’d like to work on developing a 2D skeletal animation system.

    change frame (not taking time or velocity into account):
        frame count++
        if (frame count >= number of frames)
            current frame = 0

    November 28, 2011