TileSprite

La TileSprite è uno sprite con una texture ripetuta. Perfetta per creare sfondi infiniti e l'effetto parallasse.

this._tile1 = this.add.tileSprite(x, y, width, height, "bg1");

Effetto parallasse

L'effetto parallasse simula la profondità facendo scorrere più livelli di sfondo a velocità diverse. Più un livello è "lontano", più si muove lentamente.

Ogni livello è una texture tileable separata. Nell'esempio qui sotto: nuvole (sfondo lontano), montagne (intermedio) e alberi (in primo piano).

Dichiara le variabili prima del costruttore:

private _tile1: Phaser.GameObjects.TileSprite;
private _tile2: Phaser.GameObjects.TileSprite;
private _tile3: Phaser.GameObjects.TileSprite;

Inizializzale nel create():

this._tile1 = this.add.tileSprite(0, 0, 1024, 450, "bg1").setOrigin(0);
this._tile2 = this.add.tileSprite(0, 0, 1024, 450, "bg2").setOrigin(0);
this._tile3 = this.add.tileSprite(0, 50, 1024, 450, "bg3").setOrigin(0);

Nell'update() muovile a velocità progressivamente crescenti:

update(time: number, delta: number): void {
  this._tile1.tilePositionX += 0.2; // sfondo lontano — lento
  this._tile2.tilePositionX += 0.4; // sfondo intermedio
  this._tile3.tilePositionX += 0.6; // sfondo vicino — veloce
}

Proprietà aggiuntive

tileRotation — ruota la texture ripetuta (in radianti), indipendentemente dalla rotazione del TileSprite nel mondo.

this._tile1.tileRotation = Math.PI / 4; // 45 gradi

Combinato con tilePositionX/tilePositionY nell'update(), permette sfondi con texture che scorrono in diagonale o ruotano.

.setCrop()

Come gli altri gameObject con texture, anche la TileSprite supporta il crop: mostra solo una porzione della texture ripetuta.

this._tile1.setCrop(0, 0, 400, 450); // mostra solo i primi 400px di larghezza
this._tile1.setCrop(); // nessun argomento: rimuove il crop

Phaser LabsLIVE

Prova tutto dal vivo — centinaia di esempi interattivi

Phaser Labs raccoglie esempi funzionanti per ogni argomento del corso. Copia, modifica, sperimenta — direttamente nel browser.

Apri gli esempi della classe TILESPRITE

Sh4rk0

La parallasse è uno di quei trucchi visivi che trasformano uno sfondo piatto in uno spazio tridimensionale — e in Phaser si implementa in cinque righe.

Il principio è semplicissimo: le cose lontane si muovono lento, le cose vicine si muovono veloce. Il cervello umano interpreta automaticamente questa differenza di velocità come profondità. Stai ingannando gli occhi del giocatore, e lui ti ringrazierà per questo.

Tip pratico: inizia sempre con 0.2 / 0.4 / 0.6 come valori di velocità. Se sembra troppo lento, raddoppia tutto. Se sembra un frullatore, dimezza. Non cercare la formula perfetta — fidati dell'occhio. 🌄