如何在 Phaser 3 中更改图像的碰撞框形状？

Question

我正在 JavaScript 使用 Phaser 3 框架创建滑板游戏。我已将斜坡图像加载到屏幕上，并且我目前正在我的文件中使用 "arcade" 物理引擎。我知道我必须使用物质物理引擎来获得一个非矩形的碰撞框。我如何使用三角形碰撞盒来实现它？

我有斜坡的 .png 图像文件，以及它的碰撞框的 .json 文件。

我尝试按照网站上的教程学习如何为物质物理引擎创建新的碰撞盒。一切都从屏幕上掉下来了，我不知道如何使用 .json 文件作为斜坡。

//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);
    }
}

我需要知道如何实现斜坡的 .png 图像及其 .json 碰撞框文件，以便玩家可以正确地 "ride" 上斜坡。

Answer 1

你必须使用physics: { default: 'matter' }来改变hitbox的形状。使用此代码段作为参考：

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();
}

您也可以使用物理编辑器，您可以check this tutorial了解如何实现不同的形状。

编辑：

您可以使用 console.log(this.matter.bodies) 检查其他可用的形状来实现。

如何在 Phaser 3 中更改图像的碰撞框形状？

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

javascript

collision-detection

phaser-framework

matter.js