6 Months of Learning JavaScript Game Dev in 6 Minutes

Рет қаралды 110,677

Күн бұрын

In this video, we go over my 6-month journey of learning game development in JavaScript. Initially, I talk about why I decided to learn game development in the first place. Then, we dive into my reasoning for choosing Three.js over a game engine like Unity or Unreal. Finally, we take a look at the 10 game dev experiments I made in this 6 month period.
🐦 Twitter - / suboptimaleng
💻 GitHub - github.com/SuboptimalEng
🌎 Website - suboptimaleng.com
== [ Timestamps ] ==
00:00 Why Learn Game Dev?
00:43 Three.js vs Unity Game Engine
01:37 Solar System Demo
01:54 Tic-Tac-Toe Game
02:16 3D Tic-Tac-Toe Cube
02:37 3D Audio Waveform Visualizer
03:13 Naruto’s Rasengan
03:30 3D Piano
03:55 3D Wordle Clone
04:16 Rubik’s Cube
05:02 Retro Snake 3D
05:40 Frantic Architect Clone
== [ Credits ] ==
Simon Dev - / iced_coffee_dev
Caterina Zamai - www.artstation.com/zaccate
Hand Anatomy by Caterina Zamai - sketchfab.com/3d-models/hand-...
James Harness - sketchfab.com/James.Harness
CRT Monitor by James Harness - sketchfab.com/3d-models/crt-m...
Will Kwan - / _willkwan
Frantic Architect - github.com/wkwan/frantic-arch...
== [ Resources ] ==
Three.js - threejs.org
Three.js Tutorials - sbcode.net/threejs
Cannon.js - github.com/pmndrs/cannon-es
== [ Tags ] ==
#suboptimal #javascript #gamedev

Пікірлер: 258

@plasticsamalt6633 Жыл бұрын

As someone who just started my 3D programming journey, learning JS (and code in general), this video is inspiring as hell! Subscribed

@SuboptimalEng Жыл бұрын

Awesome to see more people starting to learn 3D coding in JavaScript 🙌

@plasticsamalt6633 Жыл бұрын

@@SuboptimalEng I would love some tips, because basically threejs is my goal here, and I just started learning JS.

@SuboptimalEng Жыл бұрын

@@plasticsamalt6633 If you just started learning JS, then I'd recommend making 2D games in HTML canvas. It's a lot easier to get started there. Once you understand the fundmentals, you can start picking up frameworks like Three JS.

@plasticsamalt6633 Жыл бұрын

@@SuboptimalEng noted. Thanks!

@andrestellez3229 Жыл бұрын

Beautiful man, you're the only one who could help me, I watched 8 videos and yours was the only one that saved me

@Total_Studios_Games Жыл бұрын

Your video was very helpful, I'm still learning and getting the hang of it still. I'm into House and EDM. I look forward to seeing more of your

@arsen3223 2 жыл бұрын

this is really cool man, makes me want to learn this as well!

@SuboptimalEng 2 жыл бұрын

You can do a lot with JS game dev! Definitely worth trying out 👀

@moatazemad1854 Жыл бұрын

BROTHER, YOU ARE THE BEST!!! You oooh really helped me!! THANK YOU VERY MUCH!This is cool, well done!

@mainichiippo Жыл бұрын

These are great! Makes me excited to learn threeJS

@juanmacias5922 2 жыл бұрын

Cool journey, thanks for sharing!

@nirajsolanki8773 Жыл бұрын

So informative, thanks a lot!

@RajJaiswal538 2 жыл бұрын

I feel the Rubik's cube is hardest among them in terms of logic And also has a lot of potential of some unintentional amazing bugs : P

@SuboptimalEng 2 жыл бұрын

Agreed. Sometimes, the bug is better than the code

@andybrice2711 11 ай бұрын

Rubik's cube logic is probably quite simple if you understand Abstract Algebra and Group Theory. (Which I don't.)

@RajJaiswal538 11 ай бұрын

@@andybrice2711 neither do I tho So we're on the same page

@yahyamn6692 Жыл бұрын

Excellent video. Clearly explained all the basics to get started on soft soft. Thanks

@SuboptimalEng Жыл бұрын

Thanks Yahya!

@airelav Жыл бұрын

Hello! I just wanna say thank you for the video it did really gave me a perspective in game dev in JavaScript as I'm starting and only doing it as a hobby, but I would really like to pursue some projects of my own so this is great inspiration 👍🏼

@SuboptimalEng Жыл бұрын

Thanks, Valeria! A couple months ago, I was also not sure about making games in JavaScript. But now, I think it is the best decision I made 🙌

@airelav Жыл бұрын

@@SuboptimalEng Yeah! This video really helped me, from now own I'm gonna give priority to game dev cause is supper interesting but also so very challenging for me

