Game appears squashed with pixel-canvas

[Tilde]

This has been making playtesting a real P in the A, so I decided to thread it. Phaser 2.4.3 solves a lot of problems for me, but at the same time, when I render my game using the method described in this tutorial:

 

http://www.photonstorm.com/phaser/pixel-perfect-scaling-a-phaser-game

 

I get this squashed output. (game container is in the center, notice the FPS counter in the lower-left)

 

 

The game is natively 320x320, scaled at 2x for 640x640. By tweaking the variables, I can un-squash the render, but it's still cropped to the squashed size. What's goin on?

[Tilde]

Can't let this die yet. Somebody else must be having this problem.

[MichaelD]

Are you doing something to scale or not-scale the viewport/canvas?

 

Can you post the part where you do the scalling?

[Tilde]

Pretty much all my code relevant to that is taken verbatim from the example:

(game.js)

var game = new Phaser.Game(320, 320, Phaser.CANVAS, '', {preload: preload});var pixel = {scale: 2, canvas: null, context: null, width: 0, height: 0};

function preload() {  game.stage.disableVisibilityChange = false;  game.canvas.style['display'] = 'none';  game.camera.roundPx = false;  game.state.add('Boot', Slapspark.Boot);  game.state.add('Preloader', Slapspark.Preloader);  game.state.add('Title', Slapspark.Title);  game.state.add('GameOver', Slapspark.GameOver);  game.state.add('Menu', Slapspark.Menu);  game.state.add('Level', Slapspark.Level);  game.state.start('Boot');}

(boot.js)

Slapspark.Boot.prototype = {  preload: function() {  //  Hide the un-scaled game canvas  //  Create our scaled canvas. It will be the size of the game * whatever scale value you've set  pixel.canvas = Phaser.Canvas.create(game.width * pixel.scale, game.height * pixel.scale);  //  Store a reference to the Canvas Context  pixel.context = pixel.canvas.getContext('2d');  //  Add the scaled canvas to the DOM  Phaser.Canvas.addToDOM(pixel.canvas, container);  //  Disable smoothing on the scaled canvas  Phaser.Canvas.setSmoothingEnabled(pixel.context, false);  //  Cache the width/height to avoid looking it up every render  pixel.width = pixel.canvas.width;  pixel.height = pixel.canvas.height;  game.time.advancedTiming = true;  game.stage.backgroundColor = '#000000';  game.stage.smoothed = false;  game.state.start('Preloader');  },  create: function() {  },  update: function() {    }};

(all gamestates)

render: function() {  pixel.context.drawImage(game.canvas, 0, 0, game.width, game.height, 0, 0, pixel.width, pixel.height);},

[drhayes]

Later versions of Phaser are "better" at scaling pixel art if you let it know that's what you want:

Phaser.Canvas.setImageRenderingCrisp(this.game.canvas);Phaser.Canvas.setSmoothingEnabled(this.game.context, false);this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

Add this to your boot state and remove all that stuff Rich wrote about maintaining two canvases. You should be good.

 

I was doing the same thing but I *think* that got fixed in 2.4.1 so I got to remove it from my game.

[Tilde]

Sorry man, I'm confused. When you say "all that stuff Rich wrote", what are you referring to? Because it seems like all this code relates to the two-canvas structure.

EDIT: I looked up the ScaleManager stuff and it seems to be way better at managing everything. I'll see if I can get rid of the two-canvas structure entirely and use ScaleManager to achieve what I want, but it's very important that my game still reads as 320x320, NOT the scaled-up size.

[drhayes]

Nope, I'm sorry! Your code looked a lot like code Rich posted for the GameBoy jam ages ago. I captured it in a gist here: https://gist.github.com/drhayes/ff53b78cceea1cc1b211

 

And hopefully it works for you. My game is 320x240 and scales up great using the CANVAS renderer to any sized browser window without losing crispness. And it's definitely still 320x240, as in my 16x16 tile worlds show on one screen if the level is 20x15 (yay math).