Playing with SPRITES

Sprites Animation

HOW TO

A sprite is a bitmap graphic that is designed to be part of a larger scene. It can either be a static image or an animated graphic. Examples of sprites include objects in 2D video games, icons that are part of an application user interface, and small images published on websites.

The image:
I found this image searching on Google Images (hosted on imgur.png):

https://i.imgur.com/tKc0lqC.png

The animation
As you can see, the image contains four lines of “sub images“ (walikng in front, left, right & back directions).

I created a div element named sprites. Thir div will show the current image of the walking guy.

To show the current sub image, I used the CSS background-position property with the values of the javascript bgPosX and bgPosY variables. This variables are initially created with a value of zero (0).

Then I call a function named walk(). This function add 95 to bgPosX and shows the sub image according to the values of bgPosX and bgPosY:

$("#sprites").css({
"background-position":bgPosX*-1+"px "+bgPosY*-1+"px"
});

Why 95? I add 95 to the bgPosX variable because it is the width of each sub image inside the whole image. When this reaches the width of the full image is set to zero again.

The bgPosY variable is changed depending of the value of another variable named direction. The possible values of direction are: front, back, right or left (see the switch statement in JS). The possible values of bgPosY are: 0, 158, 316 and 474. This values are the vertical positions where the sub images begin.

At the end of the walk function the code will wait 100 milliseconds and re-execute the walk function:

setTimeout(walk,100);

Change this value and the character will walk slower or faster.

The directional buttons change the value of the variable direction.