Write better camera for Phaser — Part 2

A stalker doesn’t stick on his target, he keeps distance and quietly follows. Unsatisfied with the follow functionality of the Camera class of the HTML5 game engine Phaser, I made a stalker out of my own.

On my previous post, I built an enhanced camera for Phaser that can smoothly zoom to any scale I want. At the end of that post, I shown you a demonstration video where the camera does not only zoom, but also follows the character smoothly. Now that’s not something Phaser is capable of.

Don’t get me wrong, Phaser.Camera does have follow functionality, but it just sticks the camera on to the entity. That is, in no way, following.

When I hear follow, I think stalker.

A stalker doesn’t stick on his target, he keeps distance and quietly follows. That means, when the target moves, he doesn’t move immediately but slowly chase after.

Note: I would be using the Camera class from (previous post).

1. Make a sprite to act as a stalker and stick the game.camera on him.

   class Camera extends Phaser.Group {
   constructor() {
       ...
       this.stalker = game.add.sprite(0, 0, null);
       game.camera.follow(this.stalker);
   }
   }
   

2. Use arcade physics method moveToObject to let stalker chase target. Of course, if you don’t want to use arcade physics, it is possible to write a simple logic for this matter.

   class Camera extends Phaser.Group {
   constructor() {
       ...
       game.physics.arcade.enable(this.stalker);
   }
   update() {
       ...
       var arcade = game.physics.arcade;
       arcade.moveToObject(this.stalker, this.target);
   }
   }
   

There are two problem.

First, if target is in a group, it’s position is relative to that group. The stalker however, doesn’t belong the that exclusive-membersive-only group, so he could not possibly know where his target is. So I let the stalker follow target.world (the absolute position) instead of target.position (the relative position).

follow(world) {
    this.target = target.world;
}

Second, this only works when stalker is far away from target. The problem is he doesn’t slow down when he is close to target and hence runs pass it. Of course, he realizes that, turns around and runs back, but then again, he moves too fast and runs pass it again.

To solve the problem, we need to define a safeDistance as a threshold for stalker to recognize that he is too close and stop:

update() {
    ...
    var position = this.stalker.position;
    var distance = position.distance(this.target);
    if (distance < this.safeDistance) return;
    ...
}

For complete source code, check out this gist. Here is the demonstration video from my previous post.