Your use of shaders is so spectacular. You do all this advanced texturing and noise without any node-based programming or other GUIs.
@n8dev3 жыл бұрын
wowowoowowow
@blackcitadel373 жыл бұрын
As they say, knowledge is power.
@aceman00000993 жыл бұрын
It's not much of a leap to go from node programming to code, if you're not dyslexic
@alyctro81583 жыл бұрын
This straight looks like the oldschool battlefront game, amazing. Take me back to the glory days Simon.
@julianstorm77223 жыл бұрын
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
@Cal97g3 жыл бұрын
Any similar channels?
@Bluepaccao3 жыл бұрын
Sebastian Lague is great!
@almostthere61163 жыл бұрын
Sometimes it isn't if you can, it's if you should, but you have my support anyway.
@simondev7583 жыл бұрын
So keep doing everything in js is what I'm hearing?
@Soremwar3 жыл бұрын
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?
@jimmychoong30143 жыл бұрын
Learner here trying to understand- is there a reason why it shouldn't be done? Performance related reason?
@simondev7583 жыл бұрын
@@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.
@Merthalophor3 жыл бұрын
@@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.
@drdonalfons3 жыл бұрын
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!
@simondev7583 жыл бұрын
Sweet, thanks!
@mjs28s3 жыл бұрын
you need to do some Udemy course for JS games! The current Udemy game selections are nothing like this. typically just bad side scrollers.
@geelemo3 жыл бұрын
we need
@blackcitadel373 жыл бұрын
It'd be one entire course just for all that physics black magic.
@dominiksmeda72033 жыл бұрын
pleas take my money
@UrielHK3 жыл бұрын
second that
@theomegamale53353 жыл бұрын
Id buy it too. You should really consider this.
@AntonioCorrenti3 жыл бұрын
Who wants a crossover with Sebastian Lague? SIMONDEV X CODING ADVENTURES
@diegolazcano39343 жыл бұрын
Please
@luapmartin3 жыл бұрын
That would be interesting 🧐
@ivanraulsanchezdiaz74993 жыл бұрын
C# and JS, sounds hard
@danielli32883 жыл бұрын
@@ivanraulsanchezdiaz7499 use wasm
@Ab-cj6gl3 жыл бұрын
oh it'll be cool
@kyou.rocher3 жыл бұрын
"I'm a leaf on the wind" made me cry a little, still got PTSD from that scene
@simondev7583 жыл бұрын
Yeah that one really sticks with you.
@CathrineMacNiel3 жыл бұрын
@@simondev758 just like a harpoon would.
@simondev7583 жыл бұрын
Zing!
@MatthiasSchicker Жыл бұрын
9:22 "Noise is a great subsitute for actual art direction" :D
@ThunderstruckElectronix3 жыл бұрын
I'm learning Web Dev and I think it's awesome to see all the cool stuff you can do with js. Cool video 👍
@gamershow59443 жыл бұрын
I can't believe you made this in JavaScript. It's really good looking. Your very talented to be able to code this together.
I like how smooth the movement is. Makes the actual game look like 100% lighting and particle-flare.
@AssasinZorro Жыл бұрын
When you showed your full game, I instantly understood the UI of Freelancer games that highlighted enemy ships and where to aim
@GiusePooP3 жыл бұрын
10:52 tie fighter smashing into eachother
@UnidayStudio3 жыл бұрын
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).
@simondev7583 жыл бұрын
Ooh thanks, I'll give that a try. Didn't even know there was a python console.
@GhorthalonTheDragon3 жыл бұрын
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.
@simondev7583 жыл бұрын
Yeah I was pleasantly surprised with how three.js integrated that.
@Retrofire-472 жыл бұрын
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.
@UnityOfPlurality11 ай бұрын
"I'm just gonna crap out some manual particle systems" damned amazing! You sir are an inspiration to say the least, subbed!
@Tjillevirpen3 жыл бұрын
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.
@simondev7583 жыл бұрын
Awesome, thanks!
@mobslayer2113 жыл бұрын
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!
@matthewhigley10183 жыл бұрын
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..."
@stolensentience3 жыл бұрын
4:07 I’m crapping out particle systems myself as I watch this
@danielzaiser3 жыл бұрын
Keep on rocking js game dev, you are unique, talented, entertaining, awe inspiring
@geelemo3 жыл бұрын
I'm laughing/smiling watching this. especially when I saw the kid playing the game. wow!!!
@stolensentience3 жыл бұрын
Surprised no “do a barrel roll!” At the end Great work btw!
@Bluepaccao3 жыл бұрын
I love your dedication, awesome work man!
@N_IndratejReddy3 жыл бұрын
KID: MY DAD MAKES VIDEO GAMES FOR ME , HE IS A LEGEND.
@laja61083 жыл бұрын
This is so cool, I love when you make these videos 🙌🏽
@Skeffles3 жыл бұрын
Absolutely fantastic game! I loved the space battles in the now named 'Classic' Star Wars Battlefront 2
@bunyslayer3 жыл бұрын
So uhh... turns out your a pretty good coder, this was fun to watch =)
@jimmyrustle2713 жыл бұрын
Man I'd go crazy trying to write this in JavaScript instead of TypeScript. Nice job.
@aunyks3 жыл бұрын
Always so impressive. Thanks for sharing this with us!
@michaelschlachter88653 жыл бұрын
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,
@alvesvaren3 жыл бұрын
Looks really good, I think adding some not too bright light source reflecting from the planet would make it look even better
@liamdormon78223 жыл бұрын
"I Tried to Make Star Wars Battlefront II in JavaScript", proceeds to write C code inside of javascript
@simondev7583 жыл бұрын
If only it ran at C speeds with C memory efficiency.
@sycration3 жыл бұрын
i think that was glsl; weird C that gives each pixel a thread and comes with a stdlib full of matrix math
@liamdormon78223 жыл бұрын
@@sycration I see, still a bit weird that a javascript library has you write C or some shader language inside of a javascript string.
@dhkatz_3 жыл бұрын
@@liamdormon7822 Yeah it's not C. It's GLSL, which is used for shader programs which run on the GPU. There is no good way to get around writing it.
@simondev7583 жыл бұрын
Older school way was to program the TEV stages.
@francisofthefilth88293 жыл бұрын
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.
@simondev7583 жыл бұрын
Sweet, useful for next time.
@theFuzzyWarble3 жыл бұрын
Awesome inspiration, many thanks... and that Farscape reference in the game!! KUDOS!@# Long Live MOYA!!
@simondev7583 жыл бұрын
I miss that show.
@esmailkhorchaniarts11423 жыл бұрын
This guy's JavaScript is on another level
@dempa33 жыл бұрын
Very interesting to listen to how you go about making these JavaScript games!
@__leftistVegan2 жыл бұрын
@6:08 I have no art skills. That's a lie generating something purely from code is artistic
@americatoken33343 жыл бұрын
A gem on youtube , either I have not search enough or you are the only one doing this 🤭
@drunkenpirate47x813 жыл бұрын
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
@stef90193 жыл бұрын
"Your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should."
@jet-pack-zombie22583 жыл бұрын
Actually really amazing. Simulates halo reach campaign misson and battlefront 2 amazingly great job
@felleg43 жыл бұрын
Epic again! Came for the coding, stayed for the comedy (too) :D
@JetLee1544 Жыл бұрын
Exactly what I was looking for, thank you so much!
@darialyphia3 жыл бұрын
The legend is at it again
@CesarFelipeLopez3 жыл бұрын
Amazing as always👍
@meepybeebaw40133 жыл бұрын
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.
@infocyde20243 жыл бұрын
You make me second guess my life as a developer :) You are brilliant man. Keep up the good work.
@buzbuz33-992 жыл бұрын
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!!!
@simondev7582 жыл бұрын
Great ideas, there's so many ways to approach it.
@entityengineer3 жыл бұрын
Another amazing video
@yeahaddigirl2 жыл бұрын
fyi custom property blocks of blender objects (think python dict or js obj) get exported to userData on gltf exported from blender and imported with threejs gltfloader
@sebajsilva3 жыл бұрын
Wow!!! Looks great!
@francoisvermeulen7063 жыл бұрын
love your work
@andrewwoan3 жыл бұрын
yoooo that's epic
@krazybubbler3 жыл бұрын
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.
@DylanZingler3 жыл бұрын
Do you have a live demo hosted somewhere? I feel like you'd get a ton of traffic on it!
@simondev7583 жыл бұрын
Yeah I'll upload it to my website when I get the chance.
@DylanZingler3 жыл бұрын
Nice, we gotta get you on that front page of HN
@kanpekiken24813 жыл бұрын
God it’s like Simon reads my mind when he makes new videos
@martinnel28102 жыл бұрын
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!
@xherdos4003 жыл бұрын
10:32 the gameplay there reminds me just of Star Fox free roam battle. still wish for a Star Fox game for pc :D
@sanjaysinghbhandari37933 жыл бұрын
really amazing job ❤️ please put a video where you tell how you know so much, your journey...
@spaceymen2 жыл бұрын
Awesome video! WebGPU and Unreal engine 5 (web support) is coming soon, that would give so much power to web game devs.
@UstymUkhman3 жыл бұрын
Hi! Really awesome work, as always. And you've made me smile even more this time with your comments and the kid.
@simondev7583 жыл бұрын
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.
@UstymUkhman3 жыл бұрын
@@simondev758 Totally understand that. Thanks for the reply, man!
@ASTERisk44946 Жыл бұрын
@@simondev758 tried to play it but opened and nothing showed???? why doesnt the index display
@vegard1722 жыл бұрын
haha, love the "Shut up Meg" x)
@IwanPieterse-iwanzbiz3 жыл бұрын
Incredible Job. This reminds me of the old Rogue Squadron game.
@omgnowairly3 жыл бұрын
You inspired me to get busy again. Thank you.
@marmont80053 жыл бұрын
you are such a cool guy!
@SykoSilver3 жыл бұрын
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.
@simondev7583 жыл бұрын
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 :)
@santozard3 жыл бұрын
You’re amazing.
@eduardotobarjaque77582 жыл бұрын
Really Amazing!!!!
@aaronhenry53762 жыл бұрын
I laughed quite a bit about the blender comment, because I am the same exact way with it.
@Buttersaemmel3 жыл бұрын
lol in the end he say's "now let's look at the complete game" but actually shows just the real Battlefront II!
@cidadaodeatlas1252 жыл бұрын
omg, a true genius
@erratic543 жыл бұрын
Could someone explain me how to "play" the actual code? I see that he uploads all his coding to github but im not sure where to actually put it (sorry for being newbie, im just coding websites)
@BrianHaddad3 жыл бұрын
He's coding websites too! Though I've never tried it myself, I'm pretty sure you just need to clone or download one of his repositories and launch the index.htm or index.html file in your web browser. If for some reason it doesn't run, launch the developer tools console for your browser and check the error messages. If you can't make sense of what is wrong or missing, try posting in a forum somewhere and be as specific as you can about the problem you're having (link to the repository, exact text of the error, what browser you're running it in, and what you've tried so far).
@jackxn58073 жыл бұрын
the easiest way to "play" is to down load the files from git hub. Then down load visual studio code. inside visual studio code install a extension called "Live Server". Then last part is to open the folder you downloaded and on the bottom right side of the screen it should say "Go Live", click on it you should be able to "play" the game.
@erratic543 жыл бұрын
ahh, I see. Thank you very much!
@omgnowairly3 жыл бұрын
Its not up on GitHub yet to check out.
@petebaron3 жыл бұрын
For html pages to run locally, you need to fool the browser into thinking they're remote. I use WAMP on Windows but it can require some fiddly set-up depending on your machine configuration. The visual studio code suggestion from @xin jack nian sounds like it might be easier, especially if you've already got that installed for coding with. Alternatively, if you have ftp and some web-space, you can just upload the distribution and run it online!
@hc3d3 жыл бұрын
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).
@samuelbarrett57013 жыл бұрын
I am actually quite jealous of this, have always wanted to create a game ( a sequel to a dead franchise long forgotten).
@simondev7583 жыл бұрын
Which franchise?
@samuelbarrett57013 жыл бұрын
@@simondev758 Turok. I would want to end the cliff hangar from Turok 3.
@simondev7583 жыл бұрын
@@samuelbarrett5701 Oh man I remember playing that on N64 as a kid
@Ryan_Perrin3 жыл бұрын
I love three.js!
@MHW-nu7pz10 ай бұрын
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!
@simondev75810 ай бұрын
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-nu7pz10 ай бұрын
@@simondev758 Thank you very much!
@CodingAbroad3 жыл бұрын
Loving your videos. Have you used phaser js?
@JayanthBagare3 жыл бұрын
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
@QuesterDesura3 жыл бұрын
and again you did a great job :)
@jesusbibieca523 жыл бұрын
Since you are using VSCode, try using a GLSL extension for linting and highlighting
@russiangravy38703 жыл бұрын
Technically this is just Starfighter Assault. I expect 10 more videos for the other game modes.
@simondev7583 жыл бұрын
Full disclosure: I based this on a trailer, I have never played any of the games :D
@gamingnoah98073 жыл бұрын
This is star wars squadrons
@pist53433 жыл бұрын
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?
@simondev7583 жыл бұрын
Laziness :(
@pist53433 жыл бұрын
@@simondev758 :(
@simondev7583 жыл бұрын
3rd version next year!
@pist53433 жыл бұрын
@@simondev758 :>
@nttn36663 жыл бұрын
Can you make a series on game development fundamentals, that would be very useful. You mindblowing me with your skills, keep up the good work
@davidconnelly3 жыл бұрын
Holy smokes! I saw the video title and thought it was a joke. That is staggering!
@therealjtgill3 жыл бұрын
Just found your channel, happy to become a patron
@simondev7583 жыл бұрын
Thank you so much!
@blain20_3 жыл бұрын
Very cool 😁👍
@arkadyvinkovsky58793 жыл бұрын
It's so cool !!! Have you had some experience with path-tracing algorithm?
@simondev7583 жыл бұрын
A bit, why?
@arkadyvinkovsky58793 жыл бұрын
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
@UrielHK3 жыл бұрын
Amazing!
@silviu.iordache Жыл бұрын
Me: I tried to center a div SimonDev: I made Stars Wars Battlefront II in javascript
@michakrecisz51003 жыл бұрын
please make whole course about it... I will pay any money for that!
@russiangravy38703 жыл бұрын
Awesome!
@jombones33243 жыл бұрын
LEXX references are rare to an extreme degree.
@simondev7583 жыл бұрын
Hah was wondering if anybody would catch those.
@MyXNH2 жыл бұрын
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
@kallehalvarsson58083 жыл бұрын
Regarding metadata in GLTF: You can add empty objects in Blender, and they will be imported as THREE.js object3D's that you can search for by name in the model hierarchy. Also, art direction tip: The key to cool space visuals is to have an extremely strong direct light with low ambient. Adding some bloom and chromatic abberation postFX would also help, though i know that unfortunately disables MSAA for TREE.js. :/
@simondev7583 жыл бұрын
That's perfect (the empty objects thing). Also yeah totally should have worked the lighting more, got lazy and didn't try to tweak the bloom and all that to look nice. PostFX are totally doable, I can swap in FXAA instead, its no MSAA, but it's decent and after youtube compression probably doesn't matter much.
@kallehalvarsson58083 жыл бұрын
@@simondev758 I've personally never been a fan of the FXAA quality, but yeah, probably good enough for youtube. But if you are going to add an EffectComposer stack, then you might as well also add some chromatic abberation using a custom ShaderPass, here is a simple example: www.shadertoy.com/view/ltByR3
@kayak1183 жыл бұрын
Can't wait to watch! 😁 I'm gonna give UE4 a shot, and see what I can do with it.
@tomm.44473 жыл бұрын
they've just released UE5. Mb looking into that instead might be a good idea
@tylerclinton34753 жыл бұрын
@@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.44473 жыл бұрын
@@tylerclinton3475 fair point. Well decide for yourself OP
@thomaseichler23683 жыл бұрын
Hy Simon, you did a great job here (again). Did you add a directional (sun)light in the scene? The over all design is too dark. I guess the light is coming from the skybox only. For space scenes you usually have to add a simple directional light, with an 0 degree angle to get sharp shadows. And you have to overexpose your light source, so that your materials are very bright for some angles. In blender i would take an intensity between 5-10. Speaken from an technical artist point of view you could think of simple post processing work. Like a slightly visible vignette effect, chromatic aberation, mildly used depth of field and also little bit of bloom. Motion blur would be awesome too, especially for a space shooter. I know, nobody likes the imrpovement guy. But i am stunned what YOU can do with three.js.
@simondev7583 жыл бұрын
Those are great suggestions! Yeah I had a simple directional + an ambient term, but I didn't pump the intensity enough. Need to have an artist around to tell me when things don't look great hah.
@thomaseichler23683 жыл бұрын
@@simondev758 Who needs an artist, if he could use his own youtube swarm intelligence from youtube comments? ^^