Platformer Starter Kit Series: Sprites

By Marc Gagne May, 22 2013

As excited as I am about our new Platformer Starter Kit I have to admit something, I'm totally not a game developer. In fact it gets worse, I'm not even much of a gamer. Sure I play the occasional game, but my Xbox plays Netflix far more than it does Halo, and my number one game on my phone is not Angry Birds, it's Solitaire. In another life I loved and played a LOT of video games, and used to even organize LAN parties (yup, it was that long ago). But even though I don't know much about gaming as a developer, I am fascinated by game development, and I do know programming especially web/ui stuff. With a lot of HTML5 games coming out there is a huge overlap in these skills. With that, I figured the best place to start learning about game development was with something I actually know a thing or two about, sprites. Sprites, which (at least according to Wikipedia) have their origin in video games, have crossed over into web programming as well and are still heavily used in game development.


Sprites is a technique to reduce the number of assets (or images) you need to read/request & load. This technique comes from the good ol' days of gaming where it was (and still is) a huge performance benefit to load a single image file (aka sprite) into memory vs. loading each image separately. In some cases there was hardware to deal with this but pretty quickly we moved to a software based solution. In the web world we've used css sprites over the years as a way to decrease the number of requests and increase performance. Ever roll over an button/image and there was a delay as the next image was downloaded and rendered for the hover state? Yeah… that site should have used sprites (or at least asset preloading but I'll deal with that another day)

Let's look at the player.png sprite that's available in the Gwendolyn game included in the Platformer Starter Kit. As we can see there are lots of individual images placed in one large image set (aka sprite). You render just the section or 'slice' of the image you want to show based on the state of your player.


Jaws is a game engine library that exposes many great classes for dealing with sprites, game states, asset management, animations and more. Ludus (the platform included in the starter kit) leverages the Jaws game engine extensively. I'm going to focus specifically on its use of the Sprite, SpriteSheet & Animation classes as it relates to our player.png asset.

ludus.js : line 657 - 667
player = new jaws.Sprite({ x: startx, y: starty, anchor: "center_bottom", flipped: true });

// the animations used by our hero
player.animation = new jaws.Animation({ sprite_sheet: jaws.assets.get("player.png"), frame_size: player_framesize, frame_duration: 75 });
player.idle_anim = player.animation.slice(8, 9);
player.move_anim = player.animation.slice(0, 7);
player.jump_anim = player.animation.slice(14, 15);
player.fall_anim = player.animation.slice(15, 16);
player.attack_anim = player.animation.slice(9, 14);

The above code sample uses 3 classes from Jaws: Sprite, SpriteSheet & Animation.

ludus.js : line 657 The Sprite class takes as options the starting X & Y position, a string indicating how the Sprite is to be anchored to the Canvas ("top_left", "center" etc.), a boolean indicating if the image should be flipped horizontally or not as well as a number of others.

ludus.js : line 660 The SpriteSheet class helps break the larger image into individual frames which are defined by the frame_size property. By specifying a frame size of 128 x 96 (the value of player_framesize is [128,96]) we are saying each individual frame in player.png is 128 pixels wide by 96 pixels tall. The Animation class allows you to animate the SpriteSheet frames, the frame_duration property specifies how many milliseconds to display each individual frame for, in this case 75 milliseconds.

ludus.js : line 661 - 667The remaining lines of code setup the individual animations. Since player.png contains many sets of images they need to be sliced into sets. Looking at the code we are saying that the idle animation is to use frame 8 only (slice is exclusive of the stop frame), the movement animation uses frames 0 through 6 and so on.

Bringing it to life

Now that we've setup our sprites, sprite sheets & animations we are ready to bring it to life which is where things get a wee bit more complicated. You see in most games everything happens through a game timer or 'tick'. This manages how many frames per second you render and gives you a point at which you know to update the game logic and game output. Games generally follow the flow of

setup(); // one-time initialization here
update(); // called once per game tick. Put game logic here.
draw(); // called once per game tick; after calling update(). Put drawing code here

I'll cover this a bit more in the next blog post (I plan to do a series of posts on the Ludus platform). So in draw(), depending on the player state you would call the appropriate animation function.

If the player is moving call player.setImage(;. If the player is idle call: player.setImage(; and so on.

The jaws.Animation class exposes a next() function that simply determines the next frame (image) in the sequence (based on the slice you setup). So for our player sprite, the move animation will render frame 0 on the first call, frame 1 on the second, frame 2 on the third and so on (optionally looping).

Putting it all together

I've put together a simple sample that uses Jaws to load the sprite asset and animate between various states (walking, attacking and idle). Click 'Result' to see the animated sprite or click 'Edit in JSFiddle' to play around with the code yourself.

Easy huh?

So hopefully that helps you understand how sprites work in the context of the Platformer Starter Kit using the amazing Jaws game engine. As mentioned in the next blog post I'll go over the game lifecycle including ticks, frames per second and all that jazz. But why wait? The best way to learn (at least in my opinion) is through trial & error so why not download the Platformer Starter Kit for Windows 8, look over the well documented code and mess around with the two sample games that are included.

The Series

Catch up on all the posts in the Platformer Starter Kit Series:

  1. Sprites
  2. Game Lifecycle
  3. Player Movement - Coming Soon

If you have any questions hit us up on twitter @wootstudio.

By Marc Gagne| May, 22 2013

Add A Comment


Allowed HTML: <b>, <i>, <u>


© 2013 Microsoft Corporation. All rights reserved.
This site is hosted for Microsoft by Agility