Тёмный

I Tried to Make Star Wars Battlefront II in JavaScript 

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

Tried building a Starfighter Assault clone, all in JavaScript.
Support me on:
Patreon: / simondevyt
Follow me on:
Twitter: / iced_coffee_dev
Instagram: / beer_and_code
Github: github.com/simondevyoutube/
Here I tried to build a 3D JavaScript game, mostly from scratch, using libraries like Three.js/Ammo.js. This was heavily inspired (very heavily) inspired from the Star Wars: Battlefront II: Starfighter Assault game, which looks way better, but c'mon, this is just one guy and JavaScript. The code could definitely serve as a starting point for a way cooler game.
The goal of the project was to mash together a bunch of elements we've already seen, such as particle systems, third person cameras, player input controls, and introduce a few new things too such as the gamepad API and ammo.js physics support, and a bit of WebAudio through Three.js's API. Hopefully from this, you'll be able to understand how to integrate these various components to build out your own games.
What I'll cover:
* Basic game construction
* Player input, particle systems
* UI Components
* GamePad API
* Three.js and Ammo.js
References:
Inigo Quilez's site, lots of magic on noise and shaders, really the goto reference: iquilezles.org/
Star Wars Battlefront II, very cool game, I assume from the trailers, haven't played it: / eastarwars

Наука

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

 

