Pratyush! Thank you for saying that, very kind

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

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 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.

Hi. Happy to hear, glad you found some value

Thank you, I should do more of these

Hi Paleta, glad to hear you found some of my courses useful. Good luck with your game dev project

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 :)

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

Hi Pranay, I'm here to help my fellow self taught coders :)

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

Hi Asher, thank you, I'm here to help

Roman! Congratulations on completing the tutorial, and thank you for taking time to let me know you found some value there

Hi Jos, lol, maybe I should rethink that thumbnail title ahaha :D

Hi Egor, glad you found some value!

Hi Ziggy, thank you for letting me know you found some value in my content. very happy to hear that

Hi Adolfo, thank you, very kind to say

Thank you

Glad you like it. Thank you 😊

Thank you Arbaj, I wish ❤

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 Pranjal ❤

Glad to hear that

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💙

Brilliant, didn't think of that

Hi Evaristo, thank you ❤

I'm thinking about doing something inspired by Candy Crush, thank you for reminding me

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.

Hi James, thank you for sharing the tip, good idea

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

Thank you 🍀

Thank yo Ivana :)

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 !!

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

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

Glad you like it

I can see you are making coding content as well, awesome, keep going

@@Frankslaboratory Thank you.

Thanks Max!

Nafi :D ❤

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

Thank you 💪

I'm here to help :)

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

@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?

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

Microsoft visual Studio

@@israelperezmasle6673 thanks mate

Hi Jack, indeed as Israel says I'm using VS code editor in most of my videos.

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 :)

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

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

Well done for noticing. Yes it would but since we serve frames very fast its not noticeable. That if statement could be written better

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

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,

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.

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

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

I also need to know, I'm looking to learn more full stack this year

The fraction is important -- just need: this.x = this.x % this.width - this.speed; Math.floor() makes all layers move at the same speed when gameSpeed == 1

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 ?)

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?

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

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.

Hi. What do you mean?

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

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!!

Hi Nghĩa, yes I want to do a lot of stuff on ThreeJS, it's great

@@Frankslaboratory Thank you so much!

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

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.❤️

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

Congratulations :)

Hello my friend ♥