Parallax in JavaScript Games

Подписаться 82 тыс.

Просмотров 48 тыс.

50% 1

What is the easiest way to create endlessly scrolling backgrounds with JavaScript? How to make different layers move at different speeds and create parallax effect? How to make our scroll speed dynamic so that we can easily change it? We will learn all of that and more. Let's build JavaScript game for beginners together!
FULL SERIES PLAYLIST: (3 games and 6 small projects to learn 2D GAMEDEV) • JavaScript Game Develo...
Parallax scrolling is when background images move past the camera slower than the foreground, creating an illusion of depth in a 2D space. In this step by step tutorial for beginners, I will show how to implement parallax into your JavaScript games, using HTML canvas element. Have fun! :)
⭐️TABLE OF CONTENT ⭐️
00:00 Course Introduction and basic HTML/CSS setup
02:42 How to set up HTML5 canvas project with JavaScript
04:36 How to bring images into HTML5 canvas project
07:21 How to animate on canvas
11:00 Endlessly scrolling backgrounds technique 1
18:01 Background layers with JavaScript ES6 classes
30:49 User input with event listeners
35:01 Endlessly scrolling backgrounds technique 2
42:14 Optimisations
By the end of this JavaScript game development tutorial for beginners, you will have deep understanding about endlessly scrolling backgrounds and how to add parallax effect to your games and websites. We won't use any libraries, just HTML5 canvas, a little bit of CSS3 and plain vanilla JavaScript.
🔥 Recommended UDEMY courses 🔥
☕ Demystifying Parallax: Learn to Create Interactive Web Pages bit.ly/3uueECP
☕ Website Development Build single Page Website Parallax site bit.ly/3uueDyL
☕ HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid bit.ly/3tu9ghD
☕ Level Up Your CSS Animation Skills bit.ly/3esJkP8
☕ Learn Professional 2D Game Graphic Design in Photoshop bit.ly/2SpPdE8
☕ The Ultimate 2D Game Character Design & Animation Course bit.ly/3eoZWqT
☕ Produce Professional Pixel Art for Your New Game bit.ly/3nUrTKm
❤ Related Links ❤
Art by bevouliin.com/
Project images:
All layers zip: frankslaboratory.co.uk/downloa...
Layer 1: frankslaboratory.co.uk/downloa...
Layer 2: frankslaboratory.co.uk/downloa...
Layer 3: frankslaboratory.co.uk/downloa...
Layer 4: frankslaboratory.co.uk/downloa...
Layer 5: frankslaboratory.co.uk/downloa...
Backup links:
Layer 1 ibb.co/qs87t6x
Layer 2 ibb.co/0yYGJzF
Layer 3 ibb.co/F3870v3
Layer 4 ibb.co/WFXS3sY
Layer 5 ibb.co/BTpQvgJ
(*** you can use these background images for learning purposes. For commercial projects you can purchase it directly from the artists. To see the full selection of available GAME DEVELOPMENT ART ASSETS, please visit bevouliin.com/ ***)
🎮 Game Development MASTERCLASS SERIES with vanilla JavaScript, basics for beginners: 🎮
🐶 Project 1: Sprite animation • Sprite Animation in Ja...
🐶 Project 2: ** this video **
🐶 Project 3: NPC movement • How To Code Flying Cre...
🐶 Project 4: Rectangle collision • Collision Detection Be...
🐶 Project 5: Circle collision • Collision Detection Be...
🐶 Project 6: Triggered event based animations • Audio Visual Effects i...
🐶 Project 7: Raven game • JavaScript Shooter Gam...
🐶 Project 8: Enemy types • How To Code Creatures ...
🐶 Project 9: State Management • State Management in Games
🐶 Project 10: Easy Side-Scroller Game • JavaScript Side Scroll...
🎮 More GAME DEVELOPMENT with vanilla JavaScript and HTML canvas:
• Game Development with ...
If you are a BEGINNER you can still create beautiful animations, here is a selection of my beginner friendly projects, where I go slower and take time to explain things:
• Front End Web Developm...
If you feel more confident in your coding skills, check out some more ADVANCED ANIMATIONS with vanilla JavaScript & HTML5 canvas:
• Creative Coding with V...
👍 You can message me on TWITTER / code_laboratory
👍 Check out some of my source code on CODEPEN codepen.io/franksLaboratory
Music: (RU-vid audio library) Vacay In Fiji Riddim - Konrad OldMoney
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory

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

