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

flipY renders tile incorrectly

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

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

評価

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

調査の方向性

バグは src/renderer/webgl/renderNodes/transformer/TransformerTile.js にあり、flipY が誤って y ではなく x を変更しています。まず、ファイルを調べてタイルのレンダリングロジックを理解してください。提供されたテストコードを実行して、視覚的な問題を確認します。行を修正した後、タイルの位置が正しく保たれ、反転が期待通りに機能することを確認してください。

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

説明

Version

  • Phaser Version: 4.2.1
  • Operating system: Arch Linux
  • Browser: n/a

Description

flipY seems to displace tiles to an incorrect position when displayed.

src/renderer/webgl/renderNodes/transformer/TransformerTile.js:

    var x = - halfWidth;
        var y = - halfHeight;

        if (element.flipX)
        {
            width *= -1;
            x += frameWidth;
        }

        if (element.flipY)
        {
            height *= -1;
            x += frameHeight;
        }

verified that changing x+= frameHeight; to y+= frameHeight; under flipY fixes the issue.

Example Test Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Phaser Tile flipY Bug</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
</head>
<body>
<script>
const config = {
    type: Phaser.WEBGL,
    width: 640,
    height: 480,
    scene: {
        create
    }
};

new Phaser.Game(config);

function create()
{
    // Create a 2-tile, 16x16 tileset.
    const canvas = document.createElement('canvas');
    canvas.width = 32;
    canvas.height = 16;

    const ctx = canvas.getContext('2d');

    // Tile 0: empty
    ctx.fillStyle = '#222';
    ctx.fillRect(0, 0, 16, 16);

    // Tile 1: asymmetric shape so vertical flipping is obvious.
    ctx.fillStyle = '#00ff00';
    ctx.fillRect(16, 0, 16, 4);
    ctx.fillRect(16, 0, 4, 16);

    canvas.toBlob(blob =>
    {
        const url = URL.createObjectURL(blob);

        this.textures.addImage(
            'tiles',
            new Image()
        );

        const image = new Image();

        image.onload = () =>
        {
            this.textures.remove('tiles');
            this.textures.addImage('tiles', image);

            runTest(this);
        };

        image.src = url;
    });
}

function runTest(scene)
{
    const map = scene.make.tilemap({
        data: [
            [1, 1]
        ],
        tileWidth: 16,
        tileHeight: 16
    });

    const tileset = map.addTilesetImage(
        'tiles',
        'tiles',
        16,
        16,
        0,
        0
    );

    const layer = map.createLayer(
        0,
        tileset,
        60,
        40
    );

    // Flip only the right tile vertically.
    const tile = layer.getTileAt(1, 0);

    tile.flipY = true;

    // Expected tile boundaries.
    const graphics = scene.add.graphics();

    graphics.lineStyle(1, 0xff0000);
    graphics.strokeRect(60, 40, 16, 16);
    graphics.strokeRect(76, 40, 16, 16);

    scene.add.text(
        60,
        70,
        'flipY should not change tile position',
        {
            fontSize: '12px',
            color: '#ffffff'
        }
    );
}
</script>
</body>
</html>

Additional Information

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

環境構築

はじめの一歩

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

phaserjs/phaser のほかの issue

phaserjs/phaser の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

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

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