JSLegendDev
JSLegendDev
  • Видео 26
  • Просмотров 142 146
Build 2 Gamified Portfolio Websites with JavaScript and React
Support me on Patreon : patreon.com/c/jslegend
How to deploy on GitHub pages using Vite : jslegenddev.substack.com/p/how-to-deploy-a-vite-js-game-project
1) Relevant links for the first portfolio website:
- Substack post explaining how to implement mobile controls : jslegenddev.substack.com/p/how-to-implement-player-controls
- Live demo : jslegenddev.github.io/portfolio/
- Source code : github.com/JSLegendDev/2d-portfolio-kaboom
- Map files (map.json + map.png) be found here : github.com/JSLegendDev/2d-portfolio-kaboom/tree/master/public
- Spritesheet can be downloaded here : github.com/JSLegendDev/2d-portfolio-kaboom/blob/master/public/spritesheet.png (I use a modified version of the original s...
Просмотров: 1 723

Видео

Build an Animation System with JavaScript and HTML Canvas
Просмотров 972Месяц назад
Get the spritesheets here : imgur.com/a/fire-emblem-gba-spritesheet-U4MHwpj Support me on Patreon : www.patreon.com/c/jslegend You can access the final source code for this tutorial if you support me on Patreon or alternatively buy the source code here : www.patreon.com/jslegend/shop/final-source-code-for-how-to-implement-751191
How to Implement Infinite Parallax Scrolling in JavaScript and HTML Canvas
Просмотров 1,7 тыс.Месяц назад
In this tutorial, I'll teach you how implement an infinite parallax scrolling background using JavaScript and the HTML Canvas API (so no external libraries, only vanilla JS). You can buy access to final source code here : www.patreon.com/jslegend/shop/parallax-scrolling-in-javascript-and-729982 Check out my written tutorials : jslegenddev.substack.com Live demo : jslegend.itch.io/infinite-paral...
The Ultimate Guide to Web Game Development
Просмотров 2,7 тыс.Месяц назад
Check out my written tutorials : jslegenddev.substack.com ~ Resources ~ - Learn to Build Minecraft in Three.js : ruclips.net/video/tsOTCn0nROI/видео.html&pp=iAQB - Babylon.js Tutorial For Absolute Beginners : ruclips.net/video/e6EkrLr8g_o/видео.html - Scott Westover's channel (for Phaser tutorials) : @swestover - Drew Conley's channel (for Excalibur.js) : @DrewConley - Shezzor's dev corner chan...
Why I Use This Game Library
Просмотров 1,9 тыс.2 месяца назад
I explain what makes this library so special for gamedev. Link to the KAPLAY game jam : itch.io/jam/kajam Link to the KAPLAY website : kaplayjs.com Link to the KAPLAY discord : discord.com/invite/aQ6RuQm3TF Link to the Clickery Hexagon : www.newgrounds.com/portal/view/946392
Build a Dev Portfolio as a 2D Game With React.js + JavaScript
Просмотров 2,3 тыс.2 месяца назад
Check out the Colyseus Framework : colyseus.io/ Check out this template for using Colyseus with KAPLAY : github.com/colyseus/kaplay Check out my written tutorials : jslegenddev.substack.com/ Live demo : jslegenddev.github.io/new-2d-portfolio/ Source code on GitHub : github.com/JSLegendDev/new-2d-portfolio Assets are included in the repo. ~ Additional resources ~ The book of shaders : thebookofs...
Why Use React for Game Development ?
Просмотров 5 тыс.2 месяца назад
In this video we explore why and how to use the React.js Frontend library for game development.
How to Use React.js for Game Development - Tutorial
Просмотров 3,5 тыс.2 месяца назад
Live demo : jslegenddev.github.io/react-kaplay/ Live demo controls : - Arrow keys to move around. - Use the space key to close the text box once it appears. Source code : github.com/JSLegendDev/react-kaplay Get the assets fonts here : github.com/JSLegendDev/react-kaplay/tree/master/public RESOURCES : - How to Display an HTML Based UI on Top of a JavaScript Game Made With Kaplay : jslegenddev.su...
Ultimate JavaScript Game Development Course for Beginners
Просмотров 22 тыс.4 месяца назад
Check out my substack for written tutorials : jslegenddev.substack.com/ ⚠️ Check out my paid Mario-like asset pack : jslegend.itch.io/mario-like-platformer-assets 1) JavaScript Crash Course - VSCode : code.visualstudio.com/ - Node.js : nodejs.org - Kaplay.js : kaplayjs.com - The Modern JS Tutorial : javascript.info - MDN Web docs for JS : developer.mozilla.org/en-US/docs/Web/JavaScript 2) Build...
Make a Sonic Runner Game in JavaScript - JS course for Beginners
Просмотров 2,8 тыс.4 месяца назад
Live demo : jslegend.itch.io/sonic-ring-run Source code : github.com/JSLegendDev/sonic-runner Link to article explaining how to implement parallax scrolling : jslegenddev.substack.com/p/how-to-implement-infinite-parallax Assets link : github.com/JSLegendDev/sonic-runner/tree/master/public Chapters: 0:00 Intro 3:47 Project Setup 21:22 Loading Assets 30:50 Making The Main Menu Scene 54:32 Creatin...
Learn JavaScript to Make Games - JS Crash Course for Beginners
Просмотров 4 тыс.5 месяцев назад
In this crash course you'll learn how to code in JavaScript so that you can start making games with it. Check out my written tutorials : jslegenddev.substack.com Relevant links VSCode : code.visualstudio.com/ Node.js : nodejs.org Kaplay.js : kaplayjs.com The Modern JS Tutorial : javascript.info MDN Web docs for JS : developer.mozilla.org/en-US/docs/Web/JavaScript Chapters 0:00 Intro 0:32 Why le...
Learn JavaScript Game Dev - Kaplay Library Crash Course
Просмотров 4,1 тыс.5 месяцев назад
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 Chapters 0:00 Intro - What is Kaplay 1:26 How to install Kaplay 5:38 How to deploy/publish a game made with Kaplay 7:42 Ho...
Build a Desktop Game in JavaScript with Tauri and KAPLAY
Просмотров 2,7 тыс.7 месяцев назад
In this tutorial, you'll learn how to make a game in JavaScript with the KAPLAY library and how to use Tauri to make it installable on PC. Check my written tutorials : jslegenddev.substack.com/ Try the game : jslegend.itch.io/kriby Source code for the game : github.com/JSLegendDev/Desktop-JS-Game-Tauri The Tauri prerequisites can be found here : tauri.app/v1/guides/getting-started/prerequisites...
Kaboom.js is Getting Rebranded to Kaplay
Просмотров 2,2 тыс.7 месяцев назад
JOIN THE KAPLAY DISCORD HERE : discord.com/invite/kaboom-883781994583056384 New repo : github.com/marklovers/kaplay New npm package : www.npmjs.com/package/kaplay New docs (still in progress, use the kaboom docs in the meantime) : kaplayjs.com/
JavaScript Metroidvania Game Tutorial
Просмотров 4,6 тыс.7 месяцев назад
Learn to make a metroidvania style game using JavaScript and the Kaboom (Now called Kaplay) library. - Guide on how to use Tiled Kaboom.js : jslegenddev.substack.com/p/how-to-use-tiled-with-kaboomjs - Guide on how custom events work in Kaboom.js : jslegenddev.substack.com/p/custom-events-in-kaboomjs - Guide on how to implement one way platforms : jslegenddev.substack.com/p/how-to-implement-one-...
Build a Dev Portfolio as a 2D Game - JavaScript Tutorial
Просмотров 4,6 тыс.10 месяцев назад
Build a Dev Portfolio as a 2D Game - JavaScript Tutorial
TypeScript Kirby-like Platformer Tutorial
Просмотров 2,7 тыс.11 месяцев назад
TypeScript Kirby-like Platformer Tutorial
Build a Pokémon Game in JavaScript - Game Development Course for Beginners
Просмотров 7 тыс.11 месяцев назад
Build a Pokémon Game in JavaScript - Game Development Course for Beginners
Create a Legend of Zelda Style Game With JavaScript
Просмотров 8 тыс.Год назад
Create a Legend of Zelda Style Game With JavaScript
Learn TypeScript by Making a Fighting Game - TypeScript for Beginners
Просмотров 2,5 тыс.Год назад
Learn TypeScript by Making a Fighting Game - TypeScript for Beginners
Can you make good games in JavaScript?
Просмотров 2,9 тыс.Год назад
Can you make good games in JavaScript?
JavaScript Platformer Game Tutorial
Просмотров 20 тыс.Год назад
JavaScript Platformer Game Tutorial
Vertical Platformer JavaScript Game Tutorial
Просмотров 4,6 тыс.Год назад
Vertical Platformer JavaScript Game Tutorial
Pokémon JavaScript Game Tutorial
Просмотров 17 тыс.Год назад
Pokémon JavaScript Game Tutorial
JavaScript Fighting Game Tutorial
Просмотров 10 тыс.Год назад
JavaScript Fighting Game Tutorial

