Code Your Own Kirby Game in a Browser - TypeScript GameDev Tutorial
Improve your TypeScript skills by building a fun Kirby game clone. Learn how to use Kaboom.js to create a 2d platformer game based on the classic video game.
Code: github.com/JSLegendDev/Kirby-...
Live demo & download link for assets: jslegend.itch.io/kirby-like-p...
Download Tiled here : www.mapeditor.org/
✏️ Course created by @JSLegendDev
⭐️ Contents ⭐️
⌨️ (0:00:00) Intro & Setup
⌨️ (0:08:32) Loading assets
⌨️ (0:14:42) Drawing the level in Tiled
⌨️ (0:29:53) Creating the level scene
⌨️ (0:34:07) Implementing logic for displaying the level
⌨️ (0:54:29) Implementing logic for player and enemies
⌨️ (1:57:15) Conclusion
⌨️ (1:58:11) Bonus : How to export your game
🎉 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
Hope you enjoyed the tutorial! If you want to see more JavaScript/TypeScript gamedev tutorials, head over to my channel!
amazing class, gained +1 follower
@@brunofelix5434 Thanks! Glad you liked it :)
Where are you from?
@@King_Sword77 Canada
@@JSLegendDev Can you make a 3D shooter game like 1v1lol ?
Thank you very much! This is exactly what I wanted - improve my JS/TS skills by creating a little game!
Thanks for the hard work ❤❤
thanks for your hard work
thank you!!!
Amazing.
Thanks for this work !
amazing tutorial!! Kaboom is super fun! ive added a coin collection system, fixed inhale bug while colliding, and working on more levels!
Nice!
Hey, I'm curious to hear how you fixed the inhale bug!
@@warmewanderings on each enemy k.state i added a consumed boolean default false, then in the player on collide with enemy event, within the if (player.isInhaling && ...), i first set the "enemy.consumed = true" before the rest of the logic, then the trick is to add a early return before the player gets hurt, with "if (enemy.consumed) return;" This prevents players from taking damage from a consumed enemy, create a new player.onCollideUpdate with enemy event and add the "if (player.isInhaling && ...) {...}" Logic in there, you only need that single if statement with the updated "enemy.consumed = true" added. This event does a constant check while colliding to ensure the enemy gets consumed and destroyed properly. The onCollide only seems to register once on inital collision, onCollideUpdate is while colliding. Hope this helps!
amazing
👍
hey there i was following your tutorial and then when you load the level after writing the code for displaying it I get a transparent/ checkers image could you please guide me on how to fix this edit- ok so now the background color is showing up but the level png is not edit2-ok I fixed it it was a typo
Lol😂
How did you create the art itself - clouds, kerby and enemies, etc. ?
I use the aseprite pixel art editor and did the pixel art myself.
hello,can you make a tutorial on huggingface how to make app with trained models using hugging face?
Hi, thanks first for this amazing tutorial. i've a problem, the player always fell at the begining of scence, it's supposed to be on land at the start, i thinks this happenig because of issue in my code, how i can know where is the problem to fix it plz?
I'm having this issue as well. When you press F1, what is your framerate (FPS)? Mine was low (like 8-10 FPS) and I think the game was unable to detect a collision between the player and the ground because that collision was happening between frames. In the frame before, the player was just above the ground; in the next frame, the player has already passed the "collider" and thus keeps falling. There are ways to improve performance, but it may be a limitation of your computer, where it is unable to achieve ~60 FPS. When I published my game, and accessed it from another computer, the player didn't fall through the map.
@@warmewanderings my FPS is normal, like (70-80), i think i've coded something wrong but i don't catch it.
I'm not sure if this will be the case for you as well, but in my Chrome settings, I had the option "Use graphics acceleration when available" turned off, which was causing my FPS to drop to like 2 lol Once I turned that setting back on, the Kirby model appeared again instead of sliding off~
anyone else having a problem where sprites would sometimes slide off the platform after landing?
Yeah, for me it has to do with slow browser performance (8-10 FPS). Basically the game doesn't detect a collision because in one frame, the player is just above the collider, but in the next frame, they've already fallen past the boundary of the collider...so they just keep falling. :/
how can i get the picture "kirby-like.png"?
Anything like this but React ?
I'm thinking of starting to integrate React in future tutorials.
thats the fun part - you transfer the knowdledge gained and do in your own ways
why can't I download the assets
Hello , what is meant with kirby?
i see
First to comment
thank heavens no punjabi accent
I hear a French accent.