@tusyama5157 2 жыл бұрын

Fantastic stuff, man!

@qarihassanhameed Жыл бұрын

wow. thank you for the amazing video

@mahedulhasan5515 Жыл бұрын

well understood. Thank you you are the best teacher.

@user-zo7up5yw6e Жыл бұрын

Thank you very much , now I will understand the functionality

@HassanHassan-hl6tv Жыл бұрын

Your actually the goat, This helped so much thank you.

@staticdopekilm621 Жыл бұрын

Thanks bro that was really helpful

@adnancodesweb 2 жыл бұрын

I feel your struggle man.. love your videos as well.

@SuboptimalEng 2 жыл бұрын

The struggle of coding games in JavaScript is real, but it's worth it! Keep pushing through 💪

@mustycom-tech5463 Жыл бұрын

Best soft soft Introduction Ever!!

@AOP2912 Жыл бұрын

Really nice and helpful... Thanks!

@drsensor Жыл бұрын

Proper cache control and lazy loading is really hard to achieve in engine that doesn't target web browser as it's first priority. Though streaming 3D model is still challenging in any engine or rendering-lib

@karimaskarimas553 Жыл бұрын

Worked for me thank you!

@nikos_theonas_official Жыл бұрын

i really apreciate your help with dowloanding this software

@always_swagin Жыл бұрын

when you’re in the channel rack, click on gms to open up the gms nu, in the light blue screen on the top left look where it says

@joonaal1567 Жыл бұрын

Dude. Thank you so much.

@mattcardoso1503 Жыл бұрын

Awesome, man! One day I intend to dig into game development as well, just for the fun

@SuboptimalEng Жыл бұрын

Definitely, it's super fun to get hooked on a piece of software you wrote. Doesn't happen often to me in web development, but happens quite frequently when I make games.

@mattcardoso1503 Жыл бұрын

@@SuboptimalEng That's exactly how I feel, man. It's wonderful that you got to discover that feeling! And thanks for the incentive given in this video... I have much to learn from you. Stay awesome. ‍🔥👊

@coindivision388 Жыл бұрын

Gained a sub on this one, good shit man!

@curiez Жыл бұрын

Thank you. super program!

@jasonponce7415 Жыл бұрын

Yoo tnx dude, everytNice tutorialng works. I LIKE IT

@ohgaabkkkkj Жыл бұрын

Really helpfull tutorials. Helped a lot

@nabinbhattrai1506 Жыл бұрын

thanks so much man

@sarathps1666 2 ай бұрын

This is really cool, Just started myself

@luisabertoestevez5145 Жыл бұрын

Nice tutorial. I have been having content issues with my hmdi connected speaker and subwoofer. No soft is coming through, still coming out of

@clivekingco1865 Жыл бұрын

TNice tutorials was very helpful thankyou.

@musicbox2675 Жыл бұрын

by any ans, but I can make what I envision, and that's the greatest gift to . You are, without a doubt, an expert teacher. You may

@BMmovies829 Жыл бұрын

Worked, thx

@darisamran801 Жыл бұрын

Oh it's really works) god bless you

@Belive_s Жыл бұрын

Works, thank you boy

@TheUnkow Жыл бұрын

That "failed" cube is mesmerising. Thanks for sharing this video. Hope you will have success upon your path.

@SuboptimalEng Жыл бұрын

Thanks a bunch!

@gamer_minecraft_yt2163 Жыл бұрын

BROOO THANK YOU!!!!!!!!!!!!!!!!! YOU'R THE BEST!!!!!! I LEARNED EVERYTNice tutorialNG I NEEDED TO KNOW THAN YOU VERY

@lyricsbyfio1708 Жыл бұрын

working fine thank you

@chekaroxas9262 Жыл бұрын

I tried and it is installed thank u very much anda

@vlone.666 Жыл бұрын

have. But, your tutorial was amazing and I have made a semi-decent soft. Thanks!

@roldanacebo8835 Жыл бұрын

merci beaucoup a toi :))

@veryupstandinguy Жыл бұрын

Hey man awesome work was just wondering if all of this was in a website instead of a program I really want to learn Javastrip as well but I want to program a program basically and i dont want it to be in a web browser

@shriyanshjoshi5368 Жыл бұрын

ITS REALLY WORKED LOL THANK YOU DUDE

@256k_ Жыл бұрын

the broken cube was fantastic. hope you kept it

@abdelrahman5094 2 жыл бұрын

such a fantastic video reccomendation

@SuboptimalEng 2 жыл бұрын

Looks like praying to the KZfaq algorithm every day is finally working 🙌

@gourobsaha8130 Жыл бұрын

Its working man!!

