Learn JavaScript Game Dev - Kaplay Library Crash Course

Поделиться
HTML-код
  • Опубликовано: 27 янв 2025

Комментарии • 41

  • @JSLegendDev
    @JSLegendDev  6 месяцев назад +3

    Important links :
    - Kaplay docs : kaplayjs.com
    - Kaplay installation guide : kaplayjs.com/guides/install
    - Kaplayground : play.kaplayjs.com/
    - Kaplay Discord server : discord.com/invite/kaboom-883781994583056384
    - My substack for written tutorials : jslegenddev.substack.com

  • @ikroDev
    @ikroDev 5 месяцев назад +4

    JSLegendDev, I am totally grateful for your classes, I even made the portfolio that was present at CodeCamp, however, I didn't understand much of the concepts of the library itself, I am Brazilian and here the game market, especially with javascript libraries, is not so heated, I am not a game developer but I have always been interested in developing some projects with gamification, you gave me a new freedom that I didn't have before with the lack of this knowledge, thank you very much for the classes, I will be waiting for more content, you are an inspiration for the gameDev community.

    • @JSLegendDev
      @JSLegendDev  5 месяцев назад +2

      I'm glad my tutorials were useful. Thanks for watching and supporting the channel!

  • @KhalidCantBuild
    @KhalidCantBuild 3 месяца назад +1

    Kaplay is mainly one of the reason i love js so much

  • @pawekozowski6128
    @pawekozowski6128 6 месяцев назад +1

    holy shit, thats news, I started my js journey with kaboom, very excited

  • @artoke84
    @artoke84 2 месяца назад

    amazingo tutorial!

  • @HuynhLuong227
    @HuynhLuong227 3 месяца назад

    Seem kaplay is new library 🎉🎉🎉

  • @anpapala5961
    @anpapala5961 6 месяцев назад

    Great tutorial, very good, I have learned a lot, I love kaboom.js or kaply.js, I follow all your tutorials, thank you for that. ask what your next game is going to do tutorial do you need to make a shooting or invasion game thanks again don't stop making videos they are excellent 👍

    • @JSLegendDev
      @JSLegendDev  6 месяцев назад

      Thanks for the game ideas, will consider them and thanks for watching!

  • @hiraeth_mma
    @hiraeth_mma 6 месяцев назад +2

    Do you use a mic for recording? Your audio quality is cool ngl.

    • @JSLegendDev
      @JSLegendDev  6 месяцев назад +3

      Thanks and yes I use the Samson Q2U as my mic which costs 70 USD.

  • @muslim-billi
    @muslim-billi 3 месяца назад

    Nice toturial

  • @Frangelo90
    @Frangelo90 2 месяца назад

    Somewhat confused at the start. Is it possible to do this on a regular VSCode setup rather than using the playground? I'm switching between this and the "Learn JavaScript to Make Games - JS Crash Course for Beginners" one

    • @JSLegendDev
      @JSLegendDev  2 месяца назад

      You can still following along though if you use the same setup from the JS crash course for beginners. So you follow along in VSCode what I'm teaching in the playground. It should be mostly the same.
      I don't have plans to remake this one this soon but maybe in the future, I'll consider doing it in VSCode directly instead.

    • @Frangelo90
      @Frangelo90 2 месяца назад

      @@JSLegendDev Thanks for the response. I guess my real question is which JS/Kaplay tutorial should I watch first? I like your channel but the videos I think are fragmented. What's the diff between "Ultimate JavaScript Game Development Course for Beginners" and "Make a Sonic Runner Game in JavaScript"?

    • @JSLegendDev
      @JSLegendDev  2 месяца назад

      @@Frangelo90 The ultimate one is a compilation of existing tutorials on the channel. It includes the sonic one as well.

  • @andersoncdz1
    @andersoncdz1 6 месяцев назад +1

    Another great video!!!
    I am testing the knowledge I have acquired by watching your videos, and I managed to implement a melee attack system, very simple but apparently it worked.
    Another implementation I made was when my character jumps on top of an opponent, just like Mario does, so at that moment I used unuse() to remove the body because my player was standing on the enemy. Do you think this is the best way?
    The next step I would like to implement is parallax and wall sliding. In Kaplay, would you know the best path to take? I have already implemented it using JavaScript and CSS, but using Kaplay/Kaboom I am not getting a good result.
    Excellent video, I have also read some of your articles, they have helped me a lot. With what I have learned, I can watch videos of some implementations made in Godot/Unity and transfer them to Kaplay, the only one giving me a headache for now is the parallax effect.
    Best regards,

    • @JSLegendDev
      @JSLegendDev  6 месяцев назад +1

      Thanks for watching!
      For parallax, you can achieve it by using an onUpdate and modifying the pos of the game object manually within that onUpdate. You may need to use dt() which is available in Kaplay so that the movement is framerate independent. I might write a post explaining how to achieve this at some point. In the meantime, you could ask your question on the Kaplay discord, you'll probably get an answer quicker.
      I'm not sure I understand the Mario mechanic you're describing. What happens when you remove the body component? On which game object you remove it, the player or the enemy?

    • @andersoncdz1
      @andersoncdz1 6 месяцев назад

      @@JSLegendDev Thank you very much for the response and for the idea presented. I will try to implement it; it will be a good exercise.
      Regarding the Mario mechanic, I remove the enemy's body component and set a time for it to disappear from the screen. So, while the enemy was not removed from the screen, my character would stay on top of the enemy, as if it were a tile. When I remove the enemy's body, my character remains on the ground instead of staying on top.
      Thank you again for the tips; I will subscribe to the Discord channel.
      Sincerely

    • @JSLegendDev
      @JSLegendDev  6 месяцев назад +1

      @@andersoncdz1 No problem! As for the Mario mechanic, I can kinda see what you're doing. I don't have a better approach to recommend at the moment.

    • @andersoncdz1
      @andersoncdz1 6 месяцев назад

      No problem. Actually, in one of your lessons, you taught about unuse(), and as I follow the lessons and try to make my own implementations, unuse() gave me an idea. If I manage to put my test online, I'll send you the link for you to check it out.
      Again, thank you very much for the lessons.

    • @andersoncdz1
      @andersoncdz1 6 месяцев назад

      @@JSLegendDev Hey my friend,
      I came back to thank you for the tip. After much struggle, I finally managed to get the parallax working. There was something strange that I didn't understand, but since I am using the latest version of kaboomjs, it might be an issue with the library. I will port it to kaplay to see if that's the case, but there's a good chance it’s my mistake hahaha. Anyway, my parallax is running, and once again, thank you very much for the tips.

  • @iloveshibainu9003
    @iloveshibainu9003 6 месяцев назад

    Thank you for the awesome tutorial legend 🗿....Sir you said you'll make a detailed video on how to convert a webapp game into an android or I OS app using capacitor...eagerly waiting for it 🙏🏻

    • @JSLegendDev
      @JSLegendDev  6 месяцев назад +1

      Yeah I was planning on doing it. Maybe the next tutorial or another one after that if everything goes well.

    • @iloveshibainu9003
      @iloveshibainu9003 6 месяцев назад

      ​@@JSLegendDev hell yeah 🗿 thank you 🫂

  • @Volt-Eye.
    @Volt-Eye. 6 месяцев назад

    Give a try to Excalibur JS !
    Wait what is Kaplay.js ?
    And what power it holds against other framework ?
    Like can I do advanced things as Phaser, Construct etc ? Like shaders ?

    • @JSLegendDev
      @JSLegendDev  6 месяцев назад +1

      Kaplay.js is the community fork of Kaboom. So it's the same thing as Kaboom but development will continue since Kaboom was abandoned.
      You can do shaders in Kaplay, you could also do them in Kaboom.
      As for Excalibur.js, I gave it a try but haven't had much the time to dive deeper yet.

    • @Volt-Eye.
      @Volt-Eye. 6 месяцев назад

      @@JSLegendDev is it as powerful as Phaser ?

    • @JSLegendDev
      @JSLegendDev  6 месяцев назад +1

      ​@@Volt-Eye. Not as powerful as Phaser yet but could be getting there in the future.
      I like Kaplay because making games with it is faster than Phaser and the API is more intuitive.

    • @Volt-Eye.
      @Volt-Eye. 6 месяцев назад +1

      @@JSLegendDev so I hold the same side.
      Never ever used any Js framework except Lua Löve framework but you can tell just by looking at API :)

    • @JSLegendDev
      @JSLegendDev  6 месяцев назад +1

      @@Volt-Eye. Yeah, by the way the original creator of Kaboom (now Kaplay) said in an interview that he likes Love2d. Here is the link : console.substack.com/p/console-128

  • @kaiser94exodus89
    @kaiser94exodus89 6 месяцев назад

    But is there a market for game dev javascript html canvas which we can make money after learning these skills??

    • @niceEli
      @niceEli 6 месяцев назад

      yea, for example SUPERCELL

    • @JSLegendDev
      @JSLegendDev  6 месяцев назад +3

      It's up to you to use those skills to make money. Here are few ideas you could explore :
      - Make a web game and wrap it as a desktop app with Tauri/Electron and then sell it on Steam. Publish a demo version on the web so that it's easier for people to discover your game as they would be less willing to install a game from a random untrusted dev. (Do this before opening a Steam page, so that you can gauge interest)
      - Make a gamified web app SAAS. For example, a gamified language learning app or productivity app, since it's a hybrid between a game and an app it would work best on the web where users don't have to install software on their machines.
      - Make small web games to build up your proficiency in JS while having fun but then go work as web dev and make your money that way.
      - Dive deep into html canvas so that you can have the expertise to work on graphical applications on the web (Excalidraw, Photopea, Canva etc...). Apply to work for companies like Figma, Adobe or any other company that do these types of applications.

    • @Tayyab_Raja
      @Tayyab_Raja 6 месяцев назад +2

      Good News! Kaplay library 🎉

  • @hachetrescomacatorce2340
    @hachetrescomacatorce2340 3 месяца назад

    hey bro, the consuming of memory goes to the sky when i call kaplay() (O.o)

    • @JSLegendDev
      @JSLegendDev  3 месяца назад

      Can you provide more details? Do you get too much memory consumption when playing games made with Kaplay? For example, can you try my sonic game here : jslegend.itch.io/sonic-ring-run

    • @hachetrescomacatorce2340
      @hachetrescomacatorce2340 3 месяца назад

      @@JSLegendDev
      What happens is that I import kaplay and once I call the kaplay() function the pc fan sounds and when I look at the resource monitor (I'm on debian), but this only happens when I'm in the browser tab that shows the canvas, If I switch to another tab, memory consumption drops, this happens with your sonic game and with the kaplay playground

    • @hachetrescomacatorce2340
      @hachetrescomacatorce2340 3 месяца назад

      @@JSLegendDev by the way, thanks for replying

    • @JSLegendDev
      @JSLegendDev  3 месяца назад +1

      @@hachetrescomacatorce2340 No worries! I don't know what issue you're having exactly. What I recommend is going on the Kaplay discord and reporting your issue there. The link is in the description of this video.

    • @hachetrescomacatorce2340
      @hachetrescomacatorce2340 3 месяца назад +1

      @@JSLegendDev OK, thanks you!!!