• Saturday , 4 April 2020

23- Making HTML5 Game: Sprite Animations via Spritesheet. Javascript Tutorial Guide

Code Canyon

Episode 23 about making a video game in HTML5. In this video, I cover sprite animations and how to use spritesheets.

Last Episode: https://www.youtube.com/watch?v=RrIfrWlmchA
Next Episode: https://youtu.be/K-qi3jzyngs
First Episode: https://www.youtube.com/watch?v=XgK4YaMqQFg

If you have any question, feel free to post a comment below.

Download Code: http://rainingchain.com/tutorial/html5

Original source

3d Ocean

Related Posts


  1. TheDovahBear 7
    December 18, 2017 at 13:22

    Hi! I have a question. I am making my own game by watching your tutorials and I don't want to use the same character as you. Is there a way to make your own spritesheets? If so I would appreciate some info/ help on that . Thx 🙂

  2. Todo Android
    December 18, 2017 at 13:22

    3 things, good video, you could paste pastebin of this, mediafire does not work for me, and if you wanted to use this for android, what would be the code to be able to move the character?

  3. Arman Hack
    December 18, 2017 at 13:22

    Please upgrade the collision system. You used rectangle collision and in you case the spriteimage you are using is working great but most of the other sprite or image it doesn't work perfectly not even close. make polygon shape collision so that we can get a close collision detection…. in your video series you cover all other things except this. please consider making a tutorial.

  4. maya ahmed
    December 18, 2017 at 13:22

    Awesome. Thanks. Very clear explanations with plenty of details. Great work. Really enjoyed the tutorials.

  5. aylictal
    December 18, 2017 at 13:22

    Thank you so much for showing me the modulus operator in actual use. I learned about it back in college but never really had to use it till I saw this clip.

    My code was very close to yours for client side rendering.

    var offset = Math.floor(self.frame) % 4;
    if (self.dir == 'right') {
    offset = offset * 16;
    ctx.drawImage(sprite.player, offset, 0, 16, 16, self.x, self.y, 16, 16);
    if (self.dir == 'left') {
    offset = offset * 16 + 64;
    ctx.drawImage(sprite.player, offset, 0, 16, 16, self.x, self.y, 16, 16);

    self.frame+= .1;

  6. Disciplined Coding
    December 18, 2017 at 13:22

    Awesome video series tutorial, thank you for making these. I learned a few things.

  7. Werenverlivitz
    December 18, 2017 at 13:22

    How to change the depth of a path in drawing event? Please respond!

  8. Ugo G.
    December 18, 2017 at 13:22

    Hello !
    Thanks a lot for those tutorials again.
    As a little exercice, today I tried to add trees on the game, and I want these to block the player like walls. But I don't really understand what I should do : should I make an update which test collision for every trees in the game, each time the player move ? Or is it a trick more easy to know ?
    Thanks !

  9. iseloom993
    December 18, 2017 at 13:22

    Dude… Awesome tutorials, great work.

  10. Gaming Troll Pro
    December 18, 2017 at 13:22

    hey please make more tutorials

  11. Dreamer Boy
    December 18, 2017 at 13:22

    Hi Mr. chain please do more updates .. I want to learn more …

  12. Jason Boyce
    December 18, 2017 at 13:22

    Hi RC, I have a question: I have a grid that is 10×10 40px tiles. Some tiles are barriers so the player cannot walk through them, but my collision detection is off. When I generate the grid I have to add tile.width/2 and tile.height/2 to the Img.tileSprite x,y coordinates so that it appears in the correct place. Is this because the player x,y coordinates are in the center of the player sprite? Is there a better way?

  13. a Bear
    December 18, 2017 at 13:22

    in "self.spriteAnimCounter += 0.2;"

    Is 0.2 equal to 200 milliseconds?

  14. Petor
    December 18, 2017 at 13:22

    Baw, no more updates ?

  15. MNSweet
    December 18, 2017 at 13:22

    Hey RC, I just ran through all the tutorials having known a few years of javascript (minus any canvas) I really appreciated how you slowly building up to OOP and show multiple ways to get to the same end point and show the best practices. I've notice that you normally release a lesson 2 each month, I'm wondering how many lessons you plan on making, what is your final vision for the class and when can we expect the next lesson? Lastly what is your opinion on different canvas frameworks, do you have a preference?

  16. wldwarrior
    December 18, 2017 at 13:22


  17. Taylor Austin
    December 18, 2017 at 13:22

    Nvm I actually got it going just had to think of the math!!
    var frameWidth = self.img.width/4;
    var frameHeight = self.img.height/4;

    var aimAngle = self.aimAngle;
    if(aimAngle < 0)
    aimAngle = 360 + aimAngle;

    var directionMod = 2; //right
    if(aimAngle >= 45 && aimAngle < 135) //down
    directionMod = 0;
    if(aimAngle >= 135 && aimAngle < 225) //left
    directionMod = 1;
    if(aimAngle >= 225 && aimAngle < 315) //up
    directionMod = 3;

    var walkingMod = Math.floor(self.spriteAnimCounter) % 4;

    there is the code if anyone needs

    awesome videos !! love your accent 😉

  18. Taylor Austin
    December 18, 2017 at 13:22

    Could you maybe explain how to do a 4×4 sprite sheet. So like my sheets goes
    (F = front , L = left, R = right, B = back)

    thank you awesome videos

  19. blackyurizan
    December 18, 2017 at 13:22

    this is pretty cool, I don't know exactly what is going on but I do want to learn how to do this

  20. Florian Villa Garcia
    December 18, 2017 at 13:22

    I use the same image as you and in my game i can see a little line on top of the actors, there are any problem with the image or i was do anything wrong?

    Thank you for these video's 🙂

  21. Evan Carey
    December 18, 2017 at 13:22

    I really love these video's. I am learning a lot about how to use html and javascript for building a video game. PLEASE continue to keep making these!

  22. Aslam Cenel
    December 18, 2017 at 13:22


  23. John Lyzenga
    December 18, 2017 at 13:22

    Glad you are still making these! I always enjoy watching your coding videos!

Leave A Comment

You must be logged in to post a comment.