Part 1 here, have fun! :D kzfaq.info/get/bejne/mZNhl6WVlsWraHU.html What else should we implement
@cwlindWX2 жыл бұрын
Great stuff Frank! Whether in this series or somewhere else, it would be cool to see how an area or world map is slowly revealed as the player moves around. I was watching this video (kzfaq.info/get/bejne/bKl7ipqlsdyZlWQ.html) and he uses the P5.js library. And I thought, I bet Frank don't need no stinkin' library! (Since you are the canvas master! Nothing wrong with using libraries!). Anyway, I watched that video and wondered if you wanted a challenge or video idea :) Thanks again!
@Frankslaboratory2 жыл бұрын
@@cwlindWX Hi Clark, I could do that scratch card effect with vanilla, it wouldn't actually take much more code than using a library. Not sure how I would implement this particular effect into a game. I could for example do that with each level you uncover a bigger portion of the game world. I will put it on my list, let's see if I can include something like that in a future project, thank you for the idea.
@abitala2 жыл бұрын
Thank you very much, Frank, for a useful and unique course, you opened the world of web game development to me) I noticed one thing about fps control that might be helpful: when we check "if (timer > interval)..." we get error in one deltaTime iteration Because, for example, fps = 20 => interval = 1000/20 = 50 And if 16.666666 * 3 then we get 49.999998 It's almost an early 50, but we technically need another iteration. So I suggest "if (timer >= interval - deltaTime)..." Found by accident while debugging player teleportation and mana replenishment timers hah Thanks again for your work, I wish you good luck in the growth of the channel) 🔥
@javifontalva7752 Жыл бұрын
@@Frankslaboratory Maybe making a platform game would be cool.
@PhorssaOneDev Жыл бұрын
Hi Frank, I completed this part a few days ago...thank you!Very informative. I am HOOKED! 😀
@javifontalva7752 Жыл бұрын
This is my next challenge. Bring it on!
@marcus_lyn2 жыл бұрын
random small improvement I found: this movement code for the background causes a small stutter when we reset the image back to x=0, this is because the game speed pushes x by 3 and sometimes pushes x past the ultimate width, so when we get set back to 0 you can see the stutter, we also did not account for the gamespeed in this scenario. To fix this, in the update method for Layer class, I instead increment x by the width of the background image, and I also subtract the game speed to keep moving seamlessly. code: if (this.x < -this.width) this.x += this.width - (this.game.speed*this.speedModifier);
@carltone2 жыл бұрын
Frank, love the code refinements, I always learn something new from your excellent tutorials. Thanks for sharing your knowledge!
@Frankslaboratory2 жыл бұрын
Thanks Carl, I'm explaining some things in this series I haven't shown before, let's see if it's still beginner friendly, maybe my future projects will have to be a bit simpler. Glad you found some value
@techtime31252 жыл бұрын
Dude I started this series when I started learning js but i didnt understand anything now i am much advanced and I restarted this, dude the way you explain and the easy way you code i love that
@Frankslaboratory2 жыл бұрын
It feels good when you see yourself progressing doesn't it. I usually have to do each new technique 3 to 5 times before it starts making sense to me. Practice is important. Have fun with the project
@techtime31252 жыл бұрын
@@Frankslaboratory Yeah Agreed
@phoenixxofficial2 жыл бұрын
A lot of great information, wonderfully explained with useful on screen notes to help with understanding - good job as always Frank! (:
@Frankslaboratory2 жыл бұрын
Hi Phoenixx, glad you find my new teaching style useful, still improving it :D
@palmpixiplus Жыл бұрын
This finally made Enums make so much sense to me. Thank you so very much!!!!
@Frankslaboratory Жыл бұрын
I'm here to help!
@nicklansbury31662 жыл бұрын
Another masterpiece. Thanks Frank. Enjoy your weekend.
@Frankslaboratory2 жыл бұрын
Nick! Have a great weekend :)
@christopherc45262 жыл бұрын
This channel is a great find. Thank you for these excellent tutorials. Wishing you great success.
@Frankslaboratory2 жыл бұрын
Hi Chris, nice to meet you, glad you found some value!
@DannyHille2 жыл бұрын
Tip: when using "Enum types" like states, you can use Objet.freeze to ensure the values doesn't change: like this: const states = Object.freeze({SITTING:0, RUNNING:1});
@TheLegendOfNiko2 жыл бұрын
Thank you so much mate. I’ve been looking for a way to create this for months !!
@Frankslaboratory2 жыл бұрын
Happy to help! :)
@souerico Жыл бұрын
Just discovered the channel! It is amazing!I'm learning a lot! Thank you so much!
@Frankslaboratory Жыл бұрын
Nice to meet you Erico!
@CodingBill2 жыл бұрын
I love the way you teach things :)
@lexart12 жыл бұрын
Díky. Skvělá práce. Skvělý tutoriál.
@Frankslaboratory2 жыл бұрын
Cestina, to uz jsem dlouho nevidel :D Ahooj
@barryglibb14482 жыл бұрын
Loving this series so far, and indeed all your videos having recently discovered your channel. I'm a JS developer of business applications with some 15 years experience and it's nice to be able to follow along with your well-written and explained code to use my skills in a different way. Great job! +1 sub, +1 notification from me.
@Frankslaboratory2 жыл бұрын
Hi Ben, nice to see that my videos could be interesting even for experienced developers. Appreciate your support, thank you for letting me know you found some value!
@AshTech-Designs2 жыл бұрын
Thanks , You always deliver
@Frankslaboratory2 жыл бұрын
Glad you found some value :D
@Radu2 жыл бұрын
Thanks! I'll need to use that deltaTime technique at some point. Just one question: doesn't this make it refresh slower than the frameInterval? (because you use if(this.frameTimer>this.frameInterval). It would be nice to see a plot of the this.frameTimer values as they accumulate over time. I assume the average value to be something like (frameInterval+deltaTime)/2.
@Frankslaboratory2 жыл бұрын
Yes. This technique is not completely accurate because, there is a leftover part of deltaTime value after every reset. For complete cross device behaviour that leftover value would have to be accounted for but I think for the purposes of a project like this it works well enough.
@Radu2 жыл бұрын
@@Frankslaboratory I see. Thank you, Frank!
@funnyanimalworld75792 жыл бұрын
amazing video and explanation
@sertansantos30322 жыл бұрын
First, thanks for all the effort Frank
@Frankslaboratory2 жыл бұрын
Hi Sertan, you are fast! :D
@evaristocuesta2 жыл бұрын
Excellent!!
@Frankslaboratory2 жыл бұрын
Hi Evaristo, I used state design pattern only because of your advice, otherwise this code would look very different ! :)
@Avinashkumar-zz8qi2 жыл бұрын
Nice video sir. Thank you for the tutorials.
@Frankslaboratory2 жыл бұрын
Happy to help Avinash, comment 5 sec after release haha, nice
@scottatkinson764910 ай бұрын
Hi Frank, I'm loving your tutorial and learning so much. You started mobile controls but how do you add different states on mobile.
@programer1152 жыл бұрын
hello teacher, the tutorial was very good, the game is beautiful🧐
@Frankslaboratory2 жыл бұрын
Hi Alessandro, glad you found some value! :)
@kamalkishior63832 жыл бұрын
Thank you Sir, :)
@Frankslaboratory2 жыл бұрын
Happy to help Kamal
@jeesjans96762 жыл бұрын
thanks!!
@Frankslaboratory2 жыл бұрын
Glad to help Jees
@dinhson9588 Жыл бұрын
hi teacher, im doing same with you but my player not moving when he standing ?? maybe my chrome have problem??
@aitorplaza25602 жыл бұрын
Hi Frank, Awesome course, i'm followig it and I'm enjoying it very much. I just have one question, why do we need to set up a server? I've tried launching the game without the server, just opening the index.html file and it does not work. I'll thank you if you can clearify this.
@Frankslaboratory2 жыл бұрын
Hi Aitor, I briefly mention the reason in the beginning, it's because we are splitting code into modules, multiple files, and we are exporting and importing. This only works when run though a server. If you want it to work locally you would have to put all javascript into a single file. it could be challenging if you are a beginner because the order in which you declare classes is important, they don't hoist
@aitorplaza25602 жыл бұрын
@@Frankslaboratory thank you very much, Frank. Very well explained. I watched both videos in their entirety and missed that comment, my fault 😅. Keep up the good work!!
@anaccount6872 жыл бұрын
How did you do the energy?
@Frankslaboratory2 жыл бұрын
It's just a simple object and a couple of if else statements. I'm doing a replenishing ammo in the next class releasing next week, it's the same thing, I will explain it there.
@VeGaDrOnE Жыл бұрын
I followed along, step by step, but when it's time to see the images scrolling in the background i see my character in a perfect white void 😅 i think the problem is here: update(){ if (this.x < - this.width) this.x = 0; else this.x -= this.game.speed * this.speedModifier; } with this function, if i console log the array entries with: console.log(this.backgroundLayers[0].x, this.backgroundLayers[0].y); i noticed that the x is NaN and so the program dosen't draw the images. I checked your code and my code several times but it's EXACTLEY the same. How it's possible that is NaN?
@Frankslaboratory Жыл бұрын
Its NaN because one the line where you are calculating that x value, one of the operands is undefined. You need to track that logic until you find where you made a typo
@VeGaDrOnE Жыл бұрын
@@Frankslaboratory I assigned this.x = 0 in the Layer class constructor and then i used: update(){ if (this.x < - this.width) this.x = 0; else this.x -= this.game.speed * this.speedModifier; }. i check if is NaN, i opened the object in console, the problem is the x NaN and the entire update method give me undefined. If i took out the minus sign before the first this.width in the if condition x is 0 and the images are there but dosen't move.
@VeGaDrOnE Жыл бұрын
YES! I did it you you were right there was a typo! Thanks!
@Frankslaboratory Жыл бұрын
@@VeGaDrOnE glad you worked it out, nice! :)
@Kucingku462 жыл бұрын
Request tutorial idle game with js
@Frankslaboratory2 жыл бұрын
Hi Rifan, what are some examples of idle game genre
@cosmincosmin44512 жыл бұрын
Can I find jobs in this direction? JS 2d games? Or is it just for fun?
@Frankslaboratory2 жыл бұрын
There are more and more companies doing 2D browser games. If you're good with JavaScript you can get many jobs. Also the logic is easily transferable to other programming languages if needed. When you get a job in a good company they don't care what language you know, as long as you are good at it, they will train you in their specific stack when you join
@ivgadev2 жыл бұрын
I hate you. Now I feel not to have hours in a day to play with this new knowledge, lmao
@Frankslaboratory2 жыл бұрын
Hi Ivan, there are indeed many use cases for this technique. For example player can have a special animation loop that plays once when entering or exiting each state, if you have sprite sheet for that. Also it can be used to create pause/play/menu functionality when applied to the main game object. I might show how to do all of that later.
@ivgadev2 жыл бұрын
@@Frankslaboratory Thank you so much for the ideas and for your free content. I've learned so much from you :)
@PopLll-lo9ot Жыл бұрын
Hi can someone help me in console say currentstate undefined please someone help me
@nyupyu Жыл бұрын
My dog jumping soo fast on 165hz refresh rate screen and I can't find solution. Someone know what should I do?
@Frankslaboratory Жыл бұрын
You can use delta time to throttle the entire animation loop and max it at around 60fps. I did it in the game tutorial I released last week
@h4m2_ Жыл бұрын
how do you cap the fps so the game doesn't move as fast. I'm getting 144 fps because of my monitor and I find it way too quick.
@Frankslaboratory Жыл бұрын
Using delta time you set timer and interval for serving animation frames. I'll do in in the project I'm releasing this Friday
@h4m2_ Жыл бұрын
@@Frankslaboratory omg thank you so much for the quick reply. I'll try it right now! Doesn't this just cap the fps of the sprite?
@h4m2_ Жыл бұрын
@@Frankslaboratory I see we also are not using deltaTime in the update class in player.js. I skipped the states etc as I plan to use a still image and not animations etc.
@Frankslaboratory Жыл бұрын
@@h4m2_ deltaTime can cap anything, it just measures milliseconds so you can use that to trigger periodic event to cap fps of a sprite on a single object or of the entire game, it's the same technique, just needs a small adjustment. In the class I just finished filming I used it that way so that it caps everything. It will cover high refresh rate screens
@h4m2_ Жыл бұрын
@@Frankslaboratory thank you very much for this amazing content. I'm looking forward to Friday now!
@technoinfoworldwide23292 жыл бұрын
is this game series finished?
@Frankslaboratory2 жыл бұрын
Almost, there will be more episodes to finish the full game
@jasmin85012 жыл бұрын
Hello, how are you?? ..excuse me, do you have a Java language course?
@Frankslaboratory2 жыл бұрын
Hi Jasmin, I only do JavaScript, for Java there are some other experts here on KZfaq
@jasmin85012 жыл бұрын
@@Frankslaboratory Can you advise me how to make an application for student absence please
@ZilaAi96 Жыл бұрын
Bro dog animating too fast how can i slow it
@Frankslaboratory Жыл бұрын
You can control frame rate with delta time calculation. Comparing old and the current timestamp. I do it in most of my game dev classes, didn't do it in this one
@CSEGNaveensaireddy2 жыл бұрын
Hi sir please make this game installable
@Frankslaboratory2 жыл бұрын
Hi, this is a browser game, not sure if JavaScript can do installable games, probably you need something like C+ for that?