Animations!

Didn’t get to work much on the game last week because of work. Luckily now is a long weekend in Germany, so I picked it up where I left — figuring out animations!

Animations may be tricky in a language like Elm, where you cannot mutate things and instead always return a new copy. So you really need to think how to represent an animation in your model. To implement the frames animation in 404 Elm Street, I used a timer, that I incremented by the time delta from the onAnimationFrameDelta subscription. When the timer reached the frame duration, then I incremented the frame number and reset the timer!

Eels are completely different story! There are multiple animated parameters (exposed length, position of the head, direction of the head)  that need to be smoothly interpolated between three different states (Hidden, Resting and Striking a prey). I’d been puzzled with this task for a few days until I stumbled upon the newly released package elm-animator from Matthew Griffith and decided to give it a try!

Elm Animator represents animation as a timeline of custom states, that you can define yourself. You can then update the timeline with the new time from the onAnimationFrame subscription, queue new events on the timeline, and finally extract interpolated values  from the timeline by providing mapping  for each state. This mental model totally made sense to me, so I gave each eel its timeline and wrote some demo code that queues the striking animation once the mouse is close to the eel’s head and the hiding animation when you click. There were a few unexpected glitches that I was able to workaround in the game, and opened an issue on GitHub.  To help fixing this issue, I am going to investigate deeper why this happened and cut it down to a SSCCEE.

As I understand, Elm Animator was mostly designed for animating UI and the games use case was not the top priority. My chat with Matthew triggered a few new API ideas how to make it more suitable for games. But even in its current state I can’t recommend Elm Animator highly enough!

In other news, Nadya has been trying different art styles for the game background and the arrangement of the eels on the screen. Because zooplankton cannot go against the current, she decided to position the eels on an arc so that zooplankton can reach each of the eels (otherwise, the rightmost eel would eat all the prey). For the screen proportions Nadya chose 960x640, because of the content width on the itch.io page on desktop. If we decide to support mobile, we can scale it down later.

The next step is to add zooplankton and let it be consumed by the eels! After that we should finally have something playable.