Skip to content

[4.0.0-rc.5] TilemapGPULayer incompatible with camera movement #7207

@aroman

Description

@aroman

Moving the main camera works incorrectly when passing gpu: true to tilemap.createLayer().

See video demos below.

fyi @BenjaminDRichards

With gpu: false
https://github.com/user-attachments/assets/a1129ab7-0627-489b-b058-bf813cbf44e4

With gpu: true — NO OTHER CHANGES
https://github.com/user-attachments/assets/38e71446-2378-465a-808e-47a6d23115f8

Full repro code:

import mapJson from '@common/games/Quinoa/world/Tiled/map.json';
import Phaser from 'phaser';
import { BASE_URL } from '@/environment';

export class GroundScene extends Phaser.Scene {
  private controls: Phaser.Cameras.Controls.FixedKeyControl | null = null;
  public tilemap: Phaser.Tilemaps.Tilemap | null = null;
  private _oscillationStartTime: number | null = null;

  preload() {
    this.load.image('map', BASE_URL + '/assets/tiles/map.png');
    this.load.tilemapTiledJSON('map', mapJson);
  }

  create() {
    this.tilemap = this.make.tilemap({ key: 'map' });


    const tiles = this.tilemap.addTilesetImage('tiles', 'map');

    if (!tiles) {
      throw new Error('Tiles not found');
    }

    for (const layer of this.tilemap.layers) {
      if (!layer.visible) continue;
      this.tilemap.createLayer(layer.name, tiles, undefined, undefined, false);
    }
    this.cameras.main.useBounds = true;
    this.cameras.main.setBounds(
      0,
      0,
      this.tilemap.widthInPixels,
      this.tilemap.heightInPixels
    );

  }

  update(time: number, delta: number) {
    // Oscillate camera X position between -100 and +100
    const amplitude = 200;
    const period = 2000; // ms for a full oscillation (adjust as desired)
    if (!this._oscillationStartTime) {
      this._oscillationStartTime = time;
    }
    const t = (time - this._oscillationStartTime) % period;
    this.cameras.main.x = amplitude * Math.sin((t / period) * 2 * Math.PI);
    this.cameras.main.y =
      window.innerHeight + amplitude * Math.cos((t / period) * 2 * Math.PI);
    this.cameras.main.zoom = 0.2;
  }
}

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions