Understanding steering behavior: HTML5 example using Phaser

In a previous post I showed you how to simulate flocking behavior with Boids using HTML5 and Phaser.

There are a lot of things you can do with boids, and one of these nice things is the creation of a steering behavior. When a moving body has to change its direction to go towards a point, in real world it never stop moving in its old direction to suddenly move towards target point, but it gently steers until current direction matches to preferred direction, which is usually following the straight line from the boid to the target.

Look at this example:

Here the boids steer to reach the target point – the red dot – making the movement more realistic than just following a straight line.

As you can see in the source code, everything is just a matter of vector operations. Phaser does not features a vector class but we can rely on Point class which has a lot of methods we can use to handle Points as if they were vectors.

Look at the commented source code:

This was just another demonstration of what you can do with boids. More will come, meanwhile download the source code.

  • Tzeon

    Exactly what I needed !
    Thank you !!!!