Тёмный

Needlessly 3D Chrome Dinosaur Game (JavaScript/Three.js) 

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

Follow me on:
Twitter: / iced_coffee_dev
Github: github.com/sim...
In this project I tried making the Google Chrome Dinosaur Game in 3D and JavaScript/Three.js. I took a bit of code from previous tutorials, like the model loading code, the rest like gameplay is all from scratch.
We build the game pretty much from scratch, starting with a basic empty scene, building out the endless runner gameplay to match the original Chrome Dinosaur Game. Add scores, some background assets, scenery, load a few GLTF assets, and polish it a bit using some examples from the three.js examples site. This isn't perfect, but hopefully will give you a basic understanding of putting together a small game using three.js.
What I'll cover:
* Getting basic t-rex run gameplay up and running.
* Loading GLTF and FBX model assets
* Detecting collisions using Box3
* Using HTML as UI
Like always, full source is available, just check the github repo. Go ahead and do whatever you want with it.
Various clips/assets from:
Quaternius has a lot of free 3d model assets on their site, check them out!
quaternius.com/
Fonts from Google
fonts.google.com/

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

 

28 сен 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 129   
@andrewwoan
@andrewwoan 3 года назад
this channel is so underated! I love this channel!
@simondev758
@simondev758 3 года назад
Thx! Let me know if you have suggestions for future vids too.
@valencefootball9740
@valencefootball9740 3 года назад
ikr!
@kanpekiken2481
@kanpekiken2481 3 года назад
You’re making the greatest videos. I was just thinking about creating this and you just code it with all these other videos 😂 I hope to get to your level one day.
@simondev758
@simondev758 3 года назад
No reason you can't, and hopefully I can help you get there.
@kanpekiken2481
@kanpekiken2481 3 года назад
@@simondev758 I just have no idea how you can just code it all like that. Any tips? I often get stuck because of my lack of experience and am not sure how to tackle road bumps
@simondev758
@simondev758 3 года назад
Time, practice, experience. Despite the proliferation of youtube videos and "learn JS in 5 minutes" type of stuff, it's just that. I mean, most of the time I see those kind of videos or articles, they're by people I would barely consider intern level. Take on small projects, learn not just to code but to design and plan. Need a t-rex game, what goes into that? You need to build a game loop, you need to build abstractions around objects in the scene, you need a way to capture input, you need to check collisions, etc. Mash it all together, even if its ugly. Make it work. Then go back, build it again using what you learned the first time. Then build something else. Learn some new patterns, fail a few times. Failing isn't bad. Then come back, build it yet again, even better this time. Repeat until dead or retired. I've known a lot of engineers from my time in game development and being a tech lead at Google. I can't say I can point at one who didn't put in years and years of time and effort to build up their skills. It takes time. Sorry, this was a bit of a ramble/brain dump.
@kanpekiken2481
@kanpekiken2481 3 года назад
@@simondev758 no no don’t apologize for these long replies. I really appreciate them. I just feel like school failed me when it came to building projects. Everything was always planned out for us with assignments. I’m starting projects and doing all the planning but I’ll get stuck on actual creating the chase camera for example, it wasn’t until you made the video that I was able to implement it.
@simondev758
@simondev758 3 года назад
What kind of school are we talking about here? High school? College?
@BROZILLATV
@BROZILLATV 3 года назад
best channel recommendation this year, hands down
@illegallyapollo1637
@illegallyapollo1637 3 года назад
The way you say "or even godot" makes it seem like godot is worse than unity and unreal, *OFFENDED*
@simondev758
@simondev758 3 года назад
Wouldn't read too much into anything I say. I'm decent at code, but not so great at wording.
@mrpedrobraga
@mrpedrobraga 3 года назад
I love Godot but I wouldn't say it's the best for a small 3D game. 2D is where it shines!
@amitmatalon
@amitmatalon 3 года назад
Great as always! That pixel dragon though 😍
@simondev758
@simondev758 3 года назад
Hah yeah not my best work...
@anthonytonev1357
@anthonytonev1357 3 года назад
Amazing content. Very happy to get it in my recommendations. I'm watching everything now and I love the algorithm analysis in the videos. Keep it up.
@armanzanjani9545
@armanzanjani9545 3 года назад
I don't know anything about game development but I enjoy watching your videos:)
@andrazvene7004
@andrazvene7004 3 года назад
Awesome stuff Simon! I was wondering if you could make a video about something you mention at the beginning - "instead of a sensible choice of using a Game engine". Sorry the the bit long text, I tried to keep it concise :D Could you elaborate on when choosing to use Three.js to make a game would be sensible, over using one of the other engines? I.e. some common things I'd expect would be "when you're doing a simple game, with little 3d rendering needed, or you need to interact with web/html, or when game is UI heavy and HTML/Css can be great to combine with it rendering". But I'm really wondering what your opinion/thoughts on this are with your expertise? Main reason I'm wondering about this is because we've been working on a few commercial JS/HTML games - main reasons for those are that we're from web background, and worked on some JS slot games, and it was a smooth transition for us. Also our games were very UI heavy (incremental games), and there was no need for complex object interactions to handle for any game logic, other than some simple top down 2D collisions, which were easy to optimize. Lastly, our games had a ton of frequent UI updates, where we were able to separate logic and UI code easily, to update only specific DOM, and make extensions of features very lightweight and quick to expand on, and generally our main focus was to be able to host the game on web easily. So far it's served us great, and we can re-use a lot of code, but as we're looking into more graphics/animation heavy games in the future, we have to make a decision of if we should stick to vanilla JS and add Three.js into the mix for better rendering, or just make the step to using some Engine (i.e. Godot). Any advice/thoughts on this would be amazing - what are the "general" circumstances/goals of a company to keep using custom code + a rendered like Three.js, vs "just make the damn move towards an Engine"?
@simondev758
@simondev758 3 года назад
Wow! Long post heh. Let me dump some random thoughts. So to summarize, your question is what would make me choose web over Unity/Unreal and vice versa? This is a tough question. Random brain dump, may not be in a coherent order. I think your reasoning seems solid. UI heavy games, easy deployment, mostly free tools, no barrier to entry for participants. The web as a platform is powerful and can support quite a bit. There's downsides too, support for features can be sketchy, cross browser support can be painful, browser vendors move slow as hell, you know the drill. What API's do you need, and what level of support are they at in various browsers, those kind of questions. Deciding to build here in 3d also means committing to building out more of the underlying tech and/or tooling, since any "free" engine like Three.js or Babylon.js isn't going to be as feature rich, and likely not as well supported either. For example, I tried to add motion blur to this demo, found one through the three.js forums, only to find it mangled the characters. Why? Who knows. I'd have to look into it myself. Unity (and other game engines), their strengths lie in their tools, on-going support, the (at least the idea) fact you can mostly focus on the game without thinking too heavily about the platform. Getting your stuff compiled into a native format for ios, android, the steam store, whatever is going to be a hell of a lot easier with one of the existing game engines that are basically purpose built for that. For me, I'd probably look at the proposed game design and future direction of development, and see which tech stack it more closely aligns with. If your game and direction line up with the strengths of the web, I see no reason to stick to it.
@andrazvene7004
@andrazvene7004 3 года назад
@@simondev758 Yeah sorry, I've got a tendency for making those :D Thanks so much for your equally long reply, much appreciated! Just to clear up one thing, at the end I suppose you meant to say "I see no reason not to stick to it" - as in, if we have good reasons to use web, we should stick to it? I think cross browser support is generally not a big issue anymore - as long as you use a few year old features - i.e. We've recently tried to stick with ES5, but ended up using ES6 anyway, because it didn't affect our biggest market for our newest game - Steam. Which also I was surprised to not run into any bigger issues in building for Win/Mac/linux when using electron to pack, nor have we received any general problems from users. It was a bit steep learning curve when under time pressure, but once you figure it out it's really straightforward. Besides our web tech reasons, the next biggest one is code familiarity, building off old projects, and generally not currently being able to risk a few months switching to new tech. So probably, when we have to make the decision might be best we just try an engine on two, and compare making some simple games with them vs our current practices. Maybe we're overestimating efficiency of our current productivity working off old/tested codebase, so that would be a good test :D Keep up the great videos - you make complicated topics sound so easy and you touch on the essential topics useful for most games. Breath of fresh air vs a ton of "how I made my unity game and am using dev logs to promote it" - nothing against those, but your style is so much more educational, love it! Honestly, I could binge watch the vids!
@iercan1234
@iercan1234 3 года назад
ok now this is epic
@simondev758
@simondev758 3 года назад
ty!
@nauvalalzidane8235
@nauvalalzidane8235 3 года назад
Do you have any ideas how a character runs over infinite tiles in threejs?
@hasanusllu
@hasanusllu 8 месяцев назад
Thanks! How can run this project on my local and what program can we use it for run?
@mRWiil
@mRWiil Год назад
awesome works!! amazing
@TheoParis
@TheoParis 3 года назад
You deserve more subscribers :D
@simondev758
@simondev758 3 года назад
Heh thx!
@FadlySansan
@FadlySansan 3 года назад
@@simondev758 just subscribed. Want to be a part of a great journey. Trust me, you're going big, at least 10k next month
@slaviksemen4919
@slaviksemen4919 2 месяца назад
powerful content
@seanlowe7443
@seanlowe7443 2 года назад
Love watching these videos, watched the RPG one recently and had an idea: why not throw it into one of the quick JS desktop app frameworks. I used Tauri. It was minimal work to throw your JS code into a Tauri app and then I had a working standalone application running off pure JS. If you wanted to make small apps for fun and release them as such, that would be an easy way to do it!
@hund1267
@hund1267 2 года назад
Why you make the underscore on the members?
@simondev758
@simondev758 2 года назад
I use a mix of naming conventions, trying to be more consistent.
@BillyBobMusic18
@BillyBobMusic18 3 года назад
awesome video
@P8860
@P8860 3 года назад
Nice! github link for this demo?
@simondev758
@simondev758 3 года назад
Was lazy, code is up now.
@P8860
@P8860 3 года назад
@@simondev758 How would you go about linking the jumping physics to a character that jumps? Would the jump animation time be based on the jumping input? Or do I adjust the jumping input based on the animation time?
@victorisrael6191
@victorisrael6191 3 года назад
Also pro at copying and pasting😫😫.............I want to be like you!!!
@asadrahman5210
@asadrahman5210 Год назад
hey simon . Is there any source code for this game?
@simondev758
@simondev758 Год назад
github.com/simondevyoutube/Tutorial_ChromeDinosaurGame3D
@sumanboi
@sumanboi 3 года назад
noicee
@simondev758
@simondev758 3 года назад
thx!
@francescotagliavento8081
@francescotagliavento8081 3 года назад
could you make a tutorial on it?
@Sirbearisweird
@Sirbearisweird Год назад
1089 points absolutely destroyed the game
@hackedxd2813
@hackedxd2813 3 года назад
Start tutorials like this
@simondev758
@simondev758 3 года назад
like what?
@hackedxd2813
@hackedxd2813 3 года назад
@@simondev758 I just loved your tutorial series on the basics of three js but nowhere on the web have I seen a full fledged game tutorial, sure I’ve seen videos like this explaining what you did, but for slight beginners like me, could you do an entire walkthrough or like a live stream on this code
@mohammeda4872
@mohammeda4872 3 года назад
If I had a computer I would litrally not understand ANY OF THIS I would just watch some RU-vid
@simondev758
@simondev758 3 года назад
Err wait, so does that mean because you don't have a computer, you DO understand this?
@crimsongaze3303
@crimsongaze3303 3 года назад
Lol. You are funny...
@simondev758
@simondev758 3 года назад
🙂
@Devel0_pers
@Devel0_pers 2 года назад
src
@weaver3636
@weaver3636 3 года назад
Your voice is kinda soothing idk why. I know this is not a tutorial but I still managed to learn something despite being a complete beginner so thanks.
@swoorp
@swoorp 3 года назад
Hey Simon, you can go as a guest creator on the Traversy Media channel so more and more people will start to know you...
@simondev758
@simondev758 3 года назад
Oh that's awesome, I had no idea. Have you done that before?
@swoorp
@swoorp 3 года назад
@@simondev758 I asked Brad Traversy who is the owner of it, but I was not able to upload the videos so I wasn't able to be on his channel. You can email him and ask if he would let you be a guest creator (he will). And I am super hyped to see you there and see your channel grow!!!
@philippalbrecht9023
@philippalbrecht9023 2 года назад
Thats such a good suggestoins. Travesy media is awesome and I think you and Brad would get along
@ihaznoname7446
@ihaznoname7446 3 года назад
Hey SimonDev, great content! Do you plan to setup some kind of patreon or trello board and take requests for topics? I'm willing to pay to learn more about topics related to procedural world generation and performance optimisations. Trying to learn game dev in my free time and I found your videos really helpful. Also do you plan to stay with Javascript and Three.js or would you consider building something in Unreal Engine or C++? Loved your 3D World Generation series!
@simondev758
@simondev758 3 года назад
I've been thinking of ways to solicit feedback better, right now it's mostly through comments here. Patreon or something similar might be good, I'll have to look into it. Came to the right place for performance optimizations, I specialized in that in games and at Google. I have more topics in that general area queued up, along with continuing on with the procedural world generation serieis. I'm not incredibly attached to JavaScript. Have been meaning to try out Unity and Unreal for some projects. Mostly waiting for this pandemic to end so I actually have free time at home to work on things.
@ihaznoname7446
@ihaznoname7446 3 года назад
@@simondev758 Thanks, looking forward!
@BertVerhelst
@BertVerhelst 2 месяца назад
you should make a compilation of all the things people made with this. id love to see it
@IdealIdeas100
@IdealIdeas100 3 года назад
You said you would fix how the raptor keeps running while being in the air but you never did that! LIAR!
@simondev758
@simondev758 3 года назад
Aw man, I did, didn't I?
@gfdgdfgdfgdfggfdgdfgdfgdfg9709
Not sure why you use three for this project. This is so simple I would rather write it from a scratch. Much more flexible
@simondev758
@simondev758 Год назад
I don't really enjoy writing all the boilerplate to get things going, webgl, loaders, etc. Three is great for that.
@gfdgdfgdfgdfggfdgdfgdfgdfg9709
@@simondev758 Indeed if you want to use 3d models you are right. I would just have placed sprites perspectively and zoomed them into the view. In the past I made 3D games, but as a single person team 3D takes too much time and I can be much more creative and fast with 2D. Anyway, very good tutorials you've got here. Digital gold
@Soremwar
@Soremwar 3 года назад
We'd be leaving in 2050 if web devs used more flexbox, no need to be modest
@your-the-tech-talks
@your-the-tech-talks 3 года назад
This is awesome !!!
@simondev758
@simondev758 3 года назад
ty!
@johnnysunset2740
@johnnysunset2740 3 года назад
Hi SimonDev, I love your tutorials and your content, aren't you considering creating a Patreon account? I've been learning Three.js for two weeks, and with your help, I've been able to code half of my interactive 3D portfolio world during this time! I would like to see and support growth of your channel :)
@simondev758
@simondev758 3 года назад
Thx! That's awesome, is it hosted somewhere? I'm happy you're getting so much out of these. Yeah, been meaning to do "something". Not sure what, Patreon has been thrown around a few times in comments. I apparently also quality for RU-vid channel memberships now, whatever those are. I'll definitely add something at some point, a little extra cash to buy coffee wouldn't hurt hah,
@andrazvene7004
@andrazvene7004 3 года назад
@@simondev758 I'd be happy to support via Patreon as well! Plus, with it you could later easily choose to get a few extra beers by potential project reviews or chats for i.e. higher patreon levels. Not sure if that's your cup of tea, but if you were, and I ran into some issues in the future or was looking to have some special tips on a topic, your style of presentation/teaching would sell it to me immediately!
@johnnysunset2740
@johnnysunset2740 3 года назад
It's not hosted yet, but I'm going to release it in a month. I'll be happy to add a link here then. :) And I totally agree with @Andrez Vene!
@sweetelena
@sweetelena 3 года назад
Normal dev: Making this look better SimonDev: Making this still look even more less bad
@simondev758
@simondev758 3 года назад
Can I... use that line
@TheSairenSA
@TheSairenSA 3 года назад
if you also want to make it more performant and less resource intensive, you can implement LODs for the models that you've used.
@simondev758
@simondev758 3 года назад
That's a good idea, although for this project I used Quaternius's assets, which are already low poly. But a great suggestion in general and something I've implemented in bigger projects and major games I've worked on.
@ciomio3703
@ciomio3703 Год назад
sweet !
@saylilad1261
@saylilad1261 3 года назад
Just found this gem of a channel for 3.js. loved it and now gotta try it thanks a ton 🙋‍♀️
@sonihidayatulloh9242
@sonihidayatulloh9242 2 года назад
Sir, in my computer's browser doesn't work properly, it feels stuck, does it require high specifications for computer ?
@creaky2436
@creaky2436 Год назад
Please do more of the hands on games and coding ones with javascript. You’re an animal! 😊
@BusinessWolf1
@BusinessWolf1 Год назад
So.. chrome lets you make an extension to run locally in dev mode. Which means you can have an extension check for the 'offline' message, then on detection replace the page with your game.
@zdenkoklain6386
@zdenkoklain6386 3 года назад
Nice! started working on it myself but never managed to finish it 😅
@simondev758
@simondev758 3 года назад
Heh, let me know if you go back to it!
@JacBoy-k8x
@JacBoy-k8x 9 месяцев назад
That so good . Just wow professional man
@personofsomething6205
@personofsomething6205 Год назад
bro why did you destroy cacti as soon as you jump over them? I felt like they should be destroyed when they are outside of the screen
@ThunderboltPath
@ThunderboltPath 3 года назад
Fantastic! I learned a lot, thank you :)
@simondev758
@simondev758 3 года назад
Awesome, great to hear :)
@alvarolloret948
@alvarolloret948 3 года назад
Thanks for the video! Really cool 💜
@simondev758
@simondev758 3 года назад
Glad you liked it!
@DnKZone
@DnKZone 3 года назад
Link to play?
@tomg0
@tomg0 3 года назад
Very cool!
@simondev758
@simondev758 3 года назад
thx
@coding-sp
@coding-sp 3 года назад
Minecraft clone not working
@Prosony1
@Prosony1 3 года назад
5:58 what title book on this time?
@tehraptor1621
@tehraptor1621 3 года назад
your casual javascript wizardy is amazing. I am obviously also partial to this video for your taste in dinosaurs as well.
@simondev758
@simondev758 3 года назад
😀
@ElijahIsMe
@ElijahIsMe 3 года назад
Great video! Underated channel for sure. I love seeing the things people can make with three.js. I'm still a complete beginner when it comes to programming. Im self taught, and I know some javascript, python, c#, css and html, enough to make a basic unity game or basic website, but when I see some of the things people can do with three.js I feel like im still so far away from that skill level. Ive been fortunate enough to have the time and ability to practice coding for 11-13 hours a day the last 2 weeks and hopefully into the future, and ive already learned more than I had in the last 2 years of very rare coding practice, with long breaks, so I know its just about time, but its overwhelming how much there is to learn, (especially when you kind of suck at math because you didnt pay attention in high school). How did you learn to code? And do you have any advice for a learning plan, or is it all about putting in the time? Again, I love the videos, keep it up!
@simondev758
@simondev758 3 года назад
I can put together a super rough learning plan, if you let me know what you've studied thus far. But in reality, it's just time spent. There's no secret. You sound like you're on the right track.
@ElijahIsMe
@ElijahIsMe 3 года назад
@@simondev758Thanks for the reply, so far ive been studying front end web development, i havent been jumping too far ahead, just practicing the basics and learning/relearning some javascript, html, css etc. Three.js is something id love to use to do some cool front end design but I know its too far from my skill set right now. The only thing I wonder is if im learning things in the correct order, I began learning bootstrap to help me keep the elements in order when resizing the browser but right after I came across a video saying that you shouldnt use frameworks like bootstrap to make it any easier or more efficient. So im starting to feel kind of lost as to what my next step should be.
@matthewpalermo4957
@matthewpalermo4957 3 года назад
When in doubt: Flex box.
@simondev758
@simondev758 3 года назад
I feel like after I learned flexbox, I didn't need to learn any other html. So I didn't.
@matthewpalermo4957
@matthewpalermo4957 3 года назад
While I got your attention, one video topic that I'd love to see explored is order independent transparency, especially in javascript. I've been curious about it ever since i once tried to draw 2 overlapping semi-transparent spheres. Have you ever come across this problem?
@simondev758
@simondev758 3 года назад
@@matthewpalermo4957 jcgt.org/published/0002/02/09/
@inesbenjazia4417
@inesbenjazia4417 10 месяцев назад
where i can find this project it doesn't exit on github
@simondev758
@simondev758 10 месяцев назад
github.com/simondevyoutube/Tutorial_ChromeDinosaurGame3D
@DonkeyPlanet
@DonkeyPlanet 3 года назад
Hello SimonDev, I would like to ask for your advice. I'm making a PS2 Bios "remake" (those spinning, glowing balls) for my website. Reference: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Cxk1gI2sg3w.html How would you do those light trails? I tried the "afterimage postprocessing" but it didn't provide the result that I want. Looking forward to your answer, thank you in advance!
@simondev758
@simondev758 3 года назад
First thought would be it's some sort of particle trail. I could do a tutorial on them, but it would be a while before it's out. Found a quick demo online that you can probably dig the source code out of: twitter.com/mrmaxm/status/620590157306142720
@irfanmehmood3352
@irfanmehmood3352 3 года назад
Keep up your great work! Thanks
@simondev758
@simondev758 3 года назад
Thx, will do! Let me know if you have suggestions for future vids too
@skytea2
@skytea2 3 года назад
Hey man do you think javascript games will ever have a successful future or if you arent using unity/unreal its never gonna work out?
@simondev758
@simondev758 3 года назад
To me, JavaScript games inherit the primary strength of the web, which is virtually zero barrier to entry. But those game engines, they have amazing tooling and support. I don't think either are going away in the short term.
@dydufjfbfnddhbxnddj83
@dydufjfbfnddhbxnddj83 3 года назад
What's the GitHub repo name for this project?
@cmtg461
@cmtg461 3 года назад
3:46 looks like mobile games when you play them
@Hari983
@Hari983 Год назад
That was incredible
@Abdullah080
@Abdullah080 3 года назад
why the game looks lagy?
@EvOrz0
@EvOrz0 3 года назад
i realy love this channel
@mr.gullible2506
@mr.gullible2506 3 года назад
When I downloaded the zip and tried to launch the index HTM, it comes up with the starter screen saying no internet but when I try and click it doesn't go into the game. Why would this be
@simondev758
@simondev758 3 года назад
Did you just directly open the index.html or did you host the files?
@mr.gullible2506
@mr.gullible2506 3 года назад
@@simondev758 don’t really remember but I got it to work. I’m very new to JavaScript so this video was helpful although I’ll be trying to make a mobile application with react native and expo. Trying to make a mobile app with three.js and react native could be a cool video idea especially if it implemented user gestures and inputs. I’d be curious to see how complicated something like that would be. I’ve seen some demos/examples and articles about how but I don’t think I’ve seen anyone make a video creating a mobile application like this.
@merlinmonro6764
@merlinmonro6764 3 года назад
🔥
@simondev758
@simondev758 3 года назад
heh
@atharvagamerz6414
@atharvagamerz6414 Год назад
Where do we get code
@simondev758
@simondev758 Год назад
github.com/simondevyoutube/Tutorial_ChromeDinosaurGame3D
@atharvagamerz6414
@atharvagamerz6414 Год назад
Can you make a game for me pls
@piltonswrangbrahma5140
@piltonswrangbrahma5140 3 года назад
Js God
Далее
I Tried Making a 3D MMORPG Game in JavaScript
16:48
Просмотров 602 тыс.
When Optimisations Work, But for the Wrong Reasons
22:19
I made an EVEN BETTER Minecraft
12:30
Просмотров 328 тыс.
What Happens When the VILLAIN is Right?
21:17
Просмотров 3,2 млн
The ONE Texture Every Game NEEDS
9:00
Просмотров 250 тыс.
I Tried to Make Star Wars Battlefront II in JavaScript
13:32
Making The Game That Every Jurassic Park Fan Deserves
19:10
Making a Game in JavaScript with No Experience
5:49
Просмотров 844 тыс.