Game Design Game Development Geek / Technical

Explore Game Mechanics Interactively At This New Site

Flocking on

If you’re new to game development, or even if you are a veteran making a game of a type you’ve never made before, you might find yourself doing research on how to best implement the mechanics. Whether it is figuring out how best to implement ballistics or how to move a rocket ship, it’s not just the math but the approach you might be looking for.

For instance, last year I made a Frog and Flies clone called Hungry Frogs for One Game a Month. I remember spending quite a bit of time on the jumping mechanic as this was the closest I’ve ever come to implementing a platformer. In the end I wasn’t completely happy with what I had. My main complaint was that it wasn’t easy for me to identify the maximum height of the frog’s jump without tweaking variables and seeing what happens. But considering the few hours I spent on it, I delivered something that worked well enough.

Still, if had been around then, it would have saved me some time.

The site offers you a list of common game mechanics, each of which has at least a handful of examples with an in-browser demo and a JavaScript code example written using the Phaser framework.

Each example focuses on one concept and includes the source code for the implementation. They aren’t meant to be extremely polished or to represent a complete game. They aren’t highly optimized. They may not even be the best way to implement the mechanic being demonstrated! (They’re certainly not the only way.) They are written for clarity so that it is easier to understand the underlying concepts and apply them to your own work in your own engine. I expect that some of these examples will evolve as I gain experience. But hopefully you’ll find them useful and you can use them as a jumping off point for your own games.

At the time I am writing, there are examples for bullets, spaceship movement, following, homing missiles, raycasting, lighting, effects, easing movement, and even walking and jumping.

Line-Of-Sight on

The walking and jumping examples start out by showing you the naive approach, which has the on-screen character either stationary or moving at full speed. It’s functional, but it doesn’t feel right. The next example introduces the concept of acceleration to make the movement smoother, but it identifies a problem that is introduced. The next example introduces the concept of drag.

The next few examples take you through basic jumping mechanics, including double jumps and variable jump heights, the latter of which I needed for my hungry frog game.

I enjoyed spending time exploring different mechanics, such as seeing how various easing functions compare to each other, or how to use raycasting to do line-of-sight checks. I remember someone once posted a comparison of jumping mechanics of Mario, Meat Boy, and Mega Man among others, but I can’t find it today. is filling that void nicely.

I’m looking forward to seeing the implementation of some of the upcoming mechanics, including camera controls and the advanced platformer ones.

John Watson, you have provided aspiring game developers a great service.

One reply on “Explore Game Mechanics Interactively At This New Site”

Comments are closed.