Collision Animations & Sounds in 2D Games

Опубликовано: 17 Декабрь 2024
на канале: Franks laboratory

8,206

328

Build interactive 2D games and make player actions feel good with sprite animations and sounds! When user clicks an asteroid, we will play one of 3 randomised collision animations from a sprite sheet and one of 6 random sounds.
PART1:    • Performance Optimizations in 2D Games

Check out some of my EXTENDED classes with BONUS lessons and more free 2D game art assets
🌟Udemy: https://www.udemy.com/course/build-an...
🌟 Skillshare (free 1 month trial that includes all my extended classes including this one):
https://www.skillshare.com/en/r/profi...

Today we are building 2D animated space game with JavaScript and HTML canvas. We learned how to create asteroids using object pool design pattern, to improve performance and memory management of the codebase. Let me show a simple way how to handle multiple object pools, following good beginner friendly coding practices. This project is beginner friendly. Basic knowledge of HTML, CSS & JavaScript is needed to get the maximum value.

🎨 Download Project Art assets 🎨
Sprite sheet: https://www.frankslaboratory.co.uk/do...
Sound 1: https://www.frankslaboratory.co.uk/do...
Sound 2: https://www.frankslaboratory.co.uk/do...
Sound 3: https://www.frankslaboratory.co.uk/do...
Sound 4: https://www.frankslaboratory.co.uk/do...
Sound 5 https://www.frankslaboratory.co.uk/do...
Sound 6: https://www.frankslaboratory.co.uk/do...

Today we will learn:
How to manage MULTIPLE object pools
How to ANIMATE COLLISIONS from a sprite sheet
How to add randomised SOUND EFFECTS

For more vanilla JavaScript GAME DEVELOPMENT check out this playlist:
   • JavaScript Game Development Mastercla...

⭐️Tutorial Contents ⭐️
00:00 Intro
00:25 Explosion class
07:19 Capturing mouse coordinates
14:06 Object pools and sprite animations
17:35 Animation timing
22:14 Automatic triggers
23:38 2D collision detection
29:34 Scoring system
34:06 Physics
35:36 Sound design

Let's be friends
👍 You can message me on TWITTER   / code_laboratory
👍 Check out some of my source code on CODEPEN https://codepen.io/franksLaboratory

The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory