Channel Title: Franks laboratory Channel Description: Creative coding experiments, generative art & game development with vanilla JavaScript & HTML canvas. No frameworks and no libraries. Every project is explained line by line as I write the code using just plain vanilla JavaScript & HTML5 canvas element. If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :) https://www.udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB https://www.udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2 https://www.udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E https://www.udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7 Get Skillshare FREE for 1 month: https://www.skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on <video> Make Your First Game in Unity (2024) Description: 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. Full class: https://youtu.be/l0UR8EHk_ls 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: https://szadiart.itch.io/rpg-worlds-ca Player: https://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: https://www.frankslaboratory.co.uk/downloads/143/shadow.png Check out these awesome games made with Unity: Streets of Rogue 2 https://www.youtube.com/watch?v=6f43pVHhGR0 Death Must Die https://www.youtube.com/watch?v=MhjXHpU2JJU Eldest Souls https://www.youtube.com/watch?v=gLsnUeKCwCg Bloomtown: A Different Story https://www.youtube.com/watch?v=oEHyqAWcT-w Dwerve https://www.youtube.com/watch?v=Sb_u_fUKkXk Cuphead https://www.youtube.com/watch?v=NN-9SQXoi50 Hollow Knight: Silksong https://www.youtube.com/watch?v=JSfuFlhsxZY 🎨 Toolkit 🎨 - Unity - Visual Studio Code or any other code editor you prefer If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :) https://www.udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650B https://www.udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2 https://www.udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7 https://www.udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB https://www.udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A https://www.udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E https://www.udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01 Get Skillshare FREE for 1 month: https://www.skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on 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 </video> <video> Make Pixel Art Games: Tilemaps Description: 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: https://www.frankslaboratory.co.uk/downloads/140/tilemap1simple.png Watch next: 2D multi-layer tilemap design + dynamic auto tiling based on camera position https://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 value Alternative tile map sources (do you know any other, let me know) https://opengameart.org/content/ground-tilemap https://cypor.itch.io/12x12-rpg-tileset https://seliel-the-shaper.itch.io/winter-forest https://opengameart.org/content/slates-32x32px-orthogonal-tileset-by-ivan-voirol https://opengameart.org/content/whispers-of-avalon-grassland-tileset Do you know any other talented Pixel art creators? Leave a comment. https://probertson.tumblr.com/ https://www.artstation.com/dragumagu https://twitter.com/dragumagu If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :) https://www.udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650B https://www.udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2 https://www.udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7 https://www.udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB https://www.udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A https://www.udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E https://www.udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01 Get Skillshare FREE for 1 month: https://www.skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on 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 </video> <video> Pixel Art RPG Maker with JavaScript Description: 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: https://youtu.be/1_dizP57I6s 2D Camera in Pixel art games: https://youtu.be/5PkdYFbS4K4 Recommended video (advanced code): Build a Game with JavaScript and HTML Canvas [RPG Kit series] https://youtu.be/HmxNrlPx8iY?si=zf7zuQn03WKBE1J2 🍄 Download Project Art assets 🍄 Background layer: https://www.frankslaboratory.co.uk/downloads/142/backgroundLevel1.png Foreground layer: https://www.frankslaboratory.co.uk/downloads/142/foregroundLevel1.png Hero: https://www.frankslaboratory.co.uk/downloads/142/hero1.png Today 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 character Sprite sheet maker, create 100s of UNIQUE HERO sprite sheets, for example: Wood collector: https://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_blue Waraxe Frankenstein: https://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_brown Battle Princess https://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: https://youtu.be/TNrj1k9CAdY?si=VcvmfynHw-uMkMF8 20 Minutes Till Dawn: https://youtu.be/d_tTjnIpL5c?si=LUN7vwjPkypxn1CD Graveyard Keeper: https://youtu.be/YH8bmTKIkag?si=Slc0CkWm1lK-gh1V Unsighted : https://youtu.be/_AXhK7Bxd40?si=nwF2v1hGy-QNXYXt Travellers Rest: https://youtu.be/JDk0H02wYXs?si=vLFpooQ_5Rb3yuUy Chained Echoes: https://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 characters 10:23 How to set up a local live server in Visual Studio Code 13:40 How to actually structure your game objects 23:12 A simple movement system for 2D Games 36:40 Data structures for a 2D multi-layered game world 40:19 Smooth grid based movement similar to Pokemon 54:22 Generating sprite sheet animations 59:48 Share your unique character with others 01:00:32 Introduction to sprite animations 01:13:54 Mastering delta time to ensure consistent frame rates 01:24:03 Collision detection with tiled maps If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :) https://www.udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650B https://www.udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2 https://www.udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7 https://www.udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB https://www.udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A https://www.udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E https://www.udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01 Get Skillshare FREE for 1 month: https://www.skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on 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 </video> <video> Pixel Art Game Development: 2D Camera Description: 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 https://youtu.be/ObWVB7Ooyto?si=D-yrS-Ju1ZkxdWtZ Bloomtown: A Different Story https://youtu.be/oEHyqAWcT-w?si=F_kwMNrW-otbSMCy World of Anterra https://youtu.be/tqO6j0gQOcA?si=Emkygy9qLnRwZvnT Drakantos https://youtu.be/CCXVQxJkBtQ?si=GSmCfAb7mkeidGzH Emberbane https://youtu.be/bZncaFTVaX4?si=KUPJJTRHSINY2S-M Tilemaps for beginners: https://youtu.be/1_dizP57I6s 🍄 Download Project Art assets 🍄 Full map: https://www.frankslaboratory.co.uk/downloads/141/full_map.png Tile map: https://www.frankslaboratory.co.uk/downloads/141/tilemap1.png If you fully understand this technique, try to take it to the next level using these EPIC free art assets: https://free-game-assets.itch.io/free-cursed-land-top-down-pixel-art-tileset https://free-game-assets.itch.io/free-undead-tileset-top-down-pixel-art Today 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 worlds 00:40 How to implement 2D camera 26:20 2D Multi-Layer tilemap design 40:38 Dynamic auto tiling If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :) https://www.udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650B https://www.udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2 https://www.udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7 https://www.udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB https://www.udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A https://www.udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E https://www.udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01 Get Skillshare FREE for 1 month: https://www.skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on 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 </video> <video> Point & Shoot Games (JavaScript tutorial) Description: 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: https://www.frankslaboratory.co.uk/downloads/136/background1920x1080.png Background vertical: https://www.frankslaboratory.co.uk/downloads/136/background1080x1920.png Simple crew member: https://www.frankslaboratory.co.uk/downloads/136/crew.png Beetlemorph 100x100px frames: https://www.frankslaboratory.co.uk/downloads/136/beetlemorph100x100.png Lobstermorph 100x100px frames: https://www.frankslaboratory.co.uk/downloads/136/lobstermorph100x100.png Crew members sprite sheet: https://www.frankslaboratory.co.uk/downloads/136/crewSprite.png Phantommorph 100x100px frames: https://www.frankslaboratory.co.uk/downloads/136/phantommorph100x100.png Sounds (right click and 'Save link as'): New game: https://www.frankslaboratory.co.uk/downloads/136/newgame.mp3 Boom 1: https://www.frankslaboratory.co.uk/downloads/136/boom1.mp3 Slide: https://www.frankslaboratory.co.uk/downloads/136/slide.mp3 Boom 2: https://www.frankslaboratory.co.uk/downloads/136/boom2.mp3 Boom 3: https://www.frankslaboratory.co.uk/downloads/136/boom3.mp3 Boom 4: https://www.frankslaboratory.co.uk/downloads/136/boom4.mp3 Win: https://www.frankslaboratory.co.uk/downloads/136/win.mp3 Lose: https://www.frankslaboratory.co.uk/downloads/136/lose.mp3 Scream: https://www.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: https://www.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 setup 00:03:05 Make everything responsive 00:09:20 Enemy class 00:17:19 Object pool design pattern 00:20:55 Periodic triggers 00:27:45 Mouse controls 00:29:15 Collision detection 00:37:05 Touch events 00:38:43 Game text 00:45:46 Start & restart 00:49:21 Fullscreen games Advanced project: 00:53:29 Simple crew members 00:54:59 Simple enemy type 00:59:23 Sprite animation 01:03:44 Animation timing 01:07:52 Debug mode 01:10:01 Enemy variety 01:14:31 Randomized space crew 01:18:18 State management in games 01:22:46 State design pattern 01:38:10 Sounds and final details Source code: Checkpoint 1 (00:16:21): https://www.frankslaboratory.co.uk/downloads/136/source_code_1.zip Checkpoint 2 (00:52:46): https://www.frankslaboratory.co.uk/downloads/136/source_code_2.zip If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :) https://www.udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB https://www.udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2 https://www.udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A https://www.udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650B https://www.udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E https://www.udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7 https://www.udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01 Get Skillshare FREE for 1 month: https://www.skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on 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 </video> <video> The Ultimate 2D Game Development Deep Dive 2025 Description: Become a Unity developer in 2025 and learn everything you need to build epic 2D games from start to finish! In this comprehensive tutorial, we will go step-by-step through the process of creating a fully functional 2D game in Unity, covering all the essential concepts, tools, and techniques you need to know. Whether you're a complete beginner or looking to sharpen your skills, this video is designed to help you build your first game from the ground up! 00:03:05 Modular game worlds with tilemaps 00:18:32 Creating pixel art sprites from scratch 00:22:09 How exactly do spritesheets work 00:33:00 Write simple C# scripts 00:45:56 Implement 2D follow camera 00:48:58 Define 4 directional animations with blend trees 01:01:53 Set level boundaries 01:05:55 Create a simple flying enemy 01:10:44 Implement 2D sprite sorting 01:13:12 Control game objects using components 01:24:29 Animate enemy sprite sheets 01:30:50 Define collider interactions 01:35:25 Create animated effects with sprites 01:46:19 Make infinite enemy spawner 01:50:39 Set up another enemy 01:56:07 Create even more enemy types 02:01:47 Enemy wave system 02:13:58 Dynamic spawn areas 02:24:08 Big bad boss *** What else to learn? Learn To Create A Vampire Survivors Style Game in Unity & C# https://bit.ly/4gh4oFK Unity 2D Game - Kawaii Survivor - The Coolest Roguelike Ever https://bit.ly/41YBbvd Playable DEMO: https://play.unity.com/en/games/02ffc327-abd7-494c-8c65-02b1a016e46d/pixel-survivors Today we will learn how design and animate characters, create engaging gameplay mechanics, implement collision detection, and build interactive environments—all while working in Unity's powerful 2D game engine. We’ll also cover important topics like scripting in C#, creating smooth animations, managing game assets, and optimizing your game for the best performance. By the end of this tutorial, you’ll have a complete 2D game ready to play and the skills to continue building and expanding your own projects. Join us in 2025 and take your first step toward becoming a skilled Unity developer! Project resources: Environment tilemap: https://opengameart.org/content/lpc-terrain-repack Player sprite sheet generator: https://sanderfrenken.github.io/Universal-LPC-Spritesheet-Character-Generator/#?body=Body_color_light&head=Human_male_light&bandana=none&vest=Vest_navy&clothes=Longsleeve_white&legs=Pants_teal&shoes=Shoes_red&backpack_straps=Straps_blue&backpack=Square_pack_blue&sex=male&shadow=Shadow_shadow&hair=Halfmessy_dark_brown&headcover=Thick_Headband_red My player: https://www.frankslaboratory.co.uk/downloads/144/player.png Enemy 1: https://www.spriters-resource.com/custom_edited/pokemoncustoms/ https://www.spriters-resource.com/submitter/JoshR691 https://www.spriters-resource.com/custom_edited/pokemoncustoms/sheet/45561/ Edited file: https://www.frankslaboratory.co.uk/downloads/144/monster1.png Shadow: https://www.frankslaboratory.co.uk/downloads/144/shadow.png Pixel art effects: https://nyknck.itch.io/fx062 Enemy 2: https://www.spriters-resource.com/custom_edited/pokemongeneration1customs/sheet/19605/ Edited file: https://www.frankslaboratory.co.uk/downloads/144/monster2.png Enemy 3: https://www.spriters-resource.com/custom_edited/pokemongeneration1customs/sheet/58792/ Edited file: https://www.frankslaboratory.co.uk/downloads/144/monster3.png Boss: https://www.spriters-resource.com/custom_edited/pokemoncustoms/sheet/29809/ Edited file: https://www.frankslaboratory.co.uk/downloads/144/boss1.png 🔔 Don't forget to like, comment, and subscribe for more tutorials on game development, Unity tips, and more! 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 </video> <video> State Management in 2D GAMES Description: 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: https://www.frankslaboratory.co.uk/downloads/133/locustmorph_large.png Background (optional): https://www.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: https://www.youtube.com/playlist?list=PLYElE_rzEw_tw6scwjv96oEABmnMSQoQW 🌌 Tutorial Contents 🌌 00:00 Why we need state management 02:11 Project setup 06:21 Keyboard controls with JavaScript Sets 08:14 How to implement State design pattern 14:11 Switching states on keypress 16:12 Animation loop 21:54 Switching states on automated condition 24:14 Making each state unique 26:31 State dependent status text 32:43 State dependent animations If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪 https://www.udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB https://www.udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2 https://www.udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A https://www.udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650B https://www.udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E https://www.udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7 https://www.udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01 Get Skillshare FREE for 1 month: ‍🎓 https://www.skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on 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 </video> <video> Create Game Worlds With Tilemaps Description: 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 </video> <video> Build 8 Creative Coding Projects (vanilla JavaScript) Description: 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 effect Build the famous effect that connects floating particles with lines using dynamic opacity. No frameworks and no libraries. 🎨 Project 2: 00:57:16 Sunrays effect Apply specific styles to every nth particle. For example connect the mouse to every 10th particle with a line. 🎨 Project 3: 01:03:59 Particle bubbles Turn 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 particles Particles 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 Effects Experiments with interactive liquid and sticky effects, so called 'meta-balls'. 🎨 Project 6: 01:32:27 Bouncing particles Make 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 characters Endlessly 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 liquid Create 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): https://www.frankslaboratory.co.uk/downloads/117/particle_systems_source_code.zip https://codepen.io/franksLaboratory/pen/BaqVmMB Experimental bubbles (project 3): experiment 1: https://codepen.io/franksLaboratory/pen/MWzyYOG experiment 2: https://codepen.io/franksLaboratory/pen/PoxNwEG experiment 3: https://codepen.io/franksLaboratory/pen/oNQxgdv Stars sprite sheet (project 4): https://www.frankslaboratory.co.uk/downloads/129/stars_sprite.png Scrolling stars and space whales (project 7): ⭐️ STAR: https://www.frankslaboratory.co.uk/downloads/119/star.png 🐋 WHALE 1: https://www.frankslaboratory.co.uk/downloads/119/whale1.png 🐋 WHALE 2: https://www.frankslaboratory.co.uk/downloads/119/whale2.png 🐋 WHALE 3: https://www.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: https://youtube.com/playlist?list=PLYElE_rzEw_uVHNJjZor-b_bJpftEG4tV&si=XZl7A_ccZtkwtWR1 or FRACTALS https://youtu.be/dQKYao-daYw or how about SIMPLE TEXT EFFECTS https://youtu.be/f5ZswIE_SgY or more ADVANCED TEXT EFFECTS https://youtu.be/2F2t1RJoGt8 If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪 https://www.udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB https://www.udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2 https://www.udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A https://www.udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650B https://www.udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E https://www.udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7 https://www.udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01 Get Skillshare FREE for 1 month: ‍🎓 https://www.skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on 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 </video> <video> Grid-based Games (JavaScript tutorial) Description: 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: https://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): https://www.frankslaboratory.co.uk/downloads/139/grass_day.png Grass tile (night): https://www.frankslaboratory.co.uk/downloads/138/grass_night.png Magic berry: https://www.frankslaboratory.co.uk/downloads/139/magic_berry.png Snake: https://www.frankslaboratory.co.uk/downloads/139/snake_zilla.png IT 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! :) https://www.udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650B https://www.udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2 https://www.udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7 https://www.udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB https://www.udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A https://www.udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E https://www.udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01 Get Skillshare FREE for 1 month: https://www.skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on 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 </video> <video> Sprite Sorting in Unity in 3 Steps Description: Become a 2D game developer in 2025! Today's lesson: how to sort sprites by Y axis in Unity 2D. #frankslaboratory </video> <video> Learn Creative Coding: Image Effects Description: 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 setup 02:08 How to organise anything into a grid 08:33 How to draw, crop and slice images with JavaScript 12:38 How to animate images with JavaScript 🎨 "SLICE & DICE" EFFECTS on images 🎨 14:25 Mouse interactivity 16:15 How to find the distance between two points 19:17 Getting direction from point A to point B 24:08 Motion physics formula (friction, easing) 🖼️ "ASSEMBLE" EFFECTS on images 🖼️ 30:14 Moving the cells around 33: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 https://youtu.be/vAJEHf92tV0 Particle Text https://youtu.be/2F2t1RJoGt8 If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :) https://www.udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB https://www.udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2 https://www.udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A https://www.udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650B https://www.udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E https://www.udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7 https://www.udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01 Get Skillshare FREE for 1 month: https://www.skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on 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 </video> <video> Side-Scrolling Games (JavaScript tutorial) Description: 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): https://www.frankslaboratory.co.uk/downloads/137/background_single.png Background (black & white): https://www.frankslaboratory.co.uk/downloads/137/background_single2.png Player fish: https://www.frankslaboratory.co.uk/downloads/137/player_fish.png Obstacles : https://www.frankslaboratory.co.uk/downloads/137/smallGears.png Sounds (right click and 'Save link as'): Charge: https://www.frankslaboratory.co.uk/downloads/137/charge.mp3 Flap 1: https://www.frankslaboratory.co.uk/downloads/137/flap1.mp3 Flap 2: https://www.frankslaboratory.co.uk/downloads/137/flap2.mp3 Flap 3: https://www.frankslaboratory.co.uk/downloads/137/flap3.mp3 Flap 4: https://www.frankslaboratory.co.uk/downloads/137/flap4.mp3 Flap 5: https://www.frankslaboratory.co.uk/downloads/137/flap5.mp3 Win: https://www.frankslaboratory.co.uk/downloads/137/win.mp3 Lose: https://www.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: https://www.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 canvas 00:09:29 Resizing HTML5 canvas 00:15:55 Dynamic scaling 00:20:39 How to code gravity 00:26:38 Player controls 00:28:50 Keyboard controls 00:30:49 Scrolling backgrounds 00:35:59 Endless repeating backgrounds 00:40:43 Create obstacles 00:45:45 Position and move obstacles 00:51:20 Count score 00:55:38 Measure time 00:59:40 Handle game over 01:01:14 Handle collisions 01:05:08 Detect collisions 01:07:47 Win or lose 01:09:35 Recharge energy 01:11:07 Special abilities 01:17:45 Time events with precision 01:22:37 Detect swipes 01:25:32 Finishing touches Steampunk flappy bird game: 01:28:01 Animate your creatures 01:31:00 Make it more steampunk 01:33:21 Animate player actions 01:37:27 Clean-up 01:39:35 How to handle sounds 01:42:38 Manage player resources 01:44:28 Play randomized sounds 01:48:17 Polish every detail 01:50:19 Dynamic font size 01:54:22 What's next? Source code: Checkpoint 1 (00:26:38): https://www.frankslaboratory.co.uk/downloads/137/source_code_1.zip If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :) https://www.udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650B https://www.udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2 https://www.udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7 https://www.udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB https://www.udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A https://www.udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E https://www.udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01 Get Skillshare FREE for 1 month: https://www.skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on 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 </video> <video> Player-vs-AI Games (JavaScript tutorial) Description: 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: https://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: https://www.frankslaboratory.co.uk/downloads/138/grass_night.png Background top tile: https://www.frankslaboratory.co.uk/downloads/138/forest_margin_repeat.png Game over screen: https://www.frankslaboratory.co.uk/downloads/138/gameOver_forest.png Background top tile larger: https://www.frankslaboratory.co.uk/downloads/138/forest_margin_repeat_1600x600.png Magic berry: https://www.frankslaboratory.co.uk/downloads/138/magic_berry1.png Snake corgi: https://www.frankslaboratory.co.uk/downloads/138/snake_corgi.png Magic mushroom: https://www.frankslaboratory.co.uk/downloads/138/mushroom_sprite.png Animated foods sprite sheet: https://www.frankslaboratory.co.uk/downloads/138/food.png Void wolf: https://www.frankslaboratory.co.uk/downloads/138/void_wolf.png Sticky saberhound: https://www.frankslaboratory.co.uk/downloads/138/sticky_saberhound.png Spectral schnoodle: https://www.frankslaboratory.co.uk/downloads/138/spectral_schnoodle.png Bite 1: https://www.frankslaboratory.co.uk/downloads/138/bite1.mp3 Bite 2: https://www.frankslaboratory.co.uk/downloads/138/bite2.mp3 Bite 3: https://www.frankslaboratory.co.uk/downloads/138/bite3.mp3 Bite 4: https://www.frankslaboratory.co.uk/downloads/138/bite4.mp3 Bite 5: https://www.frankslaboratory.co.uk/downloads/138/bite5.mp3 Bad food: https://www.frankslaboratory.co.uk/downloads/138/bad_food.mp3 Button: https://www.frankslaboratory.co.uk/downloads/138/button.mp3 Start: https://www.frankslaboratory.co.uk/downloads/138/start.mp3 Restart: https://www.frankslaboratory.co.uk/downloads/138/restart.mp3 Win: https://www.frankslaboratory.co.uk/downloads/138/win.mp3 All resources zip: https://www.frankslaboratory.co.uk/downloads/138/all_resources.zip 🍄 Tutorial Contents 🍄 00:00:00 Battle snakes in vanilla JavaScript 00:00:27 Project setup 00:04:26 Fully responsive canvas 00:12:01 Drawing animated shapes 00:16:26 Playable characters 00:20:30 Game grid 00:24:04 Fully responsive grid 00:28:00 Animation timing 00:36:04 Player 1: Keyboard arrows 00:46:19 Player 2: Keyboard WSAD 00:49:33 Player 3: Computer AI 00:58:03 Food 01:04:19 Drawing text on canvas 01:06:57 Multi segmented bodies 01:10:30 Movement rules 01:13:11 Game UI: buttons 01:15:00 Game UI: score board 01:20:48 Game UI: player options 01:24:55 Tileable backgrounds 01:31:02 Playable area 01:32:57 Start and restart screens 01:40:40 Tweaks and fixes 01:44:13 Connecting the menus 01:52:00 Fullscreen mode 01:54:12 Debug mode 01:56:48 Images and debug shapes 02:00:28 Character sprite sheets 02:26:21 Animated food 02:31:28 Food seeking AI 02:34:39 Win and lose messages 02:39:28 Mouth animations 02:43:38 Non edible food 02:47:41 Game UI: creature choice 02:54:56 Easy and difficult AI 03:05:07 Game timers 03:07:40 Performance friendly particles 03:27:30 Sound design Source code Checkpoint 1 (00:28:00) download zip: https://www.frankslaboratory.co.uk/downloads/138/source_code_1.zip Checkpoint 2: (00:58:03) download zip https://www.frankslaboratory.co.uk/downloads/138/source_code_2.zip If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :) https://www.udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650B https://www.udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2 https://www.udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7 https://www.udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB https://www.udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A https://www.udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E https://www.udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01 Get Skillshare FREE for 1 month: https://www.skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on 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 </video> <video> Pixel Art Game Worlds and 2D Camera Description: 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 </video>

Contacts and Links

Description

Creative coding experiments, generative art & game development with vanilla JavaScript & HTML canvas.

No frameworks and no libraries. Every project is explained line by line as I write the code using just plain vanilla JavaScript & HTML5 canvas element.

If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :)
https://www.udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB
https://www.udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2
https://www.udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E
https://www.udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7

Get Skillshare FREE for 1 month:
https://www.skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on

Videos from channel