GameDev with JavaScript and Kaboom.js – Metroidvania Game Tutorial
37,289
Published 2024-06-27
✏️ Course developed by @JSLegendDev
Live demo: jslegend.itch.io/javascript-metroidvania
Source code: github.com/JSLegendDev/JavaScript-Metroidvania
Link to the Kaboom.js library: unpkg.com/[email protected]/dist/kaboom.mjs
Assets used can be downloaded here: github.com/JSLegendDev/JavaScript-Metroidvania/tre…
Original assets can be found here with extra paid assets: venoxxx.itch.io/pixxxelpunkkk-toolkit )
Modified u.png version (inc. in assets link above): github.com/JSLegendDev/JavaScript-Metroidvania/blo…
Modified burn3r.png version (inc. in assets link above): github.com/JSLegendDev/JavaScript-Metroidvania/blo…
Sound assets: github.com/JSLegendDev/JavaScript-Metroidvania/tre…
Map layouts (room1.json + room2.json): github.com/JSLegendDev/JavaScript-Metroidvania/tre…
Download Tiled here: mapeditor.org/
Guide on how to use Tiled + Kaboom.js: jslegenddev.substack.com/p/how-to-use-tiled-with-k…
Guide on how custom events work in Kaboom.js: jslegenddev.substack.com/p/custom-events-in-kaboom…
Guide on how to implement one way platforms: jslegenddev.substack.com/p/how-to-implement-one-wa…
⭐️ Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:06:18) Setup
⌨️ (0:14:42) Initializing Kaboom
⌨️ (0:21:59) Loading assets
⌨️ (0:33:38) Defining scenes
⌨️ (0:40:00) Understanding Game Objects in Kaboom
⌨️ (0:43:47) Implementing logic to load and display the map
⌨️ (1:16:49) Implementing logic to place colliders over the map
⌨️ (1:33:53) Implementing player logic
⌨️ (1:42:37) Implementing global state management
⌨️ (1:50:12) Continuing player logic implementation
⌨️ (2:22:56) Setting up our camera system
⌨️ (2:38:29) Implementing drone enemy
⌨️ (3:10:45) Implementing boss barrier
⌨️ (3:24:16) Implementing boss battle
⌨️ (3:57:15) Implementing health cartridges + health bar
⌨️ (4:05:43) Making sure the player respawns when falling out of bounds
⌨️ (4:10:06) Implementing logic to link room1 and room2
⌨️ (4:28:49) Finishing touches
⌨️ (4:32:35) General guidance on how to deploy the project🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama
--
Learn to code for free and get a developer job: www.freecodecamp.org/
Read hundreds of articles on programming: freecodecamp.org/news
All Comments (21)
-
Hope you enjoy this course. Check out my channel for more JavaScript gamedev tutorials. Note : Kaboom.js was rebranded to Kaplay which is a community maintained fork. This tutorial is still applicable since Kaplay is just Kaboom under a new name. All the concepts taught here are the same in Kaplay. Hope this clear things up. I have a video on my channel explaining the rebrand in more details if you're interested.
-
Nice. I'm not into gaming, but I love listening to your tutorials and listening to how you break things down. You're doing an awesome job. Please keep it up!!
-
I love kaboomjs because it still more hand on coding more than just drag and drop thing around
-
Thanks for giving me a 2nd project idea.
-
Wow thank you so much 👍👌🥳🎉👏🏻
-
for anyone having issues or want new features of kaboom, its been forked and rebranded to kaplay. if you wanna swtich you just replace kaboom with kaplay for example: npm i kaplay instead of npm i kaboom
-
Kaboom is now Kaplay JS which is community maintained.
-
Kaboom is no longer maintained though.... 🙄🙄
-
❤❤
-
What about some tutorial of Phaser.js ? Theres really not much of tutorials about Phaser
-
Finally, I get JavaScript interesting for game development. Could you please provide a video on AWS Machine Learning Specialty Certification exam and Azure AI Engineer Associate 102 exam preparation. Thanks.❤
-
why in the begin your voice is different from after?
-
🙂👍🏻
-
3:57 chapter title misspelled.
-
why not use phaser for development?
-
30:30 how you call it 16 im really confuse
-
Kaboom.js is no longer maintained though.
-
Tech comments only 😊
-
hi
-
I'm a noob coder... I code normal games using Html, css, JS and python only.... i.g. Space invaders, pacman, flappy bird.... Lol.... I've never used kaboom JS or any powerful python workframe or library 😅😭
