在游戏中正确设定坡道的点击框吗？

Question

我正在使用Phaser 3框架以JavaScript创建滑板游戏。我已经将渐变图像加载到屏幕上，并且当前正在文件中使用“ arcade”物理引擎。我知道我必须使用物质物理学引擎来创建非矩形的Hitbox。如何使用三角形的点击框实现它？

我有渐变的.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 Hitbox文件，以便播放器可以正确地“乘坐”坡道。

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

您还可以使用PhysicsEditor，可以check this tutorial关于如何实现不同的形状。