Performance Optimizations in 2D Games @Frankslaboratory
Performance Optimizations in 2D Games  @Frankslaboratory
Uploaded March 2023 | Updated September 2026, 2 weeks ago
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: udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650B
๐ŸŒŸ Skillshare (free 1 month trial that includes all my extended classes including this one):
skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on

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: frankslaboratory.co.uk/downloads/113/bg1.png
Asteroid: frankslaboratory.co.uk/downloads/113/asteroid.png

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:
youtube.com/playlist?list=PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2

โญ๏ธ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 twitter.com/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
Performance Optimizations in 2D GamesLearn Creative Coding: Line & Path EffectsParticle Experiments: Liquid EffectsSticky Slime Effects with Vanilla JavaScriptCollision Animations & Sounds in 2D GamesBuild 8 Creative Coding Projects (vanilla JavaScript)CSS Animation Examples | 10 Animated Hover Effects You Can Build With CSS in 2019Make Your Game Feel Professional in SecondsBuild a Data-Driven Enemy System in JavaScriptJavaScript Game Tutorial - 2D Tower DefenseVanilla JavaScript Pixel Rain TutorialCSS Clip Path Animation Hover Effect | Honeycomb Menu Buttons Tutorial
Franks laboratory |

Performance Optimizations in 2D Games

SHARE TO X SHARE TO REDDIT SHARE TO FACEBOOK WALLPAPER