Basic Steps of Animation

Below is a sprite of Mr. Lopez. This was the first sprite created for his spritesheet, which outlines the animation of his movement frame by frame.

Below is the spritesheet of Mr. Lopez. Each row has a different side of him, because in the project that we used this in, he was able to move freely in all 4 directions. His animation is simple, and depicts basic movement.

The most recent changes made to the spritesheet was the addition of his cane. In our OOP game, we plan to have the player utilize Mr. Lopez's cane as a weapon. Our next step in animation will be drawing new sprites for the player's attacks.

Additions to Game Levels

Adding new animations gives the player new capabilities. For example, drawing attacking sprites will give the game a new feature by allowing the player to attack enemies. If there are not sprites for enemies taking damage, this will require more work to be put towards drawing damage-taking sprites.

Involvement in Code

The code is very easy to modify with new animations. The biggest change would be the addition of a keybind that is linked to the new rows for attack animations, but this can easily be copy-pasted in the Player.js file.

For example, below is a part of the Player.js file that deals with keybinds and frames. The addition of the "e" will be linked to the new frames of animation.

w: { row: 3, frames: 4, idleFrame: { column: 1, frames: 0 } }, // Lopez faces away from user

a: { row: 1, frames: 4, idleFrame: { column: 1, frames: 0 } }, // Walk left key

s: { }, // no action

d: { row: 2, frames: 4, idleFrame: { column: 1, frames: 0 } }, // Walk right key

e: { row: _, frames: 4, idleFrame: { column: 1, frames: 0 } }, // Animation for attack