Performance Optimizations in 2D Games

Make your games and animations run faster. Build a game with me and learn how to manage memory allocation better with object pool design pattern. Create detailed animated games that run smoothly even on the oldest machines. Object pool design pattern explained line by line and implemented in a 2D game development project.
Check out some of my EXTENDED classes with BONUS lessons and more free 2D game art assets
🌟Udemy: www.udemy.com/course/build-an...
🌟 Skillshare (free 1 month trial that includes all my extended classes including this one):
www.skillshare.com/en/r/profi...
This project is beginner friendly. Basic knowledge of HTML, CSS & JavaScript is needed to get the maximum value.
🎨 Download Project Art assets 🎨
** All art assets for this class were made by me or by artists I hired, there is NO copyright, you can download and use these freely for any project you want! Click the LIKE on the video if you want more free game art soon! :D
Background: www.frankslaboratory.co.uk/do...
Asteroid: www.frankslaboratory.co.uk/do...
Bonus images, environmental art, HQ separate pieces in PSD format etc:
Today we will learn:
- How to implement object pool design pattern
- How to draw, animate and rotate objects on HTML5 canvas element
- How to apply object oriented programming principles to keep code well organised and easy to read.
For more vanilla JavaScript GAME DEVELOPMENT check out this playlist:
• JavaScript Game Develo...
⭐️Tutorial Contents ⭐️
00:00 Make animated games with JavaScript
00:47 What is the advantage of object pool design pattern?
03:49 Object oriented code structure
05:10 Game class
08:54 Asteroid class
12:06 Object pool array
17:43 How to draw images on canvas
20:38 How to animate multiple HTML5 canvas objects
22:00 Periodic triggers with requestAnimationFrame
27:56 Object pool design pattern
35:28 Tips & Tricks
37:58 How to rotate images with HTML5 canvas
Let's be friends
👍 You can message me on TWITTER / code_laboratory
👍 Check out some of my source code on CODEPEN codepen.io/franksLaboratory
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory

[@Frankslaboratory]

You asked for performance optimization techniques, so I did it, any other requests?

[@Charlotte-TheGeniusCat]

Go from one level to another.

[@starscorpion8044]

Make a raycasting engine please 🙏🏻

[@babicunlo3638]

select & drag & drop efficiently within canvas

[@time4062]

🎉🎉🎉thanks bro

[@Frankslaboratory]

@@Charlotte-TheGeniusCat Good idea

[@felipexcavalcante]

Great tutorial! I will practice that.

[@rishabhsinghal6120]

Your channel is extremely beginner friendly, and your explanations are very good. Please bring out more such cool videos on these useful topics

[@Frankslaboratory]

Hi Rish. Happy to hear. I'm working on more 2d gamedev projects now. New tutorials will come soon

[@yawn8974]

great tutorial, thanks!!

[@Frankslaboratory]

I'm here to help :D

[@abhishekshrestha2319]

Best channel on youtube❤❤❤❤

[@Coding_Asmr_PraDev]

Love your work brother❤

[@Frankslaboratory]

Thank you :D

[@thiagohe87]

Muito bom, conseguir fazer e entender tudo. Obrigado por comparilhar conhecimento. Thanks

[@Frankslaboratory]

Hi Thiago, glad you found some value

[@mbuyelohlebela8320]

Hello Frank, can you go into detail about polymorphism if possible, lets say for example you have an enemy class using inheritance you create e.g. Aliens, zombies etc. Instead of having an array that updates each type of enemy, use a Enemy Array. I am really interested in what upcasting and down casting in JavaScript looks like. Really enjoy your content

[@Radu]

Nice work!

[@Frankslaboratory]

Thank you master coder! :)

[@Radu]

@@Frankslaboratory You're welcome creative guru! :-)

[@alwaysquestionyouropinions1119]

This is great and very interesting 👍

[@Frankslaboratory]

Glad you found some value!

[@damelux3798]

Oh yeah ! We asked, and he delivered

[@Frankslaboratory]

That's what I'm here for 😊

[@MrGilsteiner]

Frank, I'd appreciate your opinion about canvas render libraries. I'm facing real woes with Pixi. The latest version is seriously lacking in some very basic aspects. In your experience, is it realistic to go for a engine you build yourself, or just look for another library, e.g MelonJS?