13 июн 2021

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 413   
@simondev758
@simondev758 2 года назад
Help support me: www.patreon.com/simondevyt
@herewardthewake5433
@herewardthewake5433 2 года назад
Where did you get that space HDRI/cubemap?
@pechgehabt8355
@pechgehabt8355 2 года назад
no thanks
@n8programs733
@n8programs733 3 года назад
Your use of shaders is so spectacular. You do all this advanced texturing and noise without any node-based programming or other GUIs.
@n8dev
@n8dev 3 года назад
wowowoowowow
@blackcitadel37
@blackcitadel37 3 года назад
As they say, knowledge is power.
@aceman0000099
@aceman0000099 2 года назад
It's not much of a leap to go from node programming to code, if you're not dyslexic
@mjs28s
@mjs28s 3 года назад
you need to do some Udemy course for JS games! The current Udemy game selections are nothing like this. typically just bad side scrollers.
@geelemo
@geelemo 3 года назад
we need
@blackcitadel37
@blackcitadel37 2 года назад
It'd be one entire course just for all that physics black magic.
@dominiksmeda7203
@dominiksmeda7203 2 года назад
pleas take my money
@UrielHK
@UrielHK 2 года назад
second that
@theomegamale5335
@theomegamale5335 2 года назад
Id buy it too. You should really consider this.
@alyctro8158
@alyctro8158 3 года назад
This straight looks like the oldschool battlefront game, amazing. Take me back to the glory days Simon.
@AntonioCorrenti
@AntonioCorrenti 3 года назад
Who wants a crossover with Sebastian Lague? SIMONDEV X CODING ADVENTURES
@diegolazcano3934
@diegolazcano3934 3 года назад
Please
@luapmartin
@luapmartin 3 года назад
That would be interesting 🧐
@ivanraulsanchezdiaz7499
@ivanraulsanchezdiaz7499 3 года назад
C# and JS, sounds hard
@danielli3288
@danielli3288 3 года назад
@@ivanraulsanchezdiaz7499 use wasm
@Ab-cj6gl
@Ab-cj6gl 2 года назад
oh it'll be cool
@almostthere6116
@almostthere6116 3 года назад
Sometimes it isn't if you can, it's if you should, but you have my support anyway.
@simondev758
@simondev758 3 года назад
So keep doing everything in js is what I'm hearing?
@Soremwar
@Soremwar 3 года назад
In today's world where you can write the more demanding parts in C++/Rust and the rest of it in JS/typed JS why wouldn't you?
@jimmychoong3014
@jimmychoong3014 2 года назад
Learner here trying to understand- is there a reason why it shouldn't be done? Performance related reason?
@simondev758
@simondev758 2 года назад
@@jimmychoong3014 Historically JS has been a slow language, that's been turning around a lot thanks to work from teams like the V8 team. As mentioned, you can develop parts in other languages (like Rust/C++), or just do the whole thing in JS, or just use Unity at this point. Everything has it's tradeoffs. JS tends to be easier and more forgiving than something like C++, although not as performant. See one of my last videos for a bit of a comparison. If you're interested in my background, I was a game developer for about 10 years, often led optimization on major titles, and was hired at Google for optimization, all C++. These videos are fun because they break the mould a bit, showing that complex games can be built without much trouble in languages you thought weren't capable of it. Ultimately it's up to you to decide what tradeoffs you're willing to live with.
@Merthalophor
@Merthalophor 2 года назад
@@simondev758 JS has one thing going for it that the others don't: It's going to be huge. I think it's pretty plausible that web technology are going to take over 99% of graphical applications. The industry as a whole is moving away from local workstations, and towards cloud based applications that work 100% in the browser. MS Office will become browser based. VS Code runs in Chromium. Discord rund in Chromium. Slack runs in Chromium. Three.js ist just the start of 3d, there will be more & better tools. WASM will bring performant code & a diverse set of compiler front ends to the platform - C, C++, Java, Haskell, OCaml just through llvm alone. And JavaScript will be at the center of it. Modern JavaScript is pretty nice to write with. Transpilers for jsx & reason bring gui features to js that most other languages are still far away from aquiring. There is actually a react port of three.js in fact, if you're interested, called react thee fiber. Blew my mind how well it works. Haven't decided on weather it's good for game programming yet, but at the very least it expands the design space for regular websites to the entire world of 3d. You can literally mix & match html & three.js as you wish, 3d positioning and projection all work the way you'd intuitively expect them to. I'm pretty sure 5, 10 years from now, Windows will be dead, everything will be linux or macosx, but no one will notice because you'll work exclusively from your cloud storage via a fully integrated web browser. File systems will be more intuitive, and most importantly: all front end code will be built using current web technologies.
@julianstorm7722
@julianstorm7722 3 года назад
One of the most inspirational channels on this topic - if not the only one. Thanks for your work Edit: You might not consider yourself an artist but this is definitely a piece of art. Cheers
@Cal97g
@Cal97g 3 года назад
Any similar channels?
@Bluepaccao
@Bluepaccao 3 года назад
Sebastian Lague is great!
@LegoDinoMan
@LegoDinoMan Год назад
9:39 Underrated Futurama joke wasn’t expecting Elzar
@kyou.rocher
@kyou.rocher 3 года назад
"I'm a leaf on the wind" made me cry a little, still got PTSD from that scene
@simondev758
@simondev758 3 года назад
Yeah that one really sticks with you.
@CathrineMacNiel
@CathrineMacNiel 2 года назад
@@simondev758 just like a harpoon would.
@simondev758
@simondev758 2 года назад
Zing!
@MatthiasSchicker
@MatthiasSchicker Год назад
9:22 "Noise is a great subsitute for actual art direction" :D
@stolensentience
@stolensentience 2 года назад
4:07 I’m crapping out particle systems myself as I watch this
@ThunderstruckElectronix
@ThunderstruckElectronix 3 года назад
I'm learning Web Dev and I think it's awesome to see all the cool stuff you can do with js. Cool video 👍
@AssasinZorro
@AssasinZorro Год назад
When you showed your full game, I instantly understood the UI of Freelancer games that highlighted enemy ships and where to aim
@drdonalfons
@drdonalfons 3 года назад
You can export custom properties from Blender to GLTF files like this: 1. In Blender, go to the Settings panel. There, you want to use either the "Object" or "Material" settings (maybe "Mesh" works, too). 2. In those settings, scroll all the way down to "Custom Properties". Click Add 3. Add your custom property. You can add numbers or strings 4. Go to the export GLTF dialog (File > Export > GLTF / GLB) 5. In that window in the "Include" section, hit the checkbox "Custom Properties". 6. When loading the model in ThreeJS, custom properties are available under the object / material (mesh?) in the "userData" property. Keep up the good work! I definitely enjoy your videos - both from the technical level and style!
@simondev758
@simondev758 2 года назад
Sweet, thanks!
@aunyks
@aunyks 3 года назад
Always so impressive. Thanks for sharing this with us!
@gamershow5944
@gamershow5944 2 года назад
I can't believe you made this in JavaScript. It's really good looking. Your very talented to be able to code this together.
@laja6108
@laja6108 3 года назад
This is so cool, I love when you make these videos 🙌🏽
@russiangravy3870
@russiangravy3870 2 года назад
I like how smooth the movement is. Makes the actual game look like 100% lighting and particle-flare.
@Bluepaccao
@Bluepaccao 3 года назад
I love your dedication, awesome work man!
@N_IndratejReddy
@N_IndratejReddy 2 года назад
KID: MY DAD MAKES VIDEO GAMES FOR ME , HE IS A LEGEND.
@dempa3
@dempa3 3 года назад
Very interesting to listen to how you go about making these JavaScript games!
@geelemo
@geelemo 3 года назад
I'm laughing/smiling watching this. especially when I saw the kid playing the game. wow!!!
@danielzaiser
@danielzaiser 3 года назад
Keep on rocking js game dev, you are unique, talented, entertaining, awe inspiring
@Skeffles
@Skeffles 2 года назад
Absolutely fantastic game! I loved the space battles in the now named 'Classic' Star Wars Battlefront 2
@JetLee1544
@JetLee1544 Год назад
Exactly what I was looking for, thank you so much!
@mobslayer211
@mobslayer211 2 года назад
This is where the fun begins I found you through the BOTW inspired rpg earlier. You've seem to have grown a lot in the last 5 months!
@alvesvaren
@alvesvaren 2 года назад
Looks really good, I think adding some not too bright light source reflecting from the planet would make it look even better
@CesarFelipeLopez
@CesarFelipeLopez 2 года назад
Amazing as always👍
@GhorthalonTheDragon
@GhorthalonTheDragon 2 года назад
One of my favorite parts of this is that it uses web audio. And web audio by default uses HRTF for 3d positioning of sounds. So few games do this. I personally think all of them should at least have the option. Once you get used to actual 3d audio you never want to go back. Sound is extremely important. More game devs should be aware of this. Seriously put on some headphones and listen out for the explosions and how they move around. Web audio is epic. I'm very happy it exists. One of the most underappreciated things in web game dev I think.
@simondev758
@simondev758 2 года назад
Yeah I was pleasantly surprised with how three.js integrated that.
@Retrofire-47
@Retrofire-47 Год назад
Sound design has always been disregarded in game design, erroneously I think. Look at every one of the most revered games in video game history, ALL of them, with almost no exceptions, have exceptional OST's, SFX, and ambient immersion.
@viktorjacobsson4006
@viktorjacobsson4006 3 года назад
You can export metadata using the extras property in the gltf. According to the docs for the blender gltf exporter you should be able to check a box exporting custom properties as gltf extras. If I recall correctly, when loading the gltf the data ends up in userdata on the loaded model.
@simondev758
@simondev758 2 года назад
Awesome, thanks!
@dalelandry8787
@dalelandry8787 4 месяца назад
"I'm just gonna crap out some manual particle systems" damned amazing! You sir are an inspiration to say the least, subbed!
@francoisvermeulen706
@francoisvermeulen706 2 года назад
love your work
@IwanPieterse-iwanzbiz
@IwanPieterse-iwanzbiz 2 года назад
Incredible Job. This reminds me of the old Rogue Squadron game.
@drunkenpirate47x81
@drunkenpirate47x81 2 года назад
Man the idea of a web game is just a pain in the ass, like imagine making a responsive game, just the thought of it makes head start hurting
@sanjaysinghbhandari3793
@sanjaysinghbhandari3793 2 года назад
really amazing job ❤️ please put a video where you tell how you know so much, your journey...
@sebajsilva
@sebajsilva 3 года назад
Wow!!! Looks great!
@theFuzzyWarble
@theFuzzyWarble 2 года назад
Awesome inspiration, many thanks... and that Farscape reference in the game!! KUDOS!@# Long Live MOYA!!
@simondev758
@simondev758 2 года назад
I miss that show.
@jet-pack-zombie2258
@jet-pack-zombie2258 2 года назад
Actually really amazing. Simulates halo reach campaign misson and battlefront 2 amazingly great job
@JayanthBagare
@JayanthBagare 2 года назад
Love your work and how you explain them. Just a suggestion, maybe you could cover 2d graphics also and some deep simulations such as fluid dynamics smoke etc. Would love to learn more from you
@GiusePooP
@GiusePooP 2 года назад
10:52 tie fighter smashing into eachother
@jimmyrustle271
@jimmyrustle271 2 года назад
Man I'd go crazy trying to write this in JavaScript instead of TypeScript. Nice job.
@stolensentience
@stolensentience 2 года назад
Surprised no “do a barrel roll!” At the end Great work btw!
@highzenburger1829
@highzenburger1829 3 года назад
Would 100% buy a JS game dev course. Didn't even think this was possible. Stumbled on your videos I'm happy I did.
@UnidayStudio
@UnidayStudio 3 года назад
Amazing video! I have a small tip to help you on 7:06 of the video: You could simply select all the turrets in blender and then use this bpy code to return their locations: [list(obj.location) for obj in bpy.context.selected_objects] To run it, simply open a new blender tab and select the python console (or press shift + f4).
@simondev758
@simondev758 2 года назад
Ooh thanks, I'll give that a try. Didn't even know there was a python console.
@daneilgreaves
@daneilgreaves 2 года назад
Another amazing video
@HereWasDede
@HereWasDede 2 года назад
awesome work
@eduardotobarjaque7758
@eduardotobarjaque7758 Год назад
Really Amazing!!!!
@vegard172
@vegard172 Год назад
haha, love the "Shut up Meg" x)
@infocyde2024
@infocyde2024 2 года назад
You make me second guess my life as a developer :) You are brilliant man. Keep up the good work.
@matthewhigley1018
@matthewhigley1018 3 года назад
Things I'll never be able to say: "I'm just gonna quickly crap out some particle systems..." "Then you gotta make a quicky crap AI for them..." Thing I have said: "Take the code and make this look less like crap..."
@bunyslayer
@bunyslayer 2 года назад
So uhh... turns out your a pretty good coder, this was fun to watch =)
@meepybeebaw4013
@meepybeebaw4013 2 года назад
Not even into coding, still a super interesting video. And incredible how you did it. I'd give three thumbs up, if I had them.
@americatoken3334
@americatoken3334 2 года назад
A gem on youtube , either I have not search enough or you are the only one doing this 🤭
@krazybubbler
@krazybubbler 3 года назад
I love your content. Awesome channel. I suggest you to check out react-three-fibre, maybe with use-cannon (physics) as this react stuff really makes game dev much easier IMO.
@stef9019
@stef9019 2 года назад
"Your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should."
@spaceymen
@spaceymen Год назад
Awesome video! WebGPU and Unreal engine 5 (web support) is coming soon, that would give so much power to web game devs.
@chrisjames278
@chrisjames278 2 года назад
This is awesome
@ustymukhman613
@ustymukhman613 3 года назад
Hi! Really awesome work, as always. And you've made me smile even more this time with your comments and the kid.
@simondev758
@simondev758 2 года назад
Codes coming, I don't work much on these videos/projects so it's whenever I have a spare moment. I'll upload the code when I get a chance to clean it up a bit.
@ustymukhman613
@ustymukhman613 2 года назад
@@simondev758 Totally understand that. Thanks for the reply, man!
@ASTERisk44946
@ASTERisk44946 9 месяцев назад
@@simondev758 tried to play it but opened and nothing showed???? why doesnt the index display
@QuesterDesura
@QuesterDesura 2 года назад
and again you did a great job :)
@marmont8005
@marmont8005 2 года назад
you are such a cool guy!
@CodingAbroad
@CodingAbroad 2 года назад
Loving your videos. Have you used phaser js?
@MyXNH
@MyXNH 2 года назад
Thank you for your awesome work! Can you please explain the benefits of using sphere mesh and shader material for the skybox instead of just a scene's background property? P.S. Would definitely love to see more of your videos with shaders explanations
@keff_cb
@keff_cb 3 года назад
cool stuff!!!
@felleg4737
@felleg4737 2 года назад
Epic again! Came for the coding, stayed for the comedy (too) :D
@SuperlativeCG
@SuperlativeCG 3 года назад
It’s unlikely that all the technology in Star Wars is standardized between planets, so cord compatibility must be a nightmare
@simondev758
@simondev758 2 года назад
It'd be like the old days of IBM pc vs macintosh
@darialyphia
@darialyphia 2 года назад
The legend is at it again
@buzbuz33-99
@buzbuz33-99 2 года назад
On the Destroyer gun turrets you could create animated parts in Blender, load the model and animations into JS, and then manipulate the animations within the game to move the turrets. (I used that method to creating working parts on an aircraft - ailerons, rudder, etc. - and to create a full set of working cockpit gauges with little animated pointers.) But that took many days. Alternatively, you could have created simple 3D turrets in JS, and attached them at various points to the model you downloaded (in three.js you would make each turret a 3D object and make them part of a Group). But I suspect that whatever method you used is much much simpler. Well done!!!
@simondev758
@simondev758 2 года назад
Great ideas, there's so many ways to approach it.
@ademolaadenekan6869
@ademolaadenekan6869 2 года назад
Awesome!
@aaronhenry5376
@aaronhenry5376 Год назад
I laughed quite a bit about the blender comment, because I am the same exact way with it.
@omgnowairly
@omgnowairly 3 года назад
You inspired me to get busy again. Thank you.
@SykoSilver
@SykoSilver 3 года назад
This is fantastic. I was wondering, have you seen Sebastian Lague's channel? It's not JavaScript but if you ever want to go into procedural planet generation it might give you some ideas.
@simondev758
@simondev758 3 года назад
His videos are awesome, love the quality of those videos. I have a series on procedural planets too. I kinda go in a slightly different direction than Sebastian, overall goal is to one day make a JS version of No Man's Sky, but I get sidetracked with other projects like this one :)
@blain20_
@blain20_ 2 года назад
Very cool 😁👍
@pist5343
@pist5343 3 года назад
Awesome work! Great beta testers! Can't wait for the third edition a year from now 😁 Btw simple way to make a space game look cooler is to add bloom. Its a pretty easy setup in 3js, wondering why didnt you go for it?
@simondev758
@simondev758 2 года назад
Laziness :(
@pist5343
@pist5343 2 года назад
@@simondev758 :(
@simondev758
@simondev758 2 года назад
3rd version next year!
@pist5343
@pist5343 2 года назад
@@simondev758 :>
@braedengaines5089
@braedengaines5089 3 года назад
Great video man! Are you currently working on any official games, or just doing side projects right now?
@simondev758
@simondev758 2 года назад
Working on my house mostly (see Instagram), these videos are my side projects.
@esmailkhorchaniarts1142
@esmailkhorchaniarts1142 2 года назад
This guy's JavaScript is on another level
@bennykell3
@bennykell3 2 года назад
Very cool
@UrielHK
@UrielHK 2 года назад
Amazing!
@_Karlsson
@_Karlsson 2 года назад
Everything looks so simple when you compress it like this =) Thanks for awesome content! (Yes, Star Trek is better)
@michaelschlachter8865
@michaelschlachter8865 2 года назад
You can export metadata into gltf from blender.. you add "custom properties" to the mesh... and then make sure Include->Data->Custom Properties is checked in the Exporter,
@victorisrael6191
@victorisrael6191 2 года назад
You're amazing😵
@cmcdonough2
@cmcdonough2 3 года назад
That's so cool.
@therealjtgill
@therealjtgill 2 года назад
Just found your channel, happy to become a patron
@simondev758
@simondev758 2 года назад
Thank you so much!
@francisofthefilth8829
@francisofthefilth8829 3 года назад
Yes you can export metadata in Blender/GLTF. Simply set it as a key/value pair in the object's properties area, then access as mesh.userData inside three.js.
@simondev758
@simondev758 2 года назад
Sweet, useful for next time.
@andrewwoan
@andrewwoan 3 года назад
yoooo that's epic
@Ryan_Perrin
@Ryan_Perrin 2 года назад
I love three.js!
@kanpekiken2481
@kanpekiken2481 3 года назад
God it’s like Simon reads my mind when he makes new videos
@santozard
@santozard 2 года назад
You’re amazing.
@xherdos400
@xherdos400 2 года назад
10:32 the gameplay there reminds me just of Star Fox free roam battle. still wish for a Star Fox game for pc :D
@DavidHernly
@DavidHernly 2 года назад
Great work Simon! Will this be on your github at some point?
@simondev758
@simondev758 2 года назад
Yeah I keep forgetting to upload it, anytime I sit down I have all these ideas and forget about stuff like that.
@hc3d
@hc3d 3 года назад
I've been using JS for about 10 years now. Right now I'm working on a mobile app which uses WebViews for the UI. I was using some modern syntax such as the Let syntax as well as For-of. But I completely overlooked that classes are now supported by modern JS engines. I also see you using imports? If this could improve the scalability of the language, then javascript and html would really be the way to go when it comes to UI's (web and mobile).
@arkadyvinkovsky5879
@arkadyvinkovsky5879 3 года назад
It's so cool !!! Have you had some experience with path-tracing algorithm?
@simondev758
@simondev758 2 года назад
A bit, why?
@arkadyvinkovsky5879
@arkadyvinkovsky5879 2 года назад
It would be nice if you could explain some of the details of how this works. I've seen 2 implementations with three js on github, but they look very confusing
@carrotsandcats
@carrotsandcats 3 года назад
Epic !!!
@martinnel2810
@martinnel2810 2 года назад
Really love your tutorials! Just a question, I'm looking for that explosion effect specifically... Is there anyway you can share just that 'ExplodeEffect' and 'ExplosionEffectEmitter' classes with me? It's around 3:04 in the video? Thank you very much and keep up the great work!
@kayak118
@kayak118 3 года назад
Can't wait to watch! 😁 I'm gonna give UE4 a shot, and see what I can do with it.
@tomm.4447
@tomm.4447 3 года назад
they've just released UE5. Mb looking into that instead might be a good idea
@tylerclinton3475
@tylerclinton3475 2 года назад
@@tomm.4447 fight the temptation for now. UE5 still has bugs where UE4 doesn’t. If you jump into learning UE4 now, by the time UE5 gets a full release you’ll be fully prepared to take advantage of what it has to offer, and learn the new features
@tomm.4447
@tomm.4447 2 года назад
@@tylerclinton3475 fair point. Well decide for yourself OP
@ThePirateHistory
@ThePirateHistory 3 года назад
Star conflict on minimals! but it's great
@jombones3324
@jombones3324 2 года назад
LEXX references are rare to an extreme degree.
@simondev758
@simondev758 2 года назад
Hah was wondering if anybody would catch those.
@HotShotMechPilot
@HotShotMechPilot Год назад
Its too good man. I made a space shooter in js but it's not nearly as cool as this!
@MHW-nu7pz
@MHW-nu7pz 4 месяца назад
This is really amazing! I am going to start to learn the threejs. Before starting to learn about it, is it that we have to be good at math? If you don't mind, can you please give some advices, thank you very much!
@simondev758
@simondev758 4 месяца назад
It's a lot easier if you understand the math. I have a math course that covers more than what you need to make games.
@MHW-nu7pz
@MHW-nu7pz 4 месяца назад
@@simondev758 Thank you very much!
@jeremycoleman3282
@jeremycoleman3282 3 года назад
I wanna play it! I ordered a $10 controller a week or so ago
@michakrecisz5100
@michakrecisz5100 2 года назад
please make whole course about it... I will pay any money for that!
Далее
Simple Biome Generation (3D World Generation #11)
6:57
Spatial Hash Grids & Tales from Game Development
19:08
Просмотров 111 тыс.
How Big Budget AAA Games Render Bloom
13:23
Просмотров 105 тыс.
I Tried Making an FPS Game in JavaScript
8:19
Просмотров 123 тыс.
I Tried Making a 3D MMORPG Game in JavaScript
16:48
Просмотров 598 тыс.
Giving Personality to Procedural Animations using Math
15:30
When Optimisations Work, But for the Wrong Reasons
22:19
I Tried Making a 3D Game in JavaScript
5:52
Просмотров 52 тыс.
Star Citizen's Next Big Step
10:08
Просмотров 64 тыс.
Three.js Optimization - Best Practices and Techniques
17:47
Плохие и хорошие видеокарты
1:00
How charged your battery?
0:14
Просмотров 2,6 млн
Power up all cell phones.
0:17
Просмотров 49 млн