CH. 10 Animations [JS Game Dev Tutorial]

Animations

Animations

Sorry I said maps were next but I already did it!

An animation gives sense of movement and life. Having non-animated game objects can make the game a bit dull and dead (of course exceptions exist).

Animations in 2D games are all frame based. This is evident in very old movies, or, a more well known technique, flip books ~~you~~ naughty kids drew on their school textbook's corners. The sprites are laid out in a large image sheet (known as a spritesheet) and are clipped by: their location on the sheet and width and height of each individual frame.

The number of frames to draw per second varies on the animation sheet, but 12 seems to be the golden spot if you don't know much about animation maths. 24 is the standard in movies and videos, but seems too fast for 2D pixel games in my opinion. Again, all depends on your sheet/artwork!

Vocab to keep in mind

Source X, sx: the x position, by pixel, referreing to the sprite sheet

Source Y, sy: the y position, by pixel, referreing to the sprite sheet

Source Width, sw: width, in pxels, of the sprite in reference to the sprite sheet

Source Height, sh: height, in pxels, of the sprite in reference to the sprite sheet

Also keep in mind pixels are not in decimal so you must floor your equations!

In the old days of hardware limitations, sprite sheets were extremely condensed to save space. If two or more frames were literally exactly the same, they would be condensed to only one (note that many rendering hardware included a flip method which helped condense sheets even more); this is the reason why many classic sheets seem to be placed randomly and look complex. For player sprites, for example, they used only one head and animated the body. Good thing we don't have to deal with that now!

Here is a sample ROM extract

Super Mario Bros. 1985 for the Famicom\NES

I will not be using this sheet for this tutorial

Think of spritesheets as arrays. The only difference is the index is based on the widths and heights. So to move from index 0 to one, you just multiply the index by the width for X or height for Y.

I will be using this spritesheet. Thanks Burey for recommending me the generator :)

Pardon the nudes loool

Not yet loaded
Techniques

There are three techniques I know of so far:

1) Mathematically through an algorithm (I do it this way).

2) Create many new Image objects and store them in an array. I see this done a lot, but I am concerned of the memory usage using this technique.

3) Have arrays of animations and each index holds a mini array of the X and Y locations of the frame in the sprite sheet. Good idea but once you edit the sheet, you have to go back and change every location.

These are all personal preference and shouldn't be too harsh on your game (since they are still being done and taught to this day); I encourage trying each out and see what fits your needs!

Mathematically

The shortest algorithm I have come across is (from an SDL tutorial book): image.sourceX = [Source Width] * floor(([Time variable such as delta time] / [milliseconds per frame]) % [amount of frames]). Line 40 in JS tab.

The problem with this equation is every animation must be aligned on the x-axis of the sheet. Change the sy manually for a different animation

My way is longer but customizable. Line 109 in JS tab.


var animObj = {
    // Image sources
    // Positions
    sx: 0,
    sy: 0,
    
    // Dimensions
    sw: 8,
    sh: 8,
    
    // Holders
    framesPassed: 0, // If no delta time
    frames: 7, // Number of frames - 1
               // Like an array, 0 to 3 means 4 elements
    currentFrame: 0,
    columns: 2, // Columns of full animation set
    animSpeed: 12, // Speed of animation (or delay)
    
    animate: function(){
        // Increment frames
        this.framesPassed++;

        // If frames go into animspeed, animate
        if (this.framesPassed % this.animSpeed === 0){
            // Source X
            /*
                 So...
                 our currentFrame % number of cols
                 will give us 0 to (this.cols-1).
                 Great for going back and forth.
                 Floor because no fractional pixels!

                 Then we multiply by the width to move
                 one frame wide. (0 is 0, 1 is 8, 2 is 16, etc.)

             */
            this.sx = Math.floor(this.currentFrame % this.columns) * this.sw;

            // Source Y
            /*
                 So...
                 our currentFrame / number of cols
                 is a bit more complicated.
                 
                 Since division is fractional unless
                 the numbers produce a whole number
                 (since we are flooring the result).
                 This is great for going up and down while
                 left and right are happening.
                 This is like traversing through an array!
                 
                 This is very column dependant. If there is one column and 3 frames, sy will stay at zero.
                 
                 If there are 5 frames and 2 columns,
                 you will have to move down to 
                 get the remaining frames.
                 
                 sx .  .  .
                 sy . [1][2] // 2 cols
                    . [3][4] // 2 cols
                    . [5]
                 
                 Quiz: what numbers would sx be above if
                       the width is 8? what about sy?

             */
            this.sy = Math.floor(this.currentFrame / this.columns) * this.sh;

            // Move to next frame
            if (this.currentFrame < this.frames)
                this.currentFrame++;
            // Else reset
            else
                this.currentFrame = 0;
        }
    }
}

