Jump to content

Anchoring one image to another


Linzeestomp
 Share

Recommended Posts

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
        }
    }
}

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...