Search code examples
javascriptcamerazoominggame-developmentphaser-framework

Zoom out camera while keeping text locked - Phaser 3


I'm making a sword game in which you have to collect coins to get big and you fight people. Here's what I have so far: Player gets bigger as he collects coins

Notice how the player gets bigger as it collects coins. After a while, you get so big that you cover the entire screen.

big player

I realized I have to zoom out the camera based on the players size.

This is what I have for camera (in create function)

this.cameras.main.startFollow(this.mePlayer);

I added this line of code before it: this.cameras.main.setZoom(0.5)

Now it turns like this. The text is all smaller and for some reason my tileSprite background breaks too.

enter image description here

Here is the code for the text.

        //killcounter
        this.killCount = this.add.text(window.innerWidth / 1.5, 0, 'Kills: 0', {
            fontFamily: 'Georgia, "Goudy Bookletter 1911", Times, serif'
        }).setFontSize(40).setDepth(101);
        this.killCount.scrollFactorX = 0
        this.killCount.scrollFactorY = 0

        //player+fpscounter
        this.playerCount = this.add.text(this.cameras.main.worldView.x*this.cameras.main.zoom, this.cameras.main.worldView.y*this.cameras.main.zoom, 'Players: 0' + "\nFPS: 0", {
            fontFamily: 'Georgia, "Goudy Bookletter 1911", Times, serif'
        }).setFontSize(20).setDepth(101);
        this.playerCount.scrollFactorX = 0
        this.playerCount.scrollFactorY = 0

this is the code for my camera

this.cameras.main.startFollow(this.mePlayer);

...and this is the code for my background

//in create function
        this.background = this.add.tileSprite(0, 0, window.innerWidth, window.innerHeight, 'background').setOrigin(0).setScrollFactor(0, 0);
        this.background.fixedToCamera = true;

//in update function
 this.background.setTilePosition(this.cameras.main.scrollX, this.cameras.main.scrollY);

Is there a way I can keep the text locked so that when the camera zooms out, it stays at the same position?


Solution

  • Thanks to samme for helping me solve this.

    In the end I created another camera called UICamera.

    I used the ignore function to ignore all of the game objects on that camera.

    And I ignored all the text, minimap, ui, and tilesprite background on the main camera.

    Then, to zoom out, I would just zoom out the main camera and adjust the tileSprite scale manually.

    See http://phaser.io/examples/v3/view/camera/ignore