correct way to set mipmapFilter

Question

Fiddle to test here: https://jsfiddle.net/oz9p5jx3/4/

Even setting mipmapFilter in many places I'm still getting sprite pixelated.

var config = {
  backgroundColor :'#000000',
  scene           :SceneRoot,
  banner          :false,
  type            :Phaser.WEBGL,
  mipmapFilter    :'LINEAR_MIPMAP_LINEAR',
  renderer: {
    mipmapFilter: 'LINEAR_MIPMAP_LINEAR',
  },
  render:{
    pixelArt     :false,
    roundPixels  :true,
    antialiasGL  :true,
    antialias    :true,
    mipmapFilter :'NEAREST_MIPMAP_LINEAR',
  },
  scale:{
    autoRound  :true,
    parent     :'phaser',
    width      :window.innerWidth,
    height     :window.innerHeight,
    mode       :Phaser.Scale.FIT,
    autoCenter :Phaser.Scale.CENTER_BOTH,
  },
  // ...
}

So I add a sprite with original 480x480 pixels image and set displaySize to 80x80.

this.load.image('emoji', './../../assets/emoji.png');

// ...

this.sprite = this.scene.add.sprite(0, 0, 'emoji').setOrigin(0.5, 1).setDepth(11);
this.add(this.sprite);
this.sprite.setDisplaySize(80, 80);

And get this result (screenshot):

Here's the original image:

Am I doing something wrong?

Answer 1

Not sure if this is still an issue with you, but i believe mipmaps are only used if your image dimensions are powers of 2.

It looks like your original image is 480x480, so I dont think Phaser/WebGL is generating mipmaps for it.

If you re-export the image at 512x512 or just add canvas padding (i.e. in Photoshop) to 512x512, I think you'd see the mipmaps working.

However, you're also scaling to an uneven amount (80 / 480 = 0.1666666667). So, even with mipmaps, my expectation is it'd be blurry.