Как изменить форму хитбокса изображения в Phaser 3? - PullRequest
Новая
       84

Как изменить форму хитбокса изображения в Phaser 3?

3 голосов
/ 23 октября 2019

Я создаю игру на скейтборде на JavaScript с использованием инфраструктуры Phaser 3. Я загрузил изображение рампы на экран, и в настоящее время я использую физический движок «аркада» в моем файле. Я знаю, что должен использовать физический движок, чтобы иметь непрямоугольный хитбокс. Как я могу реализовать его с помощью треугольного хранилища?

У меня есть файл изображения .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, чтобы игрок мог правильно «подъехать» по трапу.

1 Ответ

2 голосов
/ 24 октября 2019

Вам придется использовать physics: { default: 'matter' }, чтобы изменить форму хитбокса . Используйте этот фрагмент кода для справки: 

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, вы можете проверить этот урок о том, как реализовать различные формы.

РЕДАКТИРОВАТЬ:

Вы можете использовать console.log(this.matter.bodies), чтобы проверить другие доступные формы для реализации.

...