Particles, Tweens & Juice


I usually don't get my games to the point where there's much that can be polished, or I work myself into an engine corner where the engine is working against me. I'm continually frustrated by the difference between the discrete work (exact grid coordinates, entity bounding box) and the continuous work (tweens between positions, scaled sprites etc). A large part of that is because I usually build my games from scratch and my engines tend to favour the discrete model.

Here's the discrete movement (and simplerfrom another roguelike that I worked on for a while.


At any given time both the human and the engine know where the player (the @ symbol) is. Movement is locked to the grid and the renderer just produces an image of a fixed moment in time every frame.

With Midas I've been building the simplest thing at each step of the way. There's nothing in there that you could reasonably call an engine and that's left the game wide open for features that fall under the broad umbrella of "juice".

Here's what the game looks like with particle effects and movement tweens.


Usually my roguelikes have snapped movement so that I don't have to think about the middle states. Having the continuous animations opens the door for all kinds of nasty problems to do with non-exact grid coordinates and handling input before the current set of actions has finished.

Having these continuous animation systems gives you a lot more to think about as a developer. If implemented badly you'll run into a brick wall of game-breaking bugs with floating point grid coordinates and handling input whilst previous animations are still finishing.

There's actually quite a lot going on here, so let's break it down.

When the player hits a directional key, a movement function is called. It's responsible for immediately updating the player's grid coordinate so that all game systems see the player object as in destination grid cell, then it starts a tween which moves the sprite from the current position into the new position. I'm using the offset system as described in the JavaScript Broughlike Tutorial. There's also a separately tweened jump that moves the players sprite vertically along a sine wave, without also moving the shadow, to give the impression that the player is jumping from cell to cell. Finally when the tween ends, the tile is turned gold and golden particles are added to the particle system. There's a very simple approximation of gravity which causes the eventual downward motion of the particles.

It's hard to explain how much better this feels to play than the previous version where Midas snapped from tile to tile, but this is the first version I sent out to friends for play testing and people seemed to enjoy it despite the fact that there's nothing to do other than walk around turning things into gold. I think that's a good sign?

Here's some buggy golden sokoban!

Leave a comment

Log in with itch.io to leave a comment.