The algorithm will change if you have multiple animation states, which most objects do.

This means like: walking, jumping, attacking, dying, climbing, etc.

Not all states have equal number of frames (unless you make it that way).

For changing states, e.g. running, jumping, attacking, facing left, right, up, or down, reset the sx and sy to the start of the animation (spritesheet dependent).

I always make the states start at the beginning of the Y axis, so if my sprites are 8 pixels high, walking up state would be at 0, down at 8, left at 16, and so on. We add an offset to make up for this.

// For example
if (player.state === "left"){
    var offsetY = 16; // Start at 16
    //var offsetX = [appropriate value]; // If needed
    
    /*
      frames, columns, and animSpeed
      may also need changing
     */ 
    
    
    // Do animation
    // Calculate frame
    // THEN add the offset
    this.sx = (Math.floor(this.currentFrame % this.columns) * this.sw) + offsetX;
    this.sy = (Math.floor(this.currentFrame / this.columns) * this.sh) + offsetY;
}

Image Arrays

UPDATE: I realized this does not work in JS, but here it is anyway :d

using a lot of new image objects is simpler.

Make an array and in each index, just make the array hold a new clipped image.

// THIS LITERALLY
// DOES NOT WORK IN JS
// YOU WOULD HAVE
// TO MAKE MANY
// new Image() objects
// THEN SPLICE APPROPRIATELY
// THEN PUSH TO ARRAY
// YUCK...

// JUST AN EXAMPLE FOR
// OTHER LANGS OR LIBS

/*
    Lets say this is our sheet (8x8)
    and the indices are the
    images we want
    [0][1][2]
    [3][4]
    
     Lets say the Image takes in
     (sx, sy, sw, sh)
 */
    
    animations = {
        left: [
            new Image(0,0,8,8),
            new Image(8,0,8,8),
            new Image(16,0,8,8),
            new Image(0,8,8,8),
            new Image(8,8,8,8)
        ],
        // Right, attack, etc.
    }
    
    // And we just traverse
    
    ...
    // Example only
    if (player.state === "left"){
        if (framesPassed % player.animSpeed === 0){
            for (var i = 0; i < animations.left.length; i++){
                draw(left[i]);
            }
        }
    }

Arrays

I have noticed this technique being used more in game engines; it goes as follows

Arrays are used to store the frames you want to display (from left to right).
```
// For example
animations = {
    left: [0,1,2],
    right: [3,4,5],
    // etc.
}
                            
```
I am not 100% sure how a game engine does this under the hood, but it is obvious we would have to calculate the position via the sprite's dimensions. Line 192 JS tab.
```
/*
    This would go great in
    its own method, like...
    player.animate(state_arg);
    and a speed of animation would be nice
    A little homework for you ;)
 */
 
 // Assuming the spritesheet has 3 columns
 // We use modulus to get the COLUMN values only
 // And division to get the ROW values only
 
 // And of course, floor it!
 
 // Relative to a spritesheet
 animations.run = [8, 9, 10];
 
// Stay in bounds
if (currentFrame < animations.run.length-1)
    currentFrame++;
else 
    currentFrame = 0;

// Get source x and y
sx = Math.floor(animations.run[currentFrame] % columns) * sw;
sy = Math.floor(animations.open[currentFrame] / columns) * sh;
                            
```
Same as my technique but shorter.

The difference is, since we are working with the sheet itself, not the animation, our columns must be relative to the sheet, not the animation. For example, the animation has 6 columns, but the sheet has 13.

We must use 13 to traverse through the sheet!

This method is a lot more readable.

The only barricade we are coming across to make this shorter and less repetitive is the state checking. We will have to check the state to loop through the appropriate array, unless.... we pass in an array to the animate function! Another homework for you!!! P.S you will still have to check the state somewhere to pass in the appropriate array ;)
I believe that's all I wanted to say for this topic. Next up, cameras.

After cameras may be weapons and we will be done! Fighting enemies and pickups is just simple collision detection. I will continue this series by making codes on putting everything together. So one code will be the game loop setup, next we will continue off the previous code, and add a sprite, after, some controls, then a map, etc. In short, we will build a game together.

Thank you all for looking and taking interest in my series; I really appreciate it... See you next time.

Ch. 10 Animations

Animations

Animations

Techniques

Mathematically

Image Arrays

Arrays

CH 11 Animations [JS Game Dev Tutorial]