22 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 246

@Frankslaboratory 3 года назад

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) ru-vid.com/group/PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2

@computerscience1152 3 года назад

Hey Frank can you do a shooter game?

@Frankslaboratory 3 года назад

@@computerscience1152 Yes! I will make multiple shooter games, since it's a broad genre, good idea

@sojuthomas7727 3 года назад

How about angry birds without frameworks and libraries?

@Frankslaboratory 3 года назад

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

@sojuthomas7727 3 года назад

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

@pratyush83078 3 года назад

This channel is most underrated ;-

@Frankslaboratory 3 года назад

Pratyush! Thank you for saying that, very kind

@georgigeorgiev5036 2 месяца назад

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.

@rptoth 2 года назад

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!

@aynikill3365 2 года назад

Боже, как же это круто! спасибо огромное за такую ценную информацию. Это именно то, что я искал

@JUNGELMAN2012 Год назад

Hands-down the best teacher so far.

@parkerbelholland1037 2 года назад

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.

@Frankslaboratory 2 года назад

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

@user-uh8bq6xl6i 4 месяца назад

I love this channel. You explain really well. I can pause if need be.

@takiushio 2 года назад

thank you for all your job dude, this toturial is amazing !

@sus_tha_coder 2 года назад

Amazing content that you produce. Glad to have found your channel. Love from India.

@makalato994 Год назад

You are awasome, Great job please never stop doing this

@gct2023 3 года назад

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.

@Frankslaboratory 3 года назад

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.

@RomanKnav 3 года назад

Coded the whole way through taking notes. Excellent video Frank.

@Frankslaboratory 2 года назад

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

@devsauce 3 года назад

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 3 года назад

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?

@devsauce 3 года назад

@@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 3 года назад

@@devsauce I need to learn some of these, which one is your favourite and which is the best for beginners?

@devsauce 3 года назад

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

@Frankslaboratory 3 года назад

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

@annekeruben3238 5 месяцев назад

Thank you, this was a great tutorial.

@ayoub.amazigh Год назад

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

@nicorithner786 2 года назад

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!

@paleta3984 2 года назад

man i'm working with game dev in javascript, your videos are helping me a lot to understand canvas

@Frankslaboratory 2 года назад

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

@ziggy6698 2 года назад

Love your videos Frank, best tutorials on making games with JS and canvas.

@Frankslaboratory 2 года назад

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

@NOTHING-en2ue 2 месяца назад

best tutorial + best explanation ❤

@aaronaaronaaron5922 2 года назад

I really ♥️ this amazing Lab. Thanks!!!!!

@Timothy_lery 9 месяцев назад

Thank u very much for this exciting lesson, I'm a big for of your channel, I watch it every day

@Frankslaboratory 9 месяцев назад

Hi. Happy to hear, glad you found some value

@egorsmolin121 2 года назад

Best parallax what i see! Thx a lot!

@Frankslaboratory 2 года назад

Hi Egor, glad you found some value!

@evaristocuesta 3 года назад

As always, very well explained!

@Frankslaboratory 3 года назад

Hi Evaristo, thank you ❤

@adolfolecumberri3643 2 года назад

Thanks you so much, Frank, you're an awesome develloper and youtuber

@Frankslaboratory 2 года назад

Hi Adolfo, thank you, very kind to say

@asherytoff 3 года назад

Thank you for the amazing tutorial

@Frankslaboratory 3 года назад

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

@65103715 3 года назад

I eagerly wait for your videos now a days great work ❤️

