Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

flipY renders tile incorrectly

Open Beginner friendly
  • Is something wrong?
#7,382 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 2 days

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
75/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript
Domain
computer-graphics, game-dev

Research direction

The bug is in src/renderer/webgl/renderNodes/transformer/TransformerTile.js where flipY incorrectly modifies x instead of y. Start by examining the file to understand the tile rendering logic. Run the provided test code to see the visual issue. After fixing the line, verify that the tile positions remain correct and flipping works as expected.

Written by the indexing model from the issue text.

Description

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

Dominant language
JavaScript
Stars
40.4k
Forks
7.2k
No merged PRs in 30d

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from phaserjs/phaser

All issues in phaserjs/phaser

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.