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?

Source: JavaSript – Stack Overflow

October 23, 2021
Category : News
Tags: camera | game-development | javascript | phaser-framework | zooming

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.