Тёмный

I Tried Making an FPS Game in JavaScript 

SimonDev
Подписаться 185 тыс.
Просмотров 124 тыс.
50% 1

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

Наука

Опубликовано:

 

21 июл 2022

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 263   
@simondev758
@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
@crowbr Год назад
nice!
@c0nsumption
@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
@simondev758 Год назад
@@c0nsumption Yep, really depends on interest. I'd be happy to make a multi-hour version available.
@c0nsumption
@c0nsumption Год назад
@@simondev758 👏🏽 awesome. If you end up going for it please make an announcement as I’m for sure signing up!!!
@katsurakotaro
@katsurakotaro Год назад
voice sounds like text to speech
@Retrofire-47
@Retrofire-47 Год назад
this guy makes me feel like the label "beginner" is far too generous for my current skill level
@socio637
@socio637 Год назад
yeah hes a wizard. dont be dejected though, you could be too
@somefin3322
@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
@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
@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
@baguette2652 Год назад
Ever since I discovered your channel, I became super motivated by your creations. Thank you for bringing such awesome content to us! 🔥
@SuperPicolin0
@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
@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
@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
@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
@werrutkyupnext Год назад
damn I wanna learn javascript this is like really really hard?
@anomiedesign5030
@anomiedesign5030 17 дней назад
@@werrutkyupnext how is it going?
@paulo1940
@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
@PotatoGodzilla Год назад
I love those three js videos keep it up dude you're awesome! :)
@ViciousViscount
@ViciousViscount Год назад
That's pretty much Quake III Arena. I LOVE it.
@chamonmath7688
@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
@hamsteroncoffee
@hamsteroncoffee Год назад
Woowww, this looks amazing 😍! Wish I had those skills or at least half of them 😅 - you make complicated things look so easy
@oaksBFL
@oaksBFL Год назад
This tutorial is amazing and you are really good at teaching !! great job sir !
@oaksBFL
@oaksBFL Год назад
hackers in my acc i did not comment this sorry bro
@kosa-tv
@kosa-tv Год назад
Great idea dude. Like always, not disappointing content.
@jchaloupka007
@jchaloupka007 Год назад
Damn, that’s amazing, love it!
@cmcdonough2
@cmcdonough2 Год назад
Amazing content. Thanks for sharing your knowledge.
@chonkydog6262
@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
@IxZOMBxI
@IxZOMBxI Год назад
You are very good at explaining things. keep it up thank u
@nurazizalimustofa5087
@nurazizalimustofa5087 Год назад
Thank you man for sharing this stuff
@TurtleFul
@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
@simondev758 Год назад
That is an AWESOME idea!
@loun.exXe3
@loun.exXe3 Год назад
Awesome video! Thank you!
@covenantersoldier9165
@covenantersoldier9165 Год назад
Tip of the hat top you, truly. well done. you truly are a great online tutor.
@crowbr
@crowbr Год назад
Nice!! Amazing work, pls make a video about customize characters, like put armor or clothes in character.
@unicornsteroids
@unicornsteroids Год назад
The shaders on this video makes your course my next purchase. Amazing video!
@LikezYou
@LikezYou Год назад
Love your videos, keep it up! :D
@minayoussef5730
@minayoussef5730 Год назад
works, keep up the good work man
@KamranWali
@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! :)
@Skeffles
@Skeffles Год назад
Looks fantastic!
@giorgijankhoteli5803
@giorgijankhoteli5803 Год назад
damn that sky looks so amazing great job with that
@cabelogold6687
@cabelogold6687 Год назад
Very well explained!
@Fallen_Ninja
@Fallen_Ninja Год назад
Missed you bro
@Di4Fourr
@Di4Fourr Год назад
hanks lot Sir.. You helping us..
@Mohta69
@Mohta69 Год назад
That's dope dude
@TheAwesomeTrunk
@TheAwesomeTrunk Год назад
How cool! Good job.
@spaceymen
@spaceymen Год назад
Excellent stuff
@ionutrosca6326
@ionutrosca6326 Год назад
TNice tutorials comnt from you is legendary. Uncomplicated like your video!!!
@srsherman7
@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
@wesleytiago4121
@wesleytiago4121 Год назад
Worked smoothly, tysm
@amestresys9175
@amestresys9175 Год назад
WHAAAT A SKILL ... incredible
@LuisCassih
@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.
@mulualemtekle6094
@mulualemtekle6094 Год назад
much respect as always, :)
@kasali2739
@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
@tutosrivegamerTRG
@tutosrivegamerTRG Год назад
thank you so much , it worked
@billcolak5253
@billcolak5253 Год назад
absolutely unreal!
@NaiyoGames
@NaiyoGames Год назад
Everything sucks event me. *proceeds to create a masterpiece.*
@swoorp
@swoorp Год назад
Yay it's finally out!
@ibrahimgaming3587
@ibrahimgaming3587 Год назад
Will stay tuned to your channal! Cheers!
@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.
@d0c_dev
@d0c_dev Год назад
Wow you make this look easy even though it is not, got no idea how to write JS though
@rodrigofernandes6449
@rodrigofernandes6449 Год назад
Wow. Can you make a full tutorial on this?
@rajsonu3156
@rajsonu3156 Год назад
Oh.. these are really good
@bruniomhars
@bruniomhars Год назад
Man tNice tutorials is on of the best tutorial in general on youtube. Clear, simple, constant, good to listen. Thank you for sharing.
@maximumcockage6503
@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.
@primestryker
@primestryker Год назад
ITS WORK, its really helpful
@mikaelprevitera9552
@mikaelprevitera9552 Год назад
this is going to be great!
@Okyo01
@Okyo01 Год назад
thank u helped me a lot
@danielfirminovillaverde7794
Works good, tnx
@mohsinrahman8391
@mohsinrahman8391 6 месяцев назад
Incredible
@godbibo
@godbibo Год назад
wow what a nice video !
@atharvkumar2564
@atharvkumar2564 Год назад
It's cool as hell
@josh_can_annimate3108
@josh_can_annimate3108 Год назад
You deserve much more recognition. Great video
@g_a_b_b_o-gabbopower5134
@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
@wirten69
@wirten69 Год назад
working fine thank you
@julianeprado9691
@julianeprado9691 Год назад
I hope you post a video with all the adobe cracks. As always, you are the best, the crack works great
@yresze2885
@yresze2885 Год назад
So perfect
@rizoscreativosofficial8
@rizoscreativosofficial8 Год назад
It's just awesome
@Nubbley
@Nubbley Год назад
im sooo thankful for blueprints lol.
@simondev758
@simondev758 Год назад
I dabbled in UE4 a bit. Blueprints are nice but man it takes forever to do anything with them.
@jasonl9266
@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!
@GregoryTheGr8ster
@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
@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
@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
@GregoryTheGr8ster Год назад
@@simondev758 Also, did you ever see Ultima Underworld? It was the first.
@FPdesignfab
@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?
@drawmaster77
@drawmaster77 Год назад
incredible.
@Variapolis
@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
@joaquindomenech7541 Год назад
Truly? On desktop apps?
@rottenapple9588
@rottenapple9588 Год назад
That’s only two engines
@MegalithicEnt
@MegalithicEnt Год назад
NICE!
@MartinAlix
@MartinAlix Год назад
Great video as usual! Have you tried Rapier and React-three-fiber?
@simondev758
@simondev758 Год назад
Nope
@FaislQurishi
@FaislQurishi 3 месяца назад
I still await the "I make a third person shooter" lol, miss your videos Simon hope life isnt getting too busy
@emreonal8221
@emreonal8221 Год назад
thx work
@baoleizhao4614
@baoleizhao4614 Год назад
amazing
@eftifeev
@eftifeev Год назад
very good
@ibingeyt6077
@ibingeyt6077 Год назад
I would title the video “I Tried Making an FPS Game in Java script”
@simondev758
@simondev758 Год назад
Done :)
@cyrusguest4975
@cyrusguest4975 Год назад
the way you pronounced decal makes me want to cry
@simondev758
@simondev758 Год назад
Deckkkkkle
@zxc3387
@zxc3387 Год назад
It's so cool, dude! Looking forward to the source code for educational purposes.
@anthonymaacaron2313
@anthonymaacaron2313 Месяц назад
You just earned a sub Could you make a tutorial or share the code??
@nikkossta
@nikkossta Год назад
"I'm not a violent guy" "I used Doom Ethernal as inspiration". Nice
@it_is_random
@it_is_random Месяц назад
I ma now use react and tailwind for the ui
@dre4085
@dre4085 Год назад
Hey simon, nice work!! where can we find the repo?
@stadnikds
@stadnikds Месяц назад
"The nice thing about JS is that I can do this all in HTML and CSS" - says noone and never :D
@andrewallbright658
@andrewallbright658 Год назад
Finite state machines... The every man's crude game entity AI.
@quasicode6954
@quasicode6954 Год назад
Simon, you should do a video on how much experience it took you to make massive projects like this with ease. It directly inspired me to recently release my own Three.js library called maze3d. Looking at the code you can write is daunting as I have so much to learn. How do you do it? How many years did it take to write this stuff?
@WalmartVaxei
@WalmartVaxei Год назад
grandpa of gamedev
@simondev758
@simondev758 Год назад
Aw man, I'm not that old yet.
@Desopolis
@Desopolis Год назад
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…
@SchweinchenHorst
@SchweinchenHorst 4 месяца назад
Wow!
@boot-strapper
@boot-strapper 8 месяцев назад
do you think I could make a low poly multiplayer game with js? I want to recreate an old game I used to love.
@AwgustRushOfficial
@AwgustRushOfficial Год назад
You probably get this all the time but…… You did a great job for JavaScript mate well done 5⭐️
@VirSpectabilis
@VirSpectabilis 7 месяцев назад
"The doc suck, the example suck, everythings sucks..." Haha) This is how I felt when I was working with React Native)
@ITR
@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
@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
@ITR Год назад
@@simondev758 Makes sense
@Cos3D
@Cos3D 10 месяцев назад
would this game only work in a browser or also natively on pc ?
@jorgeenriquelayibanez814
@jorgeenriquelayibanez814 Год назад
how do i add a i downloaded to my soft soft so i can resetup it?
@axfedy5300
@axfedy5300 Год назад
so sNice tutorialt like that
@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 😁
@guccidevel
@guccidevel Год назад
bro my ass is still making black scenes with cubes 💀
@Ralster
@Ralster Месяц назад
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 !?!?
Далее
I Tried Making a 3D MMORPG Game in JavaScript
16:48
Просмотров 599 тыс.
nyan.mp3 - Хватит мне звонить #nyanmp3
00:16
creating shapes and moving them in manim
11:13
I Tried to Make Star Wars Battlefront II in JavaScript
13:32
How Big Budget AAA Games Render Clouds
10:45
Просмотров 256 тыс.
I made an entire OS that only runs Tetris
22:37
Просмотров 1,6 млн
The Weird History of JavaScript
12:09
Просмотров 1,2 млн
I made an EVEN BETTER Minecraft
12:30
Просмотров 319 тыс.
Sprite Animation in JavaScript
46:05
Просмотров 151 тыс.
Spatial Hash Grids & Tales from Game Development
19:08
Просмотров 111 тыс.
КЛИЕНТ СЛОМАЛ НАУШНИКИ ? 😳
0:51
Делаю деньги и кайфую
0:59
Просмотров 48 тыс.