Audio Visual Effects in JavaScript Games

[@Frankslaboratory]

In the past 6 project tutorials we have covered almost all fundamental game development building blocks we will need. Click the LIKE if you are you ready to use them to create awesome games :D

[@kautukdwivedi]

Exicted to see more crazy content.

[@Frankslaboratory]

@@kautukdwivedi Kautuk! I am making more right now :D

[@CollegeApparelNL]

Can you make one about FPS & game speed?

[@Frankslaboratory]

@@CollegeApparelNL Hi Lukas, I thought I answered your comment but maybe I forgot to press send :D Yes, thank you for reminding me and I will do it next week, since you reminded me. I will make an episode that will explain how to calculate FPS for games and animations using Date.now() method, so it will run at same speed at any device, new or old.

[@lukasliptak7487]

@@Frankslaboratory That would be great. I'll try to find the video later.

[@Web-Dev-Codi]

I will be adding this to my portfolio! Amazing tutorial as always. The way you explain is getting better and better per video. I appreciate all your hard work in spreading JS knowledge.

[@Frankslaboratory]

Brian, thank you for saying that. Are you looking for web development roles? Good luck with your search. How many projects do you plan to have on your portfolio

[@Web-Dev-Codi]

@@Frankslaboratory I want to be mainly front end. I have not decided just what I want in my portfolio as of yet. Boot camps assign the same projects for our portfolios. I want to take my time and make something that stands out and isnt the typical weather app and to do list we all see a lot. This will come in time i am sure. The more I code the more I realize patients is key.

[@Frankslaboratory]

@@Web-Dev-Codi It's true Brian, if it was easy everybody would be able to do it and they wouldn't pay us good money for being able to code. People who have patience and work hard will be the ones who win in the end. Eventually as you learn more concepts you will get ideas how to connect them in new ways and that's when original projects come. give it time

[@pipallegro]

Quick tip at the end of the video: if you decided to implement a different sound to your explosion and it sounds too loud, you can add the following line before the play() method: this.sound.volume = what ever number you'd like I set it to 0.1 because mine was very loud

[@Frankslaboratory]

Thank you for sharing, this is helpful

[@Coding_Asmr_PraDev]

The way you explain things with visuals on screen is simply lot more comprehensible . Thanks a lot And what type of game development videos will be next ?

[@Frankslaboratory]

Pranay! This is my favourite feedback, thank you for letting me know. I have a lot of prototypes I built, will decide on Monday what will be in the next episode :D

[@coltonaallen]

Wow! I was like, he's only got 1 minute left until the end and still hasn't added on the sound! Maybe the next one, I guess. But nope! Snuck it in there. Lol. Didn't realize it was that simple. Thanks for another great vid! I start my dev job on Monday, so wish me luck!

[@Frankslaboratory]

Hi Arthur, sorry I'm late catching up on messages, hope your first week in new job is going well. Usually they give you some time to get familiar with the company and work process, hopefully they didn't push you straight into the deep end.

[@coltonaallen]

@@Frankslaboratory yeah, no worries. It went well, yes, and I really enjoy it, though they did sorta push me right in the pool. Lol, but I'm picking it up quick, and my team is great! Any advice for a newb in the field? Thanks for another great vid! Looking forward to more in the series.

[@Frankslaboratory]

@@coltonaallen Hi Arthur, well if you want advice I think good one it that your attitude is more important than your knowledge. I would focus on making friends there and learning about what they expect from you. They think you are good since they hired you. Most companies prefer people who can be taught over someone who is skilled but stubborn. But I think you know that. You got the job, you don't need my advice :) What language/libraries will you work with?

[@coltonaallen]

