How to change the hitbox's shape of a image in Phaser 3?

Question

I am creating a skateboarding game in JavaScript using the Phaser 3 framework. I have loaded the ramp image onto the screen, and I am currently using the "arcade" physics engine in my file. I know I have to use the matter physics engine to have a non-rectangular hitbox. How do I implement it with the triangular hitbox?

I have the .png image file of the ramp, along with the .json file for its hitbox.

I tried following a tutorial off of a website on how to create new hitboxes for the matter physics engine. Everything ended up falling off the screen and I couldn't figure out how to use the .json file for the ramp.

//Configurations for the physics engine
var physicsConfig = {
    default: 'arcade',
    arcade : {
        debug : true  //CHANGE THIS TO TRUE TO SEE LINES
    }
}

//Game configurations
var config = {
    type: Phaser.AUTO,
    width: 1200 ,
    height: 600,
    physics: physicsConfig,
    scene: {
        preload: preload,
        create: create,
        update: update
    }   
}

//Start the game
var game = new Phaser.Game(config);

function preload() {
    //Images
    this.load.image('sky', 'archery_assets/images/sky.png');
    this.load.image('ground', 'skate_assets/images/ground.png');
    this.load.image('up_ramp', 'skate_assets/images/up_ramp.png')

    //Spritesheets
    this.load.spritesheet('player', 'skate_assets/spritesheets/skater.png', {frameWidth: 160, frameHeight: 160});

}

function create() {
    //Background
    skyImg = this.add.image(600, 300, 'sky');
    //Scale the images
    skyImg.setDisplaySize(1200, 600);
    groundImg = this.add.image(600, 600, 'ground');
    groundImg.setDisplaySize(1200, 250);

    //Create the player
    this.player = this.physics.add.sprite(100, 410, 'player');
    this.player.setCollideWorldBounds(true);

    //Rolling animation 
    this.anims.create({
        key: 'move',
        frames: this.anims.generateFrameNumbers('player', {start: 0, end: 3}),
        frameRate: 16,
        repeat: -1 // <-- keeps the rolling animation going
    });
    //Pushing animation
    this.anims.create({
        key: 'push',
        frames: this.anims.generateFrameNumbers('player', {start: 4, end: 8}),
        frameRate: 16
    });
    //Start and keep the rolling animation going
    this.player.anims.play('move', true);

    //Up ramp (1st ramp)
    this.upRamp = this.physics.add.sprite(700, 330, 'up_ramp');
    this.upRamp.setSize(320, 150).setOffset(0, 175);
    this.upRamp.enableBody = true;
    this.upRamp.setImmovable();
    this.upRamp.body.angle = 150;

    //Input
    this.cursors = this.input.keyboard.createCursorKeys();

    //Spacebar
    this.spacebar = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);

    this.physics.add.collider(this.player, this.upRamp);
}


function update() {

    //Set variable for push speed
    var playerPushSpeed = 0;

    //If the spacebar is pressed 
    if (this.spacebar.isDown) {
        //Play the push animation
        this.player.anims.play('push', true);

        //Push speed
        playerPushSpeed += 175;

        //Move player
        this.player.setVelocityX(playerPushSpeed);   
    }

    if (this.upRamp.body.touching.left) {
        this.player.setVelocityY(-200);
    }
}

I need to know how to implement the .png image of the ramp along with its .json hitbox file, so that the player can properly "ride" up the ramp.

Answer 1

You'll have to use the physics: { default: 'matter' } in order to change the hitbox's shape. Use this code snippet for reference:

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#000000',
    parent: 'phaser-example',
    physics: {
        default: 'matter',
        matter: {
            gravity: {
                y: 0
            },
            debug: true
        }
    },
    scene: {
        create: create
    }
};

var game = new Phaser.Game(config);

function create ()
{
    this.matter.world.setBounds();

    this.matter.add.rectangle(200, 200, 200, 200, { 
        chamfer: { radius: [230, 0, 200, 0 ] }
    });

    this.matter.add.mouseSpring();
}

You could also use a PhysicsEditor, you can check this tutorial on how to implement different shapes.

EDIT:

You can use console.log(this.matter.bodies) to check other available shapes to implement.