Как использовать X и Y позиции Спрайта для "Флинг" физики в Phaser 3?

Question

Я создаю игру, используя Phaser 3, в частности физический движок Matter. Я пытаюсь следовать этому уроку по физике броска https://www.emanueleferonato.com/2019/03/08/fling-unity-game-built-in-html5-with-phaser-and-matter-js-updated-with-the-latest-constraints-tweaks-fly-through-the-screen-with-your-ninja-rope/

let game;
let gameOptions = {
    gravity: 1,
    constraintSpeed: 2,
    hookSpeed: 20,
    ropeTolerance: 6
};
const BALL = 1;
const HOOK = 2;

window.onload = function() {

    let gameConfig = {
        type: Phaser.AUTO,
        scale: {
            mode: Phaser.Scale.FIT,
            autoCenter: Phaser.Scale.CENTER_BOTH,
            parent: "thegame",
            width: 1200,
            height: 750
        },
        scene: playGame,
        physics: {
            default: "matter",
            matter: {
                gravity: {
                    y: gameOptions.gravity
                },
                debug: true
            }
        }
    }
    game = new Phaser.Game(gameConfig);
    window.focus();
};
class playGame extends Phaser.Scene{
    constructor(){
        super("PlayGame");
    }
    preload() {
        //Load background image
        this.load.image('background', 'images/background.png');

        this.load.atlas('sheet', 'assets/spiderTP.png', 'assets/spiderTP.json');
        this.load.json('shapes', 'assets/spritesPE.json');
    }
    create() {
        //Place background image
        let background = this.add.image(600, 375, 'background');

        //Update the game at 30Hz
        this.matter.world.update30Hz();

        //Get hitboxes
        var shapes = this.cache.json.get('shapes');

        //Set boundaries for physics
        this.matter.world.setBounds(0, 0, game.config.width, 800);

        //Player
        this.hero = this.matter.add.sprite(600, 500, 'sheet', '0001', {shape: shapes.s0001})
        this.hero.label = BALL;
        this.hook = null;

        //Fire the hook
        this.input.on("pointerdown", this.fireHook, this);

        this.rope = null;

        //Listen for collisions with the hook
        this.matter.world.on("collisionstart", function(e, b1, b2){
            if((b1.label == HOOK || b2.label == HOOK) && !this.rope) {
                Phaser.Physics.Matter.Matter.Body.setStatic(this.hook, true);
                let distance = Phaser.Math.Distance.Between(this.hero.body.position.x, this.hero.body.position.y, this.hook.position.x, this.hook.position.y);

                if (distance > gameOptions.heroSize * 2) {
                    this.rope = this.matter.add.constraint(this.hero, this.hook, distance, 0.1);
                }
            }
        }, this);
    }

    fireHook(e) {
        if(this.hook) {
            this.releaseHook();
        }
        else {
            let angle = Phaser.Math.Angle.Between(this.hero.body.position.x, this.hero.body.position.y, e.position.x, e.position.y);

            this.hook = this.matter.add.rectangle(this.hero.body.position.x + 40 * Math.cos(angle), this.hero.body.position.y + 40 * Math.sin(angle), 10, 10);
            this.hook.label = HOOK;

            Phaser.Physics.Matter.Matter.Body.setVelocity(this.hook, {
                x: gameOptions.hookSpeed * Math.cos(angle),
                y: gameOptions.hookSpeed * Math.sin(angle)
            });
        }
    }

    releaseHook() {
        if(this.rope) {
            this.matter.world.removeConstraint(this.rope);
            this.rope = null;
        }
        if(this.hook){
            this.matter.world.remove(this.hook);
            this.hook = null;
        };
    }
    update() {
        // is there a constraint? Shrink it
        if(this.rope){
            this.rope.length -= gameOptions.constraintSpeed;
            let hookPosition = this.hook.position;
            let distance = Phaser.Math.Distance.Between(hookPosition.x, hookPosition.y, this.hero.body.position.x, this.hero.body.position.y);
            if(distance - this.rope.length > gameOptions.ropeTolerance){
                this.rope.length = distance;
            }
            this.rope.length = Math.max(this.rope.length, gameOptions.heroSize * 2);
        }
    }
}

РЕДАКТИРОВАТЬ - я все ближе. Теперь ошибок нет, но веревки не стреляют

Answer 1

Давайте посмотрим на this.hero .

«Невозможно прочитать свойство« x »из неопределенного» * ​​1006 * означает, что свойство, указанное перед x в this.hero.position.x не найдено и, вероятно, не существует в его родительском свойстве. В этом случае this.hero не содержит свойства position .

Мы можем увидеть свойство this.hero , набрав егов консоли во время выполнения кода:

Вы можете видеть, что position не существует как доступное свойство.

В вашем случае вам необходимо использовать свойство body .

Это свойство включает position свойство, которое включает в себя координаты x и y.

Итак, в качестве заключения, получите доступ к координатам x и y this.hook со следующими строками:

this.hero.body.position.x
this.hero.body.position.y

(этот ответ является ответом на первую редакцию этого вопроса)

Answer 2

Вы можете получить позицию sprite X & Y следующим образом:

hero.body.position.x
hero.body.position.y