Комментарии

  • @TutorialTitans1
    @TutorialTitans1 15 часов назад

    how to use it with typescript i want headson with kaplay

    • @JSLegendDev
      @JSLegendDev 9 часов назад

      Check out my TypeScript tutorials on my channel. There are two. While they use Kaboom the process is the same with Kaplay. Try the Kirby-like one.

    • @TutorialTitans1
      @TutorialTitans1 8 часов назад

      @@JSLegendDev make a kaplay one with typescript i want hands on.

    • @JSLegendDev
      @JSLegendDev 8 часов назад

      @TutorialTitans1 I might but no promises yet.

  • @user-ov1ps7go4m
    @user-ov1ps7go4m 22 часа назад

    19:10

  • @user-ov1ps7go4m
    @user-ov1ps7go4m 22 часа назад

    13:00

  • @Sebastian_1190
    @Sebastian_1190 4 дня назад

    Hi! Just discovered your channel. Thanks so much for the work and content you delivered here. I hope a lot more views follow soon! All the best, Seb

  • @kwealcea
    @kwealcea 7 дней назад

    Thanks for the tutorial!

  • @AnwarAliCodes
    @AnwarAliCodes 16 дней назад

    Mashallah amazing tutorial. Thank you so much :)

  • @criberick6720
    @criberick6720 17 дней назад

    Vampire Survivors was not converted by electron. This game was rewritten from scratch in C# in Unity because it was slow in JS, and of course JS is a poor choice for performance-demanding games with a lot of action on the screen.

    • @JSLegendDev
      @JSLegendDev 17 дней назад

      Hi! Vampire Survivor was made in Phaser a JavaScript framework for making games. There is a version of it still on itch.io that you can play in your web browser. To bring that game to Steam. Poncle, the dev behind this game, packaged it as a desktop app using Electron. Which is a technology for making desktop apps in JS. The game got popular on Steam when it was still made with Phaser and JS. If I remember correctly, they switched to Unity because the mobile performance was not enough. Otherwise, on desktop the game ran well even with many enemies. In fact, you can try playing the game on itch.io in your browser. In the Noclip documentary on Vampire Survivor available on RUclips, poncle mentioned that he still develops new features for the game in Phaser and then hand it over to his Unity team to remake it in Unity. So you can still get quite far with JS when it comes to 2D games.

    • @criberick6720
      @criberick6720 17 дней назад

      @@JSLegendDev Hello, Yes, and it's abandoned and slow as a hippo, and the main one released on steam is not as you say in the video in electron, but was rewritten in C# in unity. Edit: I must add, that I do not want to criticize js, it is an outstanding prog language for web and it has great tools too. But it is simply not suitable for desktop applications due to how it was designed and the backward compatibility is dragging on behind it.

  • @ClaytonArbogast-y7f
    @ClaytonArbogast-y7f 17 дней назад

    great video man. thank you.

  • @patri7294
    @patri7294 18 дней назад

    this video is so good thank you!

  • @ArnavSingh-im5bj
    @ArnavSingh-im5bj 19 дней назад

    Your videos are a gem, I can't thank you enough

  • @GarkadeXD
    @GarkadeXD 19 дней назад

    will this work with kaplay D:

    • @JSLegendDev
      @JSLegendDev 19 дней назад

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

  • @richievinno6675
    @richievinno6675 21 день назад

    That problem UIManager export and const error 25:22

  • @jwisungiepark
    @jwisungiepark 23 дня назад

    i just finished making the game! thank you so much for this tutorial I'm looking forward to your videos <3

  • @lomanidragon
    @lomanidragon 24 дня назад

    Really nice tutorial, I enjoyed how you took time to explain everything. Very beginner friendly! Am slowly trying to modify it to make it more unique, want to add an API just a little stuck on how to add that section, but I'll probably figure it out soon haha.

  • @jotaroisdarius1918
    @jotaroisdarius1918 25 дней назад

    How can I have a full screen background?

    • @JSLegendDev
      @JSLegendDev 25 дней назад

      Simply not using the letterbox option would make sure the canvas takes the full width and height of the screen. Then, you can create a game object and make it take the full width and height of the canvas. This game object can contain a colored rectangle or an image and will act as your background. You can use the k.onResize() handler to update the width and height of the game object when the window is resized.

  • @LukeBrady
    @LukeBrady 27 дней назад

    I love the no library approach. Seeing each piece of code and how it works.

  • @erracode
    @erracode Месяц назад

    Am just so thankful of finding your channel, am on vacations from work but ive been so boring of coding, i thinked of redoing my portofolio with this idea, i just used godot in the past but i always wanted to do some web game related, so anyways, thank so much

  • @jwisungiepark
    @jwisungiepark Месяц назад

    when i got to this point 1:43:48 my screen was still just blue and i checked everything too, could it be because my map is big or that has nothing to do with it?

    • @JSLegendDev
      @JSLegendDev Месяц назад

      Hard to tell without seeing your code. It could be possible that the issue is that the positioning is wrong for your map (I'm assuming that you decided to use your own map). You could try downloading the source code and comparing with yours. The link is in the description.

    • @jwisungiepark
      @jwisungiepark Месяц назад

      @@JSLegendDev in chrome it says the error is about drawtiles not being defined but i followed your steps so i hope i fix whatever's going on with the drawtiles

  • @Nikhil-gm8ks
    @Nikhil-gm8ks Месяц назад

    Would be really interesting, if you could consider a long project, where we can build base logic for a Pixel Game, almost like our own game engine built on top of existing tools/platforms that are there. So suppose someone want to make a game like Stardew valley, then we will have our base game logic/engine already in place, we just extend from there..... If some one want to make like Pokémon or Zelda alike, then they can again use that..... It could be similar in logic like this video, but more expandable, more features....... I understand this can be a long projects, so you can launch videos in this playlist over time..... Thanks

    • @JSLegendDev
      @JSLegendDev Месяц назад

      Thanks for the suggestion, I will consider it.

  • @Nikhil-gm8ks
    @Nikhil-gm8ks Месяц назад

    Amazing tutorial

  • @hachetrescomacatorce2340
    @hachetrescomacatorce2340 Месяц назад

    aaaamazzzzziinng

  • @worldbest3097
    @worldbest3097 Месяц назад

    damn greattt