@Frankslaboratory 3 года назад

Thank you Pranjal ❤

@Radu 3 года назад

Really nice! I especially like the visual explanations like the one at 38:16.

@Frankslaboratory 3 года назад

Thank you, I should do more of these

@Corniith 3 года назад

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

@Frankslaboratory 3 года назад

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

@Corniith 3 года назад

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

@user-xj4ve1xc8q 2 года назад

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 ;

@gauravmutha2536 Год назад

Thanks a lot for this , this code helped me understand this tricky thing as I was dealing with y positioning.

@lavdev Год назад

Raymond was commented here :v

@UlyssesOfOmaha 2 года назад

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!

@dinub8414 10 месяцев назад

Well done! I would optimise draw() to only draw the second image if it is within the visible part of the canvas

@kfernzy1289 3 года назад

Thank you sir for your tutorials 🙂 kudos🤙🏻

@Frankslaboratory 3 года назад

Glad you like it. Thank you 😊

@computerscience1152 3 года назад

Awesome tutorial...

@Frankslaboratory 3 года назад

Thank you

@madmaxdev 3 года назад

Aamzing work!

@Frankslaboratory 3 года назад

Thanks Max!

@Coding_Asmr_PraDev 3 года назад

Thanks for everything 😍

@Frankslaboratory 3 года назад

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

@piersonlippard2911 3 года назад

Happy Friday Frank, thanks for another great tutorial.

@Frankslaboratory 3 года назад

Hi Pierson, happy Friday! Glad you like it :)

@piersonlippard2911 3 года назад

@@Frankslaboratory Frank, your explanation speed as you talk through your code is perfect for me. So thanks ;-)

@Frankslaboratory 3 года назад

@@piersonlippard2911 Thank you for this feedback Pierson, I'm still adjusting my tutorial format so it helps when you let me know like this

@user-oq1rw8vd8j 9 месяцев назад

Thanks 😊

@HuynhLuong227 Год назад

really help me, many thanks

@Frankslaboratory Год назад

Glad to hear that

@appnexx1263 2 года назад

Simplemente, Genial!!

@Frankslaboratory 2 года назад

Glad you like it

@some5794 2 года назад

OMG I want you to teach me everything in life!!!! Your explanations are SOOOOOOO good. Do you have any paid curses?

@i_am_feenster 3 года назад

my dumb brain read: "ADD DEATH TO YOUR JAVASCRIPT GAMES"

@Frankslaboratory 3 года назад

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

@storieswithatharv9214 3 года назад

your videos are amazing thankyou for great content sir

@Frankslaboratory 3 года назад

Atharv! Nice to meet you, I think this is your first time commenting isnt it

@storieswithatharv9214 3 года назад

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

@Azkett 3 года назад

Thank you! I will definitely do it. Last week I got a taste of an interesting technology - PlayCanvas. It's rather cool stuff

@Frankslaboratory 3 года назад

Hi Dmitriy, I just Googled PlayCanvas, it says it's the first WebGl game engine? Interesting.

@Azkett 3 года назад

@@Frankslaboratory Yes! especially the "after the flood" demo! I can't believe this is happening inside the browser!

@Frankslaboratory 3 года назад

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

@learnwithmuhib 3 года назад

Thank you very much for this video.

@Frankslaboratory 3 года назад

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

@learnwithmuhib 3 года назад

@@Frankslaboratory Thank you.

@viniciusm.m.7822 3 года назад

Thanks, bro!!!!

@Frankslaboratory 3 года назад

I'm here to help :)

@IvanaTestuje 3 года назад

super video 🤗👌

@Frankslaboratory 3 года назад

Thank yo Ivana :)

@__GGG__1 3 года назад

Best YT channel!

@Frankslaboratory 3 года назад

Thank you 🍀

@PixelatedBrain7 3 года назад

nice 🙌

@Frankslaboratory 3 года назад

Thank you 💪

@ArbajAnsari-ku3hg 3 года назад

Ur channel will hit 1million subs one day❤️

