Help with Scaling for Pixel Art

Phaser 3
1

Hi, I’m new to Phaser and game design in general. I have some questions about how to make my game look as I picture it.

Currently, I’m starting simple with free pixel art assets and trying to leverage Tiled to create a top-down adventure-style game. The issue is the assets I’m using are 16x16 pixels and this looks quite tiny on my 1920x1080 monitor and I’m not sure how you approach this problem. The way I see it, you can try to either 1) scale up the graphics to better fit modern resolutions (which creates portability problems if I ever wanted to test this game on a phone screen, for example) or 2) manipulate the camera to zoom as-needed depending on the resolution of the viewport)

This is my config for the game (and I’m still not sure if some of this is redundant or not):

let config = {
    parent: 'game',
    type: Phaser.CANVAS,
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
        min: {
            width: 740,
            height: 360
        },
        max: {
            width: 1280,
            height: 800
        }
    },
    pixelArt: true,
    zoom: 4,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 200 }
        }
    },
    callbacks: {
        postBoot: function (game) {
            game.scene.dump();
        }
    }
};

I set a min/max width and height because I figured there should be some limit based on what I think looks good for the game (although this is probably flawed thinking). I chose the min based on research of what the typical resolution for a phone screen is and scaled it up to a reasonable fit on a web browser.

I have the ‘zoom’ option set currently but it zooms in on the center of the viewport, making my game world (starting at 0, 0) out of view almost.

when I looked up the examples for Tiled, I saw this added to the scene:

this.cameras.main.setBounds(
            0,
            0,
            this.map.widthInPixels,
            this.map.heightInPixels
        );
this.physics.world.setBounds(
            0,
            0,
            this.map.widthInPixels,
            this.map.heightInPixels
        );

which I understand to be the dimensions of your Tiled map, effectively.

So the real question is this (I think):

  • Do I move the camera and keep the zoom somehow, so that it focuses on the center of the map (and if so, how)?
  • Or is there some other approach that I am ignorant of.

Thank you for your time :bowing_man: :bowing_man: :bowing_man:

2

Scale Manager zoom (config.zoom or config.scale.zoom) is different from camera zoom. It’s more of a whole-canvas zoom.

If you want to use Scale Manager zoom, it could be

let config = {
  // …
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: 256,
    height: 192,
    zoom: 4,
    min: {
      width: 185,
      height: 90
    },
    max: {
      width: 320,
      height: 200
    }
  },
  // …
};

If you don’t use Scale Manager zoom (and probably camera zoom instead) it would be

let config = {
  // …
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: 1024,
    height: 768,
    min: {
      width: 740,
      height: 360
    },
    max: {
      width: 1280,
      height: 800
    }
  },
  // …
};

then

this.cameras.main
  .setZoom(4)
  .setBounds(
    0,
    0,
    this.map.widthInPixels,
    this.map.heightInPixels
  )
  .centerToBounds()
  // OR
  .centerOn(X, Y)
  ;
3

@samme thanks a lot. that’s a good distinction to keep in mind going forward