Play Perilous Potions on HTML5 and PC!

Part 1 - Art Design

Part 2 time!

Prepping the art assets

So we left off on Friday night where I finished the bulk of the art assets. Now we gotta animate some stuff to make the art not feel so static.

I took the art assets of my witch character and broke her down into pieces to prep for animation. So her head, neck, shoulders, arms, etc, all had to be broken up into individual assets.

I also created multiple heads with different faces I can swap between

Character Animation

There's lots of ways to animate a character, but I opted to rig the character as a puppet and use tweening for the effect I wanted. If you don't know what tweening is, it's essentially telling your computer that an image will be at multiple keyframes at specific times, and the computer fills in the gaps to move the image from one place to another in that time. This is an alternative to traditional frame-by-frame, where every frame is a hand drawn image.

https://www.youtube.com/watch?v=qqsdbOptKKk I found this video that shows the visual differences between the two

There's pro's and cons to this approach. The big con being that it can just look ugly and robotic to use tweening without some extra care. But this is a game jam and time is ticking, so it's fine.

So we open up After Effects (Which btw, I got a free trial to do this jam cause I usually get these apps for free at work. Goddamn are these apps expensive, it's disgusting)

But we need something to actually rig this character, which After Effects doesn't really have natively. So we need a plugin like Duik Bassel 2. This is an app that will let you rig humanoid and animal characters so you can easily animate them.

Dem Bones

Now she's all rigged up and ready to animate. I made multiple versions of a lot of these animations for different emotional states. These emotional states are meant to help indicate how well/poorly the player is doing while playing. This was easy enough as the heads are identical, so all I needed to do was swap out the heads for each render.

Wiggle, wiggle

I also turned the framerate waaaay down. Only 8 frames per second. This was for a couple reasons: 1. Smaller file size, faster performance 2. Looks more "anime". Anime is often animated on "twos", meaning they only show one drawing every 2 frames. It's cheaper to produce and, at this point, is iconic.

Effects Animation

Let's skip ahead to effects animations, which was MUCH simpler.

My effects animations are all around the cauldron, and at least one fills up the entire screen, so I decided to make my composition the size of the game window.

Then, I took some simple shapes that represented the different potion types I wanted players to create. I used basic tweening to scale the size, opacity, and positions of these shapes at different times in the timeline.

I laid this animation over a screenshot of the game so I could see how they would look and check the positioning. So far, so good!

I made all of my assets for effects animations white or shades of gray. This is because I planned on drawing these sprites in-engine with colors overlayed - so starting with white means my colors and values will look exactly as I expect them to.

What I would do different

A big issue I ran into was the scale of my animations. I had my images scaled to (what I thought) was way too large and was causing me performance issues. By this point I was adding my sprites in-engine and noticed issues. I ended up re-rendering my animations over and over, scaling down, scaling down again, scaling up one again. It ate up a lot of my time.

Turned out the performance issues I was having was due to a memory leak from bad code. Whoops. Spent all that time trying to fix a problem that didn't exist. Oh well.

Thanks for reading! Let me know if these dev-logs are helpful at all. If you want to see me actually do some animating, I recorded myself on stream doing the bulk of it!.

Thanks for reading!

Deprecat