Hi! Gonna find some of your simple videos and show them to my little cousin who is good with scratch and is very computer savvy for her age. She also shows an interest in game design. Like she's 13 and uses an android emulator to play games that aren't on the app store anymore
Finally found a mentor to take me from novice to intermediate JS dev! Excellent presentation and speed by the way. Keep the great content coming. I have a feeling your channel is really going to take off.
Hi Martin, glad you think so. I was not sure about what pacing to do here because its a final project in a long series, I'm basically just repeating what I already explained in individual episodes on smaller projects
@@Frankslaboratory Yeah... it's not that difficult to make that explanation... but figuring out what it should be like is the main challenge. I think you did great!
This was so much fun to make! :) The best part was "actually" learning the logic behind it all as even as you went over I used my own customizations along the way since you explained things well enough that I understood the logic behind it all enough to manipulate on the fly. My favorite part was how you explained to animate smooth frames for falling. I found it really clever and such a brilliant way to get it going. Thanks as always. You're the best!
@22:42, in the Player update function, should the line "this.x += this.speed" come AFTER we check the inputs? Otherwise, the game will IGNORE the first keypress?
Great vid, Frank! I didn't mean to disappear for so long. My training is going well (and still going, lol). The project I'm working on is very broad and takes half a year to a year to have productive understanding... so I was afraid to come back to Javascript. But watching this vid made me mess with it a bit and I'm thinking the fear is fading. I think I'll put a hold on the video-callable idea I had (I guess it was obviously on 'hold') as I work through the details of my day job. Anyway, this hopefully won't stop a tribute here and there! Thanks for the vid.
Hi J. Good to see you around. I know you have a lot on your to do list now, I hope you are enjoying the challenge! You will do great. You've made a lot of progress in your professional life. Good luck with this big project and keep going strong 💪
You explain it remarkably... thank you very much... you have pure and very intelligible understanding on js, video is really helpful for beginners i guess... But i have some questions; which conditions am i have to use unity or other engines... is it logical to make professional 2d games with pure js or without any framework? (i prefer js by the way but i am looking for the very logical option... Its not a simple game i wish to make by the way also i dont want any "made by unity" splash screens or smthn. in my game and i want to make a professional impression on the player, futhermore my game is going to be available both in online(web) and cross-platform application stores)... So what are you suggesting me, please notify me... Thanks for the video...
A really good video, As always! Btw, I am having some problems with drawing images on canvas it is really laggy when I test it on my weaker laptop, Any solutions? I know I can just google it but I would like to know your opinion. :)
Hi. Probably you are animating those images right? The simplest thing to do is to make the source images smaller. Ideally the same size you are actually drawing them on canvas. There are many more optimisations that can be done but hard to explain those in a comment here
Can you tell me if adding more accurate collision detection makes the game more laggy? I was thinking to make a square to start detecting and inside the square for the tail and ears I could use an Ellipse. Do you think this is unnecessary :D ? This means it will be laggy only while near other characters?
Hi, usually when we do more complex collision checks, we fist check only the main bounding box around that character, and only if that collision triggers we do the other smaller checks. If you do it right it won't be causing performance issues. Also collision between 2 circles or 2 rectangles doesn't take much computing power, so maybe use those simpler shapes, rather than polygons or ellipses
Hii Frank, Idk if you still remember me or not but it's been very long and in Covid your Skills are developed exponentially. I am following you from 2 years approx Ig. I am very happy to see you growing. Best wishes for your future endeavours
Yes. I'm using requestAnimationFrame to serve the next frame, this method automatically adjusts to screen refresh rate. It will run much faster on high refresh rate gaming screens. It can be easily controlled with time stamps and delta time. I didnt do it in this particular class, but I explained animation timing in multiple more recent tutorial projects. It's always the same.
Sorry to just going through your videos and being picky all the time. I saw quite a bunch of em and there are things I may approach differently and want to know if I am thinking right.... Preloading images using HTML is a great approach which did not come to my mind. But what about creating a dedicated div with "style display none" and put all game assets over there? That way there is no need to list every game asset in css file. All is taken care of by that one div which is already set to not show up...
If you understand the code you can change it to any sprite sheet you want, I explain how to get complete control over any sprite in multiple examples throughout this this series.
DO NOT duplicate things like the width and height of the canvas in all of the objects you are drawing. If you resize the canvas, which you should be doing so it looks sharp on all devices, then you have to update that data across all of your objects... for no reason! Just store it as a global, or pass it into draw.
Good point. In this codebase I'm just referencing width and height properties on the main game object. If I change them in there it will change everywhere so its easy to make it responsive.
That's amazing! You should check out replit, it's an IDE in the browser which supports hosting code, so you can leave a link to your game in there and people can run it!
Is this video outdated on javascript? I followed the code perfectly up to 11 minutes and when he tests it he prints out game object while all i get it an error saying I can't import statement outside a module.
It means you forgot to set type module attribute on your main script file. I do it in a video. Also make sure you run this though a local server. Import export don't work locally. It's vanilla JavaScript it will not get outdated anytime soon
One question sir. Every thing seems to work just fine, but if I press one of the ditections keys for too long (let's say, Left Key, for example) it gets locked moving in that direction. Even if I press another key It doesn't seem to response.
Hi. Try to console log your key presses and key releases. Is your code correctly detecting key down and key up event? If it does check the part of the code thst responds to key presses and compare it with mine
@@Frankslaboratory I still can't soove it. But I've seen that It only happens with one key. It doesn't have any problems while moving left, but the array when moving Right gets superbig and gets locked. I'll keep looking. Thanks for such a fast response. Like, wow, really fast 😲. You got yourself a new suscriber.
@@elguardallavesdejaal sounds like you are not checking correctly if that key is already present in the array. I'm not sure how far in the video you are but I only add key to the array if it's not already in there so that's the part of code you should check
@@Frankslaboratory I finally solve it. It was a really silly mistake. I got one parenthesis (or better call it bracket) wrong on the If ((e.key ===...etc.). Just like you said in the video, one bracket wrong can break the code.
What I don't understand is when I call inputs in main.js suddenly the character disappears and the canvas shrinks. I've started over multiple times and rechecked my code each time. No errors but it isn't working. Frustrating.
Yes. You would do that by splitting game speed into 2 separate variables. Currently it does only horizontal movement so you would have to add vertical game speed and apply it everywhere where we currently apply game speed variable. Then by changing vertical game speed value the entire world including backgrounds player and enemies will move with it. I might do it in a future project
Seems to me like an issue with context variable. Make sure you pass that reference around correctly. Its easy to find out what's wrong. Console log all involved variables one by one from the same place in code where the error happens and the console will tell you.
EDIT: I experienced an issue where our lovely super dogs legs unfortunately sink below the bottom surface of the game! Despair! If anyone else experiences this do not worry, it gets resolved in a later portion of the video series! I had assumed I had done something wrong since it didn't happen in this video. My Lesson is LEARNED!!! Watch the full series, and trust the process lol. Thank you to this creator for showcasing such a brilliant use of JS :)
@@Frankslaboratory Thank you! I will continue forward, I was unsure if I had simply not followed this specific video correctly, so that is my apologies :)
If dog is animating way to fast for you remove * 100 from game.update(deltaTime * 100); the bigger the delta time the faster the interval is reached! you're welcome, took me a while to figure this out
Hi Evaristo, I'm applying some of the ideas I learned from your codebases. In the next episode I will apply state design pattern on top of this. Thanks for your feedback!
games are dedicated to mobile applications, then how can we benefit from them if they are in JavaScript because it is dedicated to the web? I mean, what do we benefit from when creating a game in HTML, CSS, and JavaScript?
Many benefits. For example to understand how things works. How to animate sprites. How to concert logic into a set of commands computer can understand etc.. there are not many good mobile games. All good games are on other platforms.
thanks for tutorial , but where is the starting point of learning canvas ? I don't know anything about canvas ? how can I think about project management like this?
Canvas is easy if you know JavaScript, I have a couple of HTML canvas crash courses here where I cover the basics of canvas on here. If it's still too advanced for you the best thing is to do a JavaScript course from a good teacher and then come back.
Check out my video on here called HTML5 Canvas CRASH COURSE for Beginners. It's a good benchmark to check if your JavaScript skills are ready for more complex canvas projects I do on this channel
@@greatdata6047 It really depends on what shapes you want and what technique you choose to do it. I'm drawing complex characters and enemies in this game, if you consider that complex shapes, it doesnt need much math with sprite sheets. I also draw very complex shapes with code in my other tutorials and it's simple, but it depends, I'm sure some shapes do require a lot of math
perfect as usual, the code becomes very reusable. if you do not mind, focus on full screen canvas, it is pain for me, also resizing objects inside canvas. All best wishes
Hi Alex. The code from this episode can be used to handle game object and player for many different game genres yea. I need to make a special episode on parallax backgrounds to explain how to make those full screen. I haven't explained screen size ratio calculations yet.
Hi, it means something is wrong with the variable you are calling fillRect on, if you trace it to it's source you will find a problem, console log is probably showing you the file and line of code where to start the search
How i will be able to create the game you are showing in intro after that just showing the canvas not full game where are the full game series i want to learn sir, please 😀
Hi Iqwinder, great game idea, I'm not sure if the destructible environment would be included, since that would make the tutorial quite advanced. I will make a simple version of that game soon.
Depends what you mean theres a lot of code here. Classes are outdated? ES6 functions have some specific features. You can't always replace regular function with ES6 syntax because of the way they bind 'this'. You would have to be more specific with your feedback
Console log all related objects and variables and inspect them, usually you find x or y coordinate undefined, so javascript doesn't know where to draw it etc. Always console log everything to debug :D
I'm struggling with these errors can someone please suggest a solution? 1."Access to script at 'file:///C:/Users/ahmed/Desktop/HTML&CSS%20Practice/JS%20Project/JS%20Side%20Scroller%20Game/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https." 2."Failed to load resource: net::ERR_FAILED"
@@Frankslaboratory yes but my local server was running default on MS Edge and not functioning properly, as soon as I changed to chrome the issue was solved, thank you for your reply, now completed this tutorial.
InputHandler this.keys could better use the faster data structure { } Map for storing keys. Insertion, test and deletion is then O(1) and much faster. this.keys[e.key] = true; and delete this.keys[e.key]; should do the trick.
Howdy ; i got an ultra wide Monitor...and ill be happy, if u can gave me an update to visualize on ultra wide 🙂 i love your tutorials my fix till minute 23 : this.y = 60; and commented this out : //this.game.height - this.height; but the last step wont work now so i need to found another fix
I think for ultra wide and mobile screens the best solution will be to actually manage display port size and recalculate aspect ration. I have been avoiding doing that for a while, but will cover that topic soon
🎮 FULL SERIES:🎮 ruclips.net/p/PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2 Also say hi, don't be shy :D
Thank you so much for this. I don't need more then this one. It really helped me to understand best practices, the real reason I was watching this.
@@ca4990 Glad you found it helpful! :)
@@Frankslaboratory I asked a guy on fiver how he does mobile responsiveness and he gave me a link to you. I know this is lame but it's true :))
Hi! Gonna find some of your simple videos and show them to my little cousin who is good with scratch and is very computer savvy for her age. She also shows an interest in game design. Like she's 13 and uses an android emulator to play games that aren't on the app store anymore
Hi
Finally found a mentor to take me from novice to intermediate JS dev! Excellent presentation and speed by the way. Keep the great content coming. I have a feeling your channel is really going to take off.
Amazing how many coding concepts you can fit into 28 minutes. This tutorial is super helpful, and interesting project.
Hi Martin, glad you think so. I was not sure about what pacing to do here because its a final project in a long series, I'm basically just repeating what I already explained in individual episodes on smaller projects
Really nice how you explain some things. Like the 'vy' at the very end is probably the best explanation I've seen of that process. Thanks!
Thanks Radu, I spent some time thinking about how to do this visual, glad you approve and think it was handled well.
@@Frankslaboratory Yeah... it's not that difficult to make that explanation... but figuring out what it should be like is the main challenge. I think you did great!
I loved the flying text for description, the arrows to point to exact location in the code, it is very helpful.
Hi Alex, thanks for letting me know, I can improve those even more if it helps to follow along
This is extremely underrated content. Excellent explanation from person who really knows what he's doing. Great job.
Thank you Антон, very kind
You are the GOAT of 2D canvas tutorials on RUclips! Loved this video!
Thanks James, glad you found some value!
This was so much fun to make! :)
The best part was "actually" learning the logic behind it all as even as you went over I used my own customizations along the way since you explained things well enough that I understood the logic behind it all enough to manipulate on the fly. My favorite part was how you explained to animate smooth frames for falling. I found it really clever and such a brilliant way to get it going. Thanks as always. You're the best!
Hi Kerry, sounds like you are getting really good at making 2D games, well done!
@@Frankslaboratory HOW CAN ENERGY FEATURE SHOWN IN THUMBNAIL BE IMPLEMENTED?
26:30 best illustration ever!
wow, i just start my course 4 months ago, dont know much yet , but i can see now i will be on Your channel very often :D
@22:42, in the Player update function, should the line "this.x += this.speed" come AFTER we check the inputs? Otherwise, the game will IGNORE the first keypress?
fantastic. true javascript and canvas tutorials. very presise explanation.
Hola, este es el canal de RUclips que estaba buscando!; Gracias por vuestro contenido, saludos desde Colombia
Hi Diego, nice to meet you! Greetings to Colombia.
Great vid, Frank! I didn't mean to disappear for so long. My training is going well (and still going, lol). The project I'm working on is very broad and takes half a year to a year to have productive understanding... so I was afraid to come back to Javascript. But watching this vid made me mess with it a bit and I'm thinking the fear is fading. I think I'll put a hold on the video-callable idea I had (I guess it was obviously on 'hold') as I work through the details of my day job. Anyway, this hopefully won't stop a tribute here and there! Thanks for the vid.
Hi J. Good to see you around. I know you have a lot on your to do list now, I hope you are enjoying the challenge! You will do great. You've made a lot of progress in your professional life. Good luck with this big project and keep going strong 💪
You explain it remarkably... thank you very much... you have pure and very intelligible understanding on js, video is really helpful for beginners i guess... But i have some questions; which conditions am i have to use unity or other engines... is it logical to make professional 2d games with pure js or without any framework? (i prefer js by the way but i am looking for the very logical option... Its not a simple game i wish to make by the way also i dont want any "made by unity" splash screens or smthn. in my game and i want to make a professional impression on the player, futhermore my game is going to be available both in online(web) and cross-platform application stores)... So what are you suggesting me, please notify me... Thanks for the video...
A really good video, As always! Btw, I am having some problems with drawing images on canvas it is really laggy when I test it on my weaker laptop, Any solutions? I know I can just google it but I would like to know your opinion. :)
Hi. Probably you are animating those images right? The simplest thing to do is to make the source images smaller. Ideally the same size you are actually drawing them on canvas. There are many more optimisations that can be done but hard to explain those in a comment here
Thank you! I appreciate the simplicity of your explanations. :)
Can you tell me if adding more accurate collision detection makes the game more laggy? I was thinking to make a square to start detecting and inside the square for the tail and ears I could use an Ellipse. Do you think this is unnecessary :D ? This means it will be laggy only while near other characters?
Hi, usually when we do more complex collision checks, we fist check only the main bounding box around that character, and only if that collision triggers we do the other smaller checks. If you do it right it won't be causing performance issues. Also collision between 2 circles or 2 rectangles doesn't take much computing power, so maybe use those simpler shapes, rather than polygons or ellipses
This is just gold.
Can please make a multiplayer game too?
I don't know how to edit the code for multiplayer.
As always, very well explained, congratulations and thank you for sharing Frank!
Hii Frank, Idk if you still remember me or not but it's been very long and in Covid your Skills are developed exponentially. I am following you from 2 years approx Ig. I am very happy to see you growing. Best wishes for your future endeavours
Hey. I do remember you. Its been a while since we spoke. Good to see you here and thank you for such a nice feedback. Much appreciated 😊
Amazing channel and content! I'm very happy I found your channel. Thank you :) Keep it up
Really great content, explanation and and it is fun! Also the speed is excellent! Thank you
Hi Bagus, thank you for your feedback, much appreciated
One question: doesn't it run faster (except the animations) on higher framerates? If not, how does that work, because I didn't see a check for that
Yes. I'm using requestAnimationFrame to serve the next frame, this method automatically adjusts to screen refresh rate. It will run much faster on high refresh rate gaming screens. It can be easily controlled with time stamps and delta time. I didnt do it in this particular class, but I explained animation timing in multiple more recent tutorial projects. It's always the same.
Great Explanations. I believe ive learnt a lot of design principles from this video. Thanks
Thanks for letting me know Emre, this game is quite advanced, well done if you managed to follow
Sorry to just going through your videos and being picky all the time. I saw quite a bunch of em and there are things I may approach differently and want to know if I am thinking right.... Preloading images using HTML is a great approach which did not come to my mind. But what about creating a dedicated div with "style display none" and put all game assets over there? That way there is no need to list every game asset in css file. All is taken care of by that one div which is already set to not show up...
Really like your videos Frank 🤗. And I have a request. Can you please teach physics implementation on js canvas? Like soft bodies.
Hi Kabir. Yes I would like to do some effects involving soft bodies. Will add it on my list
How can I double canvas as mirror for head-to-head 2 players playing together? This is useful on tablets such left-to-right scrolling games
Am i able to use other sprites with this code or will i have to change animation code?
If you understand the code you can change it to any sprite sheet you want, I explain how to get complete control over any sprite in multiple examples throughout this this series.
Hey, on MacOS when holding a key it also automatically keyup it. Is there any way to fix this?
hey i got it to work. i was dumb and it wasnt a macos issue. the issue was that i didnt turn my keyup into a keyup. it was still a keydown
Hi, good to know, I thought I will have to do separate code for Mac now, glad it works
DO NOT duplicate things like the width and height of the canvas in all of the objects you are drawing. If you resize the canvas, which you should be doing so it looks sharp on all devices, then you have to update that data across all of your objects... for no reason! Just store it as a global, or pass it into draw.
Good point. In this codebase I'm just referencing width and height properties on the main game object. If I change them in there it will change everywhere so its easy to make it responsive.
That's amazing!
You should check out replit, it's an IDE in the browser which supports hosting code, so you can leave a link to your game in there and people can run it!
Is this video outdated on javascript? I followed the code perfectly up to 11 minutes and when he tests it he prints out game object while all i get it an error saying I can't import statement outside a module.
It means you forgot to set type module attribute on your main script file. I do it in a video. Also make sure you run this though a local server. Import export don't work locally. It's vanilla JavaScript it will not get outdated anytime soon
@@Frankslaboratory oh ok thank you!
One question sir. Every thing seems to work just fine, but if I press one of the ditections keys for too long (let's say, Left Key, for example) it gets locked moving in that direction. Even if I press another key It doesn't seem to response.
Hi. Try to console log your key presses and key releases. Is your code correctly detecting key down and key up event? If it does check the part of the code thst responds to key presses and compare it with mine
@@Frankslaboratory I still can't soove it. But I've seen that It only happens with one key. It doesn't have any problems while moving left, but the array when moving Right gets superbig and gets locked. I'll keep looking. Thanks for such a fast response. Like, wow, really fast 😲. You got yourself a new suscriber.
@@elguardallavesdejaal sounds like you are not checking correctly if that key is already present in the array. I'm not sure how far in the video you are but I only add key to the array if it's not already in there so that's the part of code you should check
@@Frankslaboratory I finally solve it. It was a really silly mistake. I got one parenthesis (or better call it bracket) wrong on the If ((e.key ===...etc.). Just like you said in the video, one bracket wrong can break the code.
@@elguardallavesdejaal glad you managed to work it out, well done
What I don't understand is when I call inputs in main.js suddenly the character disappears and the canvas shrinks. I've started over multiple times and rechecked my code each time. No errors but it isn't working. Frustrating.
Thank you very much, im learning a lot with your vids. You are a great teacher.
Thank you for your feedback, I wasn't sure if the pacing was too fast for beginners in this one
will you be releasing more tutorials on this?? im really interested in the particle system part.
Hi. Yea I will build the whole game as shown in the intro
@@Frankslaboratory thank you
Is there a way to go up and down on the canvas. Where the camera moves? Such as hiding secrets, kind of like mario brothers going up in the clouds?
Yes. You would do that by splitting game speed into 2 separate variables. Currently it does only horizontal movement so you would have to add vertical game speed and apply it everywhere where we currently apply game speed variable. Then by changing vertical game speed value the entire world including backgrounds player and enemies will move with it. I might do it in a future project
@@Frankslaboratory awesome, thanks for the quick reply.
hoping for more videos like this, deserve more views dude
Great I get the "Uncaught TypeError: context.drawImage is not a function"
I think its something to do with the way the image is being loaded?
Seems to me like an issue with context variable. Make sure you pass that reference around correctly. Its easy to find out what's wrong. Console log all involved variables one by one from the same place in code where the error happens and the console will tell you.
I love you and your content, thanks for sharing with us
Thank you Md ❤️
Frank can I make a function and use the keydown feature through html please i need a quick response
Thank you! Do you have source code for this?
EDIT: I experienced an issue where our lovely super dogs legs unfortunately sink below the bottom surface of the game! Despair! If anyone else experiences this do not worry, it gets resolved in a later portion of the video series! I had assumed I had done something wrong since it didn't happen in this video. My Lesson is LEARNED!!! Watch the full series, and trust the process lol. Thank you to this creator for showcasing such a brilliant use of JS :)
This was a really cool tutorial, and I had fun! I just wish I wasn't so bad at programming :(
@@klingblang24 I talk about this specific issue in the tutorial and I write a line of code to fix it. Have you watched the entire class?
@@Frankslaboratory Thank you! I will continue forward, I was unsure if I had simply not followed this specific video correctly, so that is my apologies :)
If dog is animating way to fast for you remove * 100 from game.update(deltaTime * 100); the bigger the delta time the faster the interval is reached! you're welcome, took me a while to figure this out
Hi Frank!! Very good masterclass. The code is very well structured.
Hi Evaristo, I'm applying some of the ideas I learned from your codebases. In the next episode I will apply state design pattern on top of this. Thanks for your feedback!
Waiting for it!
Really love this Channel.
Hi Shaikh, thank you!
then subscribe and hit the bell icon buddy, support the channel :D
Wow this looks interesting and really fun to learn!
Glad you think so James
games are dedicated to mobile applications, then how can we benefit from them if they are in JavaScript because it is dedicated to the web? I mean, what do we benefit from when creating a game in HTML, CSS, and JavaScript?
Many benefits. For example to understand how things works. How to animate sprites. How to concert logic into a set of commands computer can understand etc.. there are not many good mobile games. All good games are on other platforms.
Bruh, this is so dope
thanks for tutorial , but where is the starting point of learning canvas ? I don't know anything about canvas ? how can I think about project management like this?
Canvas is easy if you know JavaScript, I have a couple of HTML canvas crash courses here where I cover the basics of canvas on here. If it's still too advanced for you the best thing is to do a JavaScript course from a good teacher and then come back.
Check out my video on here called HTML5 Canvas CRASH COURSE for Beginners. It's a good benchmark to check if your JavaScript skills are ready for more complex canvas projects I do on this channel
@@Frankslaboratory thanks , just one more Question , how much math do I need to create complex shapes and animation?
@@greatdata6047 It really depends on what shapes you want and what technique you choose to do it. I'm drawing complex characters and enemies in this game, if you consider that complex shapes, it doesnt need much math with sprite sheets. I also draw very complex shapes with code in my other tutorials and it's simple, but it depends, I'm sure some shapes do require a lot of math
I am a little late this time, but this one is a great video as well. Always learn something new.
Thank you for your feedback Sagar.
Can you show me your folder from the sprites next time? I'm really just a beginner when it comes to directeries
perfect as usual, the code becomes very reusable.
if you do not mind, focus on full screen canvas, it is pain for me, also resizing objects inside canvas.
All best wishes
Hi Alex. The code from this episode can be used to handle game object and player for many different game genres yea. I need to make a special episode on parallax backgrounds to explain how to make those full screen. I haven't explained screen size ratio calculations yet.
I was really enjoying this tutorial until I got this error
Uncaught TypeError: Cannot read properties of null (reading 'fillRect'):
Hi, it means something is wrong with the variable you are calling fillRect on, if you trace it to it's source you will find a problem, console log is probably showing you the file and line of code where to start the search
why the image is not showing on mine ?
Thanks for this video, this serie of videos are wow, because learn more here that in other videos
Hi Juan. Glad to hear you found some value!
How i will be able to create the game you are showing in intro after that just showing the canvas not full game where are the full game series i want to learn sir, please 😀
I will release more episodes after this to build the whole thing
@@Frankslaboratory thanks ❤️
After watching every tutorial of Frank, I now can create amazing games and animations. It's awesome! :D
If you could build POCKET TANKS .. there will be alot to learn for all of us.. thanks for what u do❤
Hi Iqwinder, great game idea, I'm not sure if the destructible environment would be included, since that would make the tutorial quite advanced. I will make a simple version of that game soon.
Awesome, man
thanks 🔥
why not do this in es6 functions and objects instead of outdated Classes?
Depends what you mean theres a lot of code here. Classes are outdated? ES6 functions have some specific features. You can't always replace regular function with ES6 syntax because of the way they bind 'this'. You would have to be more specific with your feedback
@@Frankslaboratory disregard I saw the rest of videos, good work.
got any plans for a decision tree tutorial?
amazing, as allways
Thank you Laurent
I can’t find the live button it don’t show up
Console log all related objects and variables and inspect them, usually you find x or y coordinate undefined, so javascript doesn't know where to draw it etc. Always console log everything to debug :D
Great content!
Glad you found some value Alexander
there's some code ?
Love the explanations in the video. But why the heck are the so much one-liner-code… I hope this isn’t a new trend in by the js devs
Will there be some Three.js courses?
Maybe I will make one, in the meantime you can check Chris Courses youtube channel, he has some really good Three.js stuff
@@Frankslaboratory just checked it out, thanks for your suggestion 👍
i love you frank
Nice sir 👍
I'm here to help Nilesh
video is 11 minutes old, obviously haven't seen it fuly yet, but take my like
Thank you for the like 😁
Thank u soo much
Happy to help Ali :)
thanks
Happy to help ☺️
🥵🔥
Hi Herison! 👋
5:59
Hi
Hello 👋
Present
yes :)
Subscriber through free coding champ
BRO YOU TALK TOO FAST
Noted. I will speak slower
I like to use a one-liner in the terminal for random servers. It's usually something like "python -m http.server -p 8080" or the like.
Good point, that's one way to create a server yes
I'm struggling with these errors can someone please suggest a solution? 1."Access to script at 'file:///C:/Users/ahmed/Desktop/HTML&CSS%20Practice/JS%20Project/JS%20Side%20Scroller%20Game/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https." 2."Failed to load resource: net::ERR_FAILED"
Hi Ahmed. Did you follow the beginning of the tutorial where I show how to set up a local server?
@@Frankslaboratory yes but my local server was running default on MS Edge and not functioning properly, as soon as I changed to chrome the issue was solved, thank you for your reply, now completed this tutorial.
InputHandler this.keys could better use the faster data structure { } Map for storing keys. Insertion, test and deletion is then O(1) and much faster. this.keys[e.key] = true; and delete this.keys[e.key]; should do the trick.
Hi Thomas, nice, I will test this, thank you for sharing
Howdy ;
i got an ultra wide Monitor...and ill be happy, if u can gave me an update to visualize on ultra wide 🙂
i love your tutorials
my fix till minute 23 : this.y = 60; and commented this out : //this.game.height - this.height;
but the last step wont work now so i need to found another fix
I think for ultra wide and mobile screens the best solution will be to actually manage display port size and recalculate aspect ration. I have been avoiding doing that for a while, but will cover that topic soon