Scaling

[Deathspike]

I have a game that I initialize like this:

 

let game = new Phaser.Game(864, 486, Phaser.CANVAS, 'content');

 

So a canvas is created with 864x486 dimensions.

 

Now I want to show just a smaller part of the map (320x240) that is stretched up to the full size of the container. Essentially, I want to make smaller graphics appear larger to have the typical 8-bit SNES feeling. How do I go about doing this?

 

EDIT: Setting anti alias to off in the game constructor and following fariazz instructions *DOES* work. I actually had a flipped animation that is a different problem entirely. Following that up at http://www.html5gamedevs.com/topic/14705-blurry-sprite-when-flipped-on-x-axis/#entry83578

Edited May 22, 2015 by Deathspike

[fariazz]

When you create the Phaser.Game object, the size you enter there is the size of the game view in pixels, it's not necessarily the size will be shown. Depending on the Scale Manager options you enter when you initiate the game, it will show that size or it will stretch to occupy all the screen area.

 

If you do:

game = new Phaser.Game(320, 240, Phaser.CANVAS, 'content');

And then on your game state init or create method:

this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; //have the game centered this.scale.pageAlignHorizontally = true;this.scale.pageAlignVertically = true;

You will be showing a 320x420 game stretched to a much larger area (to fit your screen, or the fixed size of the parent DIV if you have one).

 

Take a look at this tutorial I wrote, section "Adapting for Mobile":  https://software.intel.com/en-us/articles/how-to-make-a-mobile-virtual-pet-game-with-html5-and-cordova

 

And also there is the Scale Manager ebook which explains it quite clear: https://leanpub.com/phaserscalemanager

[Deathspike]

Thanks. That worked!

 

Unfortunately, however, the pixels are 'smoothed'. The stretching looks really fuzzy and awkward.

 

Is there a way to get sharp images regardless of zooming?

[icp]

Add this line to your Boot state if you want to get rid of the fuzzy effect:

this.game.stage.smoothed = false;

If you need sharp images you can use High resolution assets.

http://www.codetuto.com/2014/04/multi-screen-game-development-in-phaser.html

[Deathspike]

Thanks icp, I tried adding this but the scaling remains fuzzy and awkward.

 

I also did this, now:

 

let game = new Phaser.Game(512, 320, Phaser.CANVAS, 'content', null, false, false);

 

Which makes it slightly better, but the scaling is still pretty poor. Any further suggestions I can try?

[drhayes]

I've never been able to get pixel-art crisp graphics using Phaser under WebGL. If you switch it to a Canvas renderer, you might have more luck, but I then started wrestling the scale manager to get it to work.

 

Here's a link to how I solved it.

[Deathspike]

It seems that picking up Phaser a bit of a pointless endeavor for games that require better scaling then?

 

I had imagined that if MSPaint can scale properly, so would an advanced HTML5 2D rendering engine. I'm really trying to like this engine, and it has many good things, but would I be better off going for a different engine for a game that requires good scaling?

 

Sorry, it seems a bit preposterous to require a batch of hacks to get something this going. Just looking for advice on how to tackle this problem. Setting a fixed scale of, say, x4 as is done in the link you've provided, is not going to cut it for different screen resolutions nor touch interactivity without another batch of hacks.

[spencerTL]

It seems that picking up Phaser a bit of a pointless endeavor for games that require better scaling then?

 

I had imagined that if MSPaint can scale properly, so would an advanced HTML5 2D rendering engine. I'm really trying to like this engine, and it has many good things, but would I be better off going for a different engine for a game that requires good scaling?

I think you're being a bit unfair on phaser, and PIXI, its current underlying renderer. The fuzzy scaling, as I understand it, is a result of the browser. They don't respond in a consistent way, or even at all, to attempts to stop them smoothing when scaled.

[Deathspike]

 

I think you're being a bit unfair on phaser, and PIXI, its current underlying renderer. The fuzzy scaling, as I understand it, is a result of the browser. They don't respond in a consistent way, or even at all, to attempts to stop them smoothing when scaled.

After re-reading my earlier post, I completely agree. My earlier message was, indeed, quite unfair.

In my experience using a canvas context and other HTML5 game engines (specifically MelonJS as game engine example), both scale well when configured appropriately. It has always been a bad idea to scale with CSS. The width/height of the canvas has to be set on an element basis to obtain a context with the set height/width and drawing calls should take care of the 'virtual' resolution. This negates any browser-specific scaling issues.

What should I be looking for to properly scale individual drawing calls on the canvas (I don't care about WGL)? Or should I attempt hacking this into the core myself?

[spencerTL]

This article is a little out of date as Phaser has a new scaling system now but the basic principle of it should still work ie using a hidden canvas and copying to a scaled one:

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

As the article points out there is a performance hit from it but it does work well.