JavaScript Platformer Game Tutorial

[@JSLegendDev]

Check out my paid Mario-like platformer asset pack : jslegend.itch.io/mario-like-platformer-assets

[@fluffehKkura]

Incredibly late to this video but this is amazing! You’re the only one who made the installation and setup easy and seamless! Keep up the great work!!!

[@JSLegendDev]

Thanks!

[@brancode404]

Awesome bro. Saving games or scorecards and with leaderboards will be great

[@JSLegendDev]

Thanks, good ideas!

[@_D3adB0y_]

Really cool! Hope the peeps at kaboom see and share this one! 👀

[@andersoncdz1]

It was such an amazing class! Please keep bringing more classes like that!

[@JSLegendDev]

You watched both the Pokemon tutorial and this one? Thanks for the heartwarming comment!

[@andersoncdz1]

​@@JSLegendDev I'm watching this one, and I've already added the Pokémon video to my playlist. It was a very nice video of a game developed with Kaboom.js. I love this library, but I have some doubts about how to use it, and this video covers many of my doubts. Thanks for the reply, and I've already activated the bell. Again, thanks a lot for sharing this artwork. Sorry for any mistakes committed in my English.

[@JSLegendDev]

@@andersoncdz1 No worries! Your english is fine. Glad you enjoy the content.

[@rubin_wang]

Incredible, great tutorial, thank you for your effort

[@udaramanula915]

Waited for a tutorial like this . Thank you❤

[@JuanPabloGomez-cc6vm]

thanks!! you are so amazing, i love learn JS creating games

[@JSLegendDev]

Thanks for the compliment :)

[@eitanbegayev9290]

amazing tut!, really love it - you are a great teacher!

[@JSLegendDev]

Thanks :)

[@soltiscd]

This is incredible! Great job!!

[@patri7294]

this video is so good thank you!

[@samg5183]

thank you so much!! you are the best!! Dont stop

[@JSLegendDev]

Thanks for the encouragement :). I'm hoping to upload more tutorials! If you have any suggestions on what tutorials you would like to see, please feel free to share!

[@samg5183]

@@JSLegendDev thanks !! Maybe a health system? Like three hearts.. and enemy patrol , Shooting system also in the game Platformer ... thank you so much again

[@gaspare3161]

Just a little clarification, in 1:35:32 didn't you put "ml-2" because there are 4 vertical tiles in the tileset (as suggested in the sliceY: 4) meaning the "middle" part of the tileset is actually divided into 2? But you proceeded to just use "bl", "bm" and "br" so technically the bottom part of the tileset isn't actually available to use. I haven't finished the video yet so if this got fixed later on I'm sorry for bringing it up. Regardless, I'm loving the tutorial so far and hats off to you for dedicating so much time and effort. Keep it up!

[@JSLegendDev]

I don't remember since it's been a while lol. Anyway, I made a diagram numbering each tiles that you can look into to understand. Yeah it seems that we aren't actually using the bottom tiles of the tileset but the ones from the row right above. Hope this makes sense and thanks for bringing this up! Link to the diagram : excalidraw.com/#json=v6QFYCEE5J07wUgFivSfz,0srYOWgT6NEI03yPmI9Rzw

[@zunairaiftikhar7198]

I am facing difficulties in copying the assets and other folders and then pasting it into my file. Can you please guide me how can I paste the folders ....Eeven I don't see paste option in visuAL STUDIO

[@JSLegendDev]

Ok here is something you can try. Copy the files and then in VSCode right-click and you should see the paste option. Click paste. If that doesn't work, open the folder for your project in file explorer (meaning outside of VSCode) and copy paste the files there.

[@Hpktube]

Great content!!!!!

[@JSLegendDev]

Thanks!

[@electastudio]

Respect🎉

[@user-sr2rc1rv2u]

hi jslegend dev or anyone reading I was following your tutorial and I'm at minute 8:17 (the beginning of the main.js coding) but if I open the chrome tab with the live preview the canvas is cut. if I use the chrome tab in half screen (half of the screen chrome and the other half vscode) the canvas is cut without resizing and on the right side, above and below it has white bands while if I use chrome in full screen in window (not fullscreen) the bands are above, left and right. only in fullscreen the canvas can work. (I see that you use firefox and for that you don't have problems or anything else. or it could be the screen resolution the problem my screen resolution is 1366 x 768) thanks for the answers in advance. if there are any spelling mistakes I used google translate I'm not English

