Anchoring one image to another

[Linzeestomp]

Hi all,

Need a little help--I'm trying to build a side scrolling platformer with a tank as the player and the player controls forward and backwards motions of the hull with the keyboard and aim/shoot with the mouse. I figured out how to lock to pointer and rotate the tank as a whole -- what I need is to append a seperate image to roughly the top of the tank and allow it to rotate toward where the cursor is as the player is driving or aiming. Current source below.

 

//scene always extends Phaser.Scene
class sceneA extends Phaser.Scene {
    constructor() {
        super({
            key: 'sceneA',
            active: true,
            physics:
            {
                default: 'arcade',
                arcade:
                    {
                        debug: true,
                        gravity:
                            {
                                y: 500
                            }
                    }
            },
        });
    }

    init() {

    }

    preload() {

        ////////////////////////
        // Begin Progress Bar //
        ////////////////////////

        let progressBar = this.add.graphics();
        let progressBox = this.add.graphics();
        progressBox.fillStyle(0x222222, 0.8);
        progressBox.fillRect(240, 270, 320, 50);

        let width = this.cameras.main.width;
        let height = this.cameras.main.height;

        // Displays 'Loading...' Text
        let loadingText = this.make.text({
            x: width / 2,
            y: height / 2 - 50,
            text: 'Loading...',
            style: {
                font: '20px monospace',
                fill: '#ffffff'
            }
        });
        loadingText.setOrigin(0.5, 0.5);

        // Displays progress percentage
        let percentText = this.make.text({
            x: width / 2,
            y: height / 2 - 5,
            text: '0%',
            style: {
                font: '18px monospace',
                fill: '#ffffff'
            }
        });
        percentText.setOrigin(0.5, 0.5);

        // Display assets being loaded
        let assetText = this.make.text({
            x: width / 2,
            y: height / 2 + 50,
            text: '',
            style: {
                font: '18px monospace',
                fill: '#ffffff'
            }
        });
        assetText.setOrigin(0.5, 0.5);

        //////////////////////
        // End Progress Bar //
        //////////////////////

        // 'progress' event listener
        this.load.on('progress', function (value) {
            //console.log(value);
            progressBar.clear();
            progressBar.fillStyle(0xffffff, 1);
            progressBar.fillRect(250, 280, 300 * value, 30);
            percentText.setText(parseInt(value * 100) + '%');
        });

        // 'file progress' event listener
        this.load.on('fileprogress', function (file) {
            //console.log(file.src);
            assetText.setText('Loading asset: ' + file.src + " [ " + file.key + " ]");
        });

        // 'complete' event listener
        this.load.on('complete', function () {
            //console.log('complete');
            progressBar.destroy();
            progressBox.destroy();
            loadingText.destroy();
            percentText.destroy();
            assetText.destroy();
        });

        // grabs JSON file with tilemap data. tilemapTiledJSON(key, src)
        this.load.tilemapTiledJSON('atlas', 'assets/tiles/Level 1/Level1.json');
        // grabs tilesheet and sets tile size for the sheet
        this.load.spritesheet({
            key: 'tiles',
            url: 'assets/tiles/Level 1/spritesheet.png',
            frameConfig: {
                frameWidth: 32,
                frameHeight: 32,
                spacing: 0,
                margin: 0
            }
        });
        // grabs background tilesheet and sets tile size for the sheet
        this.load.spritesheet({
            key: 'bg',
            url: 'assets/tiles/Level 1/bg.png',
            frameConfig: {
                frameWidth: 32,
                frameHeight: 32,
                spacing: 0,
                margin: 0
            }
        });
        // grabs player spritesheet
        this.load.spritesheet({
            key: 'player', 
            url: 'assets/tiles/Level 1/moveAnimation.png', 
            frameConfig: {
                frameWidth: 86,
                frameHeight: 68,
                spacing: 0,
                margin: 0
            }
        });

        this.load.image({
            key: 'target',
            url: 'assets/tiles/Level 1/reticle.png'
        });

        /////////////////////
        //  Start Plugins  //
        /////////////////////
    }

