What resolution is more suitable for game development?

Phaser 3
1

This issue seems to suggest that Phaser is not well-suited for higher resolutions, as it can also impact performance.
I was planning to create a match-3 game with a resolution of 1920X1080 (as many devices nowadays have high-definition screens).
Based on this issue, does it mean that Phaser is not ideal for higher resolutions?
Would it be better to set the resolution as 1280X1080 instead?

2

Not really It, depends on many factors:

  • the framerate you are aiming for (if you need 60fps with 1920X1080, this might not work well)
  • will you zoom in/out the visuals / Is pixel-art or pixelated Art okay or even wanted
  • what is your main target device (some device work better)
  • …

Smaller is better, but for highRes device you might need/want highRes assets, But most handheld devices have smallscreens, so those highRes Assets might not be appreciated.

I suggest making one asset in different dimensions/sizes, and using the scale to scale up, and check if it fits your wishes

Here a example how to scale up:

const config = {
    type: Phaser.AUTO,
    scale: {
        zoom: 5
    },
    scene: Example
};
1 Like
3

Thank you for your response. :grinning:

The background images provided to me by the artist are quite large, with a size of 3200x1920. （The artist also said they can provide me with resources at a resolution of 1280x720.）

My target devices are both computers and phones, and I would like to cater to both (although it seems unrealistic).

I will be scaling the images, and for general resources, I will use the setScale(0.5) function to resize them.
As for the background image,
I will use setDisplaySize(gameOptions.gameWidth, gameOptions.gameHeight) to handle it.

The artist told me that if they draw the image larger and then scale it down for display, it will appear clearer. I’m not sure if this is true.So he will draw it big and send it to me, and then I will resize it.

As for zoom, I rarely use this setting. This should be calculated using window.screen or other methods to adapt to different device sizes, in order to achieve a full-screen display. I generally use the following settings: autoCenter: Phaser.Scale.CENTER_BOTH and mode: Phaser.Scale.FIT, to ensure that the game can be scaled proportionally to the maximum size on all devices.

The resolution seems to depend on me and the artist.

Or maybe I haven’t fully understood the concept of resolution.
It seems that the resolution of phones is also increasing. i dont know …

4

Uff Well there are many points to unpack here. :slight_smile: First take this with a grain of salt because I’m not an expert, that said :slight_smile:

  • Yes it is true scaling down is always better than scaling up. Dependig on your art style svg assets might be an option, with svg scaling up or down is no issue. (checkout this quirky video, I saw a while back)

  • Fitting the game into the browser is always abit of an issue (due to the differen aspect ratio’s, pixel ratio’s, … of the screens/devices). For how to fit a phaser game on the screen, there are some good examples in the phaser example section or here is also an interesting answer on Stackoverflow that might be helpful.

  • Yes, the resolution depends on the art and how you much quality you want to show, but with phaser you should also see, if the resolution is high, if the framerate is still acceptable for you (since high resolutions might decrease fps)

  • Btw. Some Phones have higher resolutions due to a higher pixel ratio, but I’m not sure how this affects end result because the screens are also small, I would test on real devices, to be sure.

I hope my answer did help abit, happy coding :slight_smile:

1 Like