Do you want more GAMEDEV content? Let me know by clicking a LIKE! :) FULL SERIES PLAYLIST: (3 games and 6 small projects to learn 2D GAMEDEV) ruclips.net/p/PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2
@@sojuthomas7727 This is a great idea and I'm working on something similar with Radu. To make physics for falling blocks in Angry birds you need advanced collision detection technique called 'separating axis theorem'. It will be advanced tutorial for sure, but it's on my list, thanks Thomas :)
@@Frankslaboratory awesome,Also I see subscribers are growing on your channel at faster rate. big congratulations to you and am so lucky to discover your channel.❤️
Thanks, man. I started watching the videos from your Game Development Masterclass playlist and added some of your other Game Dev playlists into favorites. I am not a beginner with JS, but I am still a beginner with Game Dev and I really liked it. Your explanations are really detailed and straight on point with theory and practical examples thight closely toghether for better understanding.
I coded to the end of the video, the explanation was perfect, your were a bit fast but I mean I can stop the video when ever I feel confused and try to get things working. well every thing was understandable and this is the only video and series you can follow around if you want to learn JavaScript animations ...
Having a "Game Dev" degree I remember when I was shown how to do parallax scrolling in class and couldn't believe how simple it is to implement yet how powerful it is visually.
@@Frankslaboratory Y1: GameMaker with whatever its own language is called. Python for text based "adventure" game. Y2: Python with PyGame. Java with GreenFoot. Y3: C# with Unity. Y4: C++ with Havok / PhysX and directly working with OpenGL.
@@Frankslaboratory I'll be honest with you stick with Javascript. Your tutorials are showing the "low level" important stuff that can be applied to any other programming language when it comes to game dev. Have you considered doing some tutorials with PixiJS ?
@@devsauce I will focus this channel on vanilla JavaScript for now, but I am exploring libraries on a side. Haven't tried PixiJS properly yet but I am curious to see what it can do. Then maybe I will do that with vanilla (the hard way) :D
Great tutorial! Thanks a lot ! And to avoid the gap, I think the code below works ok too: x -= gameSpeed; x2 -= gameSpeed; if (x < -2400) x = x2 + 2400 ; if (x2 < -2400) x2 = x + 2400 ;
hi! thanks for the cool tutorials :) much appreciated :) regarding the horizontal jumps for the "gameFrame" technique, the only work-around I could find is to introduce an accumulator: 1-I added an attribute to the Layer object "this.addedFrames = 0" 2-then I updated it in the update method as follows; this.addedFrames = (this.addedFrames -this.speed)%this.width; 3- finally I updated this.x as follows: this.x = (gameFrame%this.width+this.addedFrames)%this.width; this separates the increment incurred by the speed from the one by the base frames and increased step-wise at every update and thus accumudates the speed changes for the current step only. hope this helps and cheers :)
You rock.... I have watched your subscriber base shoot up and you really deserve it. Your content is great, so much thought goes into it and with each and every video you post your style of teaching is getting so much better. or maybe i am just improving so I understand it better, just kidding! You are great. thank you for all the hard work and great content.
Hi Gary, thank you for such a kind feedback, makes me very happy to read this. It does become easier when you practice. If you did multiple tutorials from my channel, some concepts like project structure and setup will be familiar and eventually it all starts making much more sense. That's why I like to keep similar code structure across my videos, so we can focus on specific techniques particular to that tutorial. Good luck with your studies, sounds to me you are doing great so far.
first videos for you i couldn't understand you easy but your level so improved and recent few videos i can understand you clearly and no points drop from me
Hi, thank you for taking the time to give me your feedback, I'm still learning how to make these courses good so I appreciate when people tell when what is done well and what can be done better
@@Frankslaboratory please don't forget how make top down camera like that used in rts games .. i watched alot videos and courses but find it hard . Hope you can make it in easy way for beginner because i building my strategy game
I've seen just a few of your vids over the last few days. You and I share teaching styles. I like your stepwise approach and showing improvement by first showing how the previous approach is not optimal. Good stuff man, I look forward to seeing more from you.
Hi Parker, thank you for this feedback. I think it has some value to see the thought process and step by step progress. Appreciate you took time to let me know
You always have the best tutorials. Even by following along, a person can learn so much in depth. Which country are you from Sir? And if your age if you tell too?
Hey! Presentation is absolutely on point with my skill level. Please keep up the good work! I especially like that you refactor your code during the tutorial to show different approaches or levels of complexity. For begginers this is sooooo valuable!
Great tutorials Frank. Learning a ton from your explanations. I found at parts that it was hard to follow and had to go back a few times to keep up since there isn't a code source provided - the codepen is not organized so it takes some searching to find. This is great material though and some of the best explanations I've seen for tutorials. Just sharing my feedback as per your request and I had to look hard to find something to provide. Thanks again!
Outstanding job well done on this course tutorial. This and the sprite animation tutorial have inspired two seperate breakthroughs in my overall knowledge of classes and manipulation of objects. I am truly grateful for your generous sharing of your knowledge with us!
@@Frankslaboratory 😊 Yes its so nice to learn js with learning bacis of gamedev . I just found your channel teaching those amazing lectures ., before this i was stuck in sfml in c++ which i dont understand and after watching your video i tried this thing . 10mins of your video took almost 3 hours to get in control with images and that parabolla effect. your explanainon are great bur i am not that smart to grab things easily.. and one thing i wanted to ask you about extention of vscode which help to see real time plz tell the name of extention? my english is not so great but hope you understand thanks a lot for your videos they are great💙
@@Frankslaboratory it does, i really apreciate here, and i know thoses videos editing are some more work, so many thx. I just discovered ur channel & going ready for every tutos, pretty nice place & pretty good time, atm am coding an HTML5 multiplayer (with nodejs) rogue-like game with editor for players they produce they own maps/places/dungeons (from self downloaded tileset) to lad in my son into coding (12 years old). thoses tutos are pretty helpfull, ur style is perfect to me !!
Thanks for the good and simple animation video. Suggestion: let gameSpeed = 0 as initial value so that the still images remain. The images will go to right by changing there statements..
I found the animation was running too fast, and when I would lower the speed too much things would start moving at the same pace. I realized that's because the minimum MOVING speed is 1 pixel per frame and multiple elements were bottoming out there at lower speeds. So I added a delay variable (initially set to 0) and a delay loop to the class! Basically if the speed is less than zero and the delay is zero, the delay is set to 1/speed, then the x doesn't move until the delay reaches zero again. It's very handy if you want the clouds to run very slowly (which is what led me to see the problem in the first place - I couldn't slow them down much!)
Quick note to add: By changing the word "change" in our event listener with the word "input", the browser will now show the game speed constantly without the need for the user to release the press of the mouse.
because if the program would use the formula x1=oldX2 and get to the line to update x1...it is going to use the wrong value of x2. This is causing the gap in the movie, the so-called "lag". Then the code gets to the next lines to update x2 and creates a newX2 = oldX2- gameSpeed. This is the value it actually wanted to use.
Maybe if you added the starting piece of a background image to end of the image, that is equal to width of the canvas, then you wouldn't need two instances of the image. That would make the image bigger but compression might recognize a repeated section. Wonder what it could process quicker two instances of a smaller image or one of a bit bigger image. Might depend on how long the image is. If it's a 9000 wide image or a 90000 wide image maybe adding 2400 would be better than having it process two instances. I dunno just my thoughts.
I am enjoying this process of learning game development with Javascript. I do have one question: why is the script file in the body? So far as I've seen before starting to go through your RUclips videos, I've only ever seen JS linked in the head...
Hi Laura, the correct placement is in the body, you only place it in the head if you are using it to include a library I guess. The placement doesn't matter if you write your code correctly since we write the code in a way that it waits until the website content is loaded, before we execute our code. For beginners, you always want to put JavaScript all the way at the bottom of the body, because you want to make sure all HTML elements are loaded in memory before any JavaScript runs
And.... if you try a city building game-like? The dea is to have some IA in it, and manage a modular map. The other idea could be to simulate parabolic trajectory: a planet around its star for exemple. The interest is to manage none linear trajectories, and calculate distanes in that context. I think (somtimes...) that with those briks it's more easy to appoach sim-games. If we want to do more than just stic to full-casual games...
Hi Pierre, great project idea, I would like to build something like this. My current approach is to break it into individual smaller projects going over techniques in detail and then use all of that for a final bigger project. Your suggestions give me a lot of content ideas, I will use it it;s on my list now, thank you for sharing
Thank you so much. I was looking for some guidance in game development using js for last 3 to 4 months. And i found your channel yesterday. This information is too much compare to what I were looking for. Another question is should I use some tool or game engine for game development like phaser, cocos2d, create js, Pixi js. Or can I do it using vanila js. I am creating a board game like chess. 50% of work is done in vanila js.
Nice explain.. Frank!! Good work... And ya.. I would like to suggest some space 🌌🌌🚀🚀 game where we need to travel planets to planets to kill evil aliens... And explore... I know that building such a game in HTML 5 CANVAS IS NOT THAT EASY... But it is just my suggestion because currently I'm working on that type of project😅😅
great idea, I like these types of games, I just need to find an artist who will draw all the aliens for me, I will plan some collabs and do this in the future. Most likely some level or random procedural generation would also fit well here
background is working but elements controlled by my keyboard class makes the background moving with the controls... and nothing is spawning (caracters, items...)
Well explained, showing each step clearly, especially that part where you used two variables, at first i was like, but why we need two variables, but then thought there might be some requirement, but then you explained, it was to show how you figure things out, which is great I think. Also loved this video. Hail Albus Frank Dumbledore🥳
Hi Aravind, for some reason it wasn't immediately obvious to me that it's possible to do with just one variable, only when I made these visualizations with scrolling images, I realised ahaha. Thank you for your feedback :)
The pain.. after I added the layer class around 27mins.. I don't see the animation anymore and I see no console errors either.. it hurts 😅 Any tips how to debug this? if I console.log the layer4 const I do see the right values going in.
38:58 would not that render frame with background offset by 0 for two consecutive frames? One frame when offset is -2400 and the second one with offset set to 0? That would cause visual freeze/lag for 2 frames, I guess.
Hi. I show how to move background in this video. It has everything. I guess you want to know how to put it together and connect with sprite animation from the previous episode?
@@tabamv4383 I connected scrolling background with sprite animation for example in my Flappy bird tutorial. I will do it again for this game with dog but it will take a while
Thanks. But I think the second way `if (this.x < -this.width) { this.x = 0 }` to calculate x position is not correct, it should be `if (this.x < -this.width) { this.x += this.width}` . For example, if canvas width is 300, the image width is 500, game speed is 300. At the third frame, the first image's x is -600, and it should goback to -100 but not 0
It depends how you position the images. Many ways to do this. Easy way to check is to run the code. My solutions in this video work. I'm not sure what you mean by speed is 300. That is so fast you wouldn't even see the images properly
You need also to fix speedModifier for delta time diff between each function layer update-draw group or (except first layer) layers x-pos won't be correct. The other way instead of outputting the same image again and again is to restream only one image at the image section's end
Hi, great comment, I don't think about delta time in my beginner tutorials, as I want to keep it as simple as possible, but you are right, I introduce 2 solutions to parallax backgrounds. The first solution could be affected by difference in delta time, will test it. When you say restream, what canvas method are we talking about. I used 2 drawImage calls to draw the same image twice. How do you restream something on canvas?
@@Frankslaboratory Get the image data and loop through each image pixel column (x or width = 1 pixel, y or height = 700) then write it back until we reach end, then reset the loop so it starts over instead of drawing image each time with offset
@@GbpsGbps-vn3jy hi,am pretty sure Franks got what u told about, here i still confused, using canvas like the tuto is showing. plz could show just some exemple plz ?
@@boristherin4104 OK: gafferongames.com/post/fix_your_timestep/ First fix the timestep using this tutorial, later if I'll find a time will post here some proof of concept
Frank instead of reloading the same backround as x2 im trying to load a random image from a function but would I call it in the update function here if(this.x
Hi, are you trying to make a random image slider that just slides random images across the screen? There are many ways to achieve that, doesn't sound very complicated. I would look at codepen, I'm sure there are some examples there where you can also see code. If you want it to work within this project just create a simple function that will generate random integer, have an array of images and each time you call it it will pull random image from that array. It depends on details of what you want, maybe images need to be specific size etc.
@@Frankslaboratory Thank you very much for replying. this channel helps a lot! Do you have any plans to do a tutorial with tile based map and camera position?
Hi Dan. Yes I would like to cover all 2d gamedev techniques. It takes a while to make 1 video for me currently as I have a full time job, but I will get to it eventually. Thank you for reminding me. This is a good video topic
I would love to do a collab with Chris, I saw all of his videos. I don't think he would be open to that, he seems like a busy guy, but if I ever get an opportunity I will do it :D
hi frank, Well done. I can able to figure out Parallax Scrolling using single variable. But I noticed a jerk somewhere let x=0; function animate(){ ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT); ctx.drawImage(backgroundLayer4,x,0); ctx.drawImage(backgroundLayer4,x+2400,0); if(x
@@Frankslaboratory when I add all the background images its unnoticeable ,but just with b/g image 4 i can see a small jerk somewhere in the animation loop.
Hi, it's because we have two variables that reset at different times, we need to think about the speed of the other image per frame and about the current position of the other one. It's not that important, the second method I use in this video is the correct way to do it. Using just one variable
@@Frankslaboratory so, it's bc when browser is rendering an img, another img has been reset to new place? can i understand like that? many thanks for your vids
@@caithesi546 It's because their positions are not aligned correctly unless you offset them. You need to make sure the image on the right is always 2400 pixels + from the current position of image on the left. 2400 is because that's how wide the images are
How do you discover 2d game artists? I've always assumed that 2D game art is a lost art and there are not many of them around. I prefer bookmarking certain artists I like then purchasing at their websites than buying from marketplaces. Btw , I love the little visualization of the infinite scrolling. I couldn't understand how it works until now.
Hi Trang, there aren't many 2d artists that specialise on game art, whenever I find one I always share their website here. I guess it;s easier for some to use marketplaces, I recently used Fiverr to pay artists to make completely custom 2d sprites for me and I was very happy with the process and result. Will be sharing more about that in an upcoming video,
Hey Frank, I just ran into an issue where after 'ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);' in the animation function the images wouldn't be printed again. I don't know why.. It would clear it after the first time and then it wouldn't draw it again. DO you know what could cause this? I feel like I'm missing something obvious.. Here's my code. Thanks again for the helpful videos! :) var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var CANVAS_WIDTH = canvas.width = 250; var CANVAS_HEIGHT = canvas.hight = 100; let gameSpeed = 4; class Layer { constructor(image, speedModifier) { this.x = 0; this.y = 0; this.width = 250; this.hight = 100; this.image = image; this.speedModifier = speedModifier; this.speed = gameSpeed * this.speedModifier; }; update() { this.speed = gameSpeed * this.speedModifier; if (this.x
@Franks laboratory Thanks for answering. First, yes I did set a path to my images, they seem to go by 3 times before it freezes. I also did some console logs and and 'x' and 'x2' reset fine but on the fourth reset 'x' decides to skyrocket into the 10,000s while 'x2' just stays at -251. It makes no sense.. When I have free time again, I'll try copying exactly what you did in the video with the same sprites and hopefully it will work then. I'll update here if I find anything else. Thanks again for answering! Cheers :) Also I'm using repl.it to run it, do you know if an insufficient amount of memory could cause something like this?
Hi Suri, thank you for letting me know, I had some problems with my website yesterday and images are hosted on there. However if I try the links in all browsers I can still access it, some browsers just give warning that my site isn't safe because it's not https but http. If you have time could you hard reload your browser cache and let me know if you are still unable to access the files at all please?
Updating parallax effect wether you go right or left. update() { this.x -= this.speed * this.speedScalar; if (this.x = this.canvasWidth) this.x = 0; console.log(this.x); }
slider.addEventListener('input', function(e) { gameSpeed = e.target.value; showGameSpeed.innerHTML = e.target.value; }); I'm going to try to get the scrolling to work in the negative direction. -20 to 20
It can be done using my particle text algorithm but there is a lot going on. I would have to make an hour long tutorial on this one, maybe I will sometimes :D
Do you want more GAMEDEV content? Let me know by clicking a LIKE! :) FULL SERIES PLAYLIST: (3 games and 6 small projects to learn 2D GAMEDEV) ruclips.net/p/PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2
Hey Frank can you do a shooter game?
@@computerscience1152 Yes! I will make multiple shooter games, since it's a broad genre, good idea
How about angry birds without frameworks and libraries?
@@sojuthomas7727 This is a great idea and I'm working on something similar with Radu. To make physics for falling blocks in Angry birds you need advanced collision detection technique called 'separating axis theorem'. It will be advanced tutorial for sure, but it's on my list, thanks Thomas :)
@@Frankslaboratory awesome,Also I see subscribers are growing on your channel at faster rate. big congratulations to you and am so lucky to discover your channel.❤️
Thanks, man. I started watching the videos from your Game Development Masterclass playlist and added some of your other Game Dev playlists into favorites. I am not a beginner with JS, but I am still a beginner with Game Dev and I really liked it. Your explanations are really detailed and straight on point with theory and practical examples thight closely toghether for better understanding.
Hands-down the best teacher so far.
This channel is most underrated ;-
Pratyush! Thank you for saying that, very kind
I coded to the end of the video, the explanation was perfect, your were a bit fast but I mean I can stop the video when ever I feel confused and try to get things working. well every thing was understandable and this is the only video and series you can follow around if you want to learn JavaScript animations ...
Having a "Game Dev" degree I remember when I was shown how to do parallax scrolling in class and couldn't believe how simple it is to implement yet how powerful it is visually.
I agree, it's simple and visually strong. It's a good coding project for beginners I think. What programming language did you study game dev in?
@@Frankslaboratory
Y1: GameMaker with whatever its own language is called. Python for text based "adventure" game.
Y2: Python with PyGame. Java with GreenFoot.
Y3: C# with Unity.
Y4: C++ with Havok / PhysX and directly working with OpenGL.
@@devsauce I need to learn some of these, which one is your favourite and which is the best for beginners?
@@Frankslaboratory I'll be honest with you stick with Javascript. Your tutorials are showing the "low level" important stuff that can be applied to any other programming language when it comes to game dev. Have you considered doing some tutorials with PixiJS ?
@@devsauce I will focus this channel on vanilla JavaScript for now, but I am exploring libraries on a side. Haven't tried PixiJS properly yet but I am curious to see what it can do. Then maybe I will do that with vanilla (the hard way) :D
Great tutorial! Thanks a lot ! And to avoid the gap, I think the code below works ok too:
x -= gameSpeed;
x2 -= gameSpeed;
if (x < -2400) x = x2 + 2400 ;
if (x2 < -2400) x2 = x + 2400 ;
Thanks a lot for this , this code helped me understand this tricky thing as I was dealing with y positioning.
Raymond was commented here :v
hi! thanks for the cool tutorials :) much appreciated :)
regarding the horizontal jumps for the "gameFrame" technique, the only work-around I could find is to introduce an accumulator:
1-I added an attribute to the Layer object "this.addedFrames = 0"
2-then I updated it in the update method as follows;
this.addedFrames = (this.addedFrames -this.speed)%this.width;
3- finally I updated this.x as follows:
this.x = (gameFrame%this.width+this.addedFrames)%this.width;
this separates the increment incurred by the speed from the one by the base frames and increased step-wise at every update and thus accumudates the speed changes for the current step only. hope this helps and cheers :)
man i'm working with game dev in javascript, your videos are helping me a lot to understand canvas
Hi Paleta, glad to hear you found some of my courses useful. Good luck with your game dev project
Thank u very much for this exciting lesson, I'm a big for of your channel, I watch it every day
Hi. Happy to hear, glad you found some value
You rock.... I have watched your subscriber base shoot up and you really deserve it. Your content is great, so much thought goes into it and with each and every video you post your style of teaching is getting so much better. or maybe i am just improving so I understand it better, just kidding! You are great. thank you for all the hard work and great content.
Hi Gary, thank you for such a kind feedback, makes me very happy to read this. It does become easier when you practice. If you did multiple tutorials from my channel, some concepts like project structure and setup will be familiar and eventually it all starts making much more sense. That's why I like to keep similar code structure across my videos, so we can focus on specific techniques particular to that tutorial. Good luck with your studies, sounds to me you are doing great so far.
Really nice! I especially like the visual explanations like the one at 38:16.
Thank you, I should do more of these
I love this channel. You explain really well. I can pause if need be.
first videos for you i couldn't understand you easy but your level so improved and recent few videos i can understand you clearly and no points drop from me
Hi, thank you for taking the time to give me your feedback, I'm still learning how to make these courses good so I appreciate when people tell when what is done well and what can be done better
@@Frankslaboratory please don't forget how make top down camera like that used in rts games .. i watched alot videos and courses but find it hard . Hope you can make it in easy way for beginner because i building my strategy game
Amazing content that you produce. Glad to have found your channel. Love from India.
You are awasome, Great job please never stop doing this
Боже, как же это круто! спасибо огромное за такую ценную информацию. Это именно то, что я искал
I've seen just a few of your vids over the last few days. You and I share teaching styles. I like your stepwise approach and showing improvement by first showing how the previous approach is not optimal. Good stuff man, I look forward to seeing more from you.
Hi Parker, thank you for this feedback. I think it has some value to see the thought process and step by step progress. Appreciate you took time to let me know
What a gem I found thank you sir :)
Coded the whole way through taking notes. Excellent video Frank.
Roman! Congratulations on completing the tutorial, and thank you for taking time to let me know you found some value there
best tutorial + best explanation ❤
You always have the best tutorials. Even by following along, a person can learn so much in depth. Which country are you from Sir? And if your age if you tell too?
Hi Shobha, I'm from Prague, Czech Republic, moved to London long time ago, where are you from? I'm in my 30's now (as my bald head suggests :D)
@@Frankslaboratory
Sir I'm from India>Haryana. I'm 14 as my hairstyle suggests (In my video 1 channel named: KDev's)
I know.who you are now :)
Best parallax what i see! Thx a lot!
Hi Egor, glad you found some value!
Love your videos Frank, best tutorials on making games with JS and canvas.
Hi Ziggy, thank you for letting me know you found some value in my content. very happy to hear that
Thank you for the amazing tutorial
Hi Asher, thank you, I'm here to help
Hey! Presentation is absolutely on point with my skill level. Please keep up the good work!
I especially like that you refactor your code during the tutorial to show different approaches or levels of complexity. For begginers this is sooooo valuable!
Muito boa as aulas, graças ao AI converti o vídeo e o áudio para português, você é muito bom nas explicações, parabéns, Valeu!
thank you for all your job dude, this toturial is amazing !
Thanks you so much, Frank, you're an awesome develloper and youtuber
Hi Adolfo, thank you, very kind to say
Happy Friday Frank, thanks for another great tutorial.
Hi Pierson, happy Friday! Glad you like it :)
@@Frankslaboratory Frank, your explanation speed as you talk through your code is perfect for me. So thanks ;-)
@@piersonlippard2911 Thank you for this feedback Pierson, I'm still adjusting my tutorial format so it helps when you let me know like this
Thank you, this was a great tutorial.
Well done! I would optimise draw() to only draw the second image if it is within the visible part of the canvas
Thanks for everything 😍
Hi Pranay, I'm here to help my fellow self taught coders :)
I really ♥️ this amazing Lab. Thanks!!!!!
I eagerly wait for your videos now a days great work ❤️
Thank you Pranjal ❤
Great tutorials Frank. Learning a ton from your explanations. I found at parts that it was hard to follow and had to go back a few times to keep up since there isn't a code source provided - the codepen is not organized so it takes some searching to find.
This is great material though and some of the best explanations I've seen for tutorials. Just sharing my feedback as per your request and I had to look hard to find something to provide.
Thanks again!
Outstanding job well done on this course tutorial. This and the sprite animation tutorial have inspired two seperate breakthroughs in my overall knowledge of classes and manipulation of objects. I am truly grateful for your generous sharing of your knowledge with us!
As always, very well explained!
Hi Evaristo, thank you ❤
my dumb brain read: "ADD DEATH TO YOUR JAVASCRIPT GAMES"
Hi Jos, lol, maybe I should rethink that thumbnail title ahaha :D
Thank you sir for your tutorials 🙂
kudos🤙🏻
Glad you like it. Thank you 😊
OMG I want you to teach me everything in life!!!! Your explanations are SOOOOOOO good. Do you have any paid curses?
Awesome tutorial...
Thank you
Best YT channel!
Thank you 🍀
your videos are amazing
thankyou for great content sir
Atharv! Nice to meet you, I think this is your first time commenting isnt it
@@Frankslaboratory 😊 Yes
its so nice to learn js with learning bacis of gamedev . I just found your channel teaching those amazing lectures .,
before this i was stuck in sfml in c++ which i dont understand and after watching your video i tried this thing .
10mins of your video took almost 3 hours to get in control with images and that parabolla effect.
your explanainon are great bur i am not that smart to grab things easily..
and one thing i wanted to ask you about extention of vscode which help to see real time plz tell the name of extention?
my english is not so great but hope you understand
thanks a lot for your videos they are great💙
Ur channel will hit 1million subs one day❤️
Thank you Arbaj, I wish ❤
Wow, i really like this type of explaining 11:00 i already understand this idea before but i am sure that you spend long time making videos😍😍
Hi Abed, maybe I should do these visuals more often if it helps, thanks for letting me know :)
@@Frankslaboratory 😍😍😍😍
💪❤
@@Frankslaboratory it does, i really apreciate here, and i know thoses videos editing are some more work, so many thx.
I just discovered ur channel & going ready for every tutos, pretty nice place & pretty good time, atm am coding an HTML5 multiplayer (with nodejs) rogue-like game with editor for players they produce they own maps/places/dungeons (from self downloaded tileset) to lad in my son into coding (12 years old). thoses tutos are pretty helpfull, ur style is perfect to me !!
Thank you! I will definitely do it. Last week I got a taste of an interesting technology - PlayCanvas. It's rather cool stuff
Hi Dmitriy, I just Googled PlayCanvas, it says it's the first WebGl game engine? Interesting.
@@Frankslaboratory Yes! especially the "after the flood" demo! I can't believe this is happening inside the browser!
@@Azkett Just checked it out, awesome, looks like browsers can now play proper 3D games at 60fps, impressive, I need to look more into WebGL :D
To fix jumps at 41:31
1) in constructor: this.shift = 0
2) in update method: this.x = -this.shift % this.width
3) in gameObjects.forEach: object.shift = object.shift % object.width + object.speed
Brilliant, didn't think of that
super video 🤗👌
Thank yo Ivana :)
really help me, many thanks
Glad to hear that
Thank you very much for this video.
I can see you are making coding content as well, awesome, keep going
@@Frankslaboratory Thank you.
Thanks for the good and simple animation video. Suggestion: let gameSpeed = 0 as initial value so that the still images remain. The images will go to right by changing there statements..
Hi James, thank you for sharing the tip, good idea
I found the animation was running too fast, and when I would lower the speed too much things would start moving at the same pace. I realized that's because the minimum MOVING speed is 1 pixel per frame and multiple elements were bottoming out there at lower speeds. So I added a delay variable (initially set to 0) and a delay loop to the class! Basically if the speed is less than zero and the delay is zero, the delay is set to 1/speed, then the x doesn't move until the delay reaches zero again.
It's very handy if you want the clouds to run very slowly (which is what led me to see the problem in the first place - I couldn't slow them down much!)
Aamzing work!
Thanks Max!
Quick note to add:
By changing the word "change" in our event listener with the word "input", the browser will now show the game speed constantly without the need for the user to release the press of the mouse.
Большое спасибо. Супер
Hi guys can you help me when you done the background how can i add the dog the in the game like he show in 0:13
if the formula at 16:08 confuses you, then maybe this helps:
if (x1 < -widthBG) {
tailX2At = (x2 - gameSpeed)
x1= (widthBG + tailX2At)
}else x1 -= gameSpeed
if (x2 < -widthBG){
tailX1At = (x1 - gameSpeed)
x2= (widthBG + tailX1At)
}else x2 -= gameSpeed
because if the program would use the formula x1=oldX2 and get to the line to update x1...it is going to use the wrong value of x2. This is causing the gap in the movie, the so-called "lag". Then the code gets to the next lines to update x2 and creates a newX2 = oldX2- gameSpeed. This is the value it actually wanted to use.
Simplemente, Genial!!
Glad you like it
Maybe if you added the starting piece of a background image to end of the image, that is equal to width of the canvas, then you wouldn't need two instances of the image. That would make the image bigger but compression might recognize a repeated section. Wonder what it could process quicker two instances of a smaller image or one of a bit bigger image. Might depend on how long the image is. If it's a 9000 wide image or a 90000 wide image maybe adding 2400 would be better than having it process two instances. I dunno just my thoughts.
I am enjoying this process of learning game development with Javascript. I do have one question: why is the script file in the body? So far as I've seen before starting to go through your RUclips videos, I've only ever seen JS linked in the head...
Hi Laura, the correct placement is in the body, you only place it in the head if you are using it to include a library I guess. The placement doesn't matter if you write your code correctly since we write the code in a way that it waits until the website content is loaded, before we execute our code.
For beginners, you always want to put JavaScript all the way at the bottom of the body, because you want to make sure all HTML elements are loaded in memory before any JavaScript runs
Ohh, I see… I did notice that every time it’s placed in the head, it has defer added after the script link
And.... if you try a city building game-like? The dea is to have some IA in it, and manage a modular map.
The other idea could be to simulate parabolic trajectory: a planet around its star for exemple. The interest is to manage none linear trajectories, and calculate distanes in that context.
I think (somtimes...) that with those briks it's more easy to appoach sim-games. If we want to do more than just stic to full-casual games...
Hi Pierre, great project idea, I would like to build something like this. My current approach is to break it into individual smaller projects going over techniques in detail and then use all of that for a final bigger project. Your suggestions give me a lot of content ideas, I will use it it;s on my list now, thank you for sharing
Thank you so much~ I want Candy Crush game
I'm thinking about doing something inspired by Candy Crush, thank you for reminding me
Thanks 😊
ctx.drawImage(backgroundLayer4, x, 0);
ctx.drawImage(backgroundLayer4, 2400 + x, 0);
x -= gameSpeed;
if (x
Thank you so much. I was looking for some guidance in game development using js for last 3 to 4 months. And i found your channel yesterday. This information is too much compare to what I were looking for.
Another question is should I use some tool or game engine for game development like phaser, cocos2d, create js, Pixi js. Or can I do it using vanila js. I am creating a board game like chess. 50% of work is done in vanila js.
Nice explain.. Frank!! Good work... And ya.. I would like to suggest some space 🌌🌌🚀🚀 game where we need to travel planets to planets to kill evil aliens... And explore... I know that building such a game in HTML 5 CANVAS IS NOT THAT EASY... But it is just my suggestion because currently I'm working on that type of project😅😅
great idea, I like these types of games, I just need to find an artist who will draw all the aliens for me, I will plan some collabs and do this in the future. Most likely some level or random procedural generation would also fit well here
background is working but elements controlled by my keyboard class makes the background moving with the controls... and nothing is spawning (caracters, items...)
Well explained, showing each step clearly, especially that part where you used two variables, at first i was like, but why we need two variables, but then thought there might be some requirement, but then you explained, it was to show how you figure things out, which is great I think. Also loved this video.
Hail Albus Frank Dumbledore🥳
Hi Aravind, for some reason it wasn't immediately obvious to me that it's possible to do with just one variable, only when I made these visualizations with scrolling images, I realised ahaha. Thank you for your feedback :)
nice 🙌
Thank you 💪
This video is simply amazing. Very helpful.
What text editor is this ?
Microsoft visual Studio
@@israelperezmasle6673 thanks mate
Hi Jack, indeed as Israel says I'm using VS code editor in most of my videos.
Thanks, bro!!!!
I'm here to help :)
please how can i get all of this images
I can't load png layers. I don't know why. I don't see any issues
The pain.. after I added the layer class around 27mins.. I don't see the animation anymore and I see no console errors either.. it hurts 😅
Any tips how to debug this? if I console.log the layer4 const I do see the right values going in.
You can send me your code on Twitter, I will tell you when your typo is when I have time to have a look
@@Frankslaboratory @MdR1328 same here :/
const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
const CANVAS_WIDTH = canvas.width = 800;
const CANVAS_HEIGHT = canvas.height = 700;
let gameSpeed = 15;
const backgroundLayer1 = new Image();
backgroundLayer1.src = 'img/layer-1.png';
const backgroundLayer2 = new Image();
backgroundLayer2.src = 'img/layer-2.png';
const backgroundLayer3 = new Image();
backgroundLayer3.src = 'img/layer-3.png';
const backgroundLayer4 = new Image();
backgroundLayer4.src = 'img/layer-4.png';
const backgroundLayer5 = new Image();
backgroundLayer5.src = 'img/layer-5.png';
class Layer{
constructor(image, speedModifier){
this.x = 0;
this.y = 0;
this.width = 2400;
this.height = 2500;
this.x2 = this.width;
this.image = image;
this.speedModifier = speedModifier;
this.speed = gameSpeed * this.speedModifier;
}
update(){
this.speed = gameSpeed * this.speedModifier;
if (this.x
A very good tutorial so far, but I have a problem, I don't know if it is my browser, but a black line appears, Is it normal? Or How can I fix this?
Hi. You need to describe your problems in much more details when it comes to code
I can check your code if you can't find the problem
God of JS!
Hails!
Nafi :D ❤
How do i make go both ways
38:58 would not that render frame with background offset by 0 for two consecutive frames? One frame when offset is -2400 and the second one with offset set to 0? That would cause visual freeze/lag for 2 frames, I guess.
Well done for noticing. Yes it would but since we serve frames very fast its not noticeable. That if statement could be written better
hey frank,
i just wanted to know if you're planing on making a video about how to move the background when our sprite move
Hi. I show how to move background in this video. It has everything. I guess you want to know how to put it together and connect with sprite animation from the previous episode?
@@Frankslaboratory yes
@@tabamv4383 I connected scrolling background with sprite animation for example in my Flappy bird tutorial. I will do it again for this game with dog but it will take a while
41:31 absolute value of gameFrame is increasing to infinite number. doesn't it put too much strain on the computer ??
Yup if you keep running it for hours. I would reset it periodically. When it's divisible by the increment - reset back to 0.
@@Frankslaboratory cool solution!! thank you!!
Thanks.
But I think the second way `if (this.x < -this.width) { this.x = 0 }` to calculate x position is not correct, it should be `if (this.x < -this.width) { this.x += this.width}` .
For example, if canvas width is 300, the image width is 500, game speed is 300. At the third frame, the first image's x is -600, and it should goback to -100 but not 0
It depends how you position the images. Many ways to do this. Easy way to check is to run the code. My solutions in this video work. I'm not sure what you mean by speed is 300. That is so fast you wouldn't even see the images properly
You need also to fix speedModifier for delta time diff between each function layer update-draw group or (except first layer) layers x-pos won't be correct.
The other way instead of outputting the same image again and again is to restream only one image at the image section's end
Hi, great comment, I don't think about delta time in my beginner tutorials, as I want to keep it as simple as possible, but you are right, I introduce 2 solutions to parallax backgrounds. The first solution could be affected by difference in delta time, will test it.
When you say restream, what canvas method are we talking about. I used 2 drawImage calls to draw the same image twice. How do you restream something on canvas?
@@Frankslaboratory Get the image data and loop through each image pixel column (x or width = 1 pixel, y or height = 700) then write it back until we reach end, then reset the loop so it starts over instead of drawing image each time with offset
@@GbpsGbps-vn3jy hi,am pretty sure Franks got what u told about, here i still confused, using canvas like the tuto is showing.
plz could show just some exemple plz ?
@@boristherin4104 OK:
gafferongames.com/post/fix_your_timestep/
First fix the timestep using this tutorial, later if I'll find a time will post here some proof of concept
that one is for the "timeline", was more curious about ur 2nd way about image data and loop (parallax with one image only if i did get it right ?)
I finally understand this technique but I notice the code won't work if I make gameSpeed a negative number. I wonder why
Its because of the reset check. If you make it move the other way you have to change how they reset back when they move off screen
@@Frankslaboratory I see. I suppose if I want to make it both way I can't use modulo any more.
Maybe. I would have to sit with it for a while and try. It's easy to replace modulo with an if else statement to make it work in any way you want
Frank instead of reloading the same backround as x2 im trying to load a random image from a function but would I call it in the update function here
if(this.x
Hi, are you trying to make a random image slider that just slides random images across the screen? There are many ways to achieve that, doesn't sound very complicated. I would look at codepen, I'm sure there are some examples there where you can also see code.
If you want it to work within this project just create a simple function that will generate random integer, have an array of images and each time you call it it will pull random image from that array. It depends on details of what you want, maybe images need to be specific size etc.
Hi Frank,
Is there a part 3 for this?
HI Dan, all my last 6 videos are kinda part of this series. all are talking about different building blocks that I will use for the final game.
@@Frankslaboratory Thank you very much for replying. this channel helps a lot!
Do you have any plans to do a tutorial with tile based map and camera position?
Hi Dan. Yes I would like to cover all 2d gamedev techniques. It takes a while to make 1 video for me currently as I have a full time job, but I will get to it eventually. Thank you for reminding me. This is a good video topic
make collab with @chris courses he is also too good in canvas and i think you both can make an awesome tutorial or game or anything you want
I would love to do a collab with Chris, I saw all of his videos. I don't think he would be open to that, he seems like a busy guy, but if I ever get an opportunity I will do it :D
hi frank, Well done. I can able to figure out Parallax Scrolling using single variable. But I noticed a jerk somewhere
let x=0;
function animate(){
ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
ctx.drawImage(backgroundLayer4,x,0);
ctx.drawImage(backgroundLayer4,x+2400,0);
if(x
Hi Soju, I can't see an issue, could it be lag because the images are too large?
@@Frankslaboratory canvas width *height = 800*700,that issue is only for backgroundimage4 for rest of images.I can't see a jerk
@@Frankslaboratory when I add all the background images its unnoticeable ,but just with b/g image 4 i can see a small jerk somewhere in the animation loop.
i still cant understand why there is gap when use 2 variables, can you explain for me please?
Hi, it's because we have two variables that reset at different times, we need to think about the speed of the other image per frame and about the current position of the other one. It's not that important, the second method I use in this video is the correct way to do it. Using just one variable
@@Frankslaboratory so, it's bc when browser is rendering an img, another img has been reset to new place? can i understand like that? many thanks for your vids
@@caithesi546 It's because their positions are not aligned correctly unless you offset them. You need to make sure the image on the right is always 2400 pixels + from the current position of image on the left. 2400 is because that's how wide the images are
@@Frankslaboratory oh i see, thank you so much
How do you discover 2d game artists? I've always assumed that 2D game art is a lost art and there are not many of them around. I prefer bookmarking certain artists I like then purchasing at their websites than buying from marketplaces.
Btw , I love the little visualization of the infinite scrolling. I couldn't understand how it works until now.
Hi Trang, there aren't many 2d artists that specialise on game art, whenever I find one I always share their website here. I guess it;s easier for some to use marketplaces, I recently used Fiverr to pay artists to make completely custom 2d sprites for me and I was very happy with the process and result. Will be sharing more about that in an upcoming video,
Can anyone recommend another channel but about full stack web that is as content-rich and project-driven as this channel? Thank you :))
I also need to know, I'm looking to learn more full stack this year
Please make js in depth course
Hi Arbaj, I want to do it, but it will take a while, I have a full time job 😅 thank you for suggestion I appreciate it
@@Frankslaboratory please give me Ur WhatsApp number
Hey Frank, I just ran into an issue where after 'ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);' in the animation function the images wouldn't be printed again. I don't know why.. It would clear it after the first time and then it wouldn't draw it again. DO you know what could cause this? I feel like I'm missing something obvious.. Here's my code. Thanks again for the helpful videos! :)
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var CANVAS_WIDTH = canvas.width = 250;
var CANVAS_HEIGHT = canvas.hight = 100;
let gameSpeed = 4;
class Layer {
constructor(image, speedModifier) {
this.x = 0;
this.y = 0;
this.width = 250;
this.hight = 100;
this.image = image;
this.speedModifier = speedModifier;
this.speed = gameSpeed * this.speedModifier;
};
update() {
this.speed = gameSpeed * this.speedModifier;
if (this.x
@Franks laboratory Thanks for answering. First, yes I did set a path to my images, they seem to go by 3 times before it freezes. I also did some console logs and and 'x' and 'x2' reset fine but on the fourth reset 'x' decides to skyrocket into the 10,000s while 'x2' just stays at -251. It makes no sense.. When I have free time again, I'll try copying exactly what you did in the video with the same sprites and hopefully it will work then. I'll update here if I find anything else. Thanks again for answering! Cheers :)
Also I'm using repl.it to run it, do you know if an insufficient amount of memory could cause something like this?
Hello, can you make a ThreeJS tutorial.
Hi Nghĩa, yes I want to do a lot of stuff on ThreeJS, it's great
@@Frankslaboratory Thank you so much!
Hey Frank, just wanted to let you know that as of now the sprites download link is broken.
Hi Suri, thank you for letting me know, I had some problems with my website yesterday and images are hosted on there. However if I try the links in all browsers I can still access it, some browsers just give warning that my site isn't safe because it's not https but http. If you have time could you hard reload your browser cache and let me know if you are still unable to access the files at all please?
can you give the source code please🙏
Updating parallax effect wether you go right or left.
update() {
this.x -= this.speed * this.speedScalar;
if (this.x = this.canvasWidth) this.x = 0;
console.log(this.x);
}
slider.addEventListener('input', function(e) {
gameSpeed = e.target.value;
showGameSpeed.innerHTML = e.target.value;
});
I'm going to try to get the scrolling to work in the negative direction. -20 to 20
Hi Tommy, this will work but you also have to change reset checks to make sure background images jump around correctly when they exit screen
Dark fores?
Hi. What do you mean?
How to make text animation like this animal.cc
It can be done using my particle text algorithm but there is a lot going on. I would have to make an hour long tutorial on this one, maybe I will sometimes :D