Performance Optimizations in 2D Games

Рет қаралды 15,284

Күн бұрын

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

Пікірлер: 62

@Frankslaboratory Жыл бұрын

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

@CharlotteAndCode Жыл бұрын

Go from one level to another.

@starscorpion8044 Жыл бұрын

Make a raycasting engine please 🙏🏻

@babicunlo3638 Жыл бұрын

select & drag & drop efficiently within canvas

@time4062 Жыл бұрын

🎉🎉🎉thanks bro

@Frankslaboratory Жыл бұрын

@@CharlotteAndCode Good idea

@felipexcavalcante Жыл бұрын

Great tutorial! I will practice that.

@rishabhsinghal6120 10 ай бұрын

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

@Frankslaboratory 10 ай бұрын

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

@abhishekshrestha2319 Жыл бұрын

Best channel on youtube❤❤❤❤

@yawn8974 Жыл бұрын

great tutorial, thanks!!

@Frankslaboratory Жыл бұрын

I'm here to help :D

@Coding_Asmr_PraDev Жыл бұрын

Love your work brother❤

@Frankslaboratory Жыл бұрын

Thank you :D

@damelux3798 Жыл бұрын

Oh yeah ! We asked, and he delivered

@Frankslaboratory Жыл бұрын

That's what I'm here for 😊

@thiagohe87 Жыл бұрын

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

@Frankslaboratory Жыл бұрын

Hi Thiago, glad you found some value

@alwaysquestionyouropinions1119 Жыл бұрын

This is great and very interesting 👍

@Frankslaboratory Жыл бұрын

Glad you found some value!

@Radu Жыл бұрын

Nice work!

@Frankslaboratory Жыл бұрын

Thank you master coder! :)

@Radu Жыл бұрын

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

@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

@DocBobD Жыл бұрын

Legendary

@Frankslaboratory Жыл бұрын

Thanks 😊

@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 6 ай бұрын

good

@time4062 Жыл бұрын

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

@Frankslaboratory Жыл бұрын

Well done!

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

@tothebone4613 Жыл бұрын

as awlays amazing

@Frankslaboratory Жыл бұрын

Thank you

@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

@AZHARakaGoat Жыл бұрын

🎉

@Frankslaboratory Жыл бұрын

🥸

@fasteditsyt Жыл бұрын

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

@Frankslaboratory 11 ай бұрын

You must be using ultra fast gaming screen, right?

@Intellectualmind4 Жыл бұрын

🎉🎉🎉🎉

@Frankslaboratory Жыл бұрын

Hi Dipesh

@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

@RomanKnav Жыл бұрын

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

@Frankslaboratory 11 ай бұрын

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

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

@CharlotteAndCode Жыл бұрын

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?

@CharlotteAndCode Жыл бұрын

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

@time4062 Жыл бұрын

Second part

@Frankslaboratory Жыл бұрын

Working on it :)