Character Motion & Animation in 2D Games

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: www.udemy.com/course/build-an...
🌟 Skillshare (free 1 month trial that includes all my extended classes including this one):
www.skillshare.com/en/r/profi...
🎨 Download Project Art assets 🎨
Background: www.frankslaboratory.co.uk/do...
Body: www.frankslaboratory.co.uk/do...
Eye 1: www.frankslaboratory.co.uk/do...
Eye 2: www.frankslaboratory.co.uk/do...
Reflection: www.frankslaboratory.co.uk/do...
Body sprite sheet: www.frankslaboratory.co.uk/do...
Detector light: www.frankslaboratory.co.uk/do...
All (zip): www.frankslaboratory.co.uk/do...
Larger background image: www.frankslaboratory.co.uk/do...
Concept art (wallpapers, robot designs): 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 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

[@douglascounts4634]

Wow, another quality video from the master!

[@Frankslaboratory]

Hi Doug, thank you, very kind

[@timwilson2009]

You're awesome, Frank! Thanks as always. Great work :)

[@gflaap]

Great Video with high Quality- i Hope you will Never stop with your Tutorials singe they are awesome and I love them❤

[@user-dt1vq4dg3g]

Hi! As a passionate gamer (well, at least in my pre-dad period :D) and a JS web developer, I must say I have completely fell in love with your videos. Realizing I can actually use JavaScript to create games for my kids or to (possibly) recreate some of my favorite ZX Spectrum games from my early childhood is so amazing! I just want to thank you for all the hard work and passion that you put into your videos - you have opened up a whole new world for me. Wishing you all the best - and looking forward to the second part of this video (lasers and stuff :))!

[@johntitus3985]

You are amazing!! I haven't been doing much in JavaScript lately but I really enjoy your KZbin videos. Keep up the great work I'm always amazed what you come up with.

[@Frankslaboratory]

Thank you for your kind words of support John

[@TwitchingShark]

I love the detailed explanation!

[@Frankslaboratory]

Glad you think so

[@carllewis6745]

Love the art style

[@Frankslaboratory]

Hi Carl, glad you like it, I will probably try other art styles for future series.

[@emausdetiquicia6636]

I have struggle into understanding the 2 different drawImage methods. The way you presented them here is 1) clear, 2) useful, 3) make sense and 4) very entertaining. I'll definitively will continue watching, liking and sharing your videos and whenever I can click on the ads.

[@Frankslaboratory]

Hi Emaus, thank you for taking the time to let me know, I appreciate your feedback. Glad you found some value!

[@MrBrady95]

Thanks Frank, your videos are always awesome! The movement you're showing here, reminds me of an arcade game classic called "Tempest" (Atari 1981). A cool game with simple line based graphics and a fast speed that made the game fun to play. Seems to me that the entire game was based around this simple circular movement. 😄

[@Frankslaboratory]

Hi John, just Googled Tempest gameplay. Might be interesting to try to replicate that with JavaScript :)

[@JM-de2gh]

Wow, I really liked your /last/ video and was trying to catch up on that. This one is really cool though! I really need to block out a 3hr-Frank time event by next weekend, and the artifact needs be a tribute! Thanks Frank. You're vids this year are x2 the quality of last year, and last years quality was already good!

[@Frankslaboratory]

Hi Mr J, interesting to see you noticed improvement in quality, I'm happy to hear that. I guessed I learned a few coding and video editing tricks in the last year :) Hope you're well, nice to see you here

[@compilejs110]

I really love your video. So much detail. Lot of learning. Waiting for 3D Webgl tutorial.

[@Frankslaboratory]

Thank you. I came up with a lot of gameplay ideas for this series, to do this with WebGl would take a lot more code, so probably I'll do a simpler project

[@nicolo4430]

Your conten is way underrated.

[@Frankslaboratory]

Thank you Nicolo

[@adeshmahatme1988]

EAGER TO LEARN FROM YOU FRANK

[@Frankslaboratory]

Have fun learning Adesh

[@HuynhLuong227]

long time no see. many thanks

[@Frankslaboratory]

It's been a while, hope you're well

[@javifontalva7752]

Btw. Excellent job!!

[@Frankslaboratory]

Thank you Javi

[@javifontalva7752]

How can you make the eye follow smoothly?

[@thekaunter6937]

I love the fact that you don't use any framework!

[@Frankslaboratory]

Glad you think so, thank you for your feedback

[@Radu]

Amazing :-)

[@Frankslaboratory]

Thank you master coder!

[@Radu]

@@Frankslaboratory :-)

[@Radu]

@@Frankslaboratory Really great how you put in so much attention to detail!

[@javifontalva7752]

I am learning so much from both of you guys. I am flabbergasted!

[@serychristianrenaud]

Coool

[@Frankslaboratory]

Thanks

[@sistemafuturo]

❤❤❤❤❤

[@johnadriandodge]

Shalom Jedi Frank You are spooky talented. I have so much fun working through your projects. Thank you Frank

[@Frankslaboratory]

Hi John, nice to see you. Thank you for your kind words

[@johnadriandodge]

Thank you very much

[@h989l]

you should publish a web game Frank , I would love to play your game.

[@Frankslaboratory]

I would like to make a tower defense game, I have a lot of ideas for that right now ha.

[@Scifi_Kid]

Is that a game wow pls release it dude 🔥🔥🔥🔥 ???

[@Frankslaboratory]

I make a lot of games, not all are turned into tutorials. Depends if people like them

[@Frankslaboratory]

Should I give it a laser arm or electricity attack?

[@mister_i_3708]

If electricity attack will be a chain between enemies, then better it will be. Other way, laser is better.

[@Frankslaboratory]

@@mister_i_3708 I'm still designing it, so let's see. I came up with a few more attack types just now :D

[@compilejs110]

Laser arm, also electric lighting to show charging initially before releasing laser beam.

[@heimphyo5171]

Please upload penalty shoot game ❤

[@Frankslaboratory]

Good idea

[@user-pu5ve7jb3q]

how to make story page

[@Frankslaboratory]

What do you mean

[@AZHARakaGoat]

🥵🥵🥵🥵

[@Frankslaboratory]

:D

[@mister_i_3708]

27:25 Code can be refactored. this.frameX = this.frameX >= this.maxFrame ? 0 : this.frameX + 1 or this.frameX = ( this.frameX + 1 ) % this.maxFrame

[@Frankslaboratory]

Nice, I like the second one. Will try that