@@Frankslaboratory Thanks for the advice! I hope I can show them that I'm a true learner above all else. For our stack, we use a few different stacks, but there's different tiers for websites that the salons can purchase, the lowest being templated WP sites with PHP (of course), and we've implemented gulp/sass, foundation, and JS of course. There's also a top tier that's completely custom, but I won't be doing those anytime soon. lol. Not sure of exact stack on those. I suppose it depends on the dev. Idk, we'll see, I guess in time. But I give you a lot of the credit for teaching me object-oriented programming with your particle tutorials. Thanks for everything!

[@Frankslaboratory]

@@coltonaallen So your company builds custom websites for companies yea, that sounds like a fun job. Once you build a few you can add them to your portfolio. You already have one foot in the door so your career will never be the same. First job is the hardest and the most important one to get. And the credit is all on you, you followed the tutorials and learned all these things, well done, I'm happy for your success, hard work pays off :)

[@chitranshusrivastava9730]

Thank you sir for these wonderful tutorials just few days back i completed that tower defence game and also added firing animation 😃😃

[@Frankslaboratory]

That's a good way to learn, take the tutorial code and then try to extend it and add some custom features. Hope you had fun with it

[@chitranshusrivastava9730]

Yes frank im having fun thank you for these tutorials if you get time then please add some on 3d games for the browser or 2.5d games that would be great 😃😃

[@SmartWizzard]

So much can be learned from this 1 video alone.

[@Frankslaboratory]

Great to hear. Thanks for letting me know you found some value

[@nicklansbury3166]

Thanks as always. Have a great weekend.

[@Frankslaboratory]

Nick, happy Friday ! :)

[@stepup6729]

OMG! Amazing as always.

[@Frankslaboratory]

Thank you :D I can see you are starting a new channel, good luck :D

[@skippythemagnificent8103]

Oooh very nice loved the detail many thanks

[@Frankslaboratory]

Hi Skippy, thank you for letting me know, this is nice feedback to get

[@dinoDonga]

frank at it again. looking forward to when the advertised skillshare course is your own

[@Frankslaboratory]

Hi Leon, I wish, maybe one day :)

[@david-mi]

First of all, thanks a lot for this canvas course. I'm learning so much from it and you have superb teaching skills ! What if instead of attaching click event listener to document, we attach one directly to canvas, so we can retrieve offsetX and offsetY values from event, which match properly the clicked coordinates relative to canvas ?

[@CodingJourney]

Absolutely superb!! 🙂 Thanks Frank, really enjoyed it! 💙

[@Frankslaboratory]

Oh, I missed this comment, thanks mate ♥

[@CodingJourney]

@@Frankslaboratory 👍👍💙

[@evaristocuesta]

Great! Waiting for the next video!

[@Frankslaboratory]

Evaristo! Thank you ❤

[@devdude7607]

Man!Thank you so much for this!

[@Frankslaboratory]

Glad you like it ❤

[@deepakbhargav7434]

Thank you I love it and learning things sir

[@Frankslaboratory]

Good luck with your learning Deepak, keep going!

[@chitranshusrivastava9730]

Great tutorials i completed that last tower defence game it was cool learnt a lot😃😃 thanks

[@Frankslaboratory]

Hi Chitranshu, nice, congratulations on completing that one. I want to make some follow up episodes to it but got sidetracked by this series :D

[@madmaxdev]

amazing job

[@Frankslaboratory]

Max! Thank you :D

[@blackrain1999]

In which video will you go into detail about object pooling? Btw. thanks a lot, you are a great inspiration and your tutorials are actually really fun and easy to follow and understand without being 'boring' (I often get bored out, not so with your courses. Your explanations are clear and precise and your creativity is inspiring)

[@Frankslaboratory]

Hi 👋 object pooling is usually handled with one class for creating individual objects and one class managing the pool. I havent used proper object pooling technique in my videos yet. Will try to include it in the next project. Simple version would be just to restart particles to their initial position rather then destroying and creating new ones. Proper object pooling also has a buffer of stored inactive particles ready to be used so its a little more complicated than just reseting particle positions.i will talk about this more soon.

[@jgarale]

thanks for this excellent video!!

[@Frankslaboratory]

