Path based on an image

[eabuslaiman]

Hello! I'm beginner using Phaser and I need to fix a problem. I googled a lot about this but nothing similar to what I'm looking for.

In a game, I need to move an image along a path (another image). In attached image, the path is the grey section. The character will be the blue section. So, the character will move around the path based on percentage (for example, in the example, the character seems to have completed about the 10% of the total progress).

What I've done is something like following: 

var config = {
    type: Phaser.AUTO,
    scale: {
        mode: Phaser.Scale.FIT,
        parent: "phaser-container",
        width: '100%',
        height: '100%'
    },
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);
var rBounds = null;
var rCenter = null;

function preload ()
{
    this.load.image('globe', assetURL);
    this.load.image('background', assetBackgroundURL);
    this.load.image('road', assetRoadURL); // This is the path
}

function create () {

    let centerX = this.cameras.main.width / 2;
    let centerY = this.cameras.main.height / 2;

    let image = this.add.image(centerX, centerY, 'background')
    let scaleX = this.cameras.main.width / image.width
    let scaleY = this.cameras.main.height / image.height
    let scale = Math.min(scaleX, scaleY)
    image.setScale(scale).setScrollFactor(0)

    let road = this.add.image(this.cameras.main.width / 2, this.cameras.main.height / 2, 'road')
    road.setScale(scale).setScrollFactor(0)

    // Draw points on the map to draw the path
    rBounds = road.getBounds();
    rCenter = road.getCenter();

    /*console.log("Road bounds", rBounds);
    console.log("Road center", rCenter);
    console.log(scale); */

    var pathCharacter = new Phaser.Curves.Path(rBounds.width + rBounds.x - makeRelativePointBasedOnPixelRatio(20), rBounds.height + rBounds.y)
        .lineTo(rBounds.width + rBounds.x - makeRelativePointBasedOnPixelRatio(25), (rBounds.height + rBounds.y - makeRelativePointBasedOnPixelRatio(50, 'y')))
        .lineTo(rBounds.x + makeRelativePointBasedOnPixelRatio(30), (rBounds.height + rBounds.y - makeRelativePointBasedOnPixelRatio(50, 'y')))
        .lineTo(rBounds.x + makeRelativePointBasedOnPixelRatio(25), (rBounds.height + rBounds.y - makeRelativePointBasedOnPixelRatio(175, 'y')))
        .lineTo(rCenter.x + makeRelativePointBasedOnPixelRatio(200), (rBounds.height + rBounds.y - makeRelativePointBasedOnPixelRatio(175, 'y')))
        .lineTo(rCenter.x + makeRelativePointBasedOnPixelRatio(200), (rCenter.y - makeRelativePointBasedOnPixelRatio(80, 'y')))
        .lineTo(rCenter.x - makeRelativePointBasedOnPixelRatio(190), (rCenter.y - makeRelativePointBasedOnPixelRatio(80, 'y')))
        .lineTo(rBounds.x + makeRelativePointBasedOnPixelRatio(25), rBounds.y);

    console.log(pathCharacter.getEndPoint())

    let blocks = [];

    // Set graphics
    var graphics = this.add.graphics();
    graphics.lineStyle(5, 0x242222, 1);
    pathCharacter.draw(graphics, 128);

    var current = 0;
    this.globe = this.add.follower(pathCharacter, 0, 0, 'globe');

    this.globe.startFollow({
        positionOnPath: true,
        duration: 4000
    });

    var tween = this.tweens.add({
        targets: this.globe,
        angle: {
            from: 25,
            to: -25
        },
        alpha: {
            from: .99,
            to: 0.95
        },
        yoyo: true,
        ease: 'Linear',
        duration: 4000,
        loop: true
    });
}

function update() {
}

function makeRelativePointBasedOnPixelRatio(point, axis = 'x') {
    let retVal = null;
    if(axis == 'x')
        retVal = rBounds.width * point / 453;
    else
        retVal = rBounds.height * point / 453;

    return retVal;
}

I used startFollow function for desired behavior, and a list of coordinates (on the image) so, the path is draw on the canvas. Anyway, I don't know how to move the character to specific percentage of the path.

Is this possible? maybe i'm using the wrong functions? Any recommendations?

Thanks!