top of page
Project Lullaby Website Banner

Animation

Process + Workflow: The 2D hand-drawn animations are animated in Clip Studio Paint. I start by keyframing the main parts of the animation first, then I draw the in-betweens. Once the rough animation is finished, I repeat the process with the other animations needed for that particular enemy/character in the same CSP file to keep things organized.

animation timeline screenshot.PNG

Exporting the frames is usually done using the image sequence feature. It exports each frame as an image within the selected part of the timeline. Before this can be done, I need to shorten each image in the animation to 1 frame in length, and all the frames get collected into their own folder.

image sequence screenshot.png

I then add the folder to Texture Packer to make the sprite sheets, and repeat this process for each animation of the enemy/character. 

​

The sprite sheets are then imported into Unity where I splice them up and animate them in-engine for the programmer to implement in the battle system.

clip studio paint logo.png
texture packer logo.png
UnityLogo.png

​We start by implementing the rough animations first so the game is more playable; later on we will do the final linework/coloring and replace the frames.

Each animation is repeatable so we can make it last as long as we need it to in battles.

The black numbers on the grey-skinned animations represent the frame order, and the red tell you how long each frame lasts - makes implementation much easier.

armor_nugget_walk.png

Chop the Lumbercat: Rough animations for one of the playable characters. They will updated with final linework and color in the future. The chainsaw weapon and tail will possibly be animated on a separate layer to make the animation process easier.

chop_battle_jump4wipaddedframe.gif
chop_battle_idlenewwip3.gif
chop_battle_jump4wiploop.gif
chop_battle_dashbackwip.gif
chop is dead better wip.gif
block very bad wip.gif

6 Animations: Jump to attack, idle, three attack swipes, return to idle, death/KO, and block.

Standard Enemy: Rough animations for the standard enemy of the game. They will updated with final linework and color in the future. Some keyframes of the idle and jump were drawn by a teammate and passed onto me as this was the first enemy implemented.

NuggetAnimVeroIdleWIP.gif
Nugget death wip 2.gif
NuggetAnimVeroattackandreturnWIP.gif
nugget hit wip.gif

4 Animations: Idle, jump and attack, death, and getting hit.

Armored Enemy: Rough animations for the armored enemy of the game. They will updated with final linework and color in the future.

ArmorNugget all animations.gif
ArmorNugget_idlenew.gif
ArmorNuggetwalk_noreference.gif
ArmorNugget new second attack.gif
ArmorNuggetgethitwip.gif
ArmorNuggetdeathwip.gif

5 Animations: 6 including the compilation example. Idle, crawl, double attack, getting hit, and death.

Flying Enemy: Rough animations for the flying enemy of the game. They will updated with final linework and color in the future.

jellyfish enemy all anims.gif
jellyfish enemy attack.gif
jellyfish enemy idle.gif
jellyfish enemy hit.gif
jellyfish enemy death.gif

4 Animations: 6 including the compilation example. Idle, attack, getting hit, and death.

Boss Enemy: Rough animations for the boss enemy of the demo. They will updated with final linework and color in the future. Currently being worked on.

Boss Idle and Break.gif
Boss Attack.gif
Boss Into Flying and Flying.gif
Boss Get Hit Flying.gif
Boss Crawl.gif
Boss Get Hit Grounded.gif
Boss Flying.gif
Boss Falling.gif
Boss All Animations.gif

8 Animations: 9 including the compilation example. Idle, crawl, attack, get-hit grounded, going into flying, flying, get-hit flying, and falling.

bottom of page