Pixelization when using Phaser.ScaleManager.RESIZE vs Phaser.ScaleManager.SHOW_ALL

I have a game where I am using RESIZE to set the canvas to full browser width/height and then scaling a group that contains the game elements(based on 620x1024 sizing) to fill the height(but keeping aspect ratio) using:

this.gameAreaGroup.scale.setTo(this.scalePercent, this.scalePercent);

The images get pixeled and not smoothed it seems. If I switch to using SHOW_ALL the images get smoothed out and look great. The issue is that I need access to the full browser width which SHOW_ALL doesn’t allow.

Any ideas why I’m getting the pixelization?

As an edit to the above I do notice that SHOW_ALL keeps the canvas size the same(620x1024) where RESIZE the canvas size is the actual size of the window. Can I keep SHOW_ALL and then dynamiclly change the canvas with from 1024 to the width relative to 620 tall?

In this case are you also scaling the group?

I wouldn’t expect a scaled group to appear jaggy unless the antialias settings are changed.

You can try using NO_SCALE and then resizing the canvas manually to your criteria.

I am scaling the group. For some reason allowing the css to scale the canvas(which is what SHOW_ALL is doing) results in smoother images then setting the canvas size to full width/height(RESIZE) and then scaling the group holding the active game items. I will try NO_SCALE but it seems like it would have the RESIZE issue. What I’ve ended up doing is using SHOW_ALL with a fixed height and then calculating the canvas width relative to aspect ratio and manually resetting the canvas width.

If that works then there’s probably no need to switch to NO_SCALE, you would just be doing the same thing manually.

If you look at https://samme.github.io/phaser-examples-mirror/groups/group%20scale.html there’s no pixelation I think.