Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン 初心者向け
  • 何か問題がありますか？
#7,392 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 2 日以内に返信

まだ誰も着手していません。

評価

難易度
1/5
見積もり時間
1時間未満
初心者へのやさしさ
85/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
javascript
領域
game-dev

調査の方向性

Phaserのソースツリー内でWebGLシェーダーファイル ApplyTint.glsl を見つけてください。古いiOS WebGLデバイスで不透明な黒い背景が表示される問題を解決するため、非乗算除算の前に、アルファ値がゼロのテクセルに対する指定の早期リターンガードを追加してください。付属のテキスト描画サンプルコードを使って修正を検証し、透明なテキストが正しく描画されることを確認してください。

索引モデルが issue の本文から書いたものです。

説明

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)
主要言語
JavaScript
スター
40.4k
フォーク
7.2k
30日以内にマージされた PR はありません

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

phaserjs/phaser のほかの issue

phaserjs/phaser の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。