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

[@JSLegendDev]

Hope you enjoyed the tutorial! If you want to see more JavaScript/TypeScript gamedev tutorials, head over to my channel!

[@brunofelix5434]

amazing class, gained +1 follower

[@JSLegendDev]

@@brunofelix5434 Thanks! Glad you liked it :)

[@King_Sword77]

Where are you from?

[@JSLegendDev]

@@King_Sword77 Canada

[@user-wk2qb4vg5f]

​@@JSLegendDev Can you make a 3D shooter game like 1v1lol ?

[@skyguy3651]

Thank you very much!
This is exactly what I wanted - improve my JS/TS skills by creating a little game!

[@Marshall_dev]

amazing tutorial!! Kaboom is super fun! ive added a coin collection system, fixed inhale bug while colliding, and working on more levels!

[@JSLegendDev]

Nice!

[@warmewanderings]

Hey, I'm curious to hear how you fixed the inhale bug!

[@Marshall_dev]

@@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!

[@greeng448]

Thanks for the hard work ❤❤

[@donaldflores6889]

thanks for your hard work

[@MariaJuliaGomesdaSilva-ff3of]

thank you!!!

[@LiamEvan15]

Thanks for this work !

[@cariyaputta]

Amazing.

[@JawaCodePro]

amazing

[@spellz1015]

anyone else having a problem where sprites would sometimes slide off the platform after landing?

[@warmewanderings]

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. :/

[@harikiranvusirikala4214]

Using gh-pages dependency for deploying to Github Pages.

[@yahyagoblin5498]

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

[@theodorosgeorgitsis5600]

Lol😂

[@teddysalas3590]

hello,can you make a tutorial on huggingface how to make app with trained models using hugging face?

[@harikiranvusirikala4214]

Using gh-pages to deploy to Github pages.

[@dirkschiller9060]

How did you create the art itself - clouds, kerby and enemies, etc. ?

[@JSLegendDev]

I use the aseprite pixel art editor and did the pixel art myself.

[@rishiraj2548]

👍

[@chenmzhang]

how can i get the picture "kirby-like.png"?

[@ahmedhesham1288]

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?

[@warmewanderings]

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.

[@ahmedhesham1288]

@@warmewanderings my FPS is normal, like (70-80), i think i've coded something wrong but i don't catch it.

[@racheller.5685]

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~

[@SivaSai-fw3qp]

why can't I download the assets

[@ranma8890]

Anything like this but React ?

[@JSLegendDev]

I'm thinking of starting to integrate React in future tutorials.

[@48595157484812]

thats the fun part - you transfer the knowdledge gained and do in your own ways

[@kennedysamarakody4925]

Is Tile free?

[@themks8452]

First to comment

[@Short_Clips44]

Hello , what is meant with kirby?

[@Short_Clips44]

i see

[@Nodsaibot]

thank heavens no punjabi accent

[@DiegoDellaV]

I hear a French accent.