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. Complete Playlist: https://www.youtube.com/playlist?list=PLf9yt-2olqyLxr-vouWl-qk4toUfjF2LC Patreon Page: https://www.patreon.com/shezzor #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