1GAW: Earthquake using Phaser

Right after  a big hiatus from blogging, I’m doing my best in getting back to writing and sharing what I’ve learned and what I’m doing right now. Instead of telling stories of success and failure, I think it’s best to get back to business.

Today I’ll share a little snippet in order to simulate a short earthquake or visual recoil (from an explosion, maybe?).

Name: Earthquake.
Example game: A lot of 2D Metroidvania games.

Behavior

[Almost] Everything moves back and forth rapidly for a short period of time.

Solution

The first thing that would come to mind is to move all objects back and forth, because in the end we probably have access to every single object in the game. However, it is a complex process that means recomputing collisions and game rules, to say the least.

We are interested in distorting the game visually, not logically, so the notion of camera comes in handy. We just need to move the camera back and forth and the rendering engine does the rest of the work for us. The interpolation using animation, tween or a custom-coded routine; just remember to take the current camera position as a parameter.

In this case we’re using Phaser tweens, but the same principle could be applied on any other framework or engine that has a camera component.

Here’s how it looks like:

[iframe src=”http://pctroll.github.io/html5_1gamplaw/01earthquake.html” width=”100%” height=”350px”]

No Comments Yet.

Leave a Reply