    create() {
        // place camera in the sceen and set bounds
        this.cameras.main.setBounds(0, 0, 1920 * 2, 1080 * 2);
        // make a tilemap with id or key 'atlas'
        let map = this.make.tilemap({
            key: 'atlas'
        });
        // create variables to hold the tileset images we preloaded earlier
        let groundTiles = map.addTilesetImage('tiles', 'tiles');
        let bgTiles = map.addTilesetImage('bg', 'bg');
        // place a static layer in the scene for our background
        map.createStaticLayer('bg', bgTiles, 0, 0);
        // place a dynamic layer in the scene for the platform
        let platform = map.createDynamicLayer('platform', groundTiles, 0, 0);
        // let physics engine know in the above layer only tiles with a value in them will have collision
        platform.setCollisionByExclusion([-1]);
        // set physics world bounds (keeps player on screen)
        this.physics.world.bounds.width = platform.width;
        this.physics.world.bounds.height = platform.height;
        // place more dynamic layers in the scene  (however many we need)
        map.createDynamicLayer('layerOne', groundTiles, 17, 0);
        map.createDynamicLayer('layerTwo', groundTiles, 0, 0);
        map.createDynamicLayer('layerThree', groundTiles, 0, 0);
        // place the player sprite in the scene
        this.player = this.physics.add.sprite(75, 75, 'player');
        // set player bounce factor
        this.player.setBounce(0.5);
        // set collision against canvas borders to keep player on screen
        this.player.setCollideWorldBounds(true);

        this.anims.create({
            key: 'right',
            frames: this.anims.generateFrameNumbers('player', { start: 0, end: 4 }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'left',
            frames: this.anims.generateFrameNumbers('player', { start: 5, end: 9 }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'stop',
            frames: [ { key: 'player', frame: 4 } ], 
            frameRate: 10,
            repeat: -1
        });

        // set camera to follow the player
        this.cameras.main.startFollow(this.player, true, 0.05, 0.05);
        // let physics engine know which layer we want the player to collide with
        this.physics.add.collider(platform, this.player);
        // insert reticle into scene
        this.reticle = this.physics.add.sprite(800, 700, 'target');
        this.reticle.setOrigin(0.5, 0.5).setDisplaySize(25, 25).setCollideWorldBounds(true);
        // Pointer lock will only work after mousedown
            gObject.game.canvas.addEventListener('mousedown', function () {
            gObject.game.input.mouse.requestPointerLock();
        });

        // Exit pointer lock when Q or escape (by default) is pressed.
        this.input.keyboard.on('keydown_Q', function (event) {
            if (gObject.game.input.mouse.locked)
                gObject.game.input.mouse.releasePointerLock();
        }, 0, this);

        // Move reticle upon locked pointer move
        this.input.on('pointermove', function (pointer) {
            if (this.input.mouse.locked)
            {
                this.reticle.x += pointer.movementX;
                this.reticle.y += pointer.movementY;
            }
        }, this);
    }

    update(time, delta) {
        this.player.rotation = Phaser.Math.Angle.Between(this.player.x, this.player.y, this.reticle.x, this.reticle.y);
        this.reticle.body.velocity.x = this.player.body.velocity.x;
        this.reticle.body.velocity.y = this.player.body.velocity.y;
        this.player.setVelocityX(0);

        let cursors = this.input.keyboard.createCursorKeys();        

        if (cursors.left.isDown) {
            this.player.setVelocityX(-160);
            this.player.anims.play('left', true);
        }
        else if (cursors.right.isDown) {
            this.player.setVelocityX(160);
            this.player.anims.play('right', true);
        }
        else {
            this.player.anims.play('stop', true);
        }
        if (cursors.up.isDown && player.body.onFloor()) {
            //up key related
        }
        if (cursors.space.isDown) {
            //spacebar key related
        }
    }
}