I Tried Making an FPS Game in JavaScript

Поділитися
Вставка
  • Опубліковано 29 гру 2024

КОМЕНТАРІ • 273

  • @simondev758
    @simondev758  2 роки тому +50

    Everything in the video, the effects, even the graphs and animations, were all done with GLSL shaders. Learn how to do them yourself with my course: simondev.teachable.com/p/glsl-shaders-from-scratch
    Support me on Patreon: www.patreon.com/simondevyt

    • @crowbr
      @crowbr 2 роки тому +1

      nice!

    • @c0nsumption
      @c0nsumption 2 роки тому +2

      Would you be willing to make a course around this? I’m interested in the GLSL course as well but crafting all this FPS project with an in-depth tutorial is most def something in extremely interested in. Willing to pay and all.
      You’re literally the only person I’m finding whose documenting three.JS experiments this in depth 🥺

    • @simondev758
      @simondev758  2 роки тому +7

      @@c0nsumption Yep, really depends on interest. I'd be happy to make a multi-hour version available.

    • @c0nsumption
      @c0nsumption 2 роки тому +1

      @@simondev758 👏🏽 awesome. If you end up going for it please make an announcement as I’m for sure signing up!!!

    • @thechanglongwang
      @thechanglongwang 2 роки тому

      voice sounds like text to speech

  • @Retrofire-47
    @Retrofire-47 2 роки тому +516

    this guy makes me feel like the label "beginner" is far too generous for my current skill level

    • @socio637
      @socio637 2 роки тому +30

      yeah hes a wizard. dont be dejected though, you could be too

    • @somefin3322
      @somefin3322 2 роки тому +29

      Do be reminded that this is probably all in many days of work, we don't see his actual process of studying to get something working. We see the process of it WORKING, not fully being worked on.

  • @programmingjobesch7291
    @programmingjobesch7291 Рік тому +45

    You have me fully convinced I can build a "quicky" game engine from scratch in javascript to rival unreal- and I just learned how arrays work...😂

  • @Ecrios
    @Ecrios Рік тому +12

    This is one of the few of the most impressive game design videos I've ever seen! Please, carry on! You. Are. Amazing!

  • @alijalloul122
    @alijalloul122 4 дні тому +1

    This is extremely impressive. Wish you'd have an in-depth series building this from scratch.

  • @baguette2652
    @baguette2652 2 роки тому +9

    Ever since I discovered your channel, I became super motivated by your creations. Thank you for bringing such awesome content to us! 🔥

  • @jchaloupka007
    @jchaloupka007 2 роки тому +5

    Damn, that’s amazing, love it!

  • @kosa-tv
    @kosa-tv 2 роки тому +5

    Great idea dude. Like always, not disappointing content.

  • @PotatoGodzilla
    @PotatoGodzilla 2 роки тому +3

    I love those three js videos keep it up dude you're awesome! :)

  • @ViciousViscount
    @ViciousViscount 2 роки тому +4

    That's pretty much Quake III Arena. I LOVE it.

  • @SuperPicolin0
    @SuperPicolin0 2 роки тому +124

    I'm amazed once again, why are you making this look so easy, like others mentioned, I would definitely pay for a detailed course on all this with threejs. Do I have to separately learn game development and threejs because the info on making games with three is very limited?

    • @simondev758
      @simondev758  2 роки тому +25

      Possibly. Game development is it's own thing, and three.js is a nice little 3d graphics library, but if you have 3d experience, then learning three.js specifically isn't required.

    • @SuperPicolin0
      @SuperPicolin0 2 роки тому +14

      @@simondev758 I almost figured from the wiki pages you're looking up sometimes, I should leave threejs alone for a bit and focus on actual game dev concepts first, thank you for replying and the good content you're creating for us.

    • @Desopolis
      @Desopolis 2 роки тому +6

      I’d say use a more solid, game focused engine for a bit to learn and understand the fundamentals.
      It’s like learning to be a racing driver…
      you can go out and get a focused team and pre-built car and focus on driving, or you can buy a kit car online and build it in your garage..
      Threejs serves a super wide set of use cases, so i needs to be a flexible as possible, where a game engine knows a lot of the core requirements before you’ve even start.
      I’d push yourself beyond any cordless game ends, “gamemaker” type things, and try at least Unity.
      If you want a less intense engine there’s stuff like Godot (which has more code requirements)
      There are good web based game engines too, Pixi and phaser will make EXCELENT 2d games and have a strong legacy and community.
      For 3D there’s PlayCanvas which is a game engine built on three, it does a lot of the heavy lifting for you but I’m not sure how I feel about it yet..
      Lastly there’s BabylonJS which wasn’t burdened by all the outdated shit three has so support and is honestly a pretty great rendering engine.
      They have an excellent Node system and a good community, although pretty isolated from the rest of the JS world…
      TLDR: get Unity, buy the stuff you can’t figure out, and go deeper on game #2, or 3 or 4 etc…

    • @werrutkyupnext
      @werrutkyupnext 2 роки тому

      damn I wanna learn javascript this is like really really hard?

    • @anomiedesign5030
      @anomiedesign5030 7 місяців тому

      @@werrutkyupnext how is it going?

  • @oaksBFL
    @oaksBFL 2 роки тому +2

    This tutorial is amazing and you are really good at teaching !! great job sir !

    • @oaksBFL
      @oaksBFL 2 роки тому +1

      hackers in my acc i did not comment this sorry bro

  • @Mohta69
    @Mohta69 2 роки тому +3

    That's dope dude

  • @covenantersoldier9165
    @covenantersoldier9165 Рік тому +1

    Tip of the hat top you, truly. well done. you truly are a great online tutor.

  • @minayoussef5730
    @minayoussef5730 2 роки тому +1

    works, keep up the good work man

  • @unicornsteroids
    @unicornsteroids 2 роки тому +5

    The shaders on this video makes your course my next purchase.
    Amazing video!

  • @NaiyoGames
    @NaiyoGames 2 роки тому +5

    Everything sucks event me. *proceeds to create a masterpiece.*

  • @paulo1940
    @paulo1940 8 місяців тому

    I was quite hesitant on the artistic choice of placing random bleak large blocks on the map until you added those effects, dang those were cool!

  • @loun.exXe3
    @loun.exXe3 2 роки тому +2

    Awesome video! Thank you!

  • @Skeffles
    @Skeffles 2 роки тому +1

    Looks fantastic!

  • @chamonmath7688
    @chamonmath7688 2 роки тому +2

    Simon dev always has great explanation while going through his process, and I always get a good laugh at some of his dialogue. Lol, stay awesome

  • @cabelogold6687
    @cabelogold6687 2 роки тому +2

    Very well explained!

  • @giorgijankhoteli5803
    @giorgijankhoteli5803 2 роки тому +1

    damn that sky looks so amazing great job with that

  • @nurazizalimustofa5087
    @nurazizalimustofa5087 2 роки тому +1

    Thank you man for sharing this stuff

  • @Fallen_Ninja
    @Fallen_Ninja 2 роки тому +2

    Missed you bro

  • @josh_can_annimate3108
    @josh_can_annimate3108 2 роки тому +1

    You deserve much more recognition. Great video

  • @TheAwesomeTrunk
    @TheAwesomeTrunk 2 роки тому +2

    How cool! Good job.

  • @amestresys9175
    @amestresys9175 2 роки тому +2

    WHAAAT A SKILL ... incredible

  • @korniychuk
    @korniychuk 2 місяці тому

    Wow! It's incredible!!! Thanks for this example!!!

  • @LikezYou
    @LikezYou 2 роки тому +1

    Love your videos, keep it up! :D

  • @srsherman7
    @srsherman7 Рік тому

    Im going to point out and draw focus to how he canadianly says deckulls for decals... only because im jealous of how casual he makes this whole thing feel.. for real though I love watching your dev progress it's next level

  • @hamsteroncoffee
    @hamsteroncoffee Рік тому +2

    Woowww, this looks amazing 😍! Wish I had those skills or at least half of them 😅 - you make complicated things look so easy

  • @crowbr
    @crowbr 2 роки тому +3

    Nice!! Amazing work, pls make a video about customize characters, like put armor or clothes in character.

  • @swoorp
    @swoorp 2 роки тому +4

    Yay it's finally out!

  • @danser_theplayer01
    @danser_theplayer01 3 місяці тому

    This dude made a first person viewed 3d scene in javascript AT THE VERY BEGINNING and called it *easy.*

  • @Di4Fourr
    @Di4Fourr 2 роки тому +2

    hanks lot Sir.. You helping us..

  • @IxZOMBxI
    @IxZOMBxI 2 роки тому +1

    You are very good at explaining things. keep it up thank u

  • @GregoryTheGr8ster
    @GregoryTheGr8ster 2 роки тому +2

    Also, I really dig your tutorials. The only downside is that I learn how far behind I am in algorithms and whatnot. That has been my problem in game development since I started.

    • @simondev758
      @simondev758  2 роки тому

      Game development takes a lonngggg time to because of the breadth of knowledge required. The nice thing is, it makes it fun to learn all of it.

    • @GregoryTheGr8ster
      @GregoryTheGr8ster 2 роки тому

      @@simondev758 Oh yes, modern 3D games are so much more complex than when I first started in 1989. Those games are now known as "pixel art" games. How funny!

    • @GregoryTheGr8ster
      @GregoryTheGr8ster 2 роки тому

      @@simondev758 Also, did you ever see Ultima Underworld? It was the first.

  • @nikkossta
    @nikkossta 2 роки тому +1

    "I'm not a violent guy" "I used Doom Ethernal as inspiration". Nice

  • @ibingeyt6077
    @ibingeyt6077 Рік тому +2

    I would title the video “I Tried Making an FPS Game in Java script”

  • @kasali2739
    @kasali2739 2 роки тому +6

    impressiv!
    Those spiders brought me to fresh idea for next tutorial, how is about coding on skeletal meshes? (procedural animation, equipment using local matrices of bones for position etc.)
    This thing can be found for unity but there is nothing for threjs out there

  • @robertocarlosfarfansanchez6111
    @robertocarlosfarfansanchez6111 2 роки тому

    where I’d record one track of the soft and than use a second Edison to record scrubbing through the soft to mimic a wave table.

  • @LuisCassih
    @LuisCassih 2 роки тому +1

    Every time you do something it's like those Minecraft videos when they said "I did some mining off camera" and comes with an entirely new scene.
    Anyways, amazing video, I would like to see a more detail explanation on the skybox, looks really good.

  • @cyrusguest4975
    @cyrusguest4975 2 роки тому +3

    the way you pronounced decal makes me want to cry

  • @M.Ibrahim35874
    @M.Ibrahim35874 2 роки тому +2

    Will stay tuned to your channal! Cheers!

  • @ionutrosca6326
    @ionutrosca6326 2 роки тому +2

    TNice tutorials comnt from you is legendary. Uncomplicated like your video!!!

  • @billcolak5253
    @billcolak5253 2 роки тому +2

    absolutely unreal!

  • @rodrigofernandes6449
    @rodrigofernandes6449 2 роки тому +4

    Wow. Can you make a full tutorial on this?

  • @cmcdonough2
    @cmcdonough2 2 роки тому +1

    Amazing content. Thanks for sharing your knowledge.

  • @d0c_dev
    @d0c_dev 2 роки тому +3

    Wow you make this look easy even though it is not, got no idea how to write JS though

  • @mtxar
    @mtxar 2 роки тому +2

    much respect as always, :)

  • @Ralster
    @Ralster 8 місяців тому +2

    How did you go from having a single main.js file handling mostly everything in the first two minutes, then suddenly have an entire tree of controllers and stuff like that !?!?

  • @KamranWali
    @KamranWali 2 роки тому +4

    This is super kool. Really like how you made the game and never knew using Javascript and Browser would give such detailed game. The movement looks good. The shader is spot on. Also the UI are on point. This looks like a really good game. keep it up! :)

  • @spaceymen
    @spaceymen 2 роки тому +1

    Excellent stuff

  • @TurtleFul
    @TurtleFul 2 роки тому +5

    Love your videos! Keep up the good work. Your experements are always interesting to watch.
    I would love to see a video about the performance difference between a JS/web based game like this and an in engine one like in Gdot or Unity.

  • @godbibo
    @godbibo 2 роки тому +2

    wow what a nice video !

  • @ringosvirtualworld9027
    @ringosvirtualworld9027 Місяць тому

    Excellent job 👍👍👍

  • @bruniomhars
    @bruniomhars 2 роки тому +3

    Man tNice tutorials is on of the best tutorial in general on youtube. Clear, simple, constant, good to listen. Thank you for sharing.

  • @FaislQurishi
    @FaislQurishi 10 місяців тому

    I still await the "I make a third person shooter" lol, miss your videos Simon hope life isnt getting too busy

  • @atharvkumar2564
    @atharvkumar2564 2 роки тому +2

    It's cool as hell

  • @davidmurphy563
    @davidmurphy563 2 роки тому +11

    Ok, that was really impressive. JS did a surprisingly good job. Maybe I shouldn't be so mean to it all the time.

    • @Retrofire-47
      @Retrofire-47 2 роки тому +2

      everyone knocks JavaScript for no reason... js can literally create Skyrim... if you had an overzealous game dev at the helm

    • @TopBagon
      @TopBagon 2 роки тому +4

      @@Retrofire-47 so can assembly. it's just not a great choice

    • @Retrofire-47
      @Retrofire-47 2 роки тому +3

      @@TopBagon What would be your suggestion for "high-production web" game development? WebGL/WebGPU, Canvas, something else entirely? Or do you just dislike the entire JavaScript language for game dev?

    • @TopBagon
      @TopBagon 2 роки тому +3

      @@Retrofire-47 nah I think JS (or TS in particular) can be great for 2D web game development but it's way better to create 3D games in unity/ue5

  • @andrewallbright
    @andrewallbright 2 роки тому +2

    Finite state machines... The every man's crude game entity AI.

  • @Nubbley
    @Nubbley 2 роки тому +1

    im sooo thankful for blueprints lol.

    • @simondev758
      @simondev758  2 роки тому +1

      I dabbled in UE4 a bit. Blueprints are nice but man it takes forever to do anything with them.

  • @g_a_b_b_o-gabbopower5134
    @g_a_b_b_o-gabbopower5134 2 роки тому

    willing to learn. Unless you already understand setups, then I gues sit's gonna be easier, but as a classically trained pianist I was blown

  • @guccidevel
    @guccidevel Рік тому +3

    bro my ass is still making black scenes with cubes 💀

  • @zxc3387
    @zxc3387 2 роки тому +2

    It's so cool, dude!
    Looking forward to the source code for educational purposes.

  • @jasonl9266
    @jasonl9266 8 місяців тому

    With javascript you can make an online multiplayer , since it's for the web ,I'm sure it would be like a native language for such workload . Cool tutorial though!

  • @wesleytiago4121
    @wesleytiago4121 2 роки тому

    Worked smoothly, tysm

  • @mikaelprevitera9552
    @mikaelprevitera9552 2 роки тому

    this is going to be great!

  • @rajsonu3156
    @rajsonu3156 2 роки тому

    Oh.. these are really good

  • @tutosrive
    @tutosrive 2 роки тому +1

    thank you so much , it worked

  • @WalmartVaxei
    @WalmartVaxei 2 роки тому +2

    grandpa of gamedev

  • @anthonymaacaron2313
    @anthonymaacaron2313 8 місяців тому +1

    You just earned a sub Could you make a tutorial or share the code??

  • @Variapolis
    @Variapolis 2 роки тому +5

    More and more engines and frameworks for games seem to be slowly moving to CSS and HTML for UI. It's pretty neat IMO.
    Some examples include:
    CS:GO
    Source 2 Engine
    Unity's Upcoming UI Toolkit (UXML)
    S&Box
    Escape from Tarkov

  • @ITR
    @ITR 2 роки тому

    Did you try checking how many enemies shooting you could have at once? I feel like javascript would have huge performance issues in fpses since the collision checks tend to stack up, so it'd be interesting to see how well the engine does.

    • @simondev758
      @simondev758  2 роки тому

      I didn't check, but I kinda doubt it'd be a big issue. The physics engine is compiled from C++ to wasm, so "most" of the speed is theoretically retained. After that, calling raycast from JS a bunch of times shouldn't be that costly.

    • @ITR
      @ITR 2 роки тому

      @@simondev758 Makes sense

  • @primestryker
    @primestryker 2 роки тому

    ITS WORK, its really helpful

  • @realfl495
    @realfl495 11 місяців тому

    Let's do a game in javascript
    >proceeds to write shader code

  • @FPdesignfab
    @FPdesignfab 2 роки тому

    Awesome. Can you do this with a Rally Car Racing game? Where the player can actually control 4 wheel drive power slides around corners?

  • @julianeprado9691
    @julianeprado9691 2 роки тому

    I hope you post a video with all the adobe cracks. As always, you are the best, the crack works great

  • @Okyo01
    @Okyo01 2 роки тому +1

    thank u helped me a lot

  • @MartinAlix
    @MartinAlix 2 роки тому +2

    Great video as usual!
    Have you tried Rapier and React-three-fiber?

  • @stadnikds
    @stadnikds 8 місяців тому +1

    "The nice thing about JS is that I can do this all in HTML and CSS" - says noone and never :D

  • @Alice_Longinuse
    @Alice_Longinuse 2 роки тому +2

    Have you try webgpu ? You should make video about it !

    • @simondev758
      @simondev758  2 роки тому +1

      Yeah it's 100% on my list :)

  • @drawmaster77
    @drawmaster77 2 роки тому +1

    incredible.

  • @AwgustRushOfficial
    @AwgustRushOfficial Рік тому +1

    You probably get this all the time but…… You did a great job for JavaScript mate well done 5⭐️

  • @Desopolis
    @Desopolis 2 роки тому +1

    Can’t wait to see the code, your first person player controller has evolved into probably the best around so I actually gasped when you said you started from scratch instead of copy pasting your old world like in other videos…

  • @mohsinrahman8391
    @mohsinrahman8391 Рік тому +1

    Incredible

  • @rizoscreativosofficial8
    @rizoscreativosofficial8 2 роки тому +1

    It's just awesome

  • @sad_man_no_talent
    @sad_man_no_talent 7 місяців тому

    I ma now use react and tailwind for the ui

  • @StreeTraceuresvideos
    @StreeTraceuresvideos Місяць тому

    Do you have tutorial how to make game like this? and you keep developing this game and create effect animation like granate?

  • @eftifeev
    @eftifeev 2 роки тому +2

    very good

  • @Mister_Man
    @Mister_Man 2 роки тому +3

    Do you own a VR headset by chance? Would be awesome to see what you can do with three.js + WebXR

    • @simondev758
      @simondev758  2 роки тому +5

      I don't, but I feel like this gives me a very good excuse to buy one!

    • @Mohta69
      @Mohta69 2 роки тому +1

      @@simondev758 haha yes

  • @rakshitshetty6958
    @rakshitshetty6958 Рік тому

    Hi Simon, in this project are you using 'FirstPersonControls' or
    'PerspectiveCamera' and then listening to keyboard and mouse inputs.

    • @simondev758
      @simondev758  Рік тому

      It's using the first person controls I built in my tutorial.

    • @rakshitshetty6958
      @rakshitshetty6958 Рік тому

      @@simondev758 okay, got it 😁

  • @VirSpectabilis
    @VirSpectabilis Рік тому

    "The doc suck, the example suck, everythings sucks..." Haha) This is how I felt when I was working with React Native)

  • @danielfirminovillaverde7794
    @danielfirminovillaverde7794 2 роки тому +1

    Works good, tnx

  • @yresze2885
    @yresze2885 2 роки тому +2

    So perfect

  • @Vindettacon
    @Vindettacon 3 місяці тому

    Great video. You mentioned sharing the repo on twitter? Either I'm looking at the wrong twitter post or it wasn't there. Would you mind sharing a link?

  • @davidmcbride5357
    @davidmcbride5357 2 роки тому

    if you ask me you need to add some level editing tools like how people made levels in halo 3

  • @bigmistqke
    @bigmistqke 2 роки тому +1

    Would love to see an episode on multiplayer. It's on the web after all.

    • @simondev758
      @simondev758  2 роки тому +1

      Yes!

    • @bigmistqke
      @bigmistqke 2 роки тому

      @@simondev758 oooooo 👀👀👀👀 exciting!

  • @robertonome2448
    @robertonome2448 2 роки тому +2

    you sound like Saul Goodman if he was a gamedev