How To Code Flying Creatures with JavaScript

[@Frankslaboratory]

Click the LIKE please :) FULL SERIES PLAYLIST: (3 games and 6 small projects to learn 2D GAMEDEV) kzbin.info/aero/PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2

[@Xyzzzz307]

Well I don't do directly from video. I take idea and then get my head into it for hours of trial and errors. And most of the time get it the nearest to your output

[@Frankslaboratory]

@@Xyzzzz307 You are a talented guy, and you started coding early. I wish I did that as well back in the day.

[@Xyzzzz307]

@@Frankslaboratory Sir can I have your interview? You seem like a very interesting person the world would like to hear about

[@Xyzzzz307]

I won't be a long one. Please sir

[@aravindvv2276]

5 or 6 atleast

[@hoangtran-ek8mn]

You're such a great teacher, developer, and artist! All in one! What a genius!!!

[@Frankslaboratory]

Hi Hoang, thank you for such a kind feedback, I usually just prepare for recording my videos for very long time, so it makes me look like a better coder than I actually am :D

[@lackzwit]

You're tutorials are amazing! I'm slow so I have to rewatch alot, but I'm learning and I'm grateful!

[@markjanleecorpuz1412]

01:12 There's a quote for this: "Hard work beats talent when talent doesn't work hard."

[@mattmaloney5988]

Thanks so much. As a non-game developer, this was really quite enlightening.

[@Frankslaboratory]

Thanks Matt, glad to see you found this interesting. It is basic game development but it is also JavaScript course. I'm trying to combine them and see what happens :D

[@TimothyMichaelGould-z7m]

I watched all the way! I am learning so much!

[@Frankslaboratory]

Hi Timothy. Glad you found some value. Good luck with your learning

[@demaroaizenofe5694]

It's really a beginner's class I like it & your voice is clear enough to understand what you speak as each spoken words are separated clearly from each other.great you!.

[@glitchspark1663]

I can feel the power of mathamatics. Great tutorial!

[@computerscience1152]

You have improved my js skills for a massive level, So thank you for that. Keep it up and I completely enjoy your fun, enjoyable, useful tutorials

[@Frankslaboratory]

Thank you so much, this is a great feedback, makes me happy to read this

[@computerscience1152]

@@Frankslaboratory 😁

[@liammccoskrie]

Loved the video. Gave lots to work with. Only nitpick I would give is that perhaps showing how to deal with multiple animated objects could've first had it's own video or at least it's own well defined section of the video. But yeah, been really loving this series :)

[@piersonlippard2911]

Hey there Frank, thanks for sharing this latest tutorial in the series. I'm loving them. ;-) Have a well deserved bank holiday weekend in the sunshine.

[@Frankslaboratory]

Hi Pierson, thank you for your feedback. I had many ideas for beginner projects so trying to connect them into a small series here. UK bank holidays on Monday indeed, it's so nice and warm here in London :D

[@mitchelllovesart]

Just watching the sin wave graphic was worth the whole video. I am truly enjoying learning from your content. Thanks.

[@Frankslaboratory]

Hi Mitchell, yes it's a useful technique, I will use that a lot in a video i'm releasing this Friday

[@frosty8104]

I *love* going through your tutorials... more experience in JavaScript, plus experience in game design

[@Frankslaboratory]

Glad you found some value Laura

[@leonlayas3uk]

Man, I love you. thank you so much for your time, effort making these great videos, really its appreciated! not only do you teach such awesome things, but you motivate at the same time - it's a great combo. cheers ❤

[@Frankslaboratory]

Hi Leon! It's nice to see a comment like this, thank you for taking the time to let me know :D Good luck with your coding studies, looking forward to see some projects you will be making one day ♥♥🙏

[@unknown-bx8my]

You are not just teaching how to create different time of animation . Youre teaching also javascript for beginners. Awesome tutoriols.

[@Frankslaboratory]

Hi Abed, yeah this series is very beginner focus, I wanted to make something so people have a place to start with game dev and JavaScript. Thank you for a nice feedback :)

[@unknown-bx8my]

@@Frankslaboratory do you remember when i tell you that i will try learn how to make mutiplayer games and upload a video on youtube. I learn node.js and i am learning now websockets. Its very interesting. Maybe i will build my first multiplayer game soon😍.

[@Frankslaboratory]

I remember Abed. What game will it be. Any good ideas? I want to do stuff with sockets as well

[@unknown-bx8my]

@@Frankslaboratory my first single player game was tic tac toe, so i will make it again with multiplayer mode. If you need to build multiplayer game you should learn node.js first and some node.js modules like http and webSocket and express. Then you should learn how to use webSockets. when you need to build multiplayer game you should use websocket on the server(node.js) and on the client(browser) On the browser: let webSocket = new webSocket(link of the server app with "ws://" protocol instead of http);