@abraarz2971 2 жыл бұрын

Very cool!

@coolsai Жыл бұрын

cool!

@myporpor1184 Жыл бұрын

Next ti, can you install one of those apps that creates a circle around your mouse pointer? Sotis it’s hard for to find where

@sarnarider9872 Жыл бұрын

utilised and enjoyed wNice tutoriallst increasing in value.

@alteredsensations8273 Жыл бұрын

YO YOUUURRRR ART IT BEAUTIFUL

@utsavfilmwala Жыл бұрын

thanks helpful vid

@facundoalvarez8245 Жыл бұрын

thank u

@Ivan-dt9mc 2 жыл бұрын

nice video man

@MHW-nu7pz 3 ай бұрын

Nice video! I really love what you built! I will be going to start to learn the threejs. Is it that I have to be good at math before starting it?

@SuboptimalEng 3 ай бұрын

That’s great to hear! You don’t need much math unless you want to become a shader magician.

@MHW-nu7pz 3 ай бұрын

@SuboptimalEng Really? Only the shader requires advanced math?

@SuboptimalEng 3 ай бұрын

Depends on how complex your applications are. Most of the games I made in this video do not use math beyond trigonometry. The last game uses physics, but I imported a library to help with that.

@stickguy9109 2 жыл бұрын

Nice video but there's one thing I should point out. If you know any programming language like Js for example unity is not hard. I say go for it, if you wanna get serious with gamedev a library is not an artistic tool

@SuboptimalEng 2 жыл бұрын

Unity is not hard, but running it on my computer with Chrome and VS Code is impossible 😂

@stickguy9109 2 жыл бұрын

@@SuboptimalEng Oh I understand. Well then there's no choice but to make your own web based game engine

@GalaxyTime5416 Жыл бұрын

@@stickguy9109 im working on one

@KennyFully Жыл бұрын

Unity isn’t hard to use but at the same time I’m not trying to give people a portion of my money!

@10inall28 Жыл бұрын

@@GalaxyTime5416 wat is it

@skulllive7368 Жыл бұрын

how do you get all the tutorial and samples on the left. mine doesnt have sNice tutorialt

@DevlogBill Жыл бұрын

Hi suboptimal Engineer, I am back, and I am still learning to code, but I am having fun doing so. I would have never imagined but picking up React and learning how to write in this library with useState and useEffect has improved my skills in writing functions, I use to suck badly. I would have never guessed by me learning React this would be the case. Now, I would like to improve my skills in classes, and I figured can you improve your skills in JavaScript and classes and objects by making games? I was wondering by you creating games has this improved your skills in JavaScript and if so, how? Thanks for sharing your video, it inspires me.

@thompsonevergreen8006 10 ай бұрын

"will learning JavaScript by making projects improve my abilities in JavaScript?" Yeah

@alkhemist6631 7 ай бұрын

I'm here struggling with logic. This is great. Kudos to you

@SuboptimalEng 7 ай бұрын

Thanks, I'm sure you'll figure it out 🤓

@callme_nagi Жыл бұрын

Good choice!

@itzdragondreamxdgg4157 Жыл бұрын

Couldn't agree more!

@divyanshprakash7356 Жыл бұрын

In The setup If the master channel is located in the top, next to the counter, then no - IT stays witNice tutorialn acceptable limits, when I play so of

@raihankarimpriyo2004 Жыл бұрын

Perfect tutorial, I just bought it and tNice tutorials helps heaps

@mingxindong3150 Жыл бұрын

Incredible I will be glad if I can finish one small project in 3 months

@SuboptimalEng Жыл бұрын

I always set a deadline and try to get something working. It doesn't have to be perfect the first time!

@henryzhang6512 Жыл бұрын

just discovered your channel. love your content! (more than simondev 😉)

@SuboptimalEng Жыл бұрын

That's high praise - Simon's videos are super cool - thanks a bunch!

@sonhoang2392 Жыл бұрын

my laptop speakers. Any suggestions on what to do to get my soft back? I recently updated. Any help would be greatly appreciated.

@kool-breez Жыл бұрын

That Rubik's cube would make an awesome loading 'spinner'. Side note: I think some of the stuff you covered in the three.js tutorial (planets rotation), could help finish that rasengan model :)

@SuboptimalEng Жыл бұрын

I think the rasengan requires more glsl shader skills 😅

@kool141 Жыл бұрын

@@SuboptimalEng You’ll get it, your first attempt was really good :D

@jerryshub9914 Жыл бұрын

HELP! When i put a sample into the daw, the sample slides instead of moving in steps, how can i get the sample to move in steps?

@eotstv9197 Жыл бұрын

In The setup what soft is that the little one

@Skylla54 2 жыл бұрын

I love your stuff