@Frankslaboratory 3 года назад

Thank you Arbaj, I wish ❤

@NotIntrestedInLife Год назад

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.

@Xyzzzz307 3 года назад

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?

@Frankslaboratory 3 года назад

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)

@Xyzzzz307 3 года назад

@@Frankslaboratory Sir I'm from India>Haryana. I'm 14 as my hairstyle suggests (In my video 1 channel named: KDev's)

@Frankslaboratory 3 года назад

I know.who you are now :)

@unknown-bx8my 3 года назад

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

@Frankslaboratory 3 года назад

Hi Abed, maybe I should do these visuals more often if it helps, thanks for letting me know :)

@unknown-bx8my 3 года назад

@@Frankslaboratory 😍😍😍😍

@Frankslaboratory 3 года назад

💪❤

@boristherin4104 3 года назад

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

@user-cv3er1qj8y 2 года назад

Thank you so much~ I want Candy Crush game

@Frankslaboratory 2 года назад

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

@jamescao2008 2 года назад

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

@Frankslaboratory 2 года назад

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

@pipallegro Год назад

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.

@bastman-_-2963 Год назад

background is working but elements controlled by my keyboard class makes the background moving with the controls... and nothing is spawning (caracters, items...)

@goatwizard5723 2 года назад

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

@Frankslaboratory 2 года назад

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.

@joe12321 4 месяца назад

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

@gtcool129 Год назад

How do i make go both ways

@ziomalZparafii 2 года назад

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.

@Frankslaboratory 2 года назад

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

@dailychinese1396 Год назад

I can't load png layers. I don't know why. I don't see any issues

@tabamv4383 3 года назад

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

@Frankslaboratory 3 года назад

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 3 года назад

@@Frankslaboratory yes

@Frankslaboratory 3 года назад

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

@domalash 3 месяца назад

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.

@henilrmistry 3 года назад

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

@Frankslaboratory 3 года назад

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

@barefacedquestions 2 года назад

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.

@Frankslaboratory 2 года назад

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,

@jackwilkes1159 3 года назад

This video is simply amazing. Very helpful. What text editor is this ?

@israelperezmasle6673 3 года назад

Microsoft visual Studio

@jackwilkes1159 3 года назад

@@israelperezmasle6673 thanks mate

@Frankslaboratory 3 года назад

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

@pierre-louisdrevon2213 2 года назад

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

@Frankslaboratory 2 года назад

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

@Teresajmtzi 7 месяцев назад

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?

@Frankslaboratory 7 месяцев назад

Hi. You need to describe your problems in much more details when it comes to code

@Frankslaboratory 7 месяцев назад

I can check your code if you can't find the problem

@sojuthomas7727 3 года назад

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 3 года назад

Hi Soju, I can't see an issue, could it be lag because the images are too large?

@sojuthomas7727 3 года назад

@@Frankslaboratory canvas width *height = 800*700,that issue is only for backgroundimage4 for rest of images.I can't see a jerk

@sojuthomas7727 3 года назад

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

@frosty8104 Год назад

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 RU-vid videos, I've only ever seen JS linked in the head...

@Frankslaboratory Год назад

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

@frosty8104 Год назад

Ohh, I see… I did notice that every time it’s placed in the head, it has defer added after the script link

@MdR1328 Год назад

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.

@Frankslaboratory Год назад

You can send me your code on Twitter, I will tell you when your typo is when I have time to have a look

@Damian-bx5fr Год назад

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

@dzmtr8948 6 месяцев назад

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

@Frankslaboratory 5 месяцев назад

Brilliant, didn't think of that

@GbpsGbps-vn3jy 3 года назад

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

@Frankslaboratory 3 года назад

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?

@GbpsGbps-vn3jy 3 года назад

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

@boristherin4104 3 года назад

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

@GbpsGbps-vn3jy 3 года назад

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

@boristherin4104 3 года назад

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

@JUNGELMAN2012 Год назад

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

@JUNGELMAN2012 Год назад

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.

