Coding a Street Fighter game | JavaScript, HTML Canvas | Sprite Animation & Origin Points (Part 4)

Part 4 of my tutorial series on making a Street Fighter game using web technologies. In this video, we'll learn how to animate our Ken and Ryu sprites using frames from a sprite sheet. Making them walk forward and backwards rather than sliding, like they've been doing in an abundance recently.

#canvas #streetfighter #javascript

Timestamps:
0:00 Title
0:16 Intro
1:40 Retrieving the full sprite sheet
2:47 What do we use to pull sprites out of a sprite sheet?
3:16 Understanding the extended parameter list of the drawImage function
4:09 Using our sprite sheet to retrieve the frame dimensions
4:29 Applying our frame dimensions
5:33 Understanding what we need to build an animation
6:26 Adding our first animation to the fighter classes
8:21 Iterating across our new animation frames
9:11 Adding a delay between the animation frames
11:18 Understanding frame origin/anchor points
12:36 Adding an overlay debugging visuals for the origin/anchor point
13:44 Adding the origin/anchor points to the animation
15:01 Correcting our new position and boundary issue :/
15:55 Adding our second set of animation frames
16:23 Allowing for multiple animations for the fighters
18:50 Adding the second animation
19:47 Understanding how to use the scale function
21:34 Prep work for applying direction to the fighter sprites
22:59 Applying the direction to the fighters
24:58 Some minor refactoring
26:51 Summary
27:11 Ending

[sudhanshusingh]

Please don't stop making these video, i enjoy them a lot and i code them side by side, i would also code along with all the future projects you have, GOSH THIS IS SUCH A GOLDMINE DUDE.

[Shagrath]

Finally! I was keeping refreshing youtube every 30 minutes to check if there is new episode :D. Watching...

[eexportal]

So exited to understand what is under the game development logic.

[AfroBACN]

It's a relief to see you using a lot of concepts that I've been using; it's a reassurance that I'm on the right track. I've also learned something knew with every video so far and a few concepts have sent me down a rabbit hole of research. Again; thanks for creating these, they're amazing.

[TheKnightlore-clmy]

The Ken sprite sheet at at spriters-resource used in this tutorial has changed (2:02). I tried to show link to where you can get the correct one but seems my comment was deleted. I did a search on Internet Archive.Would be a waste if people don't follow this tutorial because an external source has changed and the coords for Ken doesn't display correctly.

Great tutorial. Really like how you build it up step by step and refactor along the way. Very inspiring.

[JuanPabloGomez-ccvm]

omg man this is so great, please make more videos, i love this

[alanray]

Another amazing video, appreciated as always. I find my self questioning how to get each fighter to do their full forward/backward animation if they have a different amount of sprite animations. IE Character one has "forward1-8" but character two only has "forward1-4". Having fun trying to figure it all out though!

[HazemHuzayen]

these videos just keep getting better. :P

[ScientObject]

This is great, but now I regret picking different characters than Ken and Ryu 😅

[aylictal]

Just caught this series and its fantastic. One question I have is how do you know where a frames origin point is? You said on most fighting games its at their feet, but when I look at where you're assuming the origin point is, how do you know or test if its correct? Is it just the look and feel of the sprite itself? Thanks!

[Zetashazad]

how did he make the arrow at 24:05, cause i tried with => and it doesnt work for me. **Edit it says that my index.js script from origin 'null' has been blocked by CORS policy

[Gibby]

Hi Shezzor, Loving your content man. Please keep it coming. Btw, what is the vscode theme you used in the video. Thanks

[domenicolasalandra]

hey idk if anyone would see this but i need help with the sprites animation as it displays NaN for the FPS counter and just the background. ryu and ken are gone.

[iuritorres]

bro, how is the logic behind origin point? i got everything, but don't know how to extract this from the sprite sheet

[UncleDavid]

do you know how to implement, dashing, coyote time and other platformer mechanics or how to chain sprite animations(slide+jump+dash)?

[tomasburian]

I'm sorry but how do I find the origin points alignment values? Is it also possible to do in some program? I have my own animation frames so I need to figure out the system behind this.

[karmataimu]

Can i add a multiplayer online or is just to difficult

[Lucaskpp]

Brother I have a question, I am an Angular/.Net developer, and I always wanted to program video games and of course I am learning by doing some pairProgramming with your videos but
I wanted to know how you got all this information, how you learned how to draw in canvas and of course transform all this into a browser game,
I ask this because I don't want to just reuse code and then adapt it to my video game,
I want to learn from scratch all the way like you while creating this.
T