Aaron! Thank you :)

[@Xyzzzz307]

First to comment 😂😂 Hi Sir. You make your videos in almost how many takes and how many parts?

[@Frankslaboratory]

You win this week! :) I made a lot of parts for this game dev series but most videos have their own self contained projects :D

[@Xyzzzz307]

@@Frankslaboratory That seems similar

[@GrimOwlForth]

I've gone over the video multiple times, and my code matches your end result as perfectly as I can tell, yet my images are not drawn onto the canvas. I tried a second time, starting fresh, and at 15:45 I run into the problem again. I can not get my explosion image to show up. I know it's not a problem with the file path. There is no (obvious) error in code (or any) in console, and the audio plays fine. I wish the code for this video was saved to your codepen or github so I could examine it more easily. Maybe there has been some update that would cause the code you've written to fail, and copy/pasting it directly would allow me to check.

[@GrimOwlForth]

After following the code so closely and still having the same issue, I feel like I must give up on this tutorial. I do not know what is wrong, and can not verify the original code even works. I ask you wholeheartedly to please include the code source files in tutorials.

[@chosenetim5583]

beautiful

[@lukasliptak7487]

Hello, HTML canvas rotation video does not work. It says that the video is private.

[@Radu]

Nice one! No wonder people are stealing your videos...

[@Frankslaboratory]

Haha, thanks Radu :D Sometimes I'm gonna make a compilation video of random people reading my intro word by word on camera, they literally take my entire script sometimes :D

[@Radu]

@@Frankslaboratory interesting idea

[@shay2559]

Everything is working correctyly but the audio is jittery when I touch repeatedly. How should I fix this?

[@henilrmistry]

Your this video will be very helpful for me to polishing my games..... Very much... 😎🤏 😏🕶🤏

[@Frankslaboratory]

Henil, I'm sure your games are already polished, but we can always improve yea, little details matter

[@nnatitoyt]

I have this error when i try to play the sound effect "play() can only be initiated by a user gesture." , what happen ?

[@brucemcgee5749]

In the animate() function, I might have walked backwards through the explosions array. That way you don't have to manipulate the i variable when removing an element.

[@Frankslaboratory]

Hi Bruce, this is a great solution, yes it will work, thank you for sharing this!

[@CrufioN]

Hello, I'm a new fan here. Can you create a tutorial on how to convert it in mobile app? Thanksss

[@Frankslaboratory]

Hi, I will make some content about mobile yea

[@arvindersingh9863]

Hlo sir I build a drawing app using html canvas. It works well on laptop but when I use it in mobile the lines that i draw on canvas appears blurry. Do you know why is that and how to fix it?

[@Frankslaboratory]

Hi Arvinder, it could be any number of things, I haven't looked much into mobile compatibility for some canvas features, there was a recent update and they changed how screen width is measured and added full screen feature. I need to read the docs. There could be a scaling problem when setting canvas width/height or something. I need to look into this

[@agent-33]

❤️ JS games

[@Frankslaboratory]

Me toooo :D

[@anoncoder8615]

Sorry to trouble you with a bug -- but is there any reason why we could get this Error:Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': I checked my HTML along with the image source path. Any suggestions?

[@Frankslaboratory]

Problem is with your ctx variable, your canvas variable, your image or the arguments you pass to draw image. Console log all these things one by one and make sure you see the correct things in the console. Something will be undefined or pointing to a wrong element etc

[@anoncoder8615]

@@Frankslaboratory I had misspelled constructor lol

[@Frankslaboratory]

@@anoncoder8615 it happens :D

[@amantarar9077]

This guy's default speed is 1.5x 😂

[@Frankslaboratory]

It's the coffee :D

[@gisli9955]

Dude, you should really just give us the code file (instead of only showing the code) in your tutorials.

[@nicklansbury3166]

Thanks as always. Have a great weekend.

[@Frankslaboratory]

Nick, happy Friday ! :)