[@JSLegendDev]

Can you try downloading and running the final source code provided in the description on your machine. Do you still have the same issue after doing this?

[@richievinno6675]

That problem UIManager export and const error 25:22

[@spinballmaniac7873]

Do you reccomend any books or resource to learn more about Kaboom.js? Or where to find more tutorials? I'll appreciate it!

[@JSLegendDev]

Unfortunately, I don't think there are any books that are still up to date. For tutorials, I'm not aware of any that goes in depth. You can visit the official kaboomjs website for the intro tutorial. kaboomjs.com/doc/intro Otherwise I think the playground in the docs is really good for showing examples of how to implement various things in kaboom. Here's the link : kaboomjs.com/play?example=add Would you like me to write a book on Kaboom.js?

[@spinballmaniac7873]

@@JSLegendDev That would be awesome to see a book! I would really appreciate it. I'm happy for your reply. I'll check those tutorials out and see if i can learn them decently.

[@lyricsznaija]

@@JSLegendDev 🏆Yes, we'll be so glad if you did... I can't find any book online and it sucks

[@DiuxEXE]

​@@JSLegendDev It Will be awesome to read a book writen by you about it

[@HuynhLuong227]

wow, nice game thanks you

[@nhathann]

to disable vscode from weird auto suggestion, you can edit your setting to "editor.acceptSuggestionOnCommitCharacter": false

[@JSLegendDev]

Thanks for this!

[@nhathann]

I love your video!@@JSLegendDev

[@JSLegendDev]

@@nhathann Thanks! Hoping to produce more videos like this.

[@daverichards4729]

Just getting started and your instructions and explanations are very clear, however, I get an error entering the kaboom function call in the main.js file 'Type annotations can only be used in TypeScript files.ts(8010)'

[@JSLegendDev]

Hi, I'm glad to help! How did you import kaboom in main.js? Did you do import kaboom from "./libs/kaboom.mjs"? Is the libs folder created with the kaboom.mjs file in it? Also are you using JavaScript or TypeScript? Answering those questions will help me identify the root issue.

[@fantasypvpvideos]

Do you think kaboom is the best library for this type of game? Are there other approachable alternatives? I'm just beginning and have been stunned by the sheer amount of libraries and packages available.

[@JSLegendDev]

I would say Kaboom (now called kaplay) is the most approachable. You may find other libraries with more features but they require more work on your part. If you're a beginner just stick with Kaboom (kaplay) or go lower level with the Canvas API, p5.js or pixi.js (these are all graphics libraries). Using these options will make making games slower since you need to implement everything yourself but you'll gain knowledge that is transferable to other graphics library even in different languages.

[@fantasypvpvideos]

@@JSLegendDev Ok! I'll try to take your advice. I'll be watching and replicating your tutorials with kaplay/kaboom while also tinkering with the Canvas API, specially. Thank you very much for your videos and help! You're really appreciated.

[@fantasypvpvideos]

@@JSLegendDev Hey there. I'm following the tutorial and I have a question. Why do we have to call certain functions like player.enablePassthrough() or player.enableCoinPickup() into main but not player.setPlayerControls()?

[@JSLegendDev]

@@fantasypvpvideos The reason is because we call this.setPlayerControls() in the constructor of the Player. So when you call new Player() in main.js it will call setPlayerControls(). Thinking about it you could have called enableCoinPickup() and enablePassthrough() in the constructor as well and not need to do it in main.js.

[@fantasypvpvideos]

@@JSLegendDev That makes sense. Btw, do you have the discord link for Kaplay.js? The one on the site seems to have expired.

[@katherinecarlos3441]

If I were to use different sprites would I replace them at the beginning or at the very end?

[@JSLegendDev]

What do you mean by at the beginning or the end?

[@katherinecarlos3441]

@@JSLegendDev As in when they are copy and pasted into assets

[@JSLegendDev]

@@katherinecarlos3441 You want to load the assets before displaying them so I would put them at the beginning.

[@atmanirbharofficialindiaon2789]

Hey could u pls tell me how ro deploy the website somewhere like netlify or vercel or github pages so we can easily share it friends and employers