[@unknown-bx8my]

@@Frankslaboratory there is also socket.io library to make everything easy. But i prefer to learn webSocket without libraries.

[@henilrmistry]

Nice Movement Tutorial Frank!!!

[@Frankslaboratory]

Henil! Thank you 🍀

[@UlyssesOfOmaha]

Another day, another amazing tutorial completed! I loved creating the characters and modifying their movements. But something I am becoming very familiar with -- thanks to your videos -- is the class and factory function concept. Thank you for sharing your knowledge with us!

[@skarbazalam4284]

brother as we know that i am very old student of you JavaScript tuitorial where you teach game devlopment,this is another good one

[@Frankslaboratory]

Hi, yes I know you are :) thank you for such a nice feedback it means a lot

[@skarbazalam4284]

@@Frankslaboratory just complete this video series by which i can do that very well,hope u r well

[@rajesht9702]

Thank you for another wonderful video.

[@Frankslaboratory]

Hi Rajesh, I'm here to help :)

[@nicklansbury3166]

FIRST!!! - Well apart from our fine host.

[@Frankslaboratory]

Hi Nick, you win this week hehe! Hope you're well! :)

[@MinhVu-vq4dp]

Step by step for... beginners to advancers....Your channel will be soon popular ! Keep going like this, Frank....Thanks so much for your Tutorials...❤️❤️❤️❤️❤️

[@Frankslaboratory]

Hi Minh, thank you, you are very kind to say that. I try to make beginner content but also I will make more advanced things soon. Hopefully it will be good pacing so people can follow. I'm always looking for feedback ❤🍀

[@danrada89]

Awesome explannation and recomendations for coding and habits in daily life.

[@Frankslaboratory]

Hi Daniel, glad you found some value

[@gopinathkrm58]

Hi Frank, hope you are doing great, I have watched some of your canvas bg videos

[@Frankslaboratory]

Gopinath! Haven't spoken to you for a while, nice to see you here ♥🙏 Good to hear you are still interested in canvas.

[@stevehapp]

good stuff.. took me two days to get through it. lots of info, thanks.

[@Frankslaboratory]

Hi Steve, this is a long video, well done for getting through it, thanks for letting me know you got some new information from it

[@murk959]

Sooooo good to look at. Good to know it can be used for such beautiful things

[@andymoore1415]

Awesome as always bud

[@Frankslaboratory]

Hi Andy, thank you ❤

[@evaristocuesta]

I really enjoyed this video!!

[@Frankslaboratory]

Thank you Evaristo ❤

[@tarun7617]

Creating enemies using NPC , we get to learn a lot of tricks for animating all our characters 😄, I had hard time learning code for animating from previous video but as I get to know it's working ... I was totally shocked 🙆 it was Soo convenient !! I'm going to use all these tricks and skills in my new game 🙂 , thank you Soo much for hard work 😃

[@Frankslaboratory]

You could use these techniques for your space shooter game Tarun. I hope your learning is going well mate

[@tarun7617]

@@Frankslaboratory yes !! Surely I can , but there aren't many animated characters in it 😌 , although I'm working on a big game , A rpg game with 11 stages and each stage have quest and mini boss , implementation lil of CSS , through JavaScript is sooo fun , going to have menu for the game and rule board , I don't have an skill with which I can remove images from the screen , I can put them in array and when they are in array they can appear on screen and I can remove them and maybe that item be deleted from screen ... Haven't tried it yet ... But I'll use a lil bit of CSS for menu and rule board as I can put them behind canvas by changing z-index , still I'm working on the tools I need for the game to run smoothly before I use them in all 11 stages and I found a good open source editing software alternative for Photoshop .... Ummm and I'm sorry for typing Soo much 😣 kinda habit while typing to a smart person , and thanks for the video 😃

[@Frankslaboratory]

@@tarun7617 Good JavaScript game doesn't have to have many animated characters in it. I just use a lot of them because people love to see that in the video and click on it more :D

[@Frankslaboratory]

@@tarun7617 I love the idea of RPG with multiple stages/levels. It can be a challenge to present multiple levels in your game, the code needs to be structured with that in mind. I will try to make tutorial on that with my final Limbo clone, if I have enough time to work on it. Also I love boss battles in games, I want to do more of that :D You seem to experiment a lot with your code and how to implement stuff, that is a great way to learn. You should consider doing the entire menu with all buttons on canvas, but that is advanced stuff. I will make a course on that eventually.

