In this video I will show you how to animate sprites using a sprite sheet graphic and some simple JavaScript.
Check out the source code here: https://github.com/pothonprogramming/pothonprogramming.github.io/tree/master/content/animation
Check out the working example here: https://pothonprogramming.github.io/content/animation/animation.html
Thanks for watching!
Original source
19 responses to “Sprite Animation in HTML5 and JavaScript!”
How do you set the background of the Sprite transparent
нифига не понятно но круто
Can you please explain how you render() function works?
I can't seem to even get an image to draw right now
Hello Frank, your channel is great, it helped me a lot. I'm trying to make a Zelda-like game, in full JS and canvas, and without framework if possible. I'm a kinda like you, I want to understand every concept and logic of programmation. Could I ask you some questions about making a game like that and collision detection ? If yes, should I ask here or by PM ? thanks anyway and sorry for my english. 🙂
Hey Frank. I used this one Codes for my game.. I have changed around some things. But now the Animation frame_Sets don't change any more. And. Hmm I feel like Im so close to make something amazing. But still ehhe I really have no idea what made the Frame_Set system collapse, Would you mind taking a look at it?
is it possible to make the canvas fullscreen? i tried to modify to lines starting from line ~230. i changed the buffer.canvas sizes, i tried to change the buffer.drawimage() values but i dont get it to work?
another question in the animation.prototype the buffer = createElemetn, does this mean a canvas is created more than once?
not working…on mobile
Also can we access your animation.png anywhere? Because the source code won't work without it
When I try and use your source code and save it as a JavaScript file, there is an error.. any ideas?
nice work:)
These videos are awesome, man! I love 'em
Thank you. I basically built.this on top of the script from the run and jump tutorial. Had a little.difficulty but managed to make it work.
My only problem is that my jump work every other time now. Cant figure out why. Also had to delete background since.its being drawn on top of player no matyer where I place the code.
how can you do three or more images in one set, instesd of two?
I'm working on doing sprite animations in JavaScript too, and this video is super helpful! Thank you for sharing your ideas 🙂
many thx
It would be better if you wrote the code as you explained it. It makes the viewers feel like you're directly interacting with them. Just wanted to say that.
cool tutorial, thanks
This is what I've made: https://www.piskelapp.com/p/agxzfnBpc2tlbC1hcHByEwsSBlBpc2tlbBiAgMDFse6ZCww/view I told myself that if you can, I can too.We are both new in this domain, but with passion and faith you can achieve your goals, thanks! It walks, left, right and also jumps. 😀
The sprites are made by you? Amazing work, congratulations!