JavaScript HTML Game Development Tutorial 7 - Canvas Sprite Animation [js]

Sprite Animation Using JavaScript.

JavaScript Canvas sprite animation tutorial covering spritesheet (also known as sprite atlas) based in-game character animation. We will be animating a dog (canine) sprite using principles learned from previous tutorials.

I suppose this animation technique works well for 2D RPG and platform based engines. A very simple JavaScript animation function is used here to accomplish the task. Why use game maker or unity when you can program it from scratch in just a few minutes? :)

Please support me on Patreon! -- It matters... to me, and to you, and to everyone who wants more super informative #gamedev tutorials;)

Keywords: sprite animation javascript, game engine tutorial, js, rpg engine, sprite sheets, sprite map.

JavaScript game engine aka HTML5 game engine tutorial series by Dev Tigris (#indiedev #gamedev tutorial channel).

[DJLNR]

Bravo!! i like watching sprite vids because it can get complex fast no matter how simple rotfl. The best way i have found is to build ones own big utility script to call sprites and even manipulate them further.

[conl]

Wow your tutorials are awesome and your voice is very calming. Please don't stop making tutorials!

[jiyudev]

thats ok i found them thanks anyway. the tutorials are the best that i found so far on game developement in html and javascript nice relaxed soothing calm narration and very informative

[dennisvaningen]

26:30 "we see the dog run a little bit faster" i saw him go like creazy it was ever faster then sonic if thats posible it is atleast >9000 😂😂😂😂

[amanuel]

Wow i didnt know you created a tutorial! Hope to have a new tutorial by tommorow for christmass :)

[jayazman]

I can't find the dog sprite sheet anywhere on your website, or in the download. Can you direct me where to find the sprite sheet? Thanks.

[jiyudev]

Great tutorials man . where is the sprite sheet?

[jashinjashua]

Hello..thank u for this awesome tutorial. i wanna ask that in project i can generate keyboard system that my character walks and my mouse aim angle system works.`but how can i generate my spritesheet when i preesingmouselef? if i press keyboard i can not shoot another angle with my mouse. for example i want shoot left when i walk right.





what can i write in self.aimangle ?




when i write player.aimAngle = (Math.atan2(mouseY, mouseX) / Math.PI) * 180;
mouseY is not defined writen.

```


self.pressingMouseLeft = false;
self.pressingMouseRight = false;

var super_update = self.update;
self.update = function () {
super_update();
if (self.pressingRight)
(self.spriteAnimCounter += 0.2), (self.aimAngle = 0), grasssound.play();
if (self.pressingLeft)
(self.spriteAnimCounter += 0.2), (self.aimAngle = 180), grasssound.play();
if (self.pressingUp)
(self.spriteAnimCounter += 0.2), (self.aimAngle = 270), grasssound.play();
if (self.pressingDown)
(self.spriteAnimCounter += 0.2), (self.aimAngle = 90), grasssound.play();

if (self.pressingMouseLeft) self.performAttack();
if (self.pressingMouseRight) self.performSpecialAttack();
};

```





```
document.onmousemove = function (mouse) {
var mouseX = mouse.clientX -
var mouseY = mouse.clientY -

mouseX -= CANVAS_WIDTH / 2;
mouseY -= CANVAS_HEIGHT / 2;

player.aimAngle = (Math.atan2(mouseY, mouseX) / Math.PI) * 180;
};


document.onmousedown = function (mouse) {
if (mouse.which === 1) player.pressingMouseLeft = true;
else player.pressingMouseRight = true;
};
document.onmouseup = function (mouse) {
if (mouse.which === 1) player.pressingMouseLeft = false;
else player.pressingMouseRight = false;
};

[angelstojanov]

Actually 24 frames per second is an interval of 41.66, 24 is about ~41 frames per second.

[MihaiCor]

How do your frames do not get drawn on top of each other? I've constructed an animation much like yours, but my animation does not clear the initial frame before the other, and they get drawn on top of each other? :S

[fatmaramadan]

how did you do the dog style sheet image?

[loudcloud]

You want us to follow with your tutorial however you essentially force us to download your code to save time, which is fair, however I'm not sure why you edit sprite.js, for example, if it does not match the final copy.

[jiyudev]

when i get rich from making games i will donat e something to you. lol!

[wattheshet]

is there something wrong with your website? it is not loading the DX tutorials