[@Frankslaboratory]

@@tarun7617 So you use Photoshop alternative software to draw your own game art assets? What theme will it be, scifi, fantasy?

[@justcodingandwhatnot9890]

your channel is like a secret gold mine.

[@Frankslaboratory]

Hi, glad you found some value!

[@abdulwahabraheemi]

Amazing bro 😎 We are waiting for your next tutorials🤗

[@Frankslaboratory]

Thank you Abdul :D

[@olefrehr]

I will give the book a try. Thank you for the tip.

[@Frankslaboratory]

I hope you like it, it gets really good after the intro.

[@olefrehr]

@@Frankslaboratory 6 months waiting time at the public library. 😮

[@Frankslaboratory]

@@olefrehr It's popular :D You can get free Audible book every 12 months if you do 30 day trial and then cancel. I used to do that before I could afford the subscription. Good thing is those free books stay on your account forever.

[@worldsgamesguider7283]

Thanks For Motivate About Coding..

[@Frankslaboratory]

Hi, I'm happy that you feel motivated ❤

[@sidheshwartiwari9834]

Thank you Frank for this. You took 3 weeks this time though but the content is top notch as always. Have a great day!! Edit:- KZbin notified 3 days late this time 🤔

[@Frankslaboratory]

Hi Sid, good to see you here again. I was working on some side projects so I took 3 weeks between videos yea. I actually didnt expect anyone would notice, but you did :D Well done. I think if I take such a long break, it might effect how KZbin spreads my video and notifies people. Not sure.

[@sojuthomas7727]

This looks great, well done as always ❤️

[@Frankslaboratory]

Thank you Soju, hope you're well :D

[@Dbean87tube]

Great video- and well explained for the beginner. :-).

[@Frankslaboratory]

Really? Thank you Darrel, this is a great feedback

[@Dbean87tube]

@@Frankslaboratory Truly. I particularly like that you go the trouble of explaining errors and what the results are. - You know, the common mistakes us beginners make. Just been checking out your previous videos. Great work! You’ve got a new Subscriber :)

[@Frankslaboratory]

@@Dbean87tube Thanks Darrell, good to have you here. With common beginner errors, lately I'm receiving a lot of debugging requests where people get stuck in my videos and I notice certain patterns, so I try to prevent those bugs when I think of it :D

[@Dbean87tube]

Hey. Do you have any videos about improving the performance of web based games and bad programming habits to avoid that might slow or crash a browser?

[@Frankslaboratory]

@@Dbean87tube Hi Darrell, I mention small tips as I code sometimes but I haven't made them into a separate video. I will keep notes of these and I will make a special video about good/bad practices. I like your ideas. It's really hard to crash browser unless you are trying to draw 10 000 semi transparent dust particles or you accidentally use endless 'while' loop. I have people emailing me with issues they encountered all the time, I think I will make a compilation of the most common ones.

[@efthyvoulos_tsouderos]

Hello Frank, great tutorial as always. Did you do the trigonometry video. If yes where is it? Thank you.

[@ambiorixsantana4274]

Thanks Frank very much for all your videos, I learning a lot from them.

[@Frankslaboratory]

Glad to hear you found some value :)

[@theprince4600]

project look nice. I will be watching after my exam. thanks in advance.,

[@Frankslaboratory]

Good luck with your exam

[@alexandrevolts7513]

Hi! I was asking myself, why are you using frame-based animations ? They are simpler to explain to your followers ? As a game developer, when doing game animations, I generally prefer time-based animations, so in that case I would store the value of performance.now() at the beginning of the program, and then substract this initial value to another call of performance.now() inside your animate function. This way, we obtain the time elapsed between the start of the program and "now" and we can know exactly how much time has passed (in seconds, now in frames). This is especially useful when doing multiplayer games I think! Anyway, althrough I am not a beginner, I really like your content to learn and refresh some knowledge on JS game dev :)

[@Frankslaboratory]

Hi Alexandre, yes you are right, I choose frame based because its simpler to fit into these already long videos :D Time based animations are better practice and should be used, I mention it in this video briefly. I used this technique in some of my older games using Date.now() method or delta time argument passed to requestAnimation frame. JavaScript has good infrastructure for time based animations, I need to start using this more often. Thank you for your feedback it means a lot coming from a non beginner. Also thank you for pointing this out, I need this feedback to improve my technique

[@AK243RDC]

Thank you for this video 🙏🏽

[@Frankslaboratory]

Glad you liked it Tshitolo

[@time4062]

I love to watch your videos thanks bro ☺️

[@Frankslaboratory]

Glad to hear :)

[@time4062]

