Scaling the canvas for pixel art

[Trance]

I'm trying to scale the whole Canvas up by 4x, for the purposes of a a pixel art styled game. I'm attempting to use the method outlined here: https://www.belenalbeza.com/articles/retro-crisp-pixel-art-in-phaser/

However, I can't seem to find the equivalent objects in Phaser 3. Could anyone point me in the right direction please?

[STuFF]

it's much more easier with Phaser 3

in you config, just add:

pixelArt: true,
zoom: 4,

pixelArt option to true will prevent the texture to blur when scaled, and zoom will scale your whole game.
here is the game I'm working on. It's designed in a 128 x 96 resolution, and is scaled up 5 times, it works like a charm!

const config = {
  type: Phaser.WEBGL,
  width: 128,
  height: 96,
  parent: 'game',
  backgroundColor: '#1b2632',
  zoom: 5,
  pixelArt: true,
  physics: {
    default: 'arcade',
    arcade: {
      tileBias: 4,
      gravity: { y: 250 },
    }
  },
};

 

[Trance]

Wow... I never imagined it would be that simple!

I'm struggling a little finding the right resources to research questions like this for myself, with Phaser 3 being so new, and the documentation being a little sparse right now. So thank you for the pointer!

[STuFF]

yes it's very complicated to get resources on Phaser 3. There's a lot of noise because of Phaser 2, and the documentation is not totally written currently. I've read a bit the dev log since the beginnig and the pixelArt thing was mentionned here https://phaser.io/phaser3/devlog/116.

The best thing to find "hidden" features for me is to read the source code, I've found the zoom parameter reading the source. It's not very easy to read such a big code, but it's well architectured.

[robmuh]

Hey guys, this almost answers the question I (and others) had about scaling the whole game. Basically the equivalent to this from Phaser 2.0 that works beautifully to make a game canvas scale up to whatever the window or device size is. Any clues? (So far reading through the source have not found.)

  this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  this.scale.pageAlignHorizontally = true;
  this.scale.pageAlignVertically = true;

 

[Trance]

On 3/24/2018 at 11:09 PM, STuFF said:

The best thing to find "hidden" features for me is to read the source code, I've found the zoom parameter reading the source. It's not very easy to read such a big code, but it's well architectured.

Yeah, reading the source code has been invaluable. It does seem very well-structured, but my JavaScript is rusty enough to make it difficult to follow at times!

Re. the canvas scaling... do you know if it would be possible to set this option per-scene, or even just to poke some properties somewhere to change it on the fly? Setting it once in the game config is great, but ideally I'd like more control.

[snowbillr]

@robmuh I don't believe there is a ScaleManager yet for v3. I think that's one of the things that will be released in a later update.

[robmuh]

I actually found a solution in Emanuelle's code in this resize function (apart from Phaser):

function resize() {
    let canvas = document.querySelector("canvas");
    let width = window.innerWidth;
    let height = window.innerHeight;
    let wratio = width / height;
    let ratio = C.width / C.height;
    if (wratio < ratio) {
        canvas.style.width = width + "px";
        canvas.style.height = (width / ratio) + "px";
    } else {
        canvas.style.width = (height * ratio) + "px";
        canvas.style.height = height + "px";
    }
}

window.onload = () => {
  new Phaser.Game(C)
  resize()
  window.addEventListener("resize",resize,false)
}

Adjust to taste. Works wonderfully and actually makes me realize having a work around implemented in Phaser itself is actually unnecessary.

[Trance]

This is what I've tried so far, in the Create() of my second scene, to reset the zooming from 4 back to 1: -

game.canvas.width = 1280;
game.canvas.height = 800;
game.canvas.style.width = "";
game.canvas.style.height = "";
game.renderer.resize(1280, 800, 1);

The result is that the zooming is turned off, but I still only get a tiny portion of the screen being rendered up in the top-left. Any idea what property I might be missing to make this work?

[robmuh]

So far the only thing that has truly worked consistently for me has nothing to do with Phaser at all. It is the `resize()` function I posted just before your post. Sorry I don't have more answers for you.

[Trance]

8 minutes ago, robmuh said:

So far the only thing that has truly worked consistently for me has nothing to do with Phaser at all. It is the `resize()` function I posted just before your post. Sorry I don't have more answers for you.

Thanks @Robmuh, but we're asking different questions. I'm trying to zoom the canvas to get a pixel art effect. So far nothing seems to work, I think I'm just going to have to scale all of my art manually.

[Trance]

@STuFF now I try out the PixelArt thing, it doesn't seem to work at all for me. I still get anti-aliased textures rather than crisp pixels with the config below. What am I doing differently to you? Are you definitely getting crisp pixels with this setup?

var config = {
	type: Phaser.AUTO,
	width: 320,
	height: 200,
	zoom: 4,
	pixelart: true
};
var game = new Phaser.Game(config);

 

[PixelPicoSean]

`pixelArt: true` instead of `pixelart: true` ?

[Trance]

Aww dammit, I hate JavaScript. Thank you!

[ClueJSLess]

On 3/24/2018 at 10:15 PM, STuFF said:

it's much more easier with Phaser 3

in you config, just add:

pixelArt: true,
zoom: 4,

Hello,

 I have to bring up this topic again.. "zoom:" doesn'T seem to do anything for me, I don't have a clue why (using Phaser 3.15).

My config:

 

const config = {
    type: Phaser.AUTO, 
    width: 640,
    height: 480,
    pixelArt: true,
    zoom: 2,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 300 },
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

Any ideas why? No matter which value I put in for the zoom parameter.. with or without a declared <canvas> element in the surrounding html file.. nothing helps.. 

Thanks!

[samme]

phaser/issues/4048

[ClueJSLess]

So it has been removed and the scale manager will handle this in the future... thaaanks!

[samme]

var ZOOM = 2;

new Phaser.Game({
  callbacks: {
    postBoot: function (game) {
      var config = game.config;
      var style = game.canvas.style;
      style.width = (ZOOM * config.width) + 'px';
      style.height = (ZOOM * config.height) + 'px';
    }
  }
});

 

[ByteFury]

My solution. User always sees 12 tiles in height (tile size is 32x32). 

JS:

  const TILE_SIZE = 32
  const SCREEN_SIZE = 12 // NUMBER OF TILES

  const width = window.innerWidth
  const height = window.innerHeight

  if (width >= height) {
    const gameHeight = SCREEN_SIZE * TILE_SIZE
    const gameWidth = Math.floor(width / (height / gameHeight))
    window.game.scale.resize(gameWidth, gameHeight)

  } else {
    const gameWidth = SCREEN_SIZE * TILE_SIZE
    const gameHeight = Math.floor(height / (width / gameWidth))
    window.game.scale.resize(gameWidth, gameHeight)
  }

HTML:

    body {
      overflow: hidden;
    }
    canvas {
      margin: 0;
      width: 100%;
      height: 100%;
    }