Sprite Sheet Animation with JavaScript

We will create a sprite sheet animation system using JavaScript
GitHub repo
github.com/fah...
Patreon
/ gamecodebites

[@zakhariihusar6975]

The best tutorial on spritesheet i've seen!

[@augustusmark715]

instaBlaster...

[@zakhariihusar6975]

?

[@gopalmandloi6374]

As always Awesome Fahad.

[@gamecodebites4672]

Thank you!

[@someuser3383]

Do a full course of javascript game, please.

[@Retrofire-47]

my only grievance with this technique is that you are kinda polluting the global scope with all these variables... for a small animation loop that defines a program it makes sense, but if you have an actual video game then introducing like 10 entirely proprietary variables right at the top of the script becomes unsustainable almost immediately.. you would need a better way to store them

[@eboatwright_]

Thanks! :D

[@kiraireal]

I am the 1k view

[@goncalolucas1103]

i like you

[@James-bu1ds]

Any samples of Vertical Sprite Images?

[@gamecodebites4672]

Sorry, this one only handles one row (row = 0) with multiple columns, but it's not hard to traverse through multiple vertical columns, you just need to add a variable to handle those slices, based on frame index and the position of slice in terms of the desired row.

[@James-bu1ds]

@@gamecodebites4672 Can you help me how? Been stuck of this problem yesterday... just sample of vertical images

[@gamecodebites4672]

@@James-bu1ds should be something like this instead of what we have in the original animate function (didn't test it) function animate(state) { context.drawImage( spriteSheet, 0, state.frameIndex * frameHeight, frameWidth, frameHeight, xPos, yPos, frameWidth * scale, frameHeight * scale ); Notice that I changed the second param to be 0 and the third param to be state.frameIndex * frameHeight, and with this approach it will navigate vertically rather than horizontally, also you have to make sure to have the proper Sprite Sheet to have multiple rows rather than one single row. But again, I didn't test it, but it should give you an insight on how to achieve your goal. Good luck!

[@James-bu1ds]

@@gamecodebites4672 That's hella help! Thank you very much

[@megavore1201]

joe