Performance Optimizations in 2D Games Franks laboratory 2023-03-31 | 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=onThis 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! :DBackground: frankslaboratory.co.uk/downloads/113/bg1.pngAsteroid: frankslaboratory.co.uk/downloads/113/asteroid.pngBonus 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 JavaScript00:47 What is the advantage of object pool design pattern?03:49 Object oriented code structure05:10 Game class08:54 Asteroid class12:06 Object pool array17:43 How to draw images on canvas20:38 How to animate multiple HTML5 canvas objects22:00 Periodic triggers with requestAnimationFrame27:56 Object pool design pattern35:28 Tips & Tricks37: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
How to Make a Quit Button in Unity Franks laboratory 2024-10-10 | Unity uses a game object based UI system, let's cover how it's done in 3 steps - creating a Canvas, positioning elements and defining user interactions.Let's create a quit game button. you can use the same step by step approach for any game, it doesn't have to be this specific project I have here.GitHub repo (full source code): github.com/codingLaboratory/UndergroundExplorerPlayable demo (Unity WebGL build): play.unity.com/en/games/9227b1f1-3674-400a-9cc9-72ee54547855/underground-explorerHave fun learning game development!
2D World-building: Maps, Collisions, Cameras Franks laboratory 2024-08-16 | Make a nice top-down map. Add Cinemachine to Unity for dynamic 2D camera follow. Create a large game world for your players to discover and explore. Let's do it!Today we will learn:- How to use Tilemaps in Unity- 2D Camera Follow using Cinemachine- How to make 2D top down pixel art RPG Game Unity- Worldbuilding with Tilemap and Cinemachine for 2D Unity🎨 Toolkit 🎨- Unity- Visual Studio Code or any other code editor you preferIf you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :)udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onThe 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
Make Your First Game in Unity (2024) Franks laboratory 2024-08-06 | Do you want to be a game developer? It's easier if you know the modern state-of-the-art game development tools that make the whole process of making a game, so much easier. Unity is an intuitive, beginner friendly and widely used game engine. You can build anything from a small demo to a big ambitious genre defining multi platform game. If you check how many job offers are there for Unity developers, you realise its a very viable career choice. Come try it with me for this project and make up your own opinion. This class is for beginners.Today we will learn:- How to make a 2D Game in Unity- How to Export Game in Unity for PC Windows and Mac (.exe)- How to export a finished game as a WebGL web game (.html)- How to use 2D tilemaps in Unity- How to Setup Blend Trees for Easy 4 Directional Movement in Unity... and much more🍄 Project Art assets 🍄Pixel art tilemaps: szadiart.itch.io/rpg-worlds-caPlayer: sanderfrenken.github.io/Universal-LPC-Spritesheet-Character-Generator/#?body=Body_color_pale_green&head=Orc_male_pale_green(right click the sprite sheet and "Save Image As")Player shadow: frankslaboratory.co.uk/downloads/143/shadow.pngCheck out these awesome games made with Unity:Streets of Rogue 2 youtube.com/watch?v=6f43pVHhGR0Death Must Die youtube.com/watch?v=MhjXHpU2JJUEldest Souls youtube.com/watch?v=gLsnUeKCwCgBloomtown: A Different Story youtube.com/watch?v=oEHyqAWcT-wDwerve youtube.com/watch?v=Sb_u_fUKkXkCuphead youtube.com/watch?v=NN-9SQXoi50Hollow Knight: Silksong youtube.com/watch?v=JSfuFlhsxZY🎨 Toolkit 🎨- Unity- Visual Studio Code or any other code editor you preferIf you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :)udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onThe 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
Pixel Art RPG Maker with JavaScript Franks laboratory 2024-06-25 | Armored knight, sneaky vampire or a battle princess? Who is the hero of your pixel art game going to be. Let's just create all of them and we can decide later. This class is for beginners, basic understanding of JavaScript is recommended to get the maximum value. Related classes:Pixel Art Tilemaps for beginners: youtu.be/1_dizP57I6s2D Camera in Pixel art games: youtu.be/5PkdYFbS4K4Recommended video (advanced code):Build a Game with JavaScript and HTML Canvas [RPG Kit series] youtu.be/HmxNrlPx8iY?si=zf7zuQn03WKBE1J2🍄 Download Project Art assets 🍄Background layer: frankslaboratory.co.uk/downloads/142/backgroundLevel1.pngForeground layer: frankslaboratory.co.uk/downloads/142/foregroundLevel1.pngHero: frankslaboratory.co.uk/downloads/142/hero1.pngToday we will learn:- How to make 100s of different pixel art characters, generate a sprite sheet for them and animate them in a game world- How to create a more robust but still beginner friendly code that can serve as a base for multiple different game types- How to implement multi-layered grid-based game world- How to implement smooth grid-based movement for the hero characterSprite sheet maker, create 100s of UNIQUE HERO sprite sheets, for example:Wood collector: sanderfrenken.github.io/Universal-LPC-Spritesheet-Character-Generator/#?body=Body_color_light&head=Human_male_light&belt=none&cargo=Wood_9_logs&backpack=Basket_round&backpack_straps=Straps_black&legs=Pants_blueWaraxe Frankenstein: sanderfrenken.github.io/Universal-LPC-Spritesheet-Character-Generator/#?body=Body_color_pale_green&head=Frankenstein_pale_green&shadow=Shadow_shadow&sex=muscular&weapon=Waraxe_waraxe&legs=Wide_pants_brownBattle Princess sanderfrenken.github.io/Universal-LPC-Spritesheet-Character-Generator/#?body=Body_color_light&head=Human_female_light&sex=female&hair=Long_band_blonde&dress=Sash_dress_slate&weapon=Flail_flail... SHARE YOUR UNIQUE CHARACTER in the comments if you want (59:48). YouTube spam filter will remove comments with links, so just share the second part of the URL after "#?":"#?body=Body_color_olive&head=Orc_male_olive&legs=Pants_black"I can then add the first part of the URL myself on my end:"sanderfrenken.github.io/Universal-LPC-Spritesheet-Character-Generator"Check out these awesome pixel art games that utilize the same techniques we are learning about today:Roots of Pacha: youtu.be/TNrj1k9CAdY?si=VcvmfynHw-uMkMF820 Minutes Till Dawn: youtu.be/d_tTjnIpL5c?si=LUN7vwjPkypxn1CDGraveyard Keeper: youtu.be/YH8bmTKIkag?si=Slc0CkWm1lK-gh1VUnsighted : youtu.be/_AXhK7Bxd40?si=nwF2v1hGy-QNXYXtTravellers Rest: youtu.be/JDk0H02wYXs?si=vLFpooQ_5Rb3yuUyChained Echoes: youtu.be/ClrZiz_IMmY?si=OceKwlQA8L_jXy-P🎨 Toolkit 🎨Vanilla JavaScript for everything as always, no frameworks and no libraries. Visual Studio Code editor + Live server extension recommended.00:00 Get creative with pixel art characters10:23 How to set up a local live server in Visual Studio Code13:40 How to actually structure your game objects23:12 A simple movement system for 2D Games36:40 Data structures for a 2D multi-layered game world40:19 Smooth grid based movement similar to Pokemon54:22 Generating sprite sheet animations59:48 Share your unique character with others01:00:32 Introduction to sprite animations01:13:54 Mastering delta time to ensure consistent frame rates01:24:03 Collision detection with tiled mapsIf you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :)udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onThe 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
Pixel Art Game Worlds and 2D Camera Franks laboratory 2024-05-31 | Do you want to build a pixel art game with a large world for your players to discover and explore? Then you need to understand how to implement 2D camera into your projects. It might be simpler than you think. #coding #gamedevelopment #javascript #html5canvas #frankslaboratory
Pixel Art Game Development: 2D Camera Franks laboratory 2024-05-24 | Do you want to build pixel art games that extend beyond a single screen for your players to discover and explore? Then you need to understand how to implement 2D camera into your projects. It might be easier than you think. This class is for beginners, basic understanding of programming principles is recommended to get the maximum value. Check out these awesome pixel art games that utilize the same techniques we are learning about today:Super Zoo Story youtu.be/ObWVB7Ooyto?si=D-yrS-Ju1ZkxdWtZBloomtown: A Different Story youtu.be/oEHyqAWcT-w?si=F_kwMNrW-otbSMCyWorld of Anterra youtu.be/tqO6j0gQOcA?si=Emkygy9qLnRwZvnTDrakantos youtu.be/CCXVQxJkBtQ?si=GSmCfAb7mkeidGzHEmberbane youtu.be/bZncaFTVaX4?si=KUPJJTRHSINY2S-M Tilemaps for beginners:youtu.be/1_dizP57I6s🍄 Download Project Art assets 🍄Full map: frankslaboratory.co.uk/downloads/141/full_map.pngTile map: frankslaboratory.co.uk/downloads/141/tilemap1.pngIf you fully understand this technique, try to take it to the next level using these EPIC free art assets:free-game-assets.itch.io/free-cursed-land-top-down-pixel-art-tilesetfree-game-assets.itch.io/free-undead-tileset-top-down-pixel-artToday we will learn:- How to implement 2D camera- How to create game world using 2 layers of tiles (ground layer + vegetation layer)- How to connect camera and tile map to dynamically draw only tiles that are inside the visible camera view🎨 Toolkit 🎨Vanilla JavaScript for everything as always, no frameworks and no libraries. Visual Studio Code editor + Live server extension recommended.00:00 Scrolling through expansive game worlds00:40 How to implement 2D camera26:20 2D Multi-Layer tilemap design40:38 Dynamic auto tilingIf you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :)udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onThe 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
Create Game Worlds With Tilemaps Franks laboratory 2024-05-07 | Tilemap is an image made out of multiple frames, that can be seamlessly arranged into different patterns. This is how you use it to create complex game worlds.#coding #gamedevelopment #javascript #html5canvas #frankslaboratory
Make Pixel Art Games: Tilemaps Franks laboratory 2024-05-06 | If you want to evoke nostalgia and spark imagination PIXEL ART is the right art style for your next game project. Many pixel art games are made using tile maps, today we learn how to use them to create map layouts for your game worlds.🍄 Download Project Art assets 🍄Tile map: frankslaboratory.co.uk/downloads/140/tilemap1simple.pngWatch next:2D multi-layer tilemap design + dynamic auto tiling based on camera position youtu.be/5PkdYFbS4K4🎨 Toolkit 🎨I’m using vanilla JavaScript for everything as always, no frameworks and no libraries, so it’s also very easy to convert this codebase into any other programming language if you want to do that. This class is for beginners, a basic knowledge of programming principles is recommended to get the maximum valueAlternative tile map sources (do you know any other, let me know)opengameart.org/content/ground-tilemapcypor.itch.io/12x12-rpg-tilesetseliel-the-shaper.itch.io/winter-forestopengameart.org/content/slates-32x32px-orthogonal-tileset-by-ivan-voirolopengameart.org/content/whispers-of-avalon-grassland-tilesetDo you know any other talented Pixel art creators? Leave a comment.probertson.tumblr.comartstation.com/dragumagutwitter.com/dragumaguIf you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :)udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onThe 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
Grid-based Games (JavaScript tutorial) Franks laboratory 2024-04-18 | Classic early arcade games were creative and simple enough to make a good beginner level coding project. Today we take a proven game concept and build your own version, using modern web technologies. Let's make grid-based games with JavaScript, from scratch. Have fun!Advanced version with many more features: youtu.be/VOMpipAMZO4🎨 Toolkit 🎨We will use vanilla JavaScript, no frameworks and no libraries because we want to understand every line of code. (JavaScript, HTML canvas, object oriented programming, HTML5, CSS3)🍄 Download Project Art assets 🍄Grass tile (day): frankslaboratory.co.uk/downloads/139/grass_day.pngGrass tile (night): frankslaboratory.co.uk/downloads/138/grass_night.pngMagic berry: frankslaboratory.co.uk/downloads/139/magic_berry.pngSnake: frankslaboratory.co.uk/downloads/139/snake_zilla.pngIT ALL STARTED IN 1976 as a two player ARCADE videogame called Blockade. It inspired other arcade games like Surround and Dominos (1977). The first home computer version called Worm followed in 1978. Mattel released Snafu in 1982. The same year Snake Byte was published for Atari computers and Nibbler, a single player arcade game. Tron arcade and it's light cycles are a player versus AI variant of the snake game concept. In 1991 there was Nibbles for MS-DOS and Rattler race was released the next year, where the snakes eat apples. In 1997 it was chosen as a pre-set game for Nokia cell phones followed by Snake 2 in the year 2000.Since then there were countless small flash games, with many different takes on the gameplay and graphics. Let's make our own version and add our own little contribution to the video game history.Challenge: can you add shadow to the snake? It might be more difficult than it seems because the body is made out of individual segments.If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :)udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onThe 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
Player-vs-AI Games (JavaScript tutorial) Franks laboratory 2024-03-29 | This is a deep dive into grid-based games. Local multiplayer 4-player battle arena, game menus, game over screen, animated sprites, simple AI to control the opponents and much more! Let's remake classic games and put your own spin on it. Have fun!Tip: this game can be played as 1 player versus AI, 2 players versus AI or even AI versus AI. Set all 4 players as AI-controlled and watch what happens.Classic snake game with graphics: youtu.be/TBGEt_-rFSs🎨 Toolkit 🎨We will use vanilla JavaScript, no frameworks and no libraries because we want to understand every line of code. (JavaScript, HTML canvas, object oriented programming, HTML5, CSS3)🍄 Download Project Art assets 🍄Grass tile: frankslaboratory.co.uk/downloads/138/grass_night.pngBackground top tile: frankslaboratory.co.uk/downloads/138/forest_margin_repeat.pngGame over screen: frankslaboratory.co.uk/downloads/138/gameOver_forest.pngBackground top tile larger: frankslaboratory.co.uk/downloads/138/forest_margin_repeat_1600x600.pngMagic berry: frankslaboratory.co.uk/downloads/138/magic_berry1.pngSnake corgi: frankslaboratory.co.uk/downloads/138/snake_corgi.pngMagic mushroom: frankslaboratory.co.uk/downloads/138/mushroom_sprite.pngAnimated foods sprite sheet: frankslaboratory.co.uk/downloads/138/food.pngVoid wolf: frankslaboratory.co.uk/downloads/138/void_wolf.pngSticky saberhound: frankslaboratory.co.uk/downloads/138/sticky_saberhound.pngSpectral schnoodle: frankslaboratory.co.uk/downloads/138/spectral_schnoodle.pngBite 1: frankslaboratory.co.uk/downloads/138/bite1.mp3Bite 2: frankslaboratory.co.uk/downloads/138/bite2.mp3Bite 3: frankslaboratory.co.uk/downloads/138/bite3.mp3Bite 4: frankslaboratory.co.uk/downloads/138/bite4.mp3Bite 5: frankslaboratory.co.uk/downloads/138/bite5.mp3Bad food: frankslaboratory.co.uk/downloads/138/bad_food.mp3Button: frankslaboratory.co.uk/downloads/138/button.mp3Start: frankslaboratory.co.uk/downloads/138/start.mp3Restart: frankslaboratory.co.uk/downloads/138/restart.mp3Win: frankslaboratory.co.uk/downloads/138/win.mp3All resources zip: frankslaboratory.co.uk/downloads/138/all_resources.zip🍄 Tutorial Contents 🍄00:00:00 Battle snakes in vanilla JavaScript00:00:27 Project setup00:04:26 Fully responsive canvas00:12:01 Drawing animated shapes 00:16:26 Playable characters00:20:30 Game grid00:24:04 Fully responsive grid 00:28:00 Animation timing00:36:04 Player 1: Keyboard arrows00:46:19 Player 2: Keyboard WSAD00:49:33 Player 3: Computer AI00:58:03 Food01:04:19 Drawing text on canvas01:06:57 Multi segmented bodies01:10:30 Movement rules01:13:11 Game UI: buttons01:15:00 Game UI: score board01:20:48 Game UI: player options01:24:55 Tileable backgrounds01:31:02 Playable area01:32:57 Start and restart screens01:40:40 Tweaks and fixes01:44:13 Connecting the menus01:52:00 Fullscreen mode01:54:12 Debug mode01:56:48 Images and debug shapes 02:00:28 Character sprite sheets02:26:21 Animated food02:31:28 Food seeking AI02:34:39 Win and lose messages02:39:28 Mouth animations02:43:38 Non edible food02:47:41 Game UI: creature choice02:54:56 Easy and difficult AI03:05:07 Game timers03:07:40 Performance friendly particles03:27:30 Sound designSource codeCheckpoint 1 (00:28:00) download zip: frankslaboratory.co.uk/downloads/138/source_code_1.zipCheckpoint 2: (00:58:03) download zip frankslaboratory.co.uk/downloads/138/source_code_2.zipIf you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :)udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onThe 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
Side-Scrolling Games (JavaScript tutorial) Franks laboratory 2024-02-09 | It's really fun to take a proven game concept and put your own spin on it. Using these 5 techniques, you can build 1000s of different games. Let's built mobile games completely from scratch step by step with vanilla JavaScript and HTML canvas.Main features:- fully responsive and playable on ANY DEVICE (mobile, tablet, ultra wide screens)- win condition: time run- player resource: rechargeable energy- special ability: speed boost- player character: Flappy Fish / Antigravity Boar👽 Download Project Art assets 👽Background (color): frankslaboratory.co.uk/downloads/137/background_single.pngBackground (black & white): frankslaboratory.co.uk/downloads/137/background_single2.pngPlayer fish: frankslaboratory.co.uk/downloads/137/player_fish.pngObstacles : frankslaboratory.co.uk/downloads/137/smallGears.pngSounds (right click and 'Save link as'): Charge: frankslaboratory.co.uk/downloads/137/charge.mp3Flap 1: frankslaboratory.co.uk/downloads/137/flap1.mp3Flap 2: frankslaboratory.co.uk/downloads/137/flap2.mp3Flap 3: frankslaboratory.co.uk/downloads/137/flap3.mp3Flap 4: frankslaboratory.co.uk/downloads/137/flap4.mp3Flap 5: frankslaboratory.co.uk/downloads/137/flap5.mp3Win: frankslaboratory.co.uk/downloads/137/win.mp3Lose: frankslaboratory.co.uk/downloads/137/lose.mp3(if you can't download the files, try to use a different browser or VPN to change your country, also leave a comment so I can fix it)Playlist: youtube.com/playlist?list=PLYElE_rzEw_tw6scwjv96oEABmnMSQoQW🌌 Tutorial Contents 🌌Basic project:00:00:00 Make GAMES with JavaScript 00:00:37 HTML, CSS & JavaScript setup 00:05:21 Drawing on HTML5 canvas00:09:29 Resizing HTML5 canvas00:15:55 Dynamic scaling00:20:39 How to code gravity00:26:38 Player controls00:28:50 Keyboard controls00:30:49 Scrolling backgrounds00:35:59 Endless repeating backgrounds00:40:43 Create obstacles00:45:45 Position and move obstacles00:51:20 Count score00:55:38 Measure time00:59:40 Handle game over01:01:14 Handle collisions01:05:08 Detect collisions01:07:47 Win or lose01:09:35 Recharge energy01:11:07 Special abilities01:17:45 Time events with precision01:22:37 Detect swipes01:25:32 Finishing touchesSteampunk flappy bird game:01:28:01 Animate your creatures01:31:00 Make it more steampunk01:33:21 Animate player actions01:37:27 Clean-up01:39:35 How to handle sounds01:42:38 Manage player resources01:44:28 Play randomized sounds01:48:17 Polish every detail01:50:19 Dynamic font size01:54:22 What's next?Source code:Checkpoint 1 (00:26:38): frankslaboratory.co.uk/downloads/137/source_code_1.zipIf you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :)udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onThe 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
Point & Shoot Games (JavaScript tutorial) Franks laboratory 2024-01-12 | Every mobile game needs to have 3 main elements: fullscreen, touch controls & optimized code, that runs well on a variety of devices. We will do all of that, and we will 1) build a BLANK REUSABLE BOILERPLATE project and 2) in the advanced section we will add graphics, animation & sounds to turn it into an ANIMATED SPACE HORROR game. Scary noises included. OBJECT POOL DESIGN PATTERN allows us to reuse objects, rather than constantly creating new ones and destroying the old ones. This approach will improve the performance of the codebase, because it solves problems with automatic memory allocation and garbage collection processes. STATE DESIGN PATTERN allows us to separate behaviors of the object into separate code blocks, giving us the ultimate control over each individual state, while at the same time making the code easier to read, maintain and debug. Let's learn how to implement both of these design patterns in a real project using JavaScript & HTML Canvas. 👽 Download Project Art assets 👽Background horizontal: frankslaboratory.co.uk/downloads/136/background1920x1080.pngBackground vertical: frankslaboratory.co.uk/downloads/136/background1080x1920.pngSimple crew member: frankslaboratory.co.uk/downloads/136/crew.pngBeetlemorph 100x100px frames: frankslaboratory.co.uk/downloads/136/beetlemorph100x100.pngLobstermorph 100x100px frames: frankslaboratory.co.uk/downloads/136/lobstermorph100x100.pngCrew members sprite sheet: frankslaboratory.co.uk/downloads/136/crewSprite.pngPhantommorph 100x100px frames: frankslaboratory.co.uk/downloads/136/phantommorph100x100.pngSounds (right click and 'Save link as'): New game: frankslaboratory.co.uk/downloads/136/newgame.mp3Boom 1: frankslaboratory.co.uk/downloads/136/boom1.mp3Slide: frankslaboratory.co.uk/downloads/136/slide.mp3Boom 2: frankslaboratory.co.uk/downloads/136/boom2.mp3Boom 3: frankslaboratory.co.uk/downloads/136/boom3.mp3Boom 4: frankslaboratory.co.uk/downloads/136/boom4.mp3Win: frankslaboratory.co.uk/downloads/136/win.mp3Lose: frankslaboratory.co.uk/downloads/136/lose.mp3Scream: frankslaboratory.co.uk/downloads/136/scream.mp3(if you can't download the files, try to use a different browser or VPN to change your country, also leave a comment so I can fix it)Playlist: youtube.com/playlist?list=PLYElE_rzEw_tw6scwjv96oEABmnMSQoQW🌌 Tutorial Contents 🌌Beginner project:00:00:00 Build mobile games JavaScript and HTML Canvas. 00:01:08 Project setup00:03:05 Make everything responsive00:09:20 Enemy class00:17:19 Object pool design pattern00:20:55 Periodic triggers00:27:45 Mouse controls00:29:15 Collision detection00:37:05 Touch events00:38:43 Game text00:45:46 Start & restart00:49:21 Fullscreen gamesAdvanced project:00:53:29 Simple crew members00:54:59 Simple enemy type00:59:23 Sprite animation01:03:44 Animation timing01:07:52 Debug mode01:10:01 Enemy variety01:14:31 Randomized space crew01:18:18 State management in games01:22:46 State design pattern01:38:10 Sounds and final detailsSource code:Checkpoint 1 (00:16:21): frankslaboratory.co.uk/downloads/136/source_code_1.zipCheckpoint 2 (00:52:46): frankslaboratory.co.uk/downloads/136/source_code_2.zipIf you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :)udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onThe 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
Learn Creative Coding: Image Effects Franks laboratory 2023-12-01 | Learn how to control images, slice them into pieces and unleash a series of different interactive animated effects. DISCOVER creative coding techniques that will take your projects to the next level and practice HTML, CSS & JavaScript at the same time. We want to really UNDERSTAND so there will be NO frameworks and NO libraries. We will write everything line by line using vanilla JavaScript and Object Oriented Programming. We will explain every line of code to make sure, we have a COMPLETE CONTROL over the effects. Have you decided that this year you want to become really good at JavaScript and need a set of fun, visual and memorable projects to learn and practice on? Have fun!⭐️Today we will build a series or effects that DEFORM, ASSEMBLE & BREAK IMAGES apart in different ways: ⭐️00:00 Image manipulation effects masterclass 00:42 HTML, CSS & JavaScript setup02:08 How to organise anything into a grid08:33 How to draw, crop and slice images with JavaScript12:38 How to animate images with JavaScript🎨 "SLICE & DICE" EFFECTS on images 🎨14:25 Mouse interactivity16:15 How to find the distance between two points19:17 Getting direction from point A to point B24:08 Motion physics formula (friction, easing)🖼️ "ASSEMBLE" EFFECTS on images 🖼️30:14 Moving the cells around33:08 Performance optimizations🎭 CREATIVE CODING EXPERIMENTS 🎭34:41 Cell index, animation delay and more..💪 BEGINNER CHALLENGE: Play with the values I showed you in the video and come up with a new unique effect, something that I didn't do in the video.🏋️ ADVANCED CHALLENGE: Can you come up with your own mathematical pattern to assemble the image in a unique way?What's next?Try some of these more advanced effect using the same physics formula we learned today:Particle Images youtu.be/vAJEHf92tV0Particle Text youtu.be/2F2t1RJoGt8If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :)udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onThe 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
State Management in 2D GAMES Franks laboratory 2023-11-17 | State design pattern is the most powerful technique a beginner can learn. It gives us complete control over our project. This is how I implement it with plain vanilla JavaScript and object oriented programming.We can apply state pattern to an individual character to give it a set of abilities and special moves.We can also apply it to the entire game, split it into levels and give each level different environment and other unique features. State design pattern focuses on separating code for each state in it's own code block, that code block could be a special attack or individual game level for example.In my implementation we will also include elements of finite state machine, which is more about the relationships between the individual states and how they transition into each other. We will restrict which states the alien is able to switch into and how it reacts to user inputs, depending on which state it is currently in.👽 Download Project Art assets 👽Alien: frankslaboratory.co.uk/downloads/133/locustmorph_large.pngBackground (optional): frankslaboratory.co.uk/downloads/133/background.png(if you can't download the files, try to use a different browser or VPN to change your country, also leave a comment so I can fix it)Playlist: youtube.com/playlist?list=PLYElE_rzEw_tw6scwjv96oEABmnMSQoQW🌌 Tutorial Contents 🌌00:00 Why we need state management02:11 Project setup06:21 Keyboard controls with JavaScript Sets08:14 How to implement State design pattern14:11 Switching states on keypress16:12 Animation loop21:54 Switching states on automated condition24:14 Making each state unique26:31 State dependent status text32:43 State dependent animationsIf you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: 🎓skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onThe 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
Build 8 Creative Coding Projects (vanilla JavaScript) Franks laboratory 2023-10-31 | Create 8 interactive animated projects with JavaScript and HTML canvas. No frameworks and no libraries, because only when we UNDERSTAND THE CODE, we can FULLY CONTROL IT and make it do whatever we want.DISCOVER and MASTER creative coding and add 8 FUNDAMENTAL TECHNIQUES into your animation toolkit. Have you decided that this year you want to become really good at JavaScript and need a set of fun, visual and memorable projects to learn and practice on? Have fun!⭐️Today we will build 8 creative coding projects: ⭐️🎨 Project 1: 00:00:00 Constellations effectBuild the famous effect that connects floating particles with lines using dynamic opacity. No frameworks and no libraries.🎨 Project 2: 00:57:16 Sunrays effectApply specific styles to every nth particle. For example connect the mouse to every 10th particle with a line.🎨 Project 3: 01:03:59 Particle bubblesTurn particles into bubbles that interact with mouse by growing and shrinking in size. Draw simple shapes with inflatable bubble trails.🎨 Project 4: 01:11:17 Star particlesParticles can look like any image of your choice. Turn particles into stars, planets or Pokémon.Learn how to use a sprite sheet (a single image that consists of several smaller images) and assign each particle one randomised frame.🎨 Project 5: 01:24:15 Liquid EffectsExperiments with interactive liquid and sticky effects, so called 'meta-balls'.🎨 Project 6: 01:32:27 Bouncing particlesMake particles bounce around a website.Collision detection between 2 rectangles, where one rectangle is a hit box around each particle and the other is a bounding rectangle of any website element of your choice.🎨 Project 7:02:02:53 Scrolling particles and animated charactersEndlessly scrolling particle field effect, that can also be used for many games. And then we make those particle interact with animated character, using sprite animation capabilities of built-in drawImage method.🎨 Project 8:02:43:19 Spatially aware particles in liquidCreate a simple physics system where particles push each other around, move around each other and do their best to never overlap. Also experiments with liquids and gradients.Course resources:Download STARTER CODE (from the end of project 1): frankslaboratory.co.uk/downloads/117/particle_systems_source_code.zipcodepen.io/franksLaboratory/pen/BaqVmMBExperimental bubbles (project 3):experiment 1: codepen.io/franksLaboratory/pen/MWzyYOGexperiment 2: codepen.io/franksLaboratory/pen/PoxNwEGexperiment 3: codepen.io/franksLaboratory/pen/oNQxgdvStars sprite sheet (project 4): frankslaboratory.co.uk/downloads/129/stars_sprite.pngScrolling stars and space whales (project 7):⭐️ STAR: frankslaboratory.co.uk/downloads/119/star.png🐋 WHALE 1: frankslaboratory.co.uk/downloads/119/whale1.png🐋 WHALE 2: frankslaboratory.co.uk/downloads/119/whale2.png🐋 WHALE 3: frankslaboratory.co.uk/downloads/119/whale3.png(if you can't download the files, try to use a different browser or VPN to change your country)What's next?This class focuses on PARTICLES. If you want, you can also explore FLOW FIELDS: youtube.com/playlist?list=PLYElE_rzEw_uVHNJjZor-b_bJpftEG4tV&si=XZl7A_ccZtkwtWR1or FRACTALS youtu.be/dQKYao-daYwor how about SIMPLE TEXT EFFECTS youtu.be/f5ZswIE_SgYor more ADVANCED TEXT EFFECTS youtu.be/2F2t1RJoGt8If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: 🎓skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onThe 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
JavaScript Game Tutorial: Planet Defense Franks laboratory 2023-10-14 | Every game is made out of a few basic building blocks. Once you understand these techniques you can get creative, combine these elements in different ways and make many different games easily. Let's learn JavaScript by making games. Today we are building an animated 2d game completely from scratch with no frameworks and no libraries using just plain vanilla JavaScript and HTML5 canvas. Discover many 2D game development techniques and learn how to implement them with JavaScript. We will cover everything from keyboard and mouse controls to performance friendly sprite animation tips and tricks, and the main focus this time is object pool design pattern. We will use it for enemies and for player projectiles, because reusing our objects, rather then creating and discarding them over and over, can be a massive performance benefit.This class is for creative coders who want to learn about the fundamentals of 2D game development as well as for JavaScript beginners who want to practice their object oriented programming skills on a fun visual and interactive project. 👽 Download Project Art assets 👽Background: frankslaboratory.co.uk/downloads/131/background.pngPlanet: frankslaboratory.co.uk/downloads/131/planet.pngPlayer space ship: frankslaboratory.co.uk/downloads/131/player.pngAsteroid enemy: frankslaboratory.co.uk/downloads/131/asteroid.pngLobstermorph enemy: frankslaboratory.co.uk/downloads/131/lobstermorph.pngBeetlemorph enemy: frankslaboratory.co.uk/downloads/131/beetlemorph.pngRhinomorph enemy: frankslaboratory.co.uk/downloads/131/rhinomorph.png(if you can't download the files, try to use a different browser or VPN to change your country, also leave a comment so I can fix it)Playlist: youtube.com/playlist?list=PLYElE_rzEw_tw6scwjv96oEABmnMSQoQW🌌 Tutorial Contents 🌌00:00:00 Intro00:01:02 Project setup00:03:24 Planet and Game class00:11:34 Mouse position00:17:53 Player spaceship00:22:35 A little bit of math00:30:23 Understand canvas rotation00:36:39 Debug mode00:39:04 Object pool00:51:27 Player projectiles00:57:38 Enemy pool01:05:03 Reusable collision detection method01:07:24 Periodic events01:15:30 Asteroid enemy class01:19:51 Sprite animation in JavaScript01:29:07 Lobstermorph enemy class01:38:22 Drawing game text01:43:49 Player lives01:48:58 Beetlemorph enemy class01:50:33 Rhinomorph enemy class01:51:40 What's nextIf you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: 🎓skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onThe 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
Particle Experiments: Liquid Effects Franks laboratory 2023-09-15 | Liquid effect is an important technique for every creative coder. Let's explore how to apply it and how to control which shapes get liquified and which stay intact, to allow for unique visual combinations. Let's explore creative coding for beginners with HTML, CSS and vanilla JavaScript. Have fun!Want to build this effect FROM SCRATCH? Follow these steps with me:Step 1: youtu.be/5dIbK0auaB8Step 2: youtu.be/gxagf0WKfBoStep 3: this video (youtu.be/P2bFr5MwLUE)Particle systems masterclass FULL PLAYLIST: youtube.com/playlist?list=PLYElE_rzEw_tLmWtIkUfI6Odi38ajFI8RDownload STARTER CODE: frankslaboratory.co.uk/downloads/117/particle_systems_source_code.zipcodepen.io/franksLaboratory/pen/BaqVmMB(if you can't download the files, try to use a different browser or VPN to change your country)Create beautiful particle systems with HTML5, CSS3 and plain vanilla JavaScript, no frameworks and no libraries. Understanding how the code works will allow us to transform this codebase into multiple very different effects. Let's explore the basic techniques and then take them to the limits in this particle effects crash course. If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: 🎓skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onThe 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
Particle Experiments: Sprite sheets Franks laboratory 2023-09-08 | In creative coding and animation, we can implement many different kinds of visuals. Instead of drawing particles as circle shapes with code, we can use a sprite sheet and make each particle one of the randomised star drawings. These more complex star shapes can also be drawn with code and I showed you how to do it before, but it's always more performance efficient to have a ready made image, rather than make JavaScript calculate and draw all these shapes over and over. We want smooth fast animation, so we should always try to make JavaScript do as little work as possible. Let me show you a very simple and easy way how to use sprite sheets with your particle effects. Want to build this effect FROM SCRATCH? Follow these steps with me:Step 1: youtu.be/5dIbK0auaB8Step 2: youtu.be/gxagf0WKfBoStep 3: this video (youtu.be/ipOIQhEUKqw)Particle systems masterclass FULL PLAYLIST: youtube.com/playlist?list=PLYElE_rzEw_tLmWtIkUfI6Odi38ajFI8RSprite sheet: frankslaboratory.co.uk/downloads/129/stars_sprite.pngDownload STARTER CODE: frankslaboratory.co.uk/downloads/117/particle_systems_source_code.zipcodepen.io/franksLaboratory/pen/BaqVmMB(if you can't download the files, try to use a different browser or VPN to change your country)Create beautiful particle systems with HTML5, CSS3 and plain vanilla JavaScript, no frameworks and no libraries. Understanding how the code works will allow us to transform this codebase into multiple very different effects. Let's explore the basic techniques and then take them to the limits in this particle effects crash course. If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: 🎓skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onThe 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
JavaScript RETRO Games: Super Weapons Franks laboratory 2023-08-25 | 2 new weapons, overheating mechanic and a rechargeable energy bar. We are building classic SPACE INVADERS game, but we are experimenting with code and adding our own features. Have fun!🚀 Full EXTENDED version includes: 4 unique enemy types, full source code from 8 stages throughout the project, 8 boss skins, super weapons and more. Check out the trailer and feature overview here: udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7Part 1: youtu.be/cuudnyDyWGEPart 2: youtu.be/oULPfiGeUV0Part 3: youtu.be/bobqrOT-cVIPart 4: this videoToday we will learn:How to implement automatically recharging energy bar and overheating mechanicHow to render and check collision between new powerful laser beams and bosses/enemiesHow to restrict colors and canvas transforms only to specific shapes using save() and restore() built-in HTML canvas methods....and moreIf you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: 🎓skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onThe 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
JavaScript RETRO Games: Boss Battles Franks laboratory 2023-08-18 | Randomized boss encounters will make our game challenging. Each new boss will have more lives than the previous one. How far can you go?Today we will design and implement randomized boss battles and we will make them a part of our JavaScript Space Invaders game. Have fun!🚀 Full EXTENDED version includes: 4 unique enemy types, full source code from 8 stages throughout the project, 8 boss skins, super weapons and more. Check out the trailer and feature overview here: udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7Part 1: youtu.be/cuudnyDyWGEPart 2: youtu.be/oULPfiGeUV0Part 3: this videoPart 4: youtu.be/nwPBVwtsVys👽 Download Project Art assets 👽Boss creatures sprite sheet: frankslaboratory.co.uk/downloads/125/boss.png(if you can't download the files, try to use a different browser or VPN to change your country, also leave a comment so I can fix it)Today we will learn:How to implement a basic boss fightHow to animate boss creatures in HTML canvasHow to give bosses growing health pool and integrate them to come periodically along with the enemy wavesHow to animate sprite sheets using built in JavaScript drawImage() method...and moreIf you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: 🎓skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onThe 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
JavaScript RETRO Games: Armored Enemies Franks laboratory 2023-08-04 | What makes enemies interesting? In a 2D game like this it could be their behaviour, properties and visuals. Different combinations of enemy types in our games should create different situations and challenges for the player to deal with.Today we will design and implement an armored enemy type and we will make it a part of our JavaScript Space Invaders game. Have fun!🚀 Full EXTENDED version includes: 4 unique enemy types, full source code from 8 stages throughout the project, 8 boss skins, super weapons and more. Check out the trailer and feature overview here: udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7Part 1: youtu.be/cuudnyDyWGEPart 2: this videoPart 3: youtu.be/bobqrOT-cVIPart 4: youtu.be/nwPBVwtsVys👽 Download Project Art assets 👽Rhinomorph enemy: frankslaboratory.co.uk/downloads/125/rhinomorph.png(if you can't download the files, try to use a different browser or VPN to change your country, also leave a comment so I can fix it)Today we will learn:How to extend a class in JavaScriptHow to override inherited methods on JavaScript sub classesHow to use HTML canvas drawImage() method...and moreIf you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: 🎓skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onThe 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
Remake RETRO Games with JavaScript Franks laboratory 2023-07-23 | Spaceships, lazers and aliens. Let's build a game from scratch with plain vanilla JavaScript and learn about game development and object-oriented programming. Our JavaScript game will be loosely inspired by the iconic space invaders arcade, but we will add some fun bonus features like super weapons, boss battles and different enemy types. While we do that we will learn about fundamental programming principles with JavaScript and object-oriented programming. 🚀 Full EXTENDED version includes: 4 unique enemy types, full source code from 8 stages throughout the project, 8 boss skins, super weapons and more. Check out the trailer and feature overview here: udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7Part 1: this video (youtu.be/cuudnyDyWGE)Part 2: youtu.be/oULPfiGeUV0Part 3: youtu.be/bobqrOT-cVIPart 4: youtu.be/nwPBVwtsVysPlaylist: youtube.com/playlist?list=PLYElE_rzEw_tw6scwjv96oEABmnMSQoQW👽 Download Project Art assets 👽Background: frankslaboratory.co.uk/downloads/125/background.pngBeetlemorph enemy: frankslaboratory.co.uk/downloads/125/beetlemorph.pngPlayer space ship: frankslaboratory.co.uk/downloads/125/player.pngPlayer jets: frankslaboratory.co.uk/downloads/125/player_jets.png(if you can't download the files, try to use a different browser or VPN to change your country, also leave a comment so I can fix it)🌌 Tutorial Contents 🌌00:00:00 Intro00:00:44 Project setup00:05:23 Game and player objects00:11:00 Keyboard controls00:18:27 Object pool design pattern00:31:28 Enemy waves00:45:02 Collision detection00:53:05 Score and game text01:05:53 Game restart method01:11:36 Beetlemorph enemy class01:16:26 Sprite animation explained01:27:02 Animation timing01:37:17 Player animationSpace Invaders was released in arcades across Japan in the summer of 1978. Back in the day, the processors were not powerful enough to move the entire army of aliens at the speed the designer Tomohiro Nishikado intended, but as the player defeated enemies, it freed more processor memory and the game was getting faster and faster the fewer enemies were on screen. It also affected the speed of background music. It wasn't intended but this rising difficulty bug became a game feature. We will create a variation on this by making the enemies come in larger and larger waves. I will be using NO frameworks and no libraries and I will explain every line of code as usual, because only when you fully understand the code can you modify and add your own features later if that's what you want to do. If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: 🎓skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onThe 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
Particle Experiments: Inflatable Bubbles Franks laboratory 2023-06-16 | In creative coding, there are many different types of particle interactions. Today we explore how to create animated inflatable particles with vanilla JavaScript and HTML canvas.Want to build this effect FROM SCRATCH? Follow these steps with me:Step 1: youtu.be/5dIbK0auaB8Step 2: youtu.be/gxagf0WKfBoStep 3: this video (youtu.be/LKvTzOfyjTM)Particle systems masterclass FULL PLAYLIST: youtube.com/playlist?list=PLYElE_rzEw_tLmWtIkUfI6Odi38ajFI8RDownload STARTER CODE: frankslaboratory.co.uk/downloads/117/particle_systems_source_code.zipcodepen.io/franksLaboratory/pen/BaqVmMB(if you can't download the files, try to use a different browser or VPN to change your country)SOURCE CODE:experiment 1: codepen.io/franksLaboratory/pen/MWzyYOGexperiment 2: codepen.io/franksLaboratory/pen/PoxNwEGexperiment 3: codepen.io/franksLaboratory/pen/oNQxgdvCreate beautiful particle systems with HTML5, CSS3 and plain vanilla JavaScript, no frameworks and no libraries. Understanding how the code works will allow us to transform this codebase into multiple very different effects. Let's explore the basic techniques and then take them to the limits in this particle effects crash course. If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: 🎓skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onThe 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
Bouncing Particles with vanilla JavaScript Franks laboratory 2023-06-09 | How to make particles interact with any HTML element on a website? We can do it with a help of a simple collision detection formula and a built-in JavaScript .getBoundingClientRect method. Let's discover more particle effects and creative coding experiments.One of the simpler forms of collision detection is between TWO RECTANGLES that are axis aligned, they are not rotated. The algorithm works by ensuring there is no gap between any of the 4 sides of the rectangles. Let me show you the formula, explain it line by line and apply it in a real project. PART1: youtu.be/-jC7_B2PyU0Particle systems masterclass FULL PLAYLIST: youtube.com/playlist?list=PLYElE_rzEw_tLmWtIkUfI6Odi38ajFI8RDownload STARTER CODE: frankslaboratory.co.uk/downloads/117/particle_systems_source_code.zipcodepen.io/franksLaboratory/pen/BaqVmMB(if you can't download the files, try to use a different browser or VPN to change your country)⭐️Tutorial Contents ⭐️00:00 Particles that interact with HTML elements 00:32 Bounce counter04:00 Sideways stream motion06:10 Particle trails08:36 Positioning coordinates based on canvas sizeCreate beautiful particle systems with HTML5, CSS3 and plain vanilla JavaScript, no frameworks and no libraries. Understanding how the code works will allow us to transform this codebase into multiple very different effects. Let's explore the basic techniques and then take them to the limits in this particle effects crash course. If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: 🎓skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onParticle systems masterclass FULL PLAYLIST: youtube.com/playlist?list=PLYElE_rzEw_tLmWtIkUfI6Odi38ajFI8RThe 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
Bounce Particles around a Website Franks laboratory 2023-06-02 | How to make particles interact with any HTML element on a website? We can do it with a help of a simple collision detection formula and a built-in JavaScript .getBoundingClientRect method. Let's discover more particle effects and creative coding experiments.One of the simpler forms of collision detection is between TWO RECTANGLES that are axis aligned, they are not rotated. The algorithm works by ensuring there is no gap between any of the 4 sides of the rectangles. Let me show you the formula, explain it line by line and apply it in a real project. Want to build this effect FROM SCRATCH? Follow these steps with me:Step 1: youtu.be/5dIbK0auaB8Step 2: youtu.be/gxagf0WKfBoStep 3: this video (youtu.be/-jC7_B2PyU0)Particle systems masterclass FULL PLAYLIST: youtube.com/playlist?list=PLYElE_rzEw_tLmWtIkUfI6Odi38ajFI8RDownload STARTER CODE: frankslaboratory.co.uk/downloads/117/particle_systems_source_code.zipcodepen.io/franksLaboratory/pen/BaqVmMB(if you can't download the files, try to use a different browser or VPN to change your country)⭐️Tutorial Contents ⭐️00:00 Particles that interact with HTML elements 00:40 HTML headings, CSS and gradients02:13 Particle physics - gravity06:58 How to measure HTML elements10:32 Collision detection between two rectangles15:46 Bounce!Create beautiful particle systems with HTML5, CSS3 and plain vanilla JavaScript, no frameworks and no libraries. Understanding how the code works will allow us to transform this codebase into multiple very different effects. Let's explore the basic techniques and then take them to the limits in this particle effects crash course. If you want to support me, you can use these links and buy some of my premium extended courses: Udemy📚udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB📚udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650B📚udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E📚 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=onParticle systems masterclass FULL PLAYLIST: youtube.com/playlist?list=PLYElE_rzEw_tLmWtIkUfI6Odi38ajFI8RThe 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
Side-Scrolling Starfields & Animation Timing Franks laboratory 2023-05-26 | Learn how to time animations, set periodically repeating events using requestAnimationFrame method and its auto generated timestamps. Randomise different creatures from a single sprite sheet. Creative coding experiments & particle systems⭐️⭐️⭐️PART 1 particle masterclass: youtu.be/5dIbK0auaB8PART 1 space whales : youtu.be/vIopRAihmLwParticle systems masterclass FULL PLAYLIST: youtube.com/playlist?list=PLYElE_rzEw_tLmWtIkUfI6Odi38ajFI8RDownload project resources:STARTER CODE: frankslaboratory.co.uk/downloads/117/particle_systems_source_code.zipcodepen.io/franksLaboratory/pen/BaqVmMB🐋 4 WHALES SPRITE SHEET: frankslaboratory.co.uk/downloads/119/whale3.png(if you can't download the files, try to use a different browser or VPN to change your country)⭐️Tutorial Contents ⭐️00:00 How to use requestAnimationFrame timestamps06:25 Randomising sprite sheets07:48 Particle & creature interactions08:55 Creative coding experimentsCreate beautiful particle systems with HTML5, CSS3 and plain vanilla JavaScript, no frameworks and no libraries. Understanding how the code works will allow us to transform this codebase into multiple very different effects. Let's explore the basic techniques and then take them to the limits in this particle effects crash course. If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: 🎓skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onThe 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
Side-Scrolling Starfields & Sprite Animation Franks laboratory 2023-05-23 | Learn how to animate motion and how to control sprite sheets with JavaScript. Creative coding experiments & particle systems⭐️⭐️⭐️PART 1 particle masterclass: youtu.be/5dIbK0auaB8PART 1 space whales : youtu.be/vIopRAihmLwParticle systems masterclass FULL PLAYLIST: youtube.com/playlist?list=PLYElE_rzEw_tLmWtIkUfI6Odi38ajFI8RDownload project resources:STARTER CODE: frankslaboratory.co.uk/downloads/117/particle_systems_source_code.zipcodepen.io/franksLaboratory/pen/BaqVmMB🐋 WHALE SPRITE SHEET: frankslaboratory.co.uk/downloads/119/whale2.png(if you can't download the files, try to use a different browser or VPN to change your country)⭐️Tutorial Contents ⭐️00:00 Up and down motion - sine wave03:38 HTML canvas rotation explained08:10 JavaScript sprite animationCreate beautiful particle systems with HTML5, CSS3 and plain vanilla JavaScript, no frameworks and no libraries. Understanding how the code works will allow us to transform this codebase into multiple very different effects. Let's explore the basic techniques and then take them to the limits in this particle effects crash course. If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: 🎓skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onThe 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
Side-Scrolling Starfields & Space Whales Franks laboratory 2023-05-19 | Fly though the universe and warp time and space. We are making side scrolling starfield effect today and we will make particles interact with an animated space creature. Creative coding experiments & particle systems⭐️⭐️⭐️Want to build this effect FROM SCRATCH? Follow these steps with me:Step 1: youtu.be/5dIbK0auaB8Step 2: youtu.be/gxagf0WKfBoStep 3: this video (youtu.be/vIopRAihmLw)Particle systems masterclass FULL PLAYLIST: youtube.com/playlist?list=PLYElE_rzEw_tLmWtIkUfI6Odi38ajFI8RDownload project resources:STARTER CODE: frankslaboratory.co.uk/downloads/117/particle_systems_source_code.zipcodepen.io/franksLaboratory/pen/BaqVmMB⭐️ STAR: frankslaboratory.co.uk/downloads/119/star.png🐋 WHALE: frankslaboratory.co.uk/downloads/119/whale1.png(if you can't download the files, try to use a different browser or VPN to change your country)⭐️Tutorial Contents ⭐️00:00 Combining particles and custom graphics00:45 Draw particles as images04:20 Scrolling stars08:34 Whale classCreate beautiful particle systems with HTML5, CSS3 and plain vanilla JavaScript, no frameworks and no libraries. Understanding how the code works will allow us to transform this codebase into multiple very different effects. Let's explore the basic techniques and then take them to the limits in this particle effects crash course. If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: 🎓skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onParticle systems masterclass FULL PLAYLIST: youtube.com/playlist?list=PLYElE_rzEw_tLmWtIkUfI6Odi38ajFI8RThe 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
Particle Experiments: Sunrays Effect Franks laboratory 2023-05-12 | This is of the simple and powerful techniques we can use to enhance our animations. How to apply specific styles to nth particle to achieve all kinds of beautiful creative coding effects? Let me show you.Want to build this effect FROM SCRATCH? Follow these steps with me:Step 1: youtu.be/5dIbK0auaB8Step 2: youtu.be/gxagf0WKfBoStep 3: this video (youtu.be/JqpDTpnS_WE)Of you can download the code files and just code along with this project:frankslaboratory.co.uk/downloads/117/particle_systems_source_code.zipIf the download link doesn't leave for you leave a comment to let me know. You can also get if on my Codepen. Don't forget to FOLLOW me on there! :)codepen.io/franksLaboratory/pen/BaqVmMB⭐️Tutorial Contents ⭐️00:00 How to get more control over individual particles04:12 Particle sunrays effectCreate beautiful particle systems with HTML5, CSS3 and plain vanilla JavaScript, no frameworks and no libraries. Understanding how the code works will allow us to transform this codebase into multiple very different effects. Let's explore the basic techniques and then take them to the limits in this particle effects crash course. If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: 🎓skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onParticle systems masterclass FULL PLAYLIST: youtube.com/playlist?list=PLYElE_rzEw_tLmWtIkUfI6Odi38ajFI8RThe 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
Particle Physics in JavaScript Franks laboratory 2023-05-08 | I want acceleration and I want friction! Let's add some physics. Particle systems masterclass FULL PLAYLIST: youtube.com/playlist?list=PLYElE_rzEw_tLmWtIkUfI6Odi38ajFI8R⭐️Tutorial Contents ⭐️00:00 How to make HTML canvas fully responsive05:41 HTML5 Canvas mouse events08:15 How to calculate distance between 2 points09:00 JavaScript atan2() method explained12:28 Detecting content boundaries on a HTML5 canvas17:03 Simulating particle physicsCreate beautiful particle systems with HTML5, CSS3 and plain vanilla JavaScript, no frameworks and no libraries. Understanding how the code works will allow us to transform this codebase into multiple very different effects. Let's explore the basic techniques and then take them to the limits in this particle effects crash course. Today we will learn:🎨 how to make HTML5 Canvas projects fully responsive🎨 how to detect and react to mouse events🎨 how to calculate distance between 2 points and direction of push in a 2D space🎨 how to add physics - acceleration & frictionIf you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: 🎓skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onThe 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
Learn Creative Coding: Particle Systems Franks laboratory 2023-05-03 | Simple things can be beautiful. This entire effect is based on a rule that says: when 2 particles are close enough to each other, connect them with a line. Join me for this mini series and let's build one of the most famous animated effects from scratch, add physics, interactivity and turn that into 10 completely different generative art pieces using a variety of creative coding techniques.Constellations effect was made famous by the Particles.js library, today we will build if from scratch with vanilla JavaScript using object oriented programming principles. In the next part we will turn it into many different particle systems experimenting with motion, colours and physics in many different ways,Particle systems masterclass FULL PLAYLIST: youtube.com/playlist?list=PLYElE_rzEw_tLmWtIkUfI6Odi38ajFI8R⭐️Tutorial Contents ⭐️00:00 Intro00:20 HTML5 & CSS3 setup01:44 JavaScript setup02:42 Drawing shapes on HTML canvas03:48 Effect and Particle classes06:38 Creating particles08:11 Drawing particles11:47 Dynamic colours with HSL13:31 Positioning particles14:57 Animating particles16:08 Bouncing particles19:07 Canvas gradients21:29 Constellations effect28:28 Dynamic opacityToday we will learn:🎨 object oriented programming with vanilla JavaScript, HTML5 Canvas🎨 how to build bouncing balls effect🎨 how to build constellations effectIf you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BBudemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4Audemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650Budemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5Eudemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Get Skillshare FREE for 1 month: 🎓skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onThe 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
Character Motion & Animation in 2D Games Franks laboratory 2023-04-21 | Robots, body parts and game design. Deep dive into 2D character animation and motion. Let's build a space robot from multiple separate body parts and let's make them interactive. Building games can be easy if you understand your tools and techniques. Let's learn 2D Game development with vanilla JavaScript and HTML5 canvas element. 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🎨 Download Project Art assets 🎨Background: frankslaboratory.co.uk/downloads/115/bg1.pngBody: frankslaboratory.co.uk/downloads/115/body.pngEye 1: frankslaboratory.co.uk/downloads/115/eye1.pngEye 2: frankslaboratory.co.uk/downloads/115/eye2.pngReflection: frankslaboratory.co.uk/downloads/115/reflection.pngBody sprite sheet: frankslaboratory.co.uk/downloads/115/bodySprite.pngDetector light: frankslaboratory.co.uk/downloads/115/detectorLight.pngAll (zip): frankslaboratory.co.uk/downloads/115/all.zipLarger background image: frankslaboratory.co.uk/downloads/115/background_1280x720.pngConcept art (wallpapers, robot designs): frankslaboratory.co.uk/downloads/115/115_concept_art.zipToday we will learn:- How to create animated interactive CHARACTER with vanilla JavaScript and HTML canvas- How to MEASURE AN ANGLE between 2 objects in a 2D space- How to create animated interactive eyes- How to make characters MOVE in repeating patterns⭐️Tutorial Contents ⭐️00:00 Intro01:22 Project setup02:41 Robot class05:00 Drawing eyes on HTML canvas06:00 Capturing mouse coordinates07:45 Animating on HTML canvas08:43 Calculating angle between 2 objects18:01 Drawing images on HTML canvas23:15 Sprite animation with JavaScript27:39 Repeating motion patterns34:17 Improving eye movement38:32 Autopilot and tracking modesLet'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
Collision Animations & Sounds in 2D Games Franks laboratory 2023-04-14 | Build interactive 2D games and make player actions feel good with sprite animations and sounds! When user clicks an asteroid, we will play one of 3 randomised collision animations from a sprite sheet and one of 6 random sounds. PART1: youtu.be/NYzvdfkDOU4Check 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=onToday we are building 2D animated space game with JavaScript and HTML canvas. We learned how to create asteroids using object pool design pattern, to improve performance and memory management of the codebase. Let me show a simple way how to handle multiple object pools, following good beginner friendly coding practices. This project is beginner friendly. Basic knowledge of HTML, CSS & JavaScript is needed to get the maximum value.🎨 Download Project Art assets 🎨Sprite sheet: frankslaboratory.co.uk/downloads/114/explosions.pngSound 1: frankslaboratory.co.uk/downloads/114/explosion1.wavSound 2: frankslaboratory.co.uk/downloads/114/explosion2.wavSound 3: frankslaboratory.co.uk/downloads/114/explosion3.wavSound 4: frankslaboratory.co.uk/downloads/114/explosion4.wavSound 5 frankslaboratory.co.uk/downloads/114/explosion5.wavSound 6: frankslaboratory.co.uk/downloads/114/explosion6.wavToday we will learn:- How to manage MULTIPLE object pools- How to ANIMATE COLLISIONS from a sprite sheet- How to add randomised SOUND EFFECTSFor more vanilla JavaScript GAME DEVELOPMENT check out this playlist:youtube.com/playlist?list=PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2⭐️Tutorial Contents ⭐️00:00 Intro00:25 Explosion class07:19 Capturing mouse coordinates14:06 Object pools and sprite animations17:35 Animation timing22:14 Automatic triggers23:38 2D collision detection29:34 Scoring system34:06 Physics35:36 Sound designLet'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
Object Pool Design Pattern #SHORTS Franks laboratory 2023-04-07 | How can you improve your game's performance? The object pool design pattern is a good place to start. Instead of repeatedly creating and deleting objects, we create a reusable object pool. It's simple, and it will greatly optimise your code, allowing you to add many more animated objects while maintaining animation speed at 60 frames per second.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=onThe 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
JavaScript Flow Fields - Advanced Experiments Franks laboratory 2023-03-17 | Flow fields are one of the most unique and instantly recognizable creative coding effects. The advantage of writing our own code without any frameworks or libraries is that we understand how everything works. We can control it easily, and we can do whatever we want with it. Let me show you how to make this effect flow around text using the built-in getImageData method. 🎨 Today we will build TEXT flow field. EXTENDED class with BONUS lessons and more creative coding experiments, full source code from multiple different stages, learn how to create image flow fields and animate smooth color transitions.🎨 Udemy: udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A🎨 Skillshare (free 1 month trial):skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on📚 Part 1: youtu.be/MJNy2mdCt20📚 Full playlist: youtube.com/playlist?list=PLYElE_rzEw_uVHNJjZor-b_bJpftEG4tV⭐️Tutorial Contents ⭐️00:00 Intro00:52 How to draw text on HTML canvas06.38 Understanding pixel data11:45 Handling pixel data15:09 Converting colors into angles25:34 HTML canvas gradients30:27 Tips, tricks & Experiments40:35 What's next? More beginner friendly creative coding with vanilla JavaScript & HTML canvas:youtube.com/playlist?list=PLYElE_rzEw_v8TXJ_ITSSBP_ypUKfQ7K-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
Learn Creative Coding: Flow Fields 🎨 Franks laboratory 2023-03-03 | Creating beautiful things with JavaScript can be easy, if you take if step by step, everything makes sense if you break it into individual parts. Let me show you how to take basic programming principles, functions, arrays and for loops, to create complex animated code bases. Once we fully understand the techniques we will take it to the next level.🎨 Today we will learn how to build a flow field. EXTENDED class with BONUS lessons and more creative coding experiments, full source code from multiple different stages, learn how to create image flow fields and animate smooth color transitions.🎨 Udemy: udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A🎨 Skillshare (free 1 month trial):skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on📚 Part 2: youtu.be/EHwainDAPAw📚 Full playlist: youtube.com/playlist?list=PLYElE_rzEw_uVHNJjZor-b_bJpftEG4tVBeginner friendly warm-up class you can watch before this video: youtu.be/O7cUOPYducc⭐️Tutorial Contents ⭐️00:00 Intro00:38 What is a flow field?02:00 How to set up HTML5 Canvas project02:52 How to draw shapes on canvas06:13 Object oriented programming in JavaScript12:45 Drawing particle systems15:12 Animating particle systems19:02 Drawing lines and trails22:42 Motion patterns with trigonometry23:55 Creating a vector field33:33 How to create a flow field38:42 Flow field experiments42:16 Grid and debug mode50:25 Randomized colors53:13 Responsive design58:33 Experimenting with flow field patternsToday we will:🎨 discover the tools - vanilla JavaScript, HTML5 Canvas🎨 experiment with code🎨 design animations and flow fieldsMore beginner friendly creative coding with vanilla JavaScript & HTML canvas:youtube.com/playlist?list=PLYElE_rzEw_v8TXJ_ITSSBP_ypUKfQ7K-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
What are flow fields #SHORTS Franks laboratory 2023-03-03 | Flow field is a grid of angles. We can also call it a vector field. If we add particle system on top of it and make the particles flow over the grid, their motion is influenced by the field. Vector, the direction and speed of movement will be influenced by the angle value stored in the cell each particle is currently moving over.Full class: youtu.be/MJNy2mdCt20
Learn Creative Coding: Line & Path Effects Franks laboratory 2023-02-17 | Step by step tutorial from drawing a simple shape to a fully animated generative art piece! Do you want to master Front End Web Development this year? Then this tutorial is for you! :) We will go from important fundamentals to digital art, let me show you the real power of vanilla JavaScript in this creative coding crash course for beginners!Today we will build:Procedurally generated lines | Rainbow lightning storm effect | Chaos scribbles effect🎨 EXTENDED class with BONUS lessons and more creative coding experiments, full source code from multiple different stages, learn how to create image flow fields and animate smooth color transitions.🎨 Udemy: udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A🎨 Skillshare (free 1 month trial):skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onProject files:Image for createPattern method: frankslaboratory.co.uk/downloads/110/patternImage.png📚 What to watch next?: youtu.be/MJNy2mdCt20📚 Full playlist: youtube.com/playlist?list=PLYElE_rzEw_uVHNJjZor-b_bJpftEG4tVBeginner friendly warm-up class you can watch before this video: youtu.be/O7cUOPYducc⭐️Tutorial Contents ⭐️00:00 Intro00:34 HTML5 & CSS3 setup01:14 JavaScript setup03:17 How to draw rectangles04:37 How to draw lines07:44 Object oriented programming13:05 Dynamic colors with HSL14:52 Randomised line art18:13 Drawing multi segmented lines21:25 Animating lines25:15 Rainbow Lightning Storm effect31:23 HTML5 Canvas Linear Gradient Tutorial33:43 HTML5 Canvas Radial Gradient Tutorial34:46 Create a pattern with HTML5 Canvas38:52 How to make a shadow in HTML canvas39:59 Using trigonometry to animate HTML5 canvas43:20 Chaos Scribbles effectWe will experiment with our drawings and modify them using🎨 createLinearGradient🎨 createRadialGradient🎨 createPatternAll of that with no frameworks and no libraries using just vanilla JavaScript, HTML5 canvas element and object oriented programming. I will explain every line of code step by step as we build our interactive animated project. Let's make art with code and learn JavaScript and front end web development in the process. More beginner friendly creative coding with vanilla JavaScript & HTML canvas:youtube.com/playlist?list=PLYElE_rzEw_v8TXJ_ITSSBP_ypUKfQ7K-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
JavaScript 2D Game Tutorial (with physics) Franks laboratory 2023-02-03 | What makes a great game? Is it about beautiful, polished visuals or about gameplay that feels good and responsive? Is it about unique ideas, or maybe it's the little details, special secrets and Easter eggs? What are the ingredients in a perfect game development recipe?Let's explore fantasy mushroom forest theme and learn all the techniques you need to make your own 2D games with vanilla JavaScript, HTML5, CSS3 and HTML Canvas. Have fun!🍄 EXTENDED class with BONUS lessons and more free sprite sheets, full source code from 6 different stages as we progress with the project, HQ image source files and more: 🍄 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=on1The pace and techniques in this course are beginner friendly. Existing knowledge of HTML, CSS & JavaScript is needed to follow the course. If you understand JavaScript basics and know what functions, for loops and arrays are, you will be able to get the maximum value out of this class.🎨 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! :DAll project images: frankslaboratory.co.uk/downloads/109/all_project_images.zipBackground: frankslaboratory.co.uk/downloads/109/background.pngOverlay: frankslaboratory.co.uk/downloads/109/overlay.pngPlayer: frankslaboratory.co.uk/downloads/109/bull.pngObstacles: frankslaboratory.co.uk/downloads/109/obstacles.pngEgg: frankslaboratory.co.uk/downloads/109/egg.pngToad single: frankslaboratory.co.uk/downloads/109/toad.pngLarva: frankslaboratory.co.uk/downloads/109/larva.pngToads: frankslaboratory.co.uk/downloads/109/toads.pngBonus images, environmental art, HQ separate pieces in PSD format etc: frankslaboratory.co.uk/downloads/109/bonus_image_source_files.zipToday we will learn:- How to implement a very simple AI to make the creatures feel alive- How to control the FPS of our game and how to measure time to trigger periodic events- How to restart the game by pressing a button- How to apply collision detection, resolve collisions and use that to simulate physics- How to use the built-in drawImage method to draw randomised game environments and animated characters from a sprite sheet- How to capture mouse position and animate an 8 directional sprite sheet based on the relative position between the mouse and the player character- How to use HTML5, CSS3 and plain vanilla JavaScript to build a game from scratch. We will write and understand every line of code, we will not rely on any external frameworks or libraries... and much moreFor more vanilla JavaScript GAME DEVELOPMENT check out this playlist:youtube.com/playlist?list=PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2⭐️Tutorial Contents ⭐️00:00:00 Intro00:00:45 Basic setup00:04:35 Object oriented programming in JavaScript00:08:58 Drawing the player00:16:08 Mouse controls00:22:08 Making the player move00:29:48 Creating obstacles00:36:21 Non-overlapping obstacles00:42:56 Randomised images from a sprite sheet00:48:11 Positioning rules00:54:10 Reusable collision detection method00:58:15 Let's add physics01:06:22 8-directional sprite animation01:10:36 Animation angles01:17:42 Debug mode01:21:15 Player movement boundaries01:24:04 FPS01:33:43 Egg class01:38:36 Periodically adding new eggs01:45:35 Egg physics01:51:10 Draw order01:59:28 Enemy class02:10:47 Larva class02:14:14 Egg hatching02:24:12 Larva sprites and collisions02:28:50 Gaining score points02:31:31 Particle effects02:40:26 Particle motion02:47:30 Randomized enemy skins02:51:53 Win and lose condition03:02:25 Restart gameLet'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
Particle Text with Vanilla JavaScript Franks laboratory 2022-11-22 | From drawing a single letter to multiline animated particle text. In this HTML canvas crash course we will go from basics to advanced in a single video. We will cover everything you need to know about using FONTS and drawing TEXT on HTML canvas. Let's explore what's possible in modern front-end web development and turn text into complex animated particle systems. Have fun! :)This technique will also work with company LOGOS, even if the logo is a combination of text, symbols and images.EXTENDED version available here:- contains a bonus lesson to convert the codebase in particle CONSTELLATIONS effect.- also includes the full source code and many experimental codebases as shown in the intro: udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01Also available on Skillshare: (1 free month using the link below)skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=onToday we will learn how to:🎨 Draw text on canvas using built in fillText and strokeText methods🎨 Wrap multiline text (measureText method)🎨 Apply custom canvas gradients to strokeStyle and fillStyle🎨 Convert any text into an iteractive particle system🎨 Add physics, animated transitions and mouse interactivityAll of that with no frameworks and no libraries using just vanilla JavaScript, HTML5 canvas element and object oriented programming. I will explain every line of code step by step as we build our interactive animated project. Let's make art with code and learn JavaScript and front end web development in the process. ⭐️Tutorial Contents ⭐️00:00:00 Vanilla JavaScript Pixel & Particle effects00:00:41 Project setup00:02:45 CSS3 & JavaScript positioning tricks00:05:09 Drawing, styling and positioning text on HTML canvas00:14:40 Wrapping and centering multiline text on HTML canvas00:26:44 How to center a block of text vertically00:30:27 HTML5 canvas gradients00:33:17 Refactoring into object oriented JavaScript00:45:33 Scanning canvas for pixel data00:57:18 Converting text into particles01:07:57 Interactions and physics01:14:26 Custom fonts01:18:24 Resizing and responsive designMore vanilla JavaScript pixel manipulation tutorials:youtube.com/playlist?list=PLYElE_rzEw_t0--arG7_fu1uqkwOht1JgThe 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
JavaScript 2D Game Tutorial Franks laboratory 2022-10-15 | 4-directional keyboard controlled characters, animated 2D game worlds with randomised environmental elements, controlling FPS and draw order in a 2D game and wrapping all of that in object oriented code structure. In this series we discover mythical creatures of magical forest and I'm giving away a ton of high resolution game art assets, as usual. What do you think about this vector art style?HTML canvas was developed as a replacement of Flash, it's a perfect environment to make games and animation projects. Today we will learn how to use HTML5, CSS3 and plain vanilla JavaScript to make the most of it's powerful capabilities. No frameworks and no libraries as usual. Have fun!🐟Check out my EXTENDED game development class with BONUS lessons and more free sprite sheets: 4 new enemies, sound design, animated shield, animated projectiles and more udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2🎨 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 LIKE on the video if you want more free game art soon! BASIC art asset pack (to follow along with this episode): frankslaboratory.co.uk/downloads/107/owlbear.zipBONUS high resolution exports in PNG format (12MB): frankslaboratory.co.uk/downloads/107/bonus.zipSOURCE files (.ai/.psd format) (21MB): frankslaboratory.co.uk/downloads/107/source.zip.PNG exports are uncompressed, you can use a site like Tiny png to reduce the file size if needed.If anything is missing or you want source files in a different format let me know in the comments. Feel free to modify the shapes, colour shift to get different variations etc. Have fun!Individual base art assets:Background: frankslaboratory.co.uk/downloads/107/background.pngBackground 2: frankslaboratory.co.uk/downloads/107/background2.pngOverlay: frankslaboratory.co.uk/downloads/107/overlay.pngLeaves left: frankslaboratory.co.uk/downloads/107/leaves_left.pngLeaves right: frankslaboratory.co.uk/downloads/107/leaves_right.pngOwlbear sprite sheet: frankslaboratory.co.uk/downloads/107/owlbear.pngBush: frankslaboratory.co.uk/downloads/107/bush.pngGrass: frankslaboratory.co.uk/downloads/107/grass.pngPlant: frankslaboratory.co.uk/downloads/107/plant.png☕ For more vanilla JavaScript GAME DEVELOPMENT check out this playlist:youtube.com/playlist?list=PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2⭐️Tutorial Contents ⭐️00:00 Intro00:43 Lesson 1: Project setup02:19 Lesson 2: Enhancing game worlds with CSS09:17 Lesson 3: JavaScript and HTML canvas setup15:06 Lesson 4: Keyboard controls22:34 Lesson 5: Player character33:55 Lesson 6: Animating 4 directional sprite sheets45:54 Lesson 7: How to control FPS54:56 Lesson 8: Randomly positioned game objects01:03:15 Lesson 9: Layering and draw order in 2D gamesLet'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
Learn HTML Canvas: Pixels & Physics 🎨 Franks laboratory 2022-09-26 | Pixels, particles and physics! Let's dive deep into creative coding with vanilla JavaScript and HTML5 canvas element! Have fun!FULL EXTENDED class available here: udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5ELeave a comment for UDEMY discount code for this course, I can generate some for you (unless the course is currently on offer for minimum price)Today we will learn how to:🎨 Draw rectangles on canvas🎨 Draw images on canvas🎨 Convert rectangles into particles🎨 Convert images into particle systems🎨 Add physics, animated transitions and mouse interactivityAll of that with no frameworks and no libraries using just vanilla JavaScript, HTML5 canvas element and object oriented programming. I will explain every line of code step by step as we build our interactive animated project. Let's make art with code and learn JavaScript and front end web development in the process. Project images: (try the final effect with different images, some look better with colours, sketch versions look great on a black background)Anglerfish frankslaboratory.co.uk/downloads/106/angler.pngAnglerfish 2 frankslaboratory.co.uk/downloads/106/angler2.png4 fish frankslaboratory.co.uk/downloads/106/4fish.pngSteampunk fox frankslaboratory.co.uk/downloads/106/fox.pngSteampunk plant frankslaboratory.co.uk/downloads/106/plant.pngPlant sketch frankslaboratory.co.uk/downloads/106/plant_sketch.pngMecha spider frankslaboratory.co.uk/downloads/106/spider.pngSpider sketch frankslaboratory.co.uk/downloads/106/spider_sketch.pngMecha turtle frankslaboratory.co.uk/downloads/106/turtle.pngTurtle sketch frankslaboratory.co.uk/downloads/106/turtle_sketch.png⭐️Tutorial Contents ⭐️00:00 Vanilla JavaScript Pixel & Particle effects00:46 Project setup03:23 Converting images to code07:48 How to use canvas10:48 JavaScript classes and particle systems14:09 Drawing rectangles15:35 Drawing images19:26 Effect class24:01 Code clean-up29:23 drawImage method30:06 How to center images on canvas32:08 Particle motion37:28 Pixel analysis with getImageData43:39 Extracting coordinates and colors from raw pixel data53:43 Turning images into particle systems58:35 Animated particle transitions01:01:32 Animations on button click01:05:30 Mouse interactions and particle physicsMore vanilla JavaScript pixel manipulation tutorials:youtube.com/playlist?list=PLYElE_rzEw_t0--arG7_fu1uqkwOht1JgThe 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
JavaScript Sprite Animation Franks laboratory 2022-08-12 | Advanced sprite animation tips & tricks explained for beginners. Let's learn and build a project with HTML, CSS & plain vanilla JavaScript. Front end web development can be easy if you understand how things work under the hood. Let's discover the secrets of image animation with HTML5 canvas. Have fun!🐟Check out my EXTENDED game development class with BONUS lessons and more free sprite sheets: 4 new enemies, sound design, animated shield, animated projectiles and more udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2🎨 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! :DMandrake: frankslaboratory.co.uk/downloads/105/mandrake.pngMushroom game background: frankslaboratory.co.uk/downloads/105/105_mushroom_background.png☕ For more vanilla JavaScript GAME DEVELOPMENT check out this playlist:youtube.com/playlist?list=PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2⭐️Tutorial Contents ⭐️00:00 What is a compact sprite sheet01:03 HTML & CSS setup04:27 How to use Google Fonts06:41 How to load images with JavaScript07:57 How to use JavaScript classes12:14 drawImage method explained15:59 How to center and scale images on canvas21:07 How to animate a compact sprite sheet29:56 Separate event for each animation moveLet'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 Music:Harry Potter Theme (XELAZED Trap Edit) [NoCopyright] youtu.be/0H5eBZaxXPYConnect with XELAZED: » Snapchat: miraedon » Facebook: facebook.com/alx.official54 » Twitter: twitter.com/xelazed » SoundCloud: soundcloud.com/xelazed » Instagram: instagram.com/official_xelazedThe 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
Sticky Slime Effects with Vanilla JavaScript Franks laboratory 2022-08-05 | Metaballs are organic looking objects, that are able to meld together and form a single continuous shape when in close proximity. Let me show you some front end web development coding techniques that make creating metaballs easy. All of that with no frameworks and no libraries using just HTML, CSS, plain vanilla JavaScript and HTML5 canvas element. This technique can also be modified and then used for all different kinds of liquid and fire effects.Today we will create:🎨 Bouncing metaballs effect🎨 Smoke monster effect🎨 Dripping lava lamp (sticky slime) effect⭐️Tutorial Contents ⭐️00:00 Intro & Project previews00:22 What are Metaballs00:40 HTML and CSS setup01:43 JavaScript & HTML5 canvas setup04:18 Ball class08:11 Metaballs Effect class11:53 How to animate shapes on canvas14:52 Bouncing balls effect17:39 Liquid effects with SVG filters18:08 How to make canvas animations responsive20:52 Smoke monster effect24:23 Dripping slime effectMore beginner friendly creative coding:youtube.com/playlist?list=PLYElE_rzEw_v8TXJ_ITSSBP_ypUKfQ7K-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
Learn 2D Game Development with JavaScript Franks laboratory 2022-07-15 | Coders! Let's explore an alien planet and learn all the techniques you need to make your own 2D games with vanilla JavaScript, HTML5, CSS3 and HTML Canvas. From sprite animation to parallax backgrounds, today we will build a game completely from scratch, with no frameworks and no libraries, using just HTML, CSS and plain vanilla JavaScript. Have fun!🐟EXTENDED class with BONUS lessons and more free sprite sheets: 4 new enemies, sound design, animated shield, animated projectiles and more udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2🎨 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! :DPlayer: frankslaboratory.co.uk/downloads/103/player.pngProjectile: frankslaboratory.co.uk/downloads/103/projectile.pngParticle gears: frankslaboratory.co.uk/downloads/103/gears.png⚙️ Backgrounds:Layer 1: frankslaboratory.co.uk/downloads/103/layer1.pngLayer 2: frankslaboratory.co.uk/downloads/103/layer2.pngLayer 3: frankslaboratory.co.uk/downloads/103/layer3.pngLayer 4: frankslaboratory.co.uk/downloads/103/layer4.png🐟 Enemies:Angler 1: frankslaboratory.co.uk/downloads/103/angler1.pngAngler 2: frankslaboratory.co.uk/downloads/103/angler2.pngLucky Fish: frankslaboratory.co.uk/downloads/103/lucky.pngHive Whale: frankslaboratory.co.uk/downloads/103/hivewhale.pngDrone: frankslaboratory.co.uk/downloads/103/drone.png☁️ Collision Animations: Smoke: frankslaboratory.co.uk/downloads/103/smokeExplosion.pngFire: frankslaboratory.co.uk/downloads/103/fireExplosion.pngFor more vanilla JavaScript GAME DEVELOPMENT check out this playlist:youtube.com/playlist?list=PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2⭐️Tutorial Contents ⭐️00:00:00 Intro00:00:47 HTML & CSS setup00:02:20 Basic JavaScript setup00:04:39 Object Oriented programming with JavaScript00:07:05 Creating Player and Game objects00:12:58 Animation loop00:16:16 Keyboard inputs00:25:55 Creating projectiles00:33:02 Periodic events00:38:10 Drawing game UI00:41:00 Base enemy class00:48:59 Collision detection between rectangles00:54:16 Drawing game score00:57:29 Win and lose condition00:59:32 Counting game time01:02:47 Animated parallax backgrounds01:13:00 Sprite animation with JavaScript01:16:42 Creating a debug mode01:18:18 Animating enemy sprite sheets01:24:55 Night Angler enemy class01:27:19 Lucky Fish enemy class01:28:42 Collecting power ups01:36:31 Drawing projectiles as images01:37:41 Custom fonts and game text01:40:23 Cleaning up01:42:31 Particle effects and physics01:54:43 Particle rotation01:58:27 Tweaks and fixes02:01:26 Hive Whale enemy class02:04:26 Drone enemy class02:09:10 Dust effect animation02:24:16 Fire effect animation02:25:43 Tuning game difficulty02:29:06 What to do next?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
JavaScript Game Tutorial - Bonus Features Franks laboratory 2022-05-20 | Make your own 2D adventures with HTML, CSS & plain vanilla JavaScript, no frameworks and no libraries! Today we will apply state design pattern, sprite animation, parallax backgrounds and we will learn how to control FPS with timestamps and delta time. Have fun! :)Part 1: youtu.be/c-1dBd1_G8A Animating playerPart 2: youtu.be/ug-gdfGb7I8 State management and parallax backgroundsPart 3: youtu.be/lqNztI7BMf8 Enemy typesPart 4 : youtu.be/6ppfyWdoH3c Collisions & ParticlesPart 5 : youtu.be/KICADKr_zeM Win & Lose Conditions, Timer, Clean upPart 6: youtu.be/tWS_eURr2_w Bonus features (this video)🎮 FULL SERIES:🎮 youtube.com/playlist?list=PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2❤ Related Links ❤Art by bevouliin.com check out their website for more game art assets!Download project sprite sheets: 🐕 Player: http://frankslaboratory.co.uk/downloads/97/player.pngBackgrounds:City:Layer 1: frankslaboratory.co.uk/downloads/97/layer-1.pngLayer 2: frankslaboratory.co.uk/downloads/97/layer-2.pngLayer 3: frankslaboratory.co.uk/downloads/97/layer-3.pngLayer 4: frankslaboratory.co.uk/downloads/97/layer-4.pngLayer 5: frankslaboratory.co.uk/downloads/97/layer-5.pngForest:Layer 1: frankslaboratory.co.uk/downloads/97/forest/layer-1.pngLayer 2: frankslaboratory.co.uk/downloads/97/forest/layer-2.pngLayer 3: frankslaboratory.co.uk/downloads/97/forest/layer-3.pngLayer 4: frankslaboratory.co.uk/downloads/97/forest/layer-4.pngLayer 5: frankslaboratory.co.uk/downloads/97/forest/layer-5.pngLives:frankslaboratory.co.uk/downloads/97/lives.pngfrankslaboratory.co.uk/downloads/97/heart.pngFire texture:🔥 frankslaboratory.co.uk/downloads/97/fire.pngCollision animation:☁️ frankslaboratory.co.uk/downloads/97/boom.png18 Enemies:Big spider: frankslaboratory.co.uk/downloads/97/enemy_spider_big.pngBat 1: frankslaboratory.co.uk/downloads/97/enemy_bat_1.pngSpinner: frankslaboratory.co.uk/downloads/97/enemy_spinner.pngSmall spider: frankslaboratory.co.uk/downloads/97/enemy_spider.pngGhost 1: frankslaboratory.co.uk/downloads/97/enemy_ghost_1.pngBat 2: frankslaboratory.co.uk/downloads/97/enemy_bat_2.pngRaven: frankslaboratory.co.uk/downloads/97/enemy_raven.pngBat 3: frankslaboratory.co.uk/downloads/97/enemy_bat_3.pngGhost 2: frankslaboratory.co.uk/downloads/97/enemy_ghost_2.pngFly: frankslaboratory.co.uk/downloads/97/enemy_fly.pngGhost 3: frankslaboratory.co.uk/downloads/97/enemy_ghost_3.pngGhost 4: frankslaboratory.co.uk/downloads/97/enemy_ghost_4.pngHand: frankslaboratory.co.uk/downloads/97/enemy_hand.pngPlant: frankslaboratory.co.uk/downloads/97/enemy_plant.pngWorm: frankslaboratory.co.uk/downloads/97/enemy_worm.pngWalking zombie: frankslaboratory.co.uk/downloads/97/enemy_zombie.pngGround zombie: frankslaboratory.co.uk/downloads/97/enemy_ground_zombie.pngDigger: frankslaboratory.co.uk/downloads/97/enemy_digger.png⭐️Tutorial Contents ⭐️00:00 Changing game world images00:41 Different game fonts01:53 Player lives03:59 Floating text08:20 Code optimizations10:58 Tuning game difficultyLet'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
JavaScript Game Tutorial - Final Polish Franks laboratory 2022-05-13 | Make your own 2D adventures with HTML, CSS & plain vanilla JavaScript, no frameworks and no libraries! Today we will apply state design pattern, sprite animation, parallax backgrounds and we will learn how to control FPS with timestamps and delta time. Have fun! :)Part 1: youtu.be/c-1dBd1_G8A Animating playerPart 2: youtu.be/ug-gdfGb7I8 State management and parallax backgroundsPart 3: youtu.be/lqNztI7BMf8 Enemy typesPart 4 : youtu.be/6ppfyWdoH3c Collisions & ParticlesPart 5 : youtu.be/KICADKr_zeM Win & Lose Conditions, Timer, Clean up (this video)Part 6: youtu.be/tWS_eURr2_w Bonus features🎮 FULL SERIES:🎮 youtube.com/playlist?list=PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2❤ Related Links ❤Art by bevouliin.com check out their website for more game art assets!Download project sprite sheets: 🐝 frankslaboratory.co.uk/downloads/97/enemy_fly.png🌱 frankslaboratory.co.uk/downloads/97/enemy_plant.png🕷️ frankslaboratory.co.uk/downloads/97/enemy_spider_big.png🐕 Player: http://frankslaboratory.co.uk/downloads/97/player.pngBackgrounds:Layer 1: frankslaboratory.co.uk/downloads/97/layer-1.pngLayer 2: frankslaboratory.co.uk/downloads/97/layer-2.pngLayer 3: frankslaboratory.co.uk/downloads/97/layer-3.pngLayer 4: frankslaboratory.co.uk/downloads/97/layer-4.pngLayer 5: frankslaboratory.co.uk/downloads/97/layer-5.pngFire texture:🔥 frankslaboratory.co.uk/downloads/97/fire.pngCollision animation:☁️ frankslaboratory.co.uk/downloads/97/boom.png⭐️Tutorial Contents ⭐️00:00 Course overview & final project previews00:19 Dive attack03:24 Splash particle effects06:55 Player gets hit09:51 Collision animations15:58 Game timer17:39 Winning and losing the game20:51 Code clean upLet'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
JavaScript Game Tutorial - Particles & Interactions Franks laboratory 2022-05-06 | Make your own 2D adventures with HTML, CSS & plain vanilla JavaScript, no frameworks and no libraries! Today we will apply state design pattern, sprite animation, parallax backgrounds and we will learn how to control FPS with timestamps and delta time. Have fun! :)Part 1: youtu.be/c-1dBd1_G8A Animating playerPart 2: youtu.be/ug-gdfGb7I8 State management and parallax backgroundsPart 3: youtu.be/lqNztI7BMf8 Enemy typesPart 4 : youtu.be/6ppfyWdoH3c Collisions & Particles (this video)Part 5 : youtu.be/KICADKr_zeM Win & Lose Conditions, Timer, Clean upPart 6: youtu.be/tWS_eURr2_w Bonus features🎮 FULL SERIES:🎮 youtube.com/playlist?list=PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2❤ Related Links ❤Art by bevouliin.com check out their website for more game art assets!Download project sprite sheets: 🐝 frankslaboratory.co.uk/downloads/97/enemy_fly.png🌱 frankslaboratory.co.uk/downloads/97/enemy_plant.png🕷️ frankslaboratory.co.uk/downloads/97/enemy_spider_big.png🐕 Player: http://frankslaboratory.co.uk/downloads/97/player.pngBackgrounds:Layer 1: frankslaboratory.co.uk/downloads/97/layer-1.pngLayer 2: frankslaboratory.co.uk/downloads/97/layer-2.pngLayer 3: frankslaboratory.co.uk/downloads/97/layer-3.pngLayer 4: frankslaboratory.co.uk/downloads/97/layer-4.pngLayer 5: frankslaboratory.co.uk/downloads/97/layer-5.pngFire texture:🔥 frankslaboratory.co.uk/downloads/97/fire.pngCollision animation:☁️ frankslaboratory.co.uk/downloads/97/boom.png⭐️Tutorial Contents ⭐️00:00 Course overview & final project previews00:40 Add custom debug mode02:57 Collision detection explained06:11 Drawing score08:42 Rolling state12:26 Particle class13:42 Dust particles22:59 Fire particlesLet'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
JavaScript Game Tutorial - Many Different Enemies Franks laboratory 2022-04-23 | Make your own 2D adventures with HTML, CSS & plain vanilla JavaScript, no frameworks and no libraries! Today we will apply state design pattern, sprite animation, parallax backgrounds and we will learn how to control FPS with timestamps and delta time. Have fun! :)Part 1: youtu.be/c-1dBd1_G8A Animating playerPart 2: youtu.be/ug-gdfGb7I8 State management and parallax backgroundsPart 3: youtu.be/lqNztI7BMf8 Enemy types (this video)Part 4 : youtu.be/6ppfyWdoH3c Collisions & ParticlesPart 5 : youtu.be/KICADKr_zeM Win & Lose Conditions, Timer, Clean upPart 6: youtu.be/tWS_eURr2_w Bonus features🎮 FULL SERIES:🎮 youtube.com/playlist?list=PLYElE_rzEw_uryBrrzu2E626MY4zoXvx2❤ Related Links ❤Art by bevouliin.com check out their website for more game art assets!Download project sprite sheets: 🐝 frankslaboratory.co.uk/downloads/97/enemy_fly.png🌱 frankslaboratory.co.uk/downloads/97/enemy_plant.png🕷️ frankslaboratory.co.uk/downloads/97/enemy_spider_big.png🐕 Player: http://frankslaboratory.co.uk/downloads/97/player.pngBackgrounds:Layer 1: frankslaboratory.co.uk/downloads/97/layer-1.pngLayer 2: frankslaboratory.co.uk/downloads/97/layer-2.pngLayer 3: frankslaboratory.co.uk/downloads/97/layer-3.pngLayer 4: frankslaboratory.co.uk/downloads/97/layer-4.pngLayer 5: frankslaboratory.co.uk/downloads/97/layer-5.png⭐️Tutorial Contents ⭐️00:00 Course overview & final project previews00:26 Enemy class01:08 Subclassing in JavaScript03:13 How to use super keyword04:16 Flying enemy class16:51 Ground enemy class19:23 Climbing enemy classLet'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
