TilemapGPULayer is drawn at twice its x/y (position applied twice)

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

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

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

評価

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

調査の方向性

src/renderer/webgl/renderNodes/submitter/SubmitterTilemapGPULayer.js を開いて run を読む: スプライト行列は applyITRS を介してレイヤーの位置を適用し、次に calcMatrix.setQuad(x, y, x + width, y + height, quad) がそれを2度目に平行移動する。Canvas/WebGL の TilemapLayer パスと比較して、原点は行列からのみ来るべきであることを確認し、次に quad が 0,0 から始まるように変更する。issue 内のデモで検証する。そこでは (100,160) の GPU レイヤーが非 GPU レイヤーとまったく同じように白いマーカーの上に位置するはずである。スケーリングと、原点がゼロでない tilemap も確認する。

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

説明

Version

  • Phaser Version: 4.2.1 (also on master today)
  • Operating system: Linux
  • Browser: Chrome 149 (WebGL 2 via ANGLE)

Description

A TilemapGPULayer placed anywhere but 0,0 is drawn in the wrong place: its x/y are applied twice. Unscaled, a layer created at (100, 160) is drawn at (200, 320); with a scale it lands at x + scaleX * x, e.g. a layer at (300, 120) with scale 0.25 is drawn at (375, 150).

In SubmitterTilemapGPULayer.run (src/renderer/webgl/renderNodes/submitter/SubmitterTilemapGPULayer.js), the sprite matrix already translates by the layer's position:

spriteMatrix.applyITRS(x, y, 0, tilemapLayer.scaleX, tilemapLayer.scaleY);
calcMatrix.multiply(spriteMatrix);

and then the quad is built from the position again:

calcMatrix.setQuad(x, y, x + width, y + height, quad);

Expected: a TilemapGPULayer at (x, y) is drawn where a TilemapLayer at (x, y) is.
Actual: it's drawn at (x + scaleX·x, y + scaleY·y).

Fix (tested against the example below with a patched dist/phaser.js; the layer then lands on its marker):

calcMatrix.setQuad(0, 0, width, height, quad);

Example Test Code

A plain two-tile tileset (no margin or spacing). The white squares mark where each layer's top-left should be. The TilemapLayer (top) sits on its marker; the TilemapGPULayer (created at 100,160) is drawn at 200,320.

<!doctype html>
<html><body style="margin:0">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
<script>
class Demo extends Phaser.Scene {
  create() {
    const tex = this.textures.createCanvas('tiles', 64, 32);
    const ctx = tex.getContext();
    ctx.fillStyle = '#e33'; ctx.fillRect(0, 0, 32, 32);
    ctx.fillStyle = '#36f'; ctx.fillRect(32, 0, 32, 32);
    tex.refresh();
    const data = [[0, 1, 0, 1]];
    for (const [gpu, x, y] of [[false, 100, 60], [true, 100, 160]]) {
      const map = this.make.tilemap({ data, tileWidth: 32, tileHeight: 32 });
      map.createLayer(0, map.addTilesetImage('tiles'), x, y, gpu);
      this.add.rectangle(x, y, 8, 8, 0xffffff);
    }
  }
}
new Phaser.Game({ type: Phaser.WEBGL, width: 600, height: 400, backgroundColor: '#222', scene: Demo });
</script>
</body></html>

Additional Information

Workaround: keep TilemapGPULayers at 0,0 (scaling about the origin is then fine).

主要言語
JavaScript
スター
40.7k
フォーク
7.2k
30日以内にマージされた PR はありません

環境構築

はじめの一歩

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

phaserjs/phaser のほかの issue

phaserjs/phaser の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

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

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