Trance

Scaling the canvas for pixel art

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

 

Share this post


Link to post
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!

Share this post


Link to post
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.

Share this post


Link to post
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;

 

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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. :(

Share this post


Link to post
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);

 

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites
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';
    }
  }
});

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.