TileSprites still smooth with pixelArt: true

Phaser 3
1

I’ve been at this for hours.

My TileSprites smooth when scaled. I don’t want that behaviour. I’ve tried pixelArt: true, antialias: false, roundPixels: true, which all have no effect on TileSprites when they’re scaled.

It’s weird because I effectively use the same code as the TileSprite Pixel Art example.

Here’s my current code. I’m only including relevant bits.

/* globals Phaser */

const defaultConfig = {
    type: Phaser.AUTO,
    parent: "game",
    width: 800,
    height: 600,
    physics: {
        default: "arcade",
        arcade: {
            gravity: { y: 500 },
            debug: true
        }
    },
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.NO_CENTER
    },
    pixelArt: true,
    render: {
        antialias: false,
        pixelArt: true,
        roundPixels: true
    }
};

class Game
{
    constructor(config = {})
    {
        this.game = new Phaser.Game(Object.assign({}, defaultConfig, config));
        this.game.scene.add("main", MainScene, true);
    }
}

class ParallaxManager
{
    constructor() { }

    preload(scene)
    {
        scene.load.image("background_01", "assets/parallax-mountain-bg.png");
        scene.load.image("parallax_01_mountain_01", "assets/parallax-mountain-montain-far.png");

        // ...
    }

    create(scene)
    {
        // THIS DOESN'T WORK WITH PIXELART WHEN SCALED
        this.sky = scene.add.tileSprite(scene.scale.width / 2, scene.scale.height / 2, 272 * 4, 160 * 4, "background_01");
        // this.sky.setTileScale(4);
        this.sky.tileScaleX = 4;
        this.sky.tileScaleY = 4;

        this.furthest = scene.add.tileSprite(scene.scale.width / 2, scene.scale.height * .4, 272 * 3, 160 * 3, "parallax_01_mountain_01");
        this.furthest.setTileScale(3);

        // ...

        Game.ground = scene.physics.add.staticGroup();
        Game.ground.create(scene.scale.width / 2, scene.scale.height, "ground")
            .setScale(2, 5)
            .refreshBody();
    }

    update(scene)
    {
        // ...
    }
}

class MainScene extends Phaser.Scene
{
    _createProgressBar()
    {
        // ...
    }

    _initializePlayer()
    {
        // THIS WORKS WHEN SCALED WITH PIXELART
        Game.player = this.physics.add.sprite(this.scale.width / 2, this.scale.height / 2, "player_idle");
        Game.player.setScale(3);

        // ...
    }

    _handlePlayerInput()
    {
        // ...
    }

    constructor(config)
    {
        Game.parallax = new ParallaxManager();

        super({
            roundPixels: true,
            pixelArt: true
        });
    }

    init(data) { }

    preload()
    {
        this._createProgressBar();

        Game.parallax.preload(this);

        this.load.image("ground", "assets/platform.png");

        // Load Player sprites
        this.load.spritesheet("player_idle", "assets/Player/Idle/idle.png", {
            frameWidth: 20, frameHeight: 190 / 5
        });
        this.load.spritesheet("player_move", "assets/Player/Run/run.png", {
            frameWidth: 57 / 3, frameHeight: 112 / 3
        });
    }

    create()
    {
        Game.parallax.create(this);

        // ...
    }

    update()
    {
        Game.parallax.update(this);

        // ...
    }
}

export default Game;

Please let me know if there’s anything I can do to remedy this.

EDIT: Here’s a snapshot of what the game currently looks like:

image
image862×646 66.6 KB

And here’s a snapshot of what the scene should look like:

image
image663×663 3.9 KB

2

Alright. I changed my game config to use type: Phaser.CANVAS and now it works. The thing is that the game now runs very slow. I tried adding the following the config (which does nothing, as expected):

fps: {
    min: 30,
    target: 60
}

So the question remains: How do I get my TileSprites to render like Pixel Art using WebGL?

3

Try removing { mode: Phaser.Scale.FIT }.

4

That has no effect :frowning:

5

Make sure the tiling texture has power-of-two dimensions.

1 Like
6

image

I’ve tried doing that. Here’s my Sky texture, which is 160x160. It still doesn’t render as pixel art when scaled up. It still ends up the same way as the picture in my original post.

Unless you mean something else when you said power-of-two, in which case I’d love for you to elaborate.

7

Pad it so it’s 256 × 256 and see if it makes a difference.

256x256

1 Like
8

That fixed it. Seems like such an obscure thing to make sure to do only with tilesprites.
Thanks a lot, @samme.

1 Like
9

It’s explicitly documented. The reason it’s required is that WebGL 1 has limitations on what parameters you can use on an NPOT texture. One of the requirements is to use the “clamp to edge” wrapping mode, which infinitely repeats the edges as opposed to tiling the texture. In order to use the “repeat” wrapping mode, you need a POT texture, which doesn’t have the limitations of an NPOT one.

1 Like