I really enjoyed Mikey Hooks game, now available only through GameClub, and I also really enjoyed to prototype the hook physics with a lot of languages in my Mikey Hooks tutorial series. After AS3 + Box2D, AS3 + Nape, Phaser 2 + Box2D, Unity + C# and Phaser 3 + Matter, now it’s time to build the hook with Phaser 3 and Box2D powered by Planck.js.

Like in previous parts of the series, it’s just a matter of working with distance hooks.

Look at the prototype:

Click on a box and hold to create a distance joint from the player to the box working like a hook and start swinging by clicking and holding on different boxes.

Let me spend a couple of words about the way it works:

1 – Some random boxes are created

2 – When the player clicks or taps, we check for bodies under the finger/pointer using an AABB (Axis Aligned Bounding Box) query.

3 – If there is a box under the pointer/finger, a distance hook is created between the player and the box. Player body also needs to be awakened.

4 – If the player holds the mouse/finger, we shorten a bit the distance joint and increase a bit the linear velocity of the player, giving the feeling of a swinging rope.

5 – When the player releases the mouse/finger, the joint is destroyed and we wait for another input to start from point 2.

Have a look at the source code, with comments on the lines of code which manage the hook:

let game;
let gameOptions = {
    worldScale: 30
}
window.onload = function() {
    let gameConfig = {
        type: Phaser.AUTO,
        scale: {
            mode: Phaser.Scale.FIT,
            autoCenter: Phaser.Scale.CENTER_BOTH,
            parent: "thegame",
            width: 600,
            height: 600
        },
        scene: playGame
    }
    game = new Phaser.Game(gameConfig);
    window.focus();
}
class playGame extends Phaser.Scene {
    constructor() {
        super("PlayGame");
    }
    create() {
        let gravity = planck.Vec2(0, 3);
        this.world = planck.World(gravity);
        for (let i = 0; i < 5; i ++) {
            this.createBox(Phaser.Math.Between(100, game.config.width - 100), Phaser.Math.Between(100, game.config.height - 200), Phaser.Math.Between(30, 50), Phaser.Math.Between(30, 50), false);
        }
        this.createBox(game.config.width / 2, game.config.height - 10, game.config.width, 20, false);
        this.hero = this.createBox(game.config.width / 2, game.config.height - 20, 20, 20, true);
        this.input.on("pointerdown", this.fireHook, this);
        this.input.on("pointerup", this.releaseHook, this);
        this.jointGraphics = this.add.graphics();
        this.joint = null;
    }
    fireHook(e) {

        // queryAABB scans all world bodies to check if they overlap the AABB rectangle
        this.world.queryAABB(planck.AABB(planck.Vec2(this.toWorldScale(e.x), this.toWorldScale(e.y)), planck.Vec2(this.toWorldScale(e.x), this.toWorldScale(e.y))), function(fixture) {
            let body = fixture.getBody();

            // this is how we create a distance joint
            this.joint = this.world.createJoint(planck.DistanceJoint({
                bodyA: this.hero,
                bodyB: body,
                anchorA: this.hero.getWorldCenter(),
                anchorB: body.getWorldCenter(),
                collideConnected: true
            }));

            // we must awake the body
            this.hero.setAwake(true);

            // return false to exit the AABB query without looking for another fixture
            return false;
        }.bind(this));
    }
    toWorldScale(n) {
        return n / gameOptions.worldScale;
    }
    toPixels(n) {
        return n * gameOptions.worldScale;
    }
    releaseHook() {
        if (this.joint) {

            // this is how we destroy a joint
            this.world.destroyJoint(this.joint);
            this.joint = null;
        }
    }
    createBox(posX, posY, width, height, isDynamic) {
        let box = this.world.createBody();
        if (isDynamic) {
            box.setDynamic();
        }
        box.createFixture(planck.Box(this.toWorldScale(width / 2 ), this.toWorldScale(height / 2)));
        box.setPosition(planck.Vec2(this.toWorldScale(posX), this.toWorldScale(posY)));
        box.setMassData({
            mass: 1,
            center: planck.Vec2(),
            I: 1
        });
        var color = new Phaser.Display.Color();
        color.random();
        color.brighten(50).saturate(100);
        let userData = this.add.graphics();
        userData.lineStyle(2, color.color, 1);
        userData.strokeRect(- width / 2, - height / 2, width, height);
        box.setUserData(userData);
        return box;
    }
    update(t, dt) {
        this.world.step(dt / 1000 * 2);
        this.world.clearForces();
        for (let b = this.world.getBodyList(); b; b = b.getNext()) {
            let bodyPosition = b.getPosition();
            let bodyAngle = b.getAngle();
            let userData = b.getUserData();
            userData.x = this.toPixels(bodyPosition.x);
            userData.y = this.toPixels(bodyPosition.y);
            userData.rotation = bodyAngle;
        }
        this.jointGraphics.clear();
        if (this.joint) {

            // get joint length and shorten it a bit
            this.joint.setLength(this.joint.getLength() - 0.1);

            // get hero velocity
            let velocity = this.hero.getLinearVelocity();

            // increase hero velocity
            this.hero.setLinearVelocity(planck.Vec2(velocity.x * 1.01, velocity.y * 1.01));

            // draw the joint
            let anchorA = this.joint.getAnchorA();
            let anchorB = this.joint.getAnchorB();
            this.jointGraphics.lineStyle(2, 0xffffff, 1);
            this.jointGraphics.moveTo(this.toPixels(anchorA.x), this.toPixels(anchorA.y));
            this.jointGraphics.lineTo(this.toPixels(anchorB.x), this.toPixels(anchorB.y));
            this.jointGraphics.strokePath();
        }
    }
};

And this is another great and fun prototype built in a bunch of lines. Download the source code.