How I Used Rive to Build a Punchy Pixel Art Character for My Website

How I Used Rive to Build a Punchy Pixel Art Character for My Website

School of Motion via YouTube Direct link

13:29 Importing and Optimizing Assets in Rive

8 of 34

8 of 34

13:29 Importing and Optimizing Assets in Rive

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

How I Used Rive to Build a Punchy Pixel Art Character for My Website

Automatically move to the next video in the Classroom when playback concludes

  1. 1 00:00 Intro
  2. 2 00:08 Setting Up the Design in Figma
  3. 3 01:50 Creating Pixel Art for Interactivity
  4. 4 03:29 Dancing with the Devil AI
  5. 5 04:02 Challenges with AI Tools for Pixel Art
  6. 6 06:00 Hacking the AI
  7. 7 11:00 File Size Considerations
  8. 8 13:29 Importing and Optimizing Assets in Rive
  9. 9 15:56 Creating an Idle Animation
  10. 10 23:38 One head down, eight to go
  11. 11 25:55 Draw Order to the Rescue
  12. 12 29:27 Mouse Tracking 101
  13. 13 30:58 Setting Up the Hit Box
  14. 14 31:42 Mouse Tracking with Rive
  15. 15 33:48 Creating a Joystick Control
  16. 16 36:51 Nested Solos FTW
  17. 17 39:04 How Joysticks Work
  18. 18 46:02 Time to Punch Out
  19. 19 47:14 Animating the Face Punch
  20. 20 50:22 Adding Sound Effects
  21. 21 51:48 Animating the Gut Punch
  22. 22 47:14 Animating the Face Punch
  23. 23 50:22 Adding Sound Effects
  24. 24 51:48 Animating the Gut Punch
  25. 25 53:23 Creating Hit Boxes for Click Events
  26. 26 00:55:06 Configuring State Machines for Click Events
  27. 27 00:58:17 Troubleshooting Visibility Settings
  28. 28 00:58:44 Optimizing Animation Timelines
  29. 29 00:59:58 Creating and Configuring Gut Punch
  30. 30 01:01:41 Integrating Animations into Design
  31. 31 01:04:50 Advanced Mouse Tracking Behavior
  32. 32 01:15:09 Adding Interactive App Icons
  33. 33 01:19:08 Final Touches and Troubleshooting
  34. 34 01:25:00 Wrap Up

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.