Jump to content

Scaling the canvas for pixel art


Trance
 Share

Recommended Posts

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 },
    }
  },
};

 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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. :(

Link to comment
Share on other sites

@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);

 

Link to comment
Share on other sites

  • 6 months later...
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!

Link to comment
Share on other sites

  • 2 years later...

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%;
    }

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...