[@Frankslaboratory]

Hi, I'm not up to date with the latest features of these libraries so I don't really know which one is the best. My advice would be to get as familiar as possible with vanilla JS, because then it becomes easy to supplement whatever shortcomings the library has, with your own custom code and then achieve the final result you want that way.

[@time4062]

I made it on my computer and now waiting for the next

[@Frankslaboratory]

Well done!

[@javifontalva7752]

unbe-fu**-lievable. I take my off hat. That was terrific!!!

[@Frankslaboratory]

I thought people might like a topic like this, if it's popular I will do classes on more techniques. I have a lot to talk about when it comes to performance optimization :)

[@drharunttt.9884]

good

[@DocBobD]

Legendary

[@Frankslaboratory]

Thanks 😊

[@gflaap]

Amazing as always Frank. Do you have a complete Tutorial for this Game?

[@Frankslaboratory]

Hi, the space game I'm showing a gameplay of will be released if people like this video, I have all the code but haven't recorded it yet. If people like it I will flesh it out more, more enemy types, environments etc, as usual.

[@gflaap]

@@Frankslaboratory hi Frank, you Need to Release this Tutorial / Series! This is a awesome work! Mayen you can also Release it on Udemy - i would definiteley Subscribe and Pay for it . BR fron Germany

[@fasteditsyt]

my deltaTime = 2.7ms 😶 Thank you for another great video Frank! Much appreciated!

[@Frankslaboratory]

You must be using ultra fast gaming screen, right?

[@RomanKnav]

great tutorial as always Frank! where can I find the source code?

[@Frankslaboratory]

Hi Roman, I didn't release the source code, it's a very simple project, I might release it with the full series in an extended class. Still adding projects in this series of videos

[@tothebone4613]

as awlays amazing

[@Frankslaboratory]

Thank you

[@sikkandarmansuri2187]

second part plz

[@Frankslaboratory]

Coming soon, I kept adding features, so not sure what I will do with this series. I got a lot of ideas I want to apply and teach on this project.

[@ifeoluwatemidayo3959]

Good day Frank,pls can you make a video on how to create game asset like Sprite image and audio sound for game. I tried learning this but I keep making mistake

[@Frankslaboratory]

I draw a rough sketch and then have a professional artist draw polished art for me usually. I instruct them what parts need to be separate pieces so I can animate movement and then I use free Dragonbones software to attach it to a skeleton and animate it myself, to create a sprite sheet. I give art in separate pieces in .psd format with my gamedev videos so you can try to make your own animations with it if you want. It takes a while to learn though.

[@Frankslaboratory]

I will cover how to generate simple game sounds in browser with web audio api soon

[@Charlotte-TheGeniusCat]

I'm making a game, and it has five levels, but first I must make the framework for it, so if the player wins a level, they automatically go to another level, but if they lose, they have to replay the level. Once the player wins all 5 levels, they can restart. So far, I've created a level manager class. Any advice?

[@Frankslaboratory]

Nice. I would probably use state management design pattern. How did you design your level manager?

[@Charlotte-TheGeniusCat]

@@Frankslaboratory I'm working on redesigning it. So far it is something like this: export class LevelManager { constructor(width, height){ this.width = width; this.height = height; this.level = 1; this.levels = [new Level1(this.width,this.height), new Level2(this.width,this.height), new Level3(this.width,this.height), new Level4(this.width,this.height), new Level5(this.width,this.height), ]; this.currentLevel = this.levels[this.level - 1]; this.gameStart = false; this.gameOver = false; this.button = document.getElementById('play-button'); } update(deltaTime) { this.currentLevel = this.levels[this.level - 1]; this.currentLevel.update(deltaTime); if(!this.gameOver && this.currentLevel.isCompleted() && this.currentLevel.levelOver) { this.gameStart = false; if(this.level < this.levels.length){ this.level++; } } else { this.currentLevel.update(deltaTime); } } draw(context) { this.currentLevel = this.levels[this.level - 1]; if(this.level

[@AZHARakaGoat]

🎉

[@Frankslaboratory]

🥸

[@time4062]

Second part

[@Frankslaboratory]

Working on it :)

[@Intellectualmind4]

🎉🎉🎉🎉

[@Frankslaboratory]

Hi Dipesh

[@laserak9887]

144hz screens here.