[@JSLegendDev]

Sure! With Github pages : 1) Create a public repo and add the source code, if not done already. 2) On the repo's page on Github go to the settings tab. 3) Under to code and automation section you'll see an item named "Pages". Click on that. 4) Once you're there. You should see a section named branch. Click on the drop down button named "None" and select the master or main branch. 5) After doing 4) a new button named "Save" will appear. Click on that button. 6) Go to the "code" tab of your github repo's page and wait a bit. Refresh the page. 7) On the right side of the page you should see a deployment section. 8) Click on the github pages link right within that section. 9) Your now have your game deployed! With Netlify and gaming platforms like itch io: 1) remove any unnecessary assets in your assets folder to make your project take less space. 2) Zip your entire codebase as a single zip file. 3) Drag and drop that zip file to the platform.

[@atmanirbharofficialindiaon2789]

Which one would u suggest github pages or netlify

[@JSLegendDev]

@@atmanirbharofficialindiaon2789 I think github pages are better because it's free regardless of how many people visit the website. It's also in sync with your codebase so when you modify something it is reflected in the deployment. Netlify also allows this but since you probably want to show your project to employers you likely don't care about keeping the source code private right?

[@kwstantinospavlidis6299]

I'm just getting started and I have a question. What is kaboom and phaser? I mean what do we use them for

[@JSLegendDev]

Kaboom is a library for making games in JavaScript. Phaser is also a library for making games in JavaScript. You should pick only one to make a game in JavaScript and not both. Now why use libraries? They offer you premade functionality that you can use to make your games quicker. For example, you don't have to write a lot of code to display sprites from a spritesheet, Kaboom offers you a function to do that. Same thing for gravity. You don't have to write the code to implement gravity yourself you can simply use the setGravity() function that Kaboom offers you. In this tutorial, I teach you how to make a game using Kaboom and not Phaser. Kaboom is easier to use than Phaser but has less features. Hope this helps clear things up!

[@kwstantinospavlidis6299]

@@JSLegendDev is kaboom and phaser similar to visual studio code or visual studio code is a completely different thing?

[@JSLegendDev]

@@kwstantinospavlidis6299 No they are completely different things. Visual Studio Code is a code editor to write your code in. Phaser and Kaboom are libraries. A library is code written by someone else that you can re-use without having to write it yourself. Does this make sense to you? No worries I can re-explain if you want :)

[@kwstantinospavlidis6299]

@@JSLegendDev I know I might look dumb but I didn't get it hahaha im sorry. So for example kaboom has already some codes written like gravity, a block acting like a block and not letting the player walk through etc. and VS is just so you can "organise" somewhere all the codes? Also, can I get free assets from kaboom or phaser and use in my game?

[@JSLegendDev]

@@kwstantinospavlidis6299 Visual Studio Code is a program in which you write your code. It's a text editor specifically for coding. So yeah, you can organize and write your code in VSCode. Kaboom and Phaser don't take care of assets. You can load assets into your game but you need to get them from somewhere else. For example, itch.io is a good website to find assets to use. Don't worry about looking dumb :) I'm happy to answer your questions. Hope the above cleared things up.

[@陈冠希-f6d]

In the enablePassthrough method, it is not possible to pass the passthrough when the player stands on the passthrough and presses the down button, it only works when the down button is pressed while jumping up. Why is this?

[@JSLegendDev]

I'm not sure I understand the question. If you try pressing down while being on a passthrough platform, you character will drop down. If you play the demo link I've put in the description you'll see it working.

[@陈冠希-f6d]

@@JSLegendDev Yes, it works in your demo. But pressing down doesn't work on my side. Pressing down only when jumping up passes the passthrough platform.

[@JSLegendDev]

@@陈冠希-f6d Maybe you could check the github repo and compare with your code. Otherwise, do you have your code hosted somewhere so I can take a look? Maybe just paste the relevant code here if you can.

[@umcynbolcyn4175]

@@陈冠希-f6d did you manage to fix it? I have the same issue.

[@paulsingh11]