You are such a nice coder enemies are feeling lucky 😋

[@Frankslaboratory]

Haha, thank you :)

[@AntonioBrandao]

What about a video on motion blur? :D

[@Frankslaboratory]

That's a great idea Antonio, thank you, I will look into it. Haven't done motion blur yet

[@amazecreations1853]

This is amazing 🔥

[@Frankslaboratory]

Thank youuu 🙏♥

[@Coding_Asmr_PraDev]

Is coding is all about practice or talent because sometimes I have to watch the video to understand what goes on under the hood. It's hard for me I am beginner

[@Frankslaboratory]

Hi Pranay, practice is very important, there is also this concept of 'flow'. One of the books I linked in description today. You need to choose projects that are challenging and new, but familiar enough so you can understand the information that is being presented. Choosing the right projects for your current skill level is important

[@gct2023]

Frank could I ask if you could consider developing a game tutorial that incorporates a form of game logic that needs to be solved, example a canon game that you need to shoot a target that corresponds to mathematical equation, a number which appears on the canon for example number 4 and then you need to shoot a series of bricks that equal the number ( brick 1 : 2x2 , brick 2 : 4x1, brick 3 : 4x0 etc). These bricks move down and increasing speed and if the person does not shoot the correct brick with the correct mathematical equation as the brick hits the ground line the player loses if he shoots all the correct bricks the number changes and gets progressively more difficult as the game progresses.

[@Frankslaboratory]

Hi Gary, this is a great idea, love it. I will put it on my list. I was thinking about more educational based projects, JavaScript can be used for so many things. In this video when I mention creative people, I'm talking about exactly this, you have creative ideas, hope you make good use of them

[@OlehBiblyi]

Just great, as usual.

[@Frankslaboratory]

Thank you :)

[@BrendanMetcalfe]

Amazing tutorial!

[@Frankslaboratory]

Brendan! Thank you ♥

[@gct2023]

Amazinggggggggggggg Thank you

[@Frankslaboratory]

Thanks Gary! Have a nice weekend :D

[@Youthforjesusbanimazar]

thank you very much for everything

[@Frankslaboratory]

Hi Amir, I'm here to help :)

[@JustinYoung44]

Awesome! Any chance you can share the completed code on Codepen or Github?

[@Frankslaboratory]

Hi Justin, do you mean the final game I show off in the beginning? I'm still adding features to that. might release it with the final tutorial in this series

[@Zen-tc7mr]

I LIKE THESE A LOT. TY

[@Frankslaboratory]

Glad to hear. I'm here to help 😊

[@angVanHuy-tf2rv]

Have you released a video related to sin and cos?

[@debarghyabanerjee5]

Tq for the video

[@Frankslaboratory]

Hi Debarghya, nice to see you here again, happy to help

[@khamdamov]

Great tutorial. Which books do you recommend to master HTML Canvas?

[@pranjalgoyal2397]

another masterpeice

[@Frankslaboratory]

Hi Pranjal, thank you :)

[@leeforster8145]

Cant sleep now lol. Fixed animation jumping. Monitor was on 30hz

[@Xyzzzz307]

How do you search for these characters?

[@Frankslaboratory]

Hi Shobha, how are you? Do you mean where I get my sprite sheet assets?

[@Xyzzzz307]

@@Frankslaboratory I am fine Sir. Hope the same for you. Yes Sir I am asking that how you search for such good free assets 😅? I after browsing the internet for hours get nothing

[@Frankslaboratory]

@@Xyzzzz307 It's really hard to find free game assets online. I don't mind to pay for mine, but of course if you are a student you can't do that yet. My favourite are three sites I used for my three previous tutorials (Fish game, tower defense, this Limbo series). Each site has a small selection of free to use art assets, you can make many games with these.

[@ercankuru1867]

thanks for this great video. but 3rd pattern dont work on my laptop it was so fast.

[@Arshhhe]

Hi! how to make a gaming portfolio?

[@Frankslaboratory]

Hi Adarsh. It depends what is the goal. Getting a front end job or game dev job. Based on that I would do it very differently

[@Arshhhe]

@@Frankslaboratory I have been doing UI/UX, graphic designing and I knw coding and now in game development...I need a portfolio on game development so, How do I do!!! Show the video recording of games on portfolio?

[@aravindvv2276]

Hail Frank🥳🥳

[@Frankslaboratory]

Hi Aravind :)

[@JUNGELMAN2012]

Too bad there is just a 'like' button. I would have l smashed a "loved it" button.

[@thushanmadhulaskshitha5871]

your wiggle do not work on a running background

[@Frankslaboratory]

You mean the 4th movement or which one?