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)


I added this line of code before it:

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.

        this.killCount = this.add.text(window.innerWidth / 1.5, 0, 'Kills: 0', {
            fontFamily: 'Georgia, "Goudy Bookletter 1911", Times, serif'
        this.killCount.scrollFactorX = 0
        this.killCount.scrollFactorY = 0

        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'
        this.playerCount.scrollFactorX = 0
        this.playerCount.scrollFactorY = 0

this is the code for my camera


…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.