Pixel Art RPG Maker with JavaScript

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:    • Make Pixel Art Games: Tilemaps  
2D Camera in Pixel art games:    • Pixel Art Game Development: 2D Camera  

Recommended video (advanced code):
Build a Game with JavaScript and HTML Canvas [RPG Kit series]    • Build a Game with JavaScript and HTML...  

🍄 Download Project Art assets 🍄
Background layer: https://www.frankslaboratory.co.uk/do...
Foreground layer: https://www.frankslaboratory.co.uk/do...
Hero: https://www.frankslaboratory.co.uk/do...

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/Unive...
Waraxe Frankenstein: https://sanderfrenken.github.io/Unive...
Battle Princess https://sanderfrenken.github.io/Unive...
... 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:    • Roots of Pacha - Release Date Trailer  
20 Minutes Till Dawn:    • 20 Minutes Till Dawn - Official Launc...  
Graveyard Keeper:    • Graveyard Keeper Launch Trailer  
Unsighted :    • Unsighted - Launch Trailer | PS4  
Travellers Rest:    • Travellers Rest Trailer 2023  
Chained Echoes:    • Chained Echoes - Trailer 2022  

🎨 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-an...
https://www.udemy.com/course/learn-ga...
https://www.udemy.com/course/remake-r...

https://www.udemy.com/course/learn-cr...
https://www.udemy.com/course/creative...
https://www.udemy.com/course/learn-ht...
https://www.udemy.com/course/learn-ht...

Get Skillshare FREE for 1 month:
https://www.skillshare.com/en/r/profi...

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