How To Code Flying Creatures with JavaScript

Поделиться
HTML-код
  • Опубликовано: 12 сен 2024

Комментарии • 169

  • @Frankslaboratory
    @Frankslaboratory  3 года назад +18

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

    • @Xyzzzz307
      @Xyzzzz307 3 года назад +2

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

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

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

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

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

      I won't be a long one.
      Please sir

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

      5 or 6 atleast

  • @liammccoskrie
    @liammccoskrie 3 месяца назад +1

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

  • @mattmaloney5988
    @mattmaloney5988 3 года назад +6

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

    • @Frankslaboratory
      @Frankslaboratory  3 года назад +1

      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

  • @lackzwit
    @lackzwit Год назад +3

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

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

    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

  • @hoangtran-ek8mn
    @hoangtran-ek8mn 2 года назад +2

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

    • @Frankslaboratory
      @Frankslaboratory  2 года назад +1

      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

  • @leonlayas3uk
    @leonlayas3uk 3 года назад +6

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

      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 ♥♥🙏

  • @piersonlippard2911
    @piersonlippard2911 3 года назад +2

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

      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

  • @demaroaizenofe5694
    @demaroaizenofe5694 2 года назад

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

  • @mitchelllovesart
    @mitchelllovesart Год назад

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

    • @Frankslaboratory
      @Frankslaboratory  Год назад

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

  • @UlyssesOfOmaha
    @UlyssesOfOmaha 2 года назад +1

    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!

  • @MinhVu-vq4dp
    @MinhVu-vq4dp 3 года назад +1

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

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

  • @alexandrevolts7513
    @alexandrevolts7513 3 года назад +6

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

      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

  • @frosty8104
    @frosty8104 Год назад

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

  • @markjanleecorpuz1412
    @markjanleecorpuz1412 3 года назад +1

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

  • @TimothyMichaelGould-z9r
    @TimothyMichaelGould-z9r 7 месяцев назад

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

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

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

  • @Coding_Asmr_PraDev
    @Coding_Asmr_PraDev 3 года назад +6

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

      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

  • @sidheshwartiwari9834
    @sidheshwartiwari9834 3 года назад +2

    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:- RUclips notified 3 days late this time 🤔

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

      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 RUclips spreads my video and notifies people. Not sure.

  • @skarbazalam4284
    @skarbazalam4284 3 года назад +1

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

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

    • @skarbazalam4284
      @skarbazalam4284 3 года назад

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

  • @nicklansbury3166
    @nicklansbury3166 3 года назад +4

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

    • @Frankslaboratory
      @Frankslaboratory  3 года назад +1

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

  • @sojuthomas7727
    @sojuthomas7727 3 года назад +1

    This looks great, well done as always ❤️

  • @gopinathkrm58
    @gopinathkrm58 3 года назад +1

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

    • @Frankslaboratory
      @Frankslaboratory  3 года назад +1

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

  • @rajesht9702
    @rajesht9702 3 года назад +2

    Thank you for another wonderful video.

  • @henilrmistry
    @henilrmistry 3 года назад +1

    Nice Movement Tutorial Frank!!!

  • @tarun7617
    @tarun7617 3 года назад +1

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

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

    • @tarun7617
      @tarun7617 3 года назад

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

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

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

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

  • @abdulwahabraheemi
    @abdulwahabraheemi 3 года назад +1

    Amazing bro 😎
    We are waiting for your next tutorials🤗

  • @danrada89
    @danrada89 Год назад

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

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

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

    • @Frankslaboratory
      @Frankslaboratory  3 года назад +1

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

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

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

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

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

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

  • @gct2023
    @gct2023 3 года назад +2

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

      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

  • @murk959
    @murk959 2 года назад

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

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

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

  • @stevehapp
    @stevehapp 3 года назад

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

    • @Frankslaboratory
      @Frankslaboratory  3 года назад +1

      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

  • @glitchspark1663
    @glitchspark1663 2 года назад

    I can feel the power of mathamatics. Great tutorial!

  • @gct2023
    @gct2023 3 года назад +2

    Amazinggggggggggggg Thank you

  • @justcodingandwhatnot9890
    @justcodingandwhatnot9890 2 года назад

    your channel is like a secret gold mine.

  • @ambiorixsantana4274
    @ambiorixsantana4274 Год назад

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

  • @andymoore1415
    @andymoore1415 3 года назад +1

    Awesome as always bud

  • @worldsgamesguider7283
    @worldsgamesguider7283 3 года назад +1

    Thanks For Motivate About Coding..

  • @olefrehr
    @olefrehr 3 года назад +1

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

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

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

    • @olefrehr
      @olefrehr 3 года назад

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

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

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

  • @evaristocuesta
    @evaristocuesta 3 года назад +1

    I really enjoyed this video!!

  • @AK243RDC
    @AK243RDC 3 года назад

    Thank you for this video 🙏🏽

  • @Zen-tc7mr
    @Zen-tc7mr 2 года назад

    I LIKE THESE A LOT. TY

  • @Dbean87tube
    @Dbean87tube 3 года назад +1

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

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

      Really? Thank you Darrel, this is a great feedback

    • @Dbean87tube
      @Dbean87tube 3 года назад

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

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

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

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

  • @theprince4600
    @theprince4600 2 года назад

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

  • @time4062
    @time4062 Год назад

    I love to watch your videos thanks bro ☺️

  • @OlehBiblyi
    @OlehBiblyi 3 года назад +1

    Just great, as usual.

  • @time4062
    @time4062 Год назад

    You are such a nice coder enemies are feeling lucky 😋

  • @khamdamov
    @khamdamov 2 года назад

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

  • @pranjalgoyal2397
    @pranjalgoyal2397 3 года назад +1

    another masterpeice

  • @debarghyabanerjee5
    @debarghyabanerjee5 3 года назад +2

    Tq for the video

    • @Frankslaboratory
      @Frankslaboratory  3 года назад +1

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

  • @amazecreations1853
    @amazecreations1853 3 года назад +1

    This is amazing 🔥

  • @dvd522
    @dvd522 Год назад

    thank you very much for everything

  • @BrendanMetcalfe
    @BrendanMetcalfe 3 года назад

    Amazing tutorial!

  • @angVanHuy-tf2rv
    @angVanHuy-tf2rv 2 года назад

    Have you released a video related to sin and cos?

  • @JustinYoung44
    @JustinYoung44 3 года назад +1

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

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

      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

  • @leeforster8145
    @leeforster8145 2 года назад

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

  • @ercankuru1867
    @ercankuru1867 2 года назад

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

  • @AntonioBrandao
    @AntonioBrandao 3 года назад +1

    What about a video on motion blur? :D

    • @Frankslaboratory
      @Frankslaboratory  3 года назад +1

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

  • @aravindvv2276
    @aravindvv2276 3 года назад +1

    Hail Frank🥳🥳

  • @Xyzzzz307
    @Xyzzzz307 3 года назад +1

    How do you search for these characters?

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

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

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

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

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

  • @JUNGELMAN2012
    @JUNGELMAN2012 Год назад

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

  • @thushanmadhulaskshitha5871
    @thushanmadhulaskshitha5871 2 года назад

    your wiggle do not work on a running background

  • @Arshhhe
    @Arshhhe 3 года назад

    Hi! how to make a gaming portfolio?

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

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

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