@SuboptimalEng 2 жыл бұрын

Always good to see more game devs out there! Can’t wait till “Metaverse engineer” becomes a job role 👏

@Skylla54 2 жыл бұрын

@@SuboptimalEng Google&Apple&co will block such job description, definitly XD As long there is no offical description. I keep calling myself 🐻-Dev (b3AR Dev alias Web3AR Dev alias Fullstack Web3 AR Blockchain/SmartContract Developer alias 🐻-Dev 😄🤷‍♀)

@SuboptimalEng 2 жыл бұрын

@@Skylla54 can't believe it's come to something this complicated 😂

@sarveshsakpal8241 Жыл бұрын

super

@johnclarkmabutin7944 Жыл бұрын

TNice tutorials is much more simple than I thought with you explaining it. Currently half way through and I feel like I know everytNice tutorialng already lmao

@nimrodargallon9100 Жыл бұрын

all the different elents together in a language that is universal. I've seen plenty of DAW tutorials being new, but tNice tutorials is by far the best so

@samiullahsheikh5015 Ай бұрын

I am frontend dev with 2 years of experience and now i am exploring game development in js. I don't know if game dev worth it in JS land but it just quite interesting to me and also it will help me to improve my logic rather than practicing boring DSA😅😅 Btw, can you point me where to start as it seems 3d, 2d have alot of concepts before even get hands on any library like theejs or pixijs Any resource/path or suggestions what should i learn first?

@cineural Жыл бұрын

The Rubik cube glitch would be a really cool loading screen

@SuboptimalEng Жыл бұрын

Or a retro windows screensaver

@adflyadfly4137 10 ай бұрын

From any js library can we create any game like tycoon used cars game? Like car moves in (3d object), follow route, park in given slot etc??

@SuboptimalEng 10 ай бұрын

You can make small fun games in JS, but if it is super complex then it might be better to go with Unity or Unreal.

@User-qwtruaia719 Жыл бұрын

GR8 IDEA TYTY

@hssageni9893 5 ай бұрын

actually I'm a web developer and when I woke up this this morning why not making games then i came across this vd it was really beneficial for me and now I'm gonna start my journey in game dev with three.js and I loved the piano you made it's gonna be my first project since I really love music and most of piano games are payed or not that responsive so I'll make it for all the guys that really want to learn playing the piano and the financial support is what stopping them inchaalah when I'm done I'll put an update in this comment hope me luck

@the2ndlanguage4me52 Жыл бұрын

Pertama nyoba instal di MacOS Monterey error, udah gitu di Bantu sama mimin, ternyata harus pake yang 2021 , daaan tadi nyoba, Sudah berhasil! Terima kasih Sudah membantu sampe berhasil instal 🙏

@MightNight892 Жыл бұрын

conclusions? was it worth it? what are your future plans?

@SuboptimalEng Жыл бұрын

Was it worth it? I think so - it helped me get started quickly. But I also realized that lots of game dev/graphics jobs require knowledge of C++ or C#. So if that's your end goal, starting like this might not be worth it for you. Currently, I'm really interested in graphics programming so I've been learning how to write GLSL shaders. For this, you don't even need Three.js or Unity, just Shadertoy.

@BryanXDz Жыл бұрын

putting in....they are only visible on the mini soft roll preview, I can’t do sNice tutorialt without seeing what notes are being played...i can’t even

@astitvastudios Жыл бұрын

Damn. Nice job. I realy couldn't find a proper tutorial explaining everytNice tutorialng you needed clearly but then i found tNice tutorials treasure of a video.

@KKOO8 Жыл бұрын

hey I want to learn too where do I start?

@nosebleed4304 Жыл бұрын

Thank you for taking the ti to do tNice tutorials i know I’m gonna enjoy figuring it out

@WolfgangRechberger86 Жыл бұрын

Nice work. Have you tried playcanvas as well? Keep up the great work!

@SuboptimalEng Жыл бұрын

Thanks! Unfortunately haven’t tried playcanvas yet.

@gianpaulemersondj6275 Жыл бұрын

works gj

@saba7341 Жыл бұрын

sotis when the sample finishes playing it will play over itself and you get tNice tutorials echo effect.

@thepeera1699 Жыл бұрын

$199 bundle etc. so wNice tutorialch was is best??? ❤️❤️

@RAOROCKSTAR1990 6 ай бұрын

So if I don't have to build games in 3 dimensions, I don't need to use threejs? I have a fair amount of experience in React/Javascript but don't know much about game development. If I have to make simple games in 2D with sound and visual effects, can you suggest me a library? How's kaboom?

@SuboptimalEng 6 ай бұрын

I've never worked with that library so I'm not sure how it is. My recommendation would be to learn and use PixiJS.