A little confused, on the player.png, how do i select the last 5 frams for the idle anims? anims: { idle: { from: 0, to: 3, loop: true, }, is the code you have, but a little confused how to specify which ones we want. for idle, I tried anims: { idle: { from: 10, to: 15, loop: true, }, but does not have expected results. I know you said we're not using the climbing animation but curious

[@JSLegendDev]

Hi Paul! The idle animation only has 4 frames and frame numbering starts at 0 instead of 1, so that's why it's 0 to 3 and not 1 to 4. If you look at player.png it corresponds to the first row of the image. To have a better intuition on what number correspond to what frame, here is a diagram I made viewable using the following link : excalidraw.com/#json=XPhGXzLUbJOemEE6DI97G,5Sf3vE5ZiQb-MevZRcDw9Q Note : If when opening the link you have a replace content button in red/orange, you'll have to click on it to see the diagram I made. Hope this will clear any confusion you had.

[@thewalrusdragon9579]

I am having an issue where using the 1280x720 resolution will not fill the width of my screen. There is some blank whitespace on the right side, and I just cannot seem to figure out what to do. If I lower the width to 1000, it actually works, but looks somewhat distorted. Any ideas on why this is?

[@JSLegendDev]

Have enable letterbox: true option when initializing Kaboom? Can you show me the html you used?

[@thewalrusdragon9579]

@@JSLegendDev my html is exactly like yours. At least at the point of the video I’m in.

[@thewalrusdragon9579]

@@JSLegendDev and my letterbox is set to true

[@JSLegendDev]

@@thewalrusdragon9579 Can you try downloading the source code on github and running it on your machine? Do you have the same issue?

[@mariaiftikhar1755]

Which tool did you use for coding of this game?

[@JSLegendDev]

I used the JavaScript programming language, the Kaboom.js library and VSCode as my code editor.

[@Saloso]

If I want to put the game in full screen so that the game accepts several resolutions, how can I ensure that the buttons do not move out of place when I manipulate the browser screen?

[@JSLegendDev]

Unfortunately, with Kaboom.js you can't really change the resolution of the canvas once it's initialized without restarting the canvas. What you can do however, is maintain the same aspect ratio regardless of screen size by passing letterbox: true to the kaboom function. So doing kaboom({width: 1280, height: 720, letterbox: true}). I'm not sure I understand what you're referring to when you mention buttons. If you want to place things relatively, I would suggest using the center() component which gives you the center pos of the canvas regardless of size. You can then set the positions of the buttons by using pos(center().x + offset, center().y + offset).

[@GarkadeXD]

will this work with kaplay D:

[@JSLegendDev]

@@GarkadeXD 90% could work with kaplay without modifications but this uses an older version of kaboom. So you'll have to write the remaining 10% differently.

[@jimmyroserovallejo]

Best regards, I would like to know if you could optimize these games so that they work on a cell phone, that is, in the cell phone browser with their respective touch events, thank you for your content, it is very interesting, I hope at some point to invite you a coffee

[@JSLegendDev]

Hi! It should be possible but I haven't looked into it yet. Maybe I'll do a tutorial on it someday. Thanks for watching!

[@player_two64]

Is this framework good for indie games?

[@JSLegendDev]

Yeah it's nice for small 2D pixelart games. You can't do 3D with it.

[@player_two64]

@@JSLegendDev Like a 2d metroidvania? That's what I'm trying to make

[@JSLegendDev]

@@player_two64 You can make a metroidvania but you need to divide your map into smaller scenes to keep a good framerate.

[@adg2877]

Hey, was trying to follow along, getting Uncaught TypeError: Cannot read properties of undefined (reading ' ') at Level.js:19: this.map.push(addLevel(layerLayout, layerSettings)) any one else faced this?

[@JSLegendDev]

I'm not sure what's the cause of your error but have you tried comparing your code with the source code I provided on github? github.com/JSLegendDev/Mario-Game-Kaboom.js/blob/master/utils/Level.js It might help you identify why things aren't working.

[@adg2877]

Thanks@@JSLegendDev Found the error, there was some typo btw, Awesome tutorial ! having a lot of fun learning

[@JSLegendDev]

@@adg2877 Thanks glad you're liking it!

[@daverichards4729]

Sorry I found the problem. I didn't see that one set of brackets were curly brackets.

[@JSLegendDev]

Ah no worries!

[@Nodsaibot]

OMG game in JS.... kaboomjs... bye