Character Motion & Animation in 2D Games

Опубликовано: 19 Декабрь 2024
на канале: Franks laboratory

8,888

384

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: https://www.udemy.com/course/build-an...
🌟 Skillshare (free 1 month trial that includes all my extended classes including this one):
https://www.skillshare.com/en/r/profi...

🎨 Download Project Art assets 🎨
Background: https://www.frankslaboratory.co.uk/do...
Body: https://www.frankslaboratory.co.uk/do...
Eye 1: https://www.frankslaboratory.co.uk/do...
Eye 2: https://www.frankslaboratory.co.uk/do...
Reflection: https://www.frankslaboratory.co.uk/do...
Body sprite sheet: https://www.frankslaboratory.co.uk/do...
Detector light: https://www.frankslaboratory.co.uk/do...
All (zip): https://www.frankslaboratory.co.uk/do...
Larger background image: https://www.frankslaboratory.co.uk/do...
Concept art (wallpapers, robot designs): https://www.frankslaboratory.co.uk/do...

Today 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 Intro
01:22 Project setup
02:41 Robot class
05:00 Drawing eyes on HTML canvas
06:00 Capturing mouse coordinates
07:45 Animating on HTML canvas
08:43 Calculating angle between 2 objects
18:01 Drawing images on HTML canvas
23:15 Sprite animation with JavaScript
27:39 Repeating motion patterns
34:17 Improving eye movement
38:32 Autopilot and tracking modes

Let's be friends
👍 You can message me on TWITTER / code_laboratory
👍 Check out some of my source code on CODEPEN https://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