In Phaser 3 ui objects are out of the scene because of the camera

Phaser 3
1

I am making a platform game and my camera follows the player, the buttons or ui objects I put on the stage come out of the angle of the camera because the camera follows the player, for example, when the player comes down the platform, my button stays above.

I tried setScroll but it didn’t work.

And also while the camera is following the player, everywhere outside of my tiledmap on your field is black empty and how do I prevent this, should I make my map bigger or is there another solution, for example I wanted to try setBounds but I was not successful because I cannot add setBounds when my camera is following the player.

import { Scene } from "phaser";

import Scenes from "../";
import LevelManager from "../../managers/levelManager";
import Player from "../../objects/player";
import Banana from "../../objects/banana";
import { getObjectsByType } from "../../utils/tilemap.helpers";
import GameManager from "../../managers/gameManager";
import EnemyA from "../../objects/enemyA";
import EnemyB from "../../objects/enemyB";
import { IconBtn } from "../../ui";
import { UIManager } from "@games/common/managers";

export default class Level1Scene extends Scene {
  public uiManager!: UIManager;
  // tilemap
  private declare map: Phaser.Tilemaps.Tilemap;

  // tilesets
  private declare groundTileset: Phaser.Tilemaps.Tileset;
  private declare propsTileset: Phaser.Tilemaps.Tileset;

  // tilemap layers
  private declare bgLayer: Phaser.Tilemaps.TilemapLayer;
  private declare groundLayer: Phaser.Tilemaps.TilemapLayer;
  private declare propsLayer: Phaser.Tilemaps.TilemapLayer;

  //Actors
  private declare player: Player;
  private declare bananas: Phaser.GameObjects.Group;
  private declare enemiesA: Phaser.GameObjects.Group;
  private declare enemiesB: Phaser.GameObjects.Group;
  private declare cursors?: Phaser.Types.Input.Keyboard.CursorKeys;
  constructor() {
    super({
      key: Scenes.Level1Scene.key,
    });
    this.hitEnemy = this.hitEnemy.bind(this);
    this.uiManager = new UIManager();
  }

  init(props: any) {
    const { levelLoaded } = props;
    levelLoaded();
    console.log(LevelManager.instance.currentLevel + "11111111111111111");
    this.cursors = this.input.keyboard?.createCursorKeys();
    GameManager.instance.setScene(this);
  }

  create() {
    this.createPlayer();
    this.cameras.main.startFollow(this.player);
    this.cameras.main.setZoom(1.5);
    this.createTiles();
    this.createLayers();
    this.createBananas();
    this.createEnemies();
    this.createOverlaps();
    this.createUI();
    GameManager.instance.setScore(10);
  }

  update(time: number, delta: number): void {
    this.player.update();
    this.physics.collide(this.player, this.groundLayer);
    this.physics.collide(this.player, this.propsLayer);
    this.physics.collide(this.enemiesA, this.groundLayer);
    if (!LevelManager.instance.levelLoading) {
      if (this.cursors?.right.isDown) {
        LevelManager.instance.advanceLevel(Scenes.Level2Scene.key);
      }
    }
    this.bananas.getChildren().forEach((b) => b.update);
  }

  private createTiles(): void {
    this.map = this.make.tilemap({
      key: "level2",
    });

    this.map.setCollision([2]);
    this.propsTileset = this.map.addTilesetImage("props")!;
    this.groundTileset = this.map.addTilesetImage("ground")!;
  }

  private createLayers() {
    this.propsLayer = this.map.createLayer("props", this.propsTileset, 0, 0)!;
    this.groundLayer = this.map.createLayer(
      "ground",
      this.groundTileset,
      0,
      0
    )!;
    this.propsLayer.setCollisionBetween(293, 295);
  }

  private createPlayer() {
    this.player = Player.create(this);
  }

  private hitBanana(b: any, c: any) {
    (c as Banana).collect();
  }

  private hitEnemy(b: any, a: any) {}

  private createBananas() {
    this.bananas = this.physics.add.group({
      immovable: true,
      allowGravity: false,
    });
    const bananas = getObjectsByType("banana", this.map, "objects");
    bananas.forEach((b) => {
      this.bananas.add(
        new Banana({
          key: "banana",
          scene: this,
          texture: "banana32",
          x: b.x,
          y: b.y,
        })
      );
    });
  }

  private createEnemies() {
    //Create enemiesA
    this.enemiesA = this.physics.add.group({
      immovable: true,
      allowGravity: false,
    });
    const enemiesA = getObjectsByType("enemyA", this.map, "enemiesA");

    enemiesA.forEach((a) => {
      this.enemiesA.add(
        new EnemyA({
          key: "enemy",
          scene: this,
          texture: "enemyA",
          x: a.x,
          y: a.y - 16,
        })
      );
    });

    //Create enemiesB
    this.enemiesB = this.physics.add.group({
      immovable: true,
      allowGravity: false,
    });
    const enemiesB = getObjectsByType("enemiesB", this.map, "enemiesB");

    enemiesB.forEach((a) => {
      this.enemiesB.add(
        new EnemyB({
          key: "enemy",
          scene: this,
          texture: "enemyB",
          x: a.x,
          y: a.y - 16,
        })
      );
      ("");
    });
  }

  private createOverlaps() {
    this.enemiesA.getChildren().forEach((a) => {
      this.physics.add.collider(this.player, this.enemiesA, this.hitEnemy);
    });

    this.enemiesB.getChildren().forEach((a) => {
      this.physics.add.collider(this.player, this.enemiesB, this.hitEnemy);
    });

    this.bananas.getChildren().forEach((b) => {
      this.physics.add.overlap(this.player, b, this.hitBanana, undefined, this);
    });
  }

  private createUI(): void {
    this.uiManager.add(
      "pauseBtn",
      () =>
        new IconBtn(this, 16, 16, "pauseBtn", () => {
          GameManager.instance.onPauseGame();
        })
    );
  }
}
2

Use setScrollFactor(0, 0).

Usually,

this.cameras.main.setBounds(
  0, 
  0, 
  this.map.widthInPixels, 
  this.map.heightInPixels
);