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.
@pratyush830783 жыл бұрын
This channel is most underrated ;-
@Frankslaboratory3 жыл бұрын
Pratyush! Thank you for saying that, very kind
@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 ...
@JUNGELMAN2012 Жыл бұрын
Hands-down the best teacher so far.
@devsauce3 жыл бұрын
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.
@Frankslaboratory3 жыл бұрын
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?
@devsauce3 жыл бұрын
@@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.
@Frankslaboratory3 жыл бұрын
@@devsauce I need to learn some of these, which one is your favourite and which is the best for beginners?
@devsauce3 жыл бұрын
@@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 ?
@Frankslaboratory3 жыл бұрын
@@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
@user-xj4ve1xc8q2 жыл бұрын
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
@gct20233 жыл бұрын
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.
@Frankslaboratory3 жыл бұрын
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.
@Timothy_lery10 ай бұрын
Thank u very much for this exciting lesson, I'm a big for of your channel, I watch it every day
@Frankslaboratory10 ай бұрын
Hi. Happy to hear, glad you found some value
@Radu3 жыл бұрын
Really nice! I especially like the visual explanations like the one at 38:16.
@Frankslaboratory3 жыл бұрын
Thank you, I should do more of these
@paleta39842 жыл бұрын
man i'm working with game dev in javascript, your videos are helping me a lot to understand canvas
@Frankslaboratory2 жыл бұрын
Hi Paleta, glad to hear you found some of my courses useful. Good luck with your game dev project
@aynikill33652 жыл бұрын
Боже, как же это круто! спасибо огромное за такую ценную информацию. Это именно то, что я искал
@NOTHING-en2ue3 ай бұрын
best tutorial + best explanation ❤
@user-uh8bq6xl6i5 ай бұрын
I love this channel. You explain really well. I can pause if need be.
@bahryjarbou4531Ай бұрын
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 :)
@Xyzzzz3073 жыл бұрын
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?
@Frankslaboratory3 жыл бұрын
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)
@Xyzzzz3073 жыл бұрын
@@Frankslaboratory Sir I'm from India>Haryana. I'm 14 as my hairstyle suggests (In my video 1 channel named: KDev's)
@Frankslaboratory3 жыл бұрын
I know.who you are now :)
@Corniith3 жыл бұрын
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
@Frankslaboratory3 жыл бұрын
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
@Corniith3 жыл бұрын
@@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
@sus_tha_coder2 жыл бұрын
Amazing content that you produce. Glad to have found your channel. Love from India.
@Coding_Asmr_PraDev3 жыл бұрын
Thanks for everything 😍
@Frankslaboratory3 жыл бұрын
Hi Pranay, I'm here to help my fellow self taught coders :)
@parkerbelholland10373 жыл бұрын
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.
@Frankslaboratory2 жыл бұрын
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
@asherytoff3 жыл бұрын
Thank you for the amazing tutorial
@Frankslaboratory3 жыл бұрын
Hi Asher, thank you, I'm here to help
@RomanKnav3 жыл бұрын
Coded the whole way through taking notes. Excellent video Frank.
@Frankslaboratory3 жыл бұрын
Roman! Congratulations on completing the tutorial, and thank you for taking time to let me know you found some value there
@i_am_feenster3 жыл бұрын
my dumb brain read: "ADD DEATH TO YOUR JAVASCRIPT GAMES"
@Frankslaboratory3 жыл бұрын
Hi Jos, lol, maybe I should rethink that thumbnail title ahaha :D
@makalato994 Жыл бұрын
You are awasome, Great job please never stop doing this
@rptoth2 жыл бұрын
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!
@joe123216 ай бұрын
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!)
@egorsmolin1212 жыл бұрын
Best parallax what i see! Thx a lot!
@Frankslaboratory2 жыл бұрын
Hi Egor, glad you found some value!
@ziggy66983 жыл бұрын
Love your videos Frank, best tutorials on making games with JS and canvas.
@Frankslaboratory2 жыл бұрын
Hi Ziggy, thank you for letting me know you found some value in my content. very happy to hear that
@takiushio2 жыл бұрын
thank you for all your job dude, this toturial is amazing !
@annekeruben32386 ай бұрын
Thank you, this was a great tutorial.
@dinub8414 Жыл бұрын
Well done! I would optimise draw() to only draw the second image if it is within the visible part of the canvas
@UlyssesOfOmaha2 жыл бұрын
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!
@adolfolecumberri36432 жыл бұрын
Thanks you so much, Frank, you're an awesome develloper and youtuber
@Frankslaboratory2 жыл бұрын
Hi Adolfo, thank you, very kind to say
@computerscience11523 жыл бұрын
Awesome tutorial...
@Frankslaboratory3 жыл бұрын
Thank you
@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.
@nicorithner7862 жыл бұрын
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!
@kfernzy12893 жыл бұрын
Thank you sir for your tutorials 🙂 kudos🤙🏻
@Frankslaboratory3 жыл бұрын
Glad you like it. Thank you 😊
@ArbajAnsari-ku3hg3 жыл бұрын
Ur channel will hit 1million subs one day❤️
@Frankslaboratory3 жыл бұрын
Thank you Arbaj, I wish ❤
@piersonlippard29113 жыл бұрын
Happy Friday Frank, thanks for another great tutorial.
@Frankslaboratory3 жыл бұрын
Hi Pierson, happy Friday! Glad you like it :)
@piersonlippard29113 жыл бұрын
@@Frankslaboratory Frank, your explanation speed as you talk through your code is perfect for me. So thanks ;-)
@Frankslaboratory3 жыл бұрын
@@piersonlippard2911 Thank you for this feedback Pierson, I'm still adjusting my tutorial format so it helps when you let me know like this
@aaronaaronaaron59222 жыл бұрын
I really ♥️ this amazing Lab. Thanks!!!!!
@651037153 жыл бұрын
I eagerly wait for your videos now a days great work ❤️
@Frankslaboratory3 жыл бұрын
Thank you Pranjal ❤
@HuynhLuong227 Жыл бұрын
really help me, many thanks
@Frankslaboratory Жыл бұрын
Glad to hear that
@LeonC07042 жыл бұрын
OMG I want you to teach me everything in life!!!! Your explanations are SOOOOOOO good. Do you have any paid curses?
@storieswithatharv92143 жыл бұрын
your videos are amazing thankyou for great content sir
@Frankslaboratory3 жыл бұрын
Atharv! Nice to meet you, I think this is your first time commenting isnt it
@storieswithatharv92143 жыл бұрын
@@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💙
@dzmtr89487 ай бұрын
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
@Frankslaboratory6 ай бұрын
Brilliant, didn't think of that
@evaristocuesta3 жыл бұрын
As always, very well explained!
@Frankslaboratory3 жыл бұрын
Hi Evaristo, thank you ❤
@domalash5 ай бұрын
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.
@user-cv3er1qj8y2 жыл бұрын
Thank you so much~ I want Candy Crush game
@Frankslaboratory2 жыл бұрын
I'm thinking about doing something inspired by Candy Crush, thank you for reminding me
@user-oq1rw8vd8j11 ай бұрын
Thanks 😊
@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.
@jamescao20082 жыл бұрын
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..
@Frankslaboratory2 жыл бұрын
Hi James, thank you for sharing the tip, good idea
@Azkett3 жыл бұрын
Thank you! I will definitely do it. Last week I got a taste of an interesting technology - PlayCanvas. It's rather cool stuff
@Frankslaboratory3 жыл бұрын
Hi Dmitriy, I just Googled PlayCanvas, it says it's the first WebGl game engine? Interesting.
@Azkett3 жыл бұрын
@@Frankslaboratory Yes! especially the "after the flood" demo! I can't believe this is happening inside the browser!
@Frankslaboratory3 жыл бұрын
@@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
@__GGG__13 жыл бұрын
Best YT channel!
@Frankslaboratory3 жыл бұрын
Thank you 🍀
@IvanaTestuje3 жыл бұрын
super video 🤗👌
@Frankslaboratory3 жыл бұрын
Thank yo Ivana :)
@unknown-bx8my3 жыл бұрын
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😍😍
@Frankslaboratory3 жыл бұрын
Hi Abed, maybe I should do these visuals more often if it helps, thanks for letting me know :)
@unknown-bx8my3 жыл бұрын
@@Frankslaboratory 😍😍😍😍
@Frankslaboratory3 жыл бұрын
💪❤
@boristherin41043 жыл бұрын
@@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 !!
@pierre-louisdrevon22132 жыл бұрын
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...
@Frankslaboratory2 жыл бұрын
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
@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 KZfaq 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
@appnexx12632 жыл бұрын
Simplemente, Genial!!
@Frankslaboratory2 жыл бұрын
Glad you like it
@learnwithmuhib3 жыл бұрын
Thank you very much for this video.
@Frankslaboratory3 жыл бұрын
I can see you are making coding content as well, awesome, keep going
@learnwithmuhib3 жыл бұрын
@@Frankslaboratory Thank you.
@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...)
@gtcool129 Жыл бұрын
How do i make go both ways
@madmaxdev3 жыл бұрын
Aamzing work!
@Frankslaboratory3 жыл бұрын
Thanks Max!
@ripplesr56553 жыл бұрын
God of JS! Hails!
@Frankslaboratory3 жыл бұрын
Nafi :D ❤
@dailychinese1396 Жыл бұрын
I can't load png layers. I don't know why. I don't see any issues
@henilrmistry3 жыл бұрын
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😅😅
@Frankslaboratory3 жыл бұрын
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
@PixelatedBrain73 жыл бұрын
nice 🙌
@Frankslaboratory3 жыл бұрын
Thank you 💪
@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.
@viniciusm.m.78223 жыл бұрын
Thanks, bro!!!!
@Frankslaboratory3 жыл бұрын
I'm here to help :)
@yurnery8326 ай бұрын
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
@Frankslaboratory6 ай бұрын
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
@jwt773 жыл бұрын
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
@jwt773 жыл бұрын
@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?
@MdR13282 жыл бұрын
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.
@Frankslaboratory2 жыл бұрын
You can send me your code on Twitter, I will tell you when your typo is when I have time to have a look
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;
@jackwilkes11593 жыл бұрын
This video is simply amazing. Very helpful. What text editor is this ?
@israelperezmasle66733 жыл бұрын
Microsoft visual Studio
@jackwilkes11593 жыл бұрын
@@israelperezmasle6673 thanks mate
@Frankslaboratory3 жыл бұрын
Hi Jack, indeed as Israel says I'm using VS code editor in most of my videos.
@aravindvv22763 жыл бұрын
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🥳
@Frankslaboratory3 жыл бұрын
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 :)
@Teresajmtzi8 ай бұрын
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?
@Frankslaboratory8 ай бұрын
Hi. You need to describe your problems in much more details when it comes to code
@Frankslaboratory8 ай бұрын
I can check your code if you can't find the problem
@ArbajAnsari-ku3hg3 жыл бұрын
Please make js in depth course
@Frankslaboratory3 жыл бұрын
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-ku3hg3 жыл бұрын
@@Frankslaboratory please give me Ur WhatsApp number
@ziomalZparafii2 жыл бұрын
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.
@Frankslaboratory2 жыл бұрын
Well done for noticing. Yes it would but since we serve frames very fast its not noticeable. That if statement could be written better
@tabamv43833 жыл бұрын
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
@Frankslaboratory3 жыл бұрын
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?
@tabamv43833 жыл бұрын
@@Frankslaboratory yes
@Frankslaboratory3 жыл бұрын
@@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
@barefacedquestions2 жыл бұрын
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.
@Frankslaboratory2 жыл бұрын
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,
@goatwizard57232 жыл бұрын
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
@Frankslaboratory2 жыл бұрын
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.
@webdevelopers16903 жыл бұрын
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
@Frankslaboratory3 жыл бұрын
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
@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
@minhbui48173 жыл бұрын
Can anyone recommend another channel but about full stack web that is as content-rich and project-driven as this channel? Thank you :))
@Frankslaboratory3 жыл бұрын
I also need to know, I'm looking to learn more full stack this year
@javifontalva7752Ай бұрын
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); }
@danielmarinov44572 жыл бұрын
41:30 To make ta change of speed seamless you can use: this.x = Math.floor(this.x % this.width - this.speed); //
@drstoke2 жыл бұрын
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
@GbpsGbps-vn3jy3 жыл бұрын
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
@Frankslaboratory3 жыл бұрын
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-vn3jy3 жыл бұрын
@@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
@boristherin41043 жыл бұрын
@@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-vn3jy3 жыл бұрын
@@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
@boristherin41043 жыл бұрын
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 ?)
@surij83762 жыл бұрын
Hey Frank, just wanted to let you know that as of now the sprites download link is broken.
@Frankslaboratory2 жыл бұрын
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?
@ghostgaming2213 Жыл бұрын
can you give the source code please🙏
@tommyplays54363 жыл бұрын
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
@Frankslaboratory3 жыл бұрын
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
@sojuthomas77273 жыл бұрын
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
@Frankslaboratory3 жыл бұрын
Hi Soju, I can't see an issue, could it be lag because the images are too large?
@sojuthomas77273 жыл бұрын
@@Frankslaboratory canvas width *height = 800*700,that issue is only for backgroundimage4 for rest of images.I can't see a jerk
@sojuthomas77273 жыл бұрын
@@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.
@cutmcvanz61363 жыл бұрын
Dark fores?
@Frankslaboratory3 жыл бұрын
Hi. What do you mean?
@dkatorzaify3 жыл бұрын
Hi Frank, Is there a part 3 for this?
@Frankslaboratory3 жыл бұрын
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.
@dkatorzaify3 жыл бұрын
@@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?
@Frankslaboratory3 жыл бұрын
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
@zeratul110006 ай бұрын
41:31 absolute value of gameFrame is increasing to infinite number. doesn't it put too much strain on the computer ??
@Frankslaboratory6 ай бұрын
Yup if you keep running it for hours. I would reset it periodically. When it's divisible by the increment - reset back to 0.
@zeratul110006 ай бұрын
@@Frankslaboratory cool solution!! thank you!!
@nghiatranvan45743 жыл бұрын
Hello, can you make a ThreeJS tutorial.
@Frankslaboratory3 жыл бұрын
Hi Nghĩa, yes I want to do a lot of stuff on ThreeJS, it's great
@nghiatranvan45743 жыл бұрын
@@Frankslaboratory Thank you so much!
@caithesi5463 жыл бұрын
i still cant understand why there is gap when use 2 variables, can you explain for me please?
@Frankslaboratory3 жыл бұрын
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
@caithesi5463 жыл бұрын
@@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
@Frankslaboratory3 жыл бұрын
@@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
@caithesi5463 жыл бұрын
@@Frankslaboratory oh i see, thank you so much
@Frankslaboratory3 жыл бұрын
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) kzfaq.info/sun/PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2
@computerscience11523 жыл бұрын
Hey Frank can you do a shooter game?
@Frankslaboratory3 жыл бұрын
@@computerscience1152 Yes! I will make multiple shooter games, since it's a broad genre, good idea
@sojuthomas77273 жыл бұрын
How about angry birds without frameworks and libraries?
@Frankslaboratory3 жыл бұрын
@@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 :)
@sojuthomas77273 жыл бұрын
@@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.❤️
@basiccoder92283 жыл бұрын
How to make text animation like this animal.cc
@Frankslaboratory3 жыл бұрын
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