@@unknown-bx8my Nice work. I inspected your code. You are using function constructor rather that JavaScript class for your player and obstacle, interesting.
@@Xyzzzz307 Awesome, I love Chrome dino, the game with dog I show in this video is basically chrome dinosaur game as well, but I added a lot of extra features and graphics
Still learning and testing small features like auto-scale canvas while keeping aspect ratio, detailed loading bar/progress, import & export, touchscreen controls, and modal window similar to custom alert. I'm still not finished practicing modal window, I can do simple modal window but my goal is to make it dynamically generated and can be stacked meaning there could be another window showing at front of previous window. I got tired and lazy so I took a break from coding. 😅
What a great video. I appreciated that you show these algorithms side by side, I think it really highlights the second algorithm will be far less expensive, so thanks for going through both ways so clearly.
Hi Mark, yeah I thought this was a good opportunity to show them together as I use one of these randomly and people sometimes tell me they are confused. I should have also shown how to wrap them in reusable function where you pass first and second object to compare. Next time :D thank you for taking the time to give me your feedback
Another great JavaScript video. The way you explain the syntax needed really helps me understand what you are doing and why. Thank You for creating such amazing content.
Hi Brian, thank you, thant's a great feedback. I'm trying to cover all the small bits necessary to make games, hopefully it will allow me to make more complex games as tutorials in the future, when I don't have to explain all these basics
What is the reason for using OR logic, rather than AND logic, which would short-circuit if the first evaluation was false and thus save on calculations?
OR operator will know that collision is not happening faster because it needs only one statement to be true in this algorithm. It doesn't have to evaluate all 4 statements the way && operator does. However it needs to run all 4 checks to know when collision is happening. I think OR operator is more performant in this case but my stress test didn't show much difference. Still I wanted to show both versions here
Hi Abed, thank you, Separating axis theorem is important for physics games, like angry birds, when you want broken building to fall properly. I will do a video on that later.
I'm trying to subscribe twice, but unfortunately I can only subscribe once.. Please don't stop posting such videos and don't delete any of these videos.. I can see my bright career in ur videos..😍😍
Eparsting axis theorem. Do you have a video on that? Maybe a video talking about different kind of collision and how to solve this wpuld be a good idea.
I haven't covered more advanced collision detection techniques. Only circle rectangle and color collisions. Will do more advanced ones probably as a part of some physic engine priject
Hi Atharv, I did circle collision for example in my fish game video. It's different than this, it uses Pythagorean theorem to calculate distance between two points and then you compare that distace to radius of circle 1 + 2. I will make a quick video on that as well
I wanted to say, thank you for this video. It's been very helpful. I am running into issues; I am able to detect impassable walls (rectangles) using this algorithm; however, preventing the player from passing through the walls is eluding me. If I could detect which side of the rectangle has collided with the other, I could overcome the issue. However; that is the piece I've yet to figture out. Anyone reading this have any ideas?
Perfect collision overlap explanation. On a side note I always found dealing with input can be tricky using JS + canvas. Key is just pressed, Key is being hold, Key have been released, etc... maybe an idea for a futur video? :p (or maybe I m just blind and you already did it ^^).
Hi Peck, I recently found a good way how to do keyboard controls in an easy modular way by creating input handler class, I will make a video on keyboard and maybe even touch controls, great idea, thank you
This can be seen at Mozilla Firefox documentation Please tell how to do collision between rectangle and circle . Circle and circle How won't video give like To this comment Target 20 likes
You are right, MDN docs cover a lot when it comes to gamedev, I don't think they cover the second algorithm I show in this video, but they are a good guideline. I might make videos inspired by some of their other articles. Yes circle and circle is next, rectangle and circle will be part of larger series I will do as a collab with a friend.
Hi. This works only for non rotated rectangles. If one or both rectangles are rotated you need to use 'separating axis theorem' to detect if they collide.
Hi, there is documentation on this, but it might be hard to follow. I might do a video about this when I'm done with my current gamedev series. It's a good idea, thank you
Hi. What question do you have. There is a bug on TH-cam sometimes it automatically deletes comments with links. I can't retrieve it. You can message me on Twitter also
@@unknown-bx8my We can also chat in comments here it's fine :D Sometimes it's better like this on my new video because sometimes I miss comments on older stuff. Twitter takes a lot of my time, so it's good that you don't have it, and can do more important things in life :D
1- The video does not show the rectangles the numbers represent in line 1. They represent 2 rectangles with 1 smaller inside the other. 2- at 3:22 in test 3 you don't check if is above, as you say in the video, but actually, if the total is below. The real number given causes 4 fails: var rect1 = {x: 5, y: 5, width: 50, height: 50}; var rect2 = {x: 20, y: 10, width: 10, height: 10}; Assuming similar number as the red and blue squares on a canvas of 2000x2000: var rect1 = {x: 380, y: 170, width: 100, height: 100}; var rect2 = {x: 500, y: 100, width: 200, height: 100}; we get FAIL PASS FAIL FAIL confusing part in the video.
Some of these concepts are hard to visualise, what helps me is to read/watch explanations from multiple people, eventually it starts making sense to me
Hi coders, have you built a JavaScript game yet or are you still gathering information before your first project? What game did you build?
Yes,check out my new project:
aboudaccoumeh.github.io/bb/index.html
My first game was In html divs. I was just a dummy of chrome dino
@@unknown-bx8my Nice work. I inspected your code. You are using function constructor rather that JavaScript class for your player and obstacle, interesting.
@@Xyzzzz307 Awesome, I love Chrome dino, the game with dog I show in this video is basically chrome dinosaur game as well, but I added a lot of extra features and graphics
Still learning and testing small features like auto-scale canvas while keeping aspect ratio, detailed loading bar/progress, import & export, touchscreen controls, and modal window similar to custom alert.
I'm still not finished practicing modal window, I can do simple modal window but my goal is to make it dynamically generated and can be stacked meaning there could be another window showing at front of previous window. I got tired and lazy so I took a break from coding. 😅
If you keep going at this rate, we can have a full game engine made out of your tutorials 😄
I'm trying to cover all the basics so we can build a lot of different games with it, thanks for a nice comment ❤
Thanks to Franks Laboratory I made a simple tilemap editor for my tower defense game which also used the base code structure of his tutorials too :)
This is what I wanted for my assignment. Thank you, Frank for the tutorial and explanation! :)
Hi Shadow, glad I can help, thank you for your feedback :)
I love when people break complex things on simple parts. Great video 👍
Zakharii! thank you, nice to hear feedback like that
What a great video. I appreciated that you show these algorithms side by side, I think it really highlights the second algorithm will be far less expensive, so thanks for going through both ways so clearly.
Hi Mark, yeah I thought this was a good opportunity to show them together as I use one of these randomly and people sometimes tell me they are confused. I should have also shown how to wrap them in reusable function where you pass first and second object to compare. Next time :D thank you for taking the time to give me your feedback
well, frank's officially a genius.
Hi CS, thanks man, I'm just a student like all of us :D
The explanation came out to be extraordinary. Especially the animations on screen
Thank you, good to hear that my visuals worked :D
@@Frankslaboratory
😊
Another great JavaScript video. The way you explain the syntax needed really helps me understand what you are doing and why. Thank You for creating such amazing content.
Hi Brian, thank you, thant's a great feedback. I'm trying to cover all the small bits necessary to make games, hopefully it will allow me to make more complex games as tutorials in the future, when I don't have to explain all these basics
Great tutorial yet again. Every one needs to share this 🙏🏻. Thank you so much Frank, this one is right on time 😊.
Thank you Sid, always nice to see you here ♥
Great explanation!
Thank you Evaristo ❤
What is the reason for using OR logic, rather than AND logic, which would short-circuit if the first evaluation was false and thus save on calculations?
OR operator will know that collision is not happening faster because it needs only one statement to be true in this algorithm. It doesn't have to evaluate all 4 statements the way && operator does. However it needs to run all 4 checks to know when collision is happening. I think OR operator is more performant in this case but my stress test didn't show much difference. Still I wanted to show both versions here
yessss that was like best description ever
Please make video about collision between circle and rectangle I can't clearly understand how it's work , thanks
Thank you. This tutoriol is very useful for game developers.
I am very interesting about seperating axis theorem.
Keep making videos.🔥🔥
Hi Abed, thank you, Separating axis theorem is important for physics games, like angry birds, when you want broken building to fall properly. I will do a video on that later.
I also have vanilla javascript videos
Channel name is KDev's
@@Frankslaboratory yes pleasee😍😍
@@Xyzzzz307 i will ckeck your videos👍
@@Xyzzzz307 your channel does not have any content.
Awesome 🥳🥳
Thank you Aravind 🍀
thank you so much, this was really helpfull 😁😁❤❤
Hi Juan, glad you found some value ❤
I'm trying to subscribe twice, but unfortunately I can only subscribe once.. Please don't stop posting such videos and don't delete any of these videos.. I can see my bright career in ur videos..😍😍
Manjunath! Nice to meet you. It makes me happy to read feedback like this. Thank you. I wish you all the best in your future coding career
Eparsting axis theorem. Do you have a video on that? Maybe a video talking about different kind of collision and how to solve this wpuld be a good idea.
I haven't covered more advanced collision detection techniques. Only circle rectangle and color collisions. Will do more advanced ones probably as a part of some physic engine priject
Thanks for the video Frank. The visualisation made it really clear!
Hi Daniel, thank you, I appreciate this feedback. I will try to use more visualizations like this since it seems to help
thankyou sir,
i understood it well in flappybird tutorial video
now i will try cirlces with similar logic
Hi Atharv, I did circle collision for example in my fish game video. It's different than this, it uses Pythagorean theorem to calculate distance between two points and then you compare that distace to radius of circle 1 + 2. I will make a quick video on that as well
@@Frankslaboratory thanks sir, i will try by following that tutorial
Thanks for this great collision detection tutorial Frank
Pierson! Thank you :D I'm hoping to cover all the small bits of gamedev so we can build a lot of games later
@@Frankslaboratory That's great news thanks Frank, I'm really looking forward to coding along with all your game tuts.
@@piersonlippard2911Thank you Pierson. I've been doing a lot of gamedev lately, I hope people like it :D
Thanks a lot
Most welcome Jet
I wanted to say, thank you for this video. It's been very helpful. I am running into issues; I am able to detect impassable walls (rectangles) using this algorithm; however, preventing the player from passing through the walls is eluding me. If I could detect which side of the rectangle has collided with the other, I could overcome the issue. However; that is the piece I've yet to figture out. Anyone reading this have any ideas?
amazing video, I finally managed to make collisions for my game, thanks 🇧🇷
Glad it was helpful, I use this collision formula a lot, it's simple and effective
Totally Saving this one awesome!
Simple and very easy to understand.
Thank you. Glad to see this feedback
Good explained!
Hi Boris, thank you :)
Thank you sooooo much
Perfect collision overlap explanation.
On a side note I always found dealing with input can be tricky using JS + canvas.
Key is just pressed, Key is being hold, Key have been released, etc...
maybe an idea for a futur video? :p (or maybe I m just blind and you already did it ^^).
Hi Peck, I recently found a good way how to do keyboard controls in an easy modular way by creating input handler class, I will make a video on keyboard and maybe even touch controls, great idea, thank you
@@Frankslaboratory that will be great.
Thank you, ur explanation is wowwww
Deepak! Thank you for your feedback I appreciate it
I am stuck with collision on my gatcha game, this is going to help me a lot.
HI Dashawk, awesome, good luck with your game, I'm also making a quick video on circle collision detection
Can you please make a tutorial how to detect collision between lines
Awesome 😍
great work, thanks :)
I'm here to help
Thanks,Very helpful.
Thanks Joel
Thank you very much for sharing this information, it is really helpful ❤💥
So which is better - the first one or the second?
Hi Jake. The second one is better to use I think. I did a stress test and I couldn't see a difference though so the difference is not massive.
@@Frankslaboratory Thanks :)
Thanks for making another useful video. It is similar to what I thought.
Hi Rajesh, it's a useful technique, I use it in many games and animations. glad you liked it
Thank you bro.
Hi Emre, happy to help :)
Thanks you very simple and good explication
Glad it helped
works great! thank you
Glad to hear Vlad
AWESOME 🥰🥰🥰 JS COLLISION 🥰🥰🥰🥰
Thank you :)
Now I want to make pong in JavaScript.
Good idea, I will make a tutorial on pong or brick breaker
@@Frankslaboratory that would be cool.
Thanks
Happy to help Md.
This can be seen at Mozilla Firefox documentation
Please tell how to do collision between rectangle and circle .
Circle and circle
How won't video give like
To this comment
Target 20 likes
You are right, MDN docs cover a lot when it comes to gamedev, I don't think they cover the second algorithm I show in this video, but they are a good guideline. I might make videos inspired by some of their other articles. Yes circle and circle is next, rectangle and circle will be part of larger series I will do as a collab with a friend.
i think i learn something!
Amazing, how could this work if one of the rectangles is rotating?
Hi. This works only for non rotated rectangles. If one or both rectangles are rotated you need to use 'separating axis theorem' to detect if they collide.
@@Frankslaboratory tysm!
How to canvas animation stream recording using javascript function captureStream and MediaRecorder API sir please help me
Hi, there is documentation on this, but it might be hard to follow. I might do a video about this when I'm done with my current gamedev series. It's a good idea, thank you
@@Frankslaboratory i am waiting
hello Sir I Have Question About Canva Animation
Hi. What question do you have. There is a bug on TH-cam sometimes it automatically deletes comments with links. I can't retrieve it. You can message me on Twitter also
@@Frankslaboratory OK Sir
How to create canvas 2d animation Stream Recorder(video mp4 format recording)
I will respond on your other comment
can you make 3D game like racing car please
Good idea, will put it on my list
requires a different version of the html5 canvas but it could be possible
First! Hhhh
You win this week :D
Congratulations!!
🎉🎉🎉😄😄😄
I have not twitter account☹.
Sometimes life is better without Twitter :D
Thats life. Sometimes sweet, sometimes no twitter account 😔
@@Frankslaboratory its absolutely better. But its not better when you say: "you can chat me using twitter". And i have not☹.
@@unknown-bx8my We can also chat in comments here it's fine :D Sometimes it's better like this on my new video because sometimes I miss comments on older stuff. Twitter takes a lot of my time, so it's good that you don't have it, and can do more important things in life :D
@@Frankslaboratory 👍☺😍
Hi Sir.
Do you have time?
I want to have your interview
Hi Shobha, we can have a video call about this sometimes and plan it
@@Frankslaboratory
I am ready as always 😃
@@Frankslaboratory
Just tell the time, and you will get me there
@@Frankslaboratory
When?
🙃
1- The video does not show the rectangles the numbers represent in line 1. They represent 2 rectangles with 1 smaller inside the other.
2- at 3:22 in test 3 you don't check if is above, as you say in the video, but actually, if the total is below. The real number given causes 4 fails:
var rect1 = {x: 5, y: 5, width: 50, height: 50};
var rect2 = {x: 20, y: 10, width: 10, height: 10};
Assuming similar number as the red and blue squares on a canvas of 2000x2000:
var rect1 = {x: 380, y: 170, width: 100, height: 100};
var rect2 = {x: 500, y: 100, width: 200, height: 100};
we get FAIL PASS FAIL FAIL
confusing part in the video.
thanks Frank for this video i think I'm the only one who can't understand this hhhh
Some of these concepts are hard to visualise, what helps me is to read/watch explanations from multiple people, eventually it starts making sense to me
@@Frankslaboratory So it's normal, I didn't understand it the first time ?
Yes. Don't worry :)
Thanks
My pleasure Yaver