Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

141
Vistas
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?

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda