Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Black opaque background on transparent Phaser.Text textures in Phaser 4.2.1 on older iOS WebGL

Aperta Adatta ai principianti
  • Qualcosa non va?
#7,392 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
1/5
Tempo stimato
Meno di un'ora
Idoneità per principianti
85/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
javascript
Ambito
game-dev

Direzione di ricerca

Individua il file shader WebGL ApplyTint.glsl nell’albero dei sorgenti di Phaser. Aggiungi la clausola di ritorno anticipato fornita per i texel con alfa zero prima della divisione di demultiplicazione, per risolvere il problema dello sfondo nero opaco sui dispositivi iOS WebGL meno recenti. Verifica la correzione usando il codice di esempio incluso per il rendering del testo e conferma che il testo trasparente venga renderizzato correttamente.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Version

  • Phaser Version: 4.2.1
  • Operating system: iPad OS 16.4

Description

Problem
In our game Tvers (www.nrk.no/spill/tvers) we got reports from people playing on older iPads that there were black backgrounds behind out letter tiles after we upgraded to Phaser 4.2.1. We spent a lot of time trying to debug the behaviour and traced it to a division by zero issue in ApplyTint.glsl.

On older iOS devices (<= iPad OS 16.4), Phaser Text objects with black fill rendered on top of a transparent background show as black rectangles with faint aliased edges. On newer devices the transparency works as expected. In Phaser 3.8 this was not a problem.

Cause

The WebGL tint shader (ApplyTint.glsl) performs an unpremultiply of the text texture:

vec3 unpremultTexture = texture.rgb / texture.a;

Outside the character glyph, the canvas-generated texture stores pixels with RGB = 0 and alpha = 0. Dividing zero by zero results in undefined behavior (NaN or Infinity). How the shader handles that NaN varies between GPUs/drivers. On the affected devices it propagates, producing a visible opaque black rectangle instead of transparent.

Fix

Guard the division by returning early for zero-alpha texels:

if (texture.a <= 0.0) {
return vec4(0.0);
}
vec3 unpremultTexture = texture.rgb / texture.a;

Example Test Code

const textStyling = {

  fontSize: '80px',

color: 'black',

fontFamily: 'sans-serif',

fontStyle: 'bold',

padding: { x: 10, y: 10 },

}

const background = this.scene.add

      .image(0, 0, 'tile')

      .setTint(palette.boardSquare)

      .setTintMode(Phaser.TintModes.FILL)

const letter = this.scene.add.text(0, 0, this.letter, textStyling)

Phaser.Display.Align.In.Center(letter, background)
Lingua principale
JavaScript
Stelle
40.4k
Fork
7.2k
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di phaserjs/phaser

Tutte le issue di phaserjs/phaser

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.