Animating the wizard was a ton of fun! π§πΌββοΈ
It was quite a challenge, too...
Here's a mini-breakdown / tutorial of how I did it with @rive_app .
Grab some β and let's do it! π
Here are the high-level stepsβ
1οΈβ£ Break apart @FonsMans' illustration β‘ @rive_app.
2οΈβ£ Add constraint to track cursor
3οΈβ£ Apply mesh and bones to body (something I've been wanting to learn)
4οΈβ£ Apply rest of animations
5οΈβ£ Make sure it all feels good!
Let's go! π
1οΈβ£ I took @FonsMans illustration, broke it into layers, and fed into @rive_app
First, I used @snap_edit to *easily* get it 75% there (wizard + table + monitor).
The rest was all Photoshop β brushes of all kinds.
I then imported the PSD directly into @rive_app
2οΈβ£ β Constraints are a bit tricky to get working.
Main ideas: need βΆ "Target" to specify cursor and β· "Hit Area" to define boundaries for cursor.
Then, attach the Hit Area as a Listener, set to "pointer move" and attach Target.
Simple, right? π
3οΈβ£ β *Meshes* make 2D objects feel more 3D. So I wanted to apply that to Wizard's body.
*Bones* gives you better control over the meshes (particularly the vertices).
This tutorial by @BobbehHaynie was super helpful!
(Meshes should try to match 3D form!)
https://www.youtube.com/watch?v=lcO_oiFoOiM
4οΈβ£ β Apply the rest of the animations. Fun! ππ»ββοΈ
0:000:00
5οΈβ£ β Make sure it all feels good!
This sounds simple, but practically difficult to do.
Too many animations at once = overwhelming.
Most of my revisions focused on toning things *down.*
5οΈβ£ (cont'd)βmy main timeline is 3 seconds long (looped).
But it started feeling mechanical...
Biggest bang for buck β move wizard head to a 7s timeline.
Simple fix β breaks monotony!
Beauty of @rive_app (unlike AE): timelines loop independently from one another π
Lastly, it would've been fun animating the light streaks using @framer overrides... but alas, I ran out of time.
Pro-tip: always good to time-box side projects.
Otherwise, there's really no end to the rabbit hole.