D4mations.com

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



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

d4mer

, , , , , , , , , , , ,

23 responses to “23- Making HTML5 Game: Sprite Animations via Spritesheet. Javascript Tutorial Guide”

  1. 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 🙂

  3. 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.

  5. 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;

  8. 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 !

  12. 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?

  15. 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?

  17. 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;
    ctx.drawImage(self.img,
    walkingMod*frameWidth,directionMod*frameHeight,frameWidth,frameHeight,
    x,y,self.width,self.height
    );

    there is the code if anyone needs

    awesome videos !! love your accent 😉

Leave a Reply