I Tried Making an FPS Game in JavaScript
Рет қаралды 123,393
Жыл бұрынGLSL Course: simondev.teachable.com/p/glsl...
Support me on Patreon: / simondevyt
Follow me on:
Twitter: / iced_coffee_dev
Instagram: / beer_and_code
Here I tried making a 3D first person shooter, all in JavaScript and Three.js. I took some code from a couple of my other tutorials, like first person camera controls and ammo.js stuff, bolted on a few free things from places like Sketchfab, and added some shooter gameplay. The code could totally be used as a starting point for somebody else wanting to make a little browser FPS.
Basically, I tried to code up a first person shooter skeleton in a few days, using nothing more than JavaScript and the browser. All the elements, HUD, etc. are in there and in workable states. There's tonnes more you could do obviously, but I think this can help you understand how you might structure things and use something like Three.js to get started on these types of projects. Making a basic first person shooter, even in JavaScript, isn't too difficult.
Droid Thing from Quaternius: quaternius.com/
"Anubis Bust" (skfb.ly/6RwNp) by lucasthx88 is licensed under Creative Commons Attribution (creativecommons.org/licenses/b....
"K-VRC | Love, Death + Robots" (skfb.ly/6XCCo) by ArbitraryCanary is licensed under Creative Commons Attribution (creativecommons.org/licenses/b....
"Buddha" (skfb.ly/QGxw) by hullo is licensed under Creative Commons Attribution (creativecommons.org/licenses/b....
"Human Skull" (skfb.ly/6RsWT) by Sergey Egelsky is licensed under Creative Commons Attribution (creativecommons.org/licenses/b....
"Heavy Assault Rifle" (skfb.ly/6RGPy) by pixelgrapher is licensed under Creative Commons Attribution (creativecommons.org/licenses/b....
@simondev758 Жыл бұрын
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 Жыл бұрын
nice!
@c0nsumption Жыл бұрын
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 Жыл бұрын
@@c0nsumption Yep, really depends on interest. I'd be happy to make a multi-hour version available.
@c0nsumption Жыл бұрын
@@simondev758 👏🏽 awesome. If you end up going for it please make an announcement as I’m for sure signing up!!!
@katsurakotaro Жыл бұрын
voice sounds like text to speech
@Retrofire-47 Жыл бұрын
this guy makes me feel like the label "beginner" is far too generous for my current skill level
@socio637 Жыл бұрын
yeah hes a wizard. dont be dejected though, you could be too
@somefin3322 Жыл бұрын
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 Жыл бұрын
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 9 ай бұрын
This is one of the few of the most impressive game design videos I've ever seen! Please, carry on! You. Are. Amazing!
@baguette2652 Жыл бұрын
Ever since I discovered your channel, I became super motivated by your creations. Thank you for bringing such awesome content to us! 🔥
@SuperPicolin0 Жыл бұрын
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 Жыл бұрын
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 Жыл бұрын
@@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 Жыл бұрын
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 Жыл бұрын
damn I wanna learn javascript this is like really really hard?
@anomiedesign5030 5 күн бұрын
@@werrutkyupnext how is it going?
@paulo1940 Ай бұрын
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!
@PotatoGodzilla Жыл бұрын
I love those three js videos keep it up dude you're awesome! :)
@chamonmath7688 Жыл бұрын
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
@chonkydog6262 Жыл бұрын
Wow! This is so cool! I would love to use this codebase as a beginning for a multiplayer FPS game. Running around and destroying people online would be so cool
@cmcdonough2 Жыл бұрын
Amazing content. Thanks for sharing your knowledge.
@hamsteroncoffee Жыл бұрын
Woowww, this looks amazing 😍! Wish I had those skills or at least half of them 😅 - you make complicated things look so easy
@oaksBFL Жыл бұрын
This tutorial is amazing and you are really good at teaching !! great job sir !
@oaksBFL Жыл бұрын
hackers in my acc i did not comment this sorry bro
@ViciousViscount Жыл бұрын
That's pretty much Quake III Arena. I LOVE it.
@IxZOMBxI Жыл бұрын
You are very good at explaining things. keep it up thank u
@kosa-tv Жыл бұрын
Great idea dude. Like always, not disappointing content.
@jchaloupka007 Жыл бұрын
Damn, that’s amazing, love it!
@covenantersoldier9165 Жыл бұрын
Tip of the hat top you, truly. well done. you truly are a great online tutor.
@nurazizalimustofa5087 Жыл бұрын
Thank you man for sharing this stuff
@crowbr Жыл бұрын
Nice!! Amazing work, pls make a video about customize characters, like put armor or clothes in character.
@loun.exXe3 Жыл бұрын
Awesome video! Thank you!
@TurtleFul Жыл бұрын
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.
@simondev758 Жыл бұрын
That is an AWESOME idea!
@giorgijankhoteli5803 Жыл бұрын
damn that sky looks so amazing great job with that
@Skeffles Жыл бұрын
Looks fantastic!
@LikezYou Жыл бұрын
Love your videos, keep it up! :D
@cabelogold6687 Жыл бұрын
Very well explained!
@minayoussef5730 Жыл бұрын
works, keep up the good work man
@Di4Fourr Жыл бұрын
hanks lot Sir.. You helping us..
@TheAwesomeTrunk Жыл бұрын
How cool! Good job.
@Mohta69 Жыл бұрын
That's dope dude
@kasali2739 Жыл бұрын
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
@spaceymen Жыл бұрын
Excellent stuff
@ionutrosca6326 Жыл бұрын
TNice tutorials comnt from you is legendary. Uncomplicated like your video!!!
@LuisCassih Жыл бұрын
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.
@KamranWali Жыл бұрын
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! :)
@srsherman7 10 ай бұрын
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
@unicornsteroids Жыл бұрын
The shaders on this video makes your course my next purchase. Amazing video!
@wesleytiago4121 Жыл бұрын
Worked smoothly, tysm
@NaiyoGames Жыл бұрын
Everything sucks event me. *proceeds to create a masterpiece.*
@tutosrivegamerTRG Жыл бұрын
thank you so much , it worked
@bruniomhars Жыл бұрын
Man tNice tutorials is on of the best tutorial in general on youtube. Clear, simple, constant, good to listen. Thank you for sharing.
@mulualemtekle6094 Жыл бұрын
much respect as always, :)
@swoorp Жыл бұрын
Yay it's finally out!
@ibrahimgaming3587 Жыл бұрын
Will stay tuned to your channal! Cheers!
@ibingeyt6077 Жыл бұрын
I would title the video “I Tried Making an FPS Game in Java script”
@simondev758 Жыл бұрын
Done :)
@billcolak5253 Жыл бұрын
absolutely unreal!
@d0c_dev Жыл бұрын
Wow you make this look easy even though it is not, got no idea how to write JS though
@amestresys9175 Жыл бұрын
WHAAAT A SKILL ... incredible
@Fallen_Ninja Жыл бұрын
Missed you bro
@rajsonu3156 Жыл бұрын
Oh.. these are really good
@nikkossta Жыл бұрын
"I'm not a violent guy" "I used Doom Ethernal as inspiration". Nice
@saberwulf6857 Жыл бұрын
ITS WORK, its really helpful
@Okyo01 Жыл бұрын
thank u helped me a lot
@GregoryTheGr8ster Жыл бұрын
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 Жыл бұрын
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 Жыл бұрын
@@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 Жыл бұрын
@@simondev758 Also, did you ever see Ultima Underworld? It was the first.
@rodrigofernandes6449 Жыл бұрын
Wow. Can you make a full tutorial on this?
@mikaelprevitera9552 Жыл бұрын
this is going to be great!
@atharvkumar2564 Жыл бұрын
It's cool as hell
@cyrusguest4975 Жыл бұрын
the way you pronounced decal makes me want to cry
@simondev758 Жыл бұрын
Deckkkkkle
@mohsinrahman8391 5 ай бұрын
Incredible
@godbibo Жыл бұрын
wow what a nice video !
@robertocarlosfarfansanchez6111 Жыл бұрын
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.
@Variapolis Жыл бұрын
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
@joaquindomenech7541 Жыл бұрын
Truly? On desktop apps?
@rottenapple9588 Жыл бұрын
That’s only two engines
@yresze2885 Жыл бұрын
So perfect
@wirten69 Жыл бұрын
working fine thank you
@stadnikds Ай бұрын
"The nice thing about JS is that I can do this all in HTML and CSS" - says noone and never :D
@rizoscreativosofficial8 Жыл бұрын
It's just awesome
@g_a_b_b_o-gabbopower5134 Жыл бұрын
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
@MartinAlix Жыл бұрын
Great video as usual! Have you tried Rapier and React-three-fiber?
@simondev758 Жыл бұрын
Nope
@maximumcockage6503 8 ай бұрын
Babylon just implemented Havok physics, and tests show it's got way better performance than ammo. Have you considered giving it a try? Might be fun for something like a Gary's Mod styled sandbox since Half Life 2 (the game Gary's Mod is modded from) uses Havok physics.
@julianeprado9691 Жыл бұрын
I hope you post a video with all the adobe cracks. As always, you are the best, the crack works great
@drawmaster77 Жыл бұрын
incredible.
@dre4085 Жыл бұрын
Hey simon, nice work!! where can we find the repo?
@eftifeev Жыл бұрын
very good
@guccidevel Жыл бұрын
bro my ass is still making black scenes with cubes 💀
@MegalithicEnt Жыл бұрын
NICE!
@danielfirminovillaverde7794 Жыл бұрын
Works good, tnx
@jasonl9266 Ай бұрын
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!
@FaislQurishi 2 ай бұрын
I still await the "I make a third person shooter" lol, miss your videos Simon hope life isnt getting too busy
@baoleizhao4614 Жыл бұрын
amazing
@realfl495 3 ай бұрын
Let's do a game in javascript >proceeds to write shader code
@FPdesignfab Жыл бұрын
Awesome. Can you do this with a Rally Car Racing game? Where the player can actually control 4 wheel drive power slides around corners?
@Nubbley Жыл бұрын
im sooo thankful for blueprints lol.
@simondev758 Жыл бұрын
I dabbled in UE4 a bit. Blueprints are nice but man it takes forever to do anything with them.
@andrewallbright658 Жыл бұрын
Finite state machines... The every man's crude game entity AI.
@emreonal8221 Жыл бұрын
thx work
@davidmurphy563 Жыл бұрын
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 Жыл бұрын
everyone knocks JavaScript for no reason... js can literally create Skyrim... if you had an overzealous game dev at the helm
@TopBagon Жыл бұрын
@@Retrofire-47 so can assembly. it's just not a great choice
@Retrofire-47 Жыл бұрын
@@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 Жыл бұрын
@@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
@AwgustRushOfficial Жыл бұрын
You probably get this all the time but…… You did a great job for JavaScript mate well done 5⭐️
@WalmartVaxei Жыл бұрын
grandpa of gamedev
@simondev758 Жыл бұрын
Aw man, I'm not that old yet.
@andrewpozenel2931 Жыл бұрын
Where can i get this "little colored cubes changing colors" shader?? I'd like to use it in Godot and Unity
@simondev758 Жыл бұрын
I'll post the whole thing to Github at some point, I typically announce it on Twitter once I've had a chance to go through and do any cleanups.
@andrewpozenel2931 Жыл бұрын
@@simondev758 Ok, thanks. will check you out on Twitter and GitHub.
@anthonymaacaron2313 Ай бұрын
You just earned a sub Could you make a tutorial or share the code??
@VirSpectabilis 7 ай бұрын
"The doc suck, the example suck, everythings sucks..." Haha) This is how I felt when I was working with React Native)
@martinemanuel8239 Жыл бұрын
It's f#$- awesome!!!
@Cos3D 10 ай бұрын
would this game only work in a browser or also natively on pc ?
@jorgeenriquelayibanez814 Жыл бұрын
how do i add a i downloaded to my soft soft so i can resetup it?
@it_is_random 21 күн бұрын
I ma now use react and tailwind for the ui
@anonymoussloth6687 Жыл бұрын
Hi, how can we add wall banging functionality to this or in general any fps that uses raycasts for shooting? Also, when we shoot, i imagine raycasts are instantaneous calculations. Then how do you get the effect of the bullet firing and taking a fraction of a sec to hit? The motivation for both these questions is valorant when you can wall bang and when u shoot a gun, you can see the trail and it doesn't hit the instance you shoot (the player can sometimes move out of the way and dodge)
@yaboirairai Жыл бұрын
I’m a web dev not a game dev but I am guessing the way it works is that the client is always Raycasting a cone in the direction the camera is looking. Then when you fire the shot you already know what you’re looking at, so you can invoke different animations depending on what material or entity you are currently aiming at. Some clues that support this is the fact that there is hit detection just looking at an enemy, if I aim at an enemy they appear on radar. Also I vaguely recall in CS there were commands you could use to see these vision lines
@simondev758 Жыл бұрын
If I had to guess, I'd say that you spawn a bullet that travels forward at X velocity every frame, doing a limited raycast on that line segment.
@yaboirairai Жыл бұрын
@@simondev758 I think it’s a cone because of radar detection as well as flashbangs etc
@anonymoussloth6687 Жыл бұрын
@@yaboirairai i just saw a video of tenz playing with noobs and it that the spectators had enabled vision lines which were constant raycasts out from the gun's nozzle. Can you explain why it is a cone? I saw your other comment regarding this but didn't quite understand it PS. The video i am referring to is "which pro can kill more noobs?..." If you watch this, u can clearly see the raycasts enabled constantly so u were right about that
@josh_can_annimate3108 Жыл бұрын
You deserve much more recognition. Great video
@SchweinchenHorst 4 ай бұрын
Wow!
@rakshitshetty6958 Жыл бұрын
Hi Simon, in this project are you using 'FirstPersonControls' or 'PerspectiveCamera' and then listening to keyboard and mouse inputs.
@simondev758 Жыл бұрын
It's using the first person controls I built in my tutorial.
@rakshitshetty6958 Жыл бұрын
@@simondev758 okay, got it 😁
@skkylimits Жыл бұрын
Sensei Simon. Do you have the link to the codebase? My blind eyes can't seem to find it somehow. I would love to take a look at the codebase
@simondev758 Жыл бұрын
Sorry, I've been procrastinating with cleaning that up. I'll get it posted eventually, I always do, just takes me time to make myself sit down and do it. Look for me to announce on twitter.
@skkylimits Жыл бұрын
@@simondev758 I know you will. You always deliver. Studying your code has taken my javascript to the next level and I am forever gratefull. I mean that! You are a huge inspiration. I will wait patiently for updates on your twitter ;))
@NomarRH Жыл бұрын
@@simondev758 No importa que no este limpio, nosotros lo podemos mejorar.
@ITR Жыл бұрын
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 Жыл бұрын
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 Жыл бұрын
@@simondev758 Makes sense
notebook-31
Рет қаралды 86 М.