Back to Browse

Coding a Street Fighter game | JavaScript, HTML Canvas | Background animation, floor effect (Part 9)

3.0K views
Nov 2, 2022
37:53

Part 9 of my tutorial series on making a Street Fighter game using web technologies. In this video, we'll continue where we left off in part 8, adding background animations and objects, the scores and the 3d perspective floor effect. Hopefully by the end of this video, we'll have pretty authentic looking Ken stage. Complete Playlist: https://www.youtube.com/playlist?list=PLf9yt-2olqyLxr-vouWl-qk4toUfjF2LC Patreon Page: https://www.patreon.com/shezzor #streetfighter #javascript #tutorial Timestamps: 0:00 Title 0:18 Intro 2:06 Re-cap 3:00 Adding the fighters scores at the top of the screen 7:45 Adding the highest score and label at the top of the screen 10:01 Add the boat bobbing animation 14:02 Add background animations to the boat characters 18:17 Add flag background animation 19:35 Add remaining boat character animation 21:22 Prep code for new floor transformation effect 24:31 Details of the floor 2d skewing transformation effect 27:07 Applying the 2d skewing transformation to the floor 29:33 Add background bollards objects 30:30 Add barrels stage object 31:25 Add foreground bollard objects 33:40 Refactoring time! 35:58 Summary 36:45 End

Download

0 formats

No download links available.

Coding a Street Fighter game | JavaScript, HTML Canvas | Background animation, floor effect (Part 9) | NatokHD