@jwt77 3 года назад

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

@jwt77 3 года назад

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

@minhbui4817 3 года назад

Can anyone recommend another channel but about full stack web that is as content-rich and project-driven as this channel? Thank you :))

@Frankslaboratory 3 года назад

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

@javifontalva7752 Год назад

I finally understand this technique but I notice the code won't work if I make gameSpeed a negative number. I wonder why

@Frankslaboratory Год назад

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

@javifontalva7752 Год назад

@@Frankslaboratory I see. I suppose if I want to make it both way I can't use modulo any more.

@Frankslaboratory Год назад

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

@surij8376 2 года назад

Hey Frank, just wanted to let you know that as of now the sprites download link is broken.

@Frankslaboratory 2 года назад

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?

@dkatorzaify 3 года назад

Hi Frank, Is there a part 3 for this?

@Frankslaboratory 3 года назад

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.

@dkatorzaify 3 года назад

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

@Frankslaboratory 3 года назад

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

@aravindvv2276 3 года назад

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🥳

@Frankslaboratory 3 года назад

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

@nghiatranvan4574 3 года назад

Hello, can you make a ThreeJS tutorial.

@Frankslaboratory 3 года назад

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

@nghiatranvan4574 3 года назад

@@Frankslaboratory Thank you so much!

@ripplesr5655 3 года назад

God of JS! Hails!

@Frankslaboratory 3 года назад

Nafi :D ❤

@caithesi546 3 года назад

i still cant understand why there is gap when use 2 variables, can you explain for me please?

@Frankslaboratory 3 года назад

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

@caithesi546 3 года назад

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

@Frankslaboratory 3 года назад

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

@caithesi546 3 года назад

@@Frankslaboratory oh i see, thank you so much

@webdevelopers1690 3 года назад

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

@Frankslaboratory 3 года назад

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

@tommyplays5436 3 года назад

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

@Frankslaboratory 3 года назад

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

@basiccoder9228 3 года назад

How to make text animation like this animal.cc

@Frankslaboratory 3 года назад

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

@yurnery832 5 месяцев назад

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

@Frankslaboratory 5 месяцев назад

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

@ghostgaming2213 Год назад

can you give the source code please🙏

@zeratul11000 5 месяцев назад

41:31 absolute value of gameFrame is increasing to infinite number. doesn't it put too much strain on the computer ??

@Frankslaboratory 5 месяцев назад

Yup if you keep running it for hours. I would reset it periodically. When it's divisible by the increment - reset back to 0.

@zeratul11000 5 месяцев назад

@@Frankslaboratory cool solution!! thank you!!

@cutmcvanz6136 3 года назад

Dark fores?

@Frankslaboratory 3 года назад

Hi. What do you mean?

@ArbajAnsari-ku3hg 3 года назад

Please make js in depth course

@Frankslaboratory 3 года назад

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

@ArbajAnsari-ku3hg 3 года назад

@@Frankslaboratory please give me Ur WhatsApp number

@pg-hq4dm Год назад

if(x1

@comoyun 3 года назад

Hellooooooo!

@Frankslaboratory 3 года назад

Hello my friend ♥

@computerscience1152 3 года назад

First

@Frankslaboratory 3 года назад

Congratulations :)

@kalx6588 3 года назад

You take any donation?

@Frankslaboratory 3 года назад

Hi Kal, so far RU-vid is just my side hobby, I don't take donations. Maybe I will make a paid course eventually, but for now all my content is for free :D

@a.sariyer Год назад

Thank you Frank this valuable and amazing tuto and techniques. I found one line solution to update with modulus: this.x = Math.floor(this.x - this.speed) % this.width;

@javifontalva7752 Год назад

I had issues drawing the image and I notice that my canvas would draw before loading the image. so I had to use img1.onload.

@danielmarinov4457 2 года назад

41:30 To make ta change of speed seamless you can use: this.x = Math.floor(this.x % this.width - this.speed); //

@drstoke Год назад

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