Pixel scalling, entire game zoom, without blur effect.

[JUL]

So here's that particular problem surfacing again ...

 

 

I want to find a way to scale the entire game up, zoom it like in flixel for those who know this framework, without the freaking blur ...

 

 

(yeah I know, at least 3 topics already exist about it)

 

 

With those solutions here, it blurs in some browsers (such as chrome):

http://www.html5gamedevs.com/topic/1380-how-to-scale-entire-game-up/

 

And the blur effect is not removable.

 

 

As you can see, a x3 or x4 zoom with blur on a 32x32 sprite is just... Not acceptable, at all, by any standard, it's not even funny.

 

And imagine once fullscreen mode is activated on top of that ...

Fullscreen blur is ok on the non blurry scaled version, but not on the already blured one, not at all.

 

 

 

 

 

I tried the solution provided here

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

 

 

 

(Which is basically the no plugin version of the pixelScaler plugin mentioned here http://www.html5gamedevs.com/topic/8798-phaser-pixel-scaler-plugin/  and here http://www.html5gamedevs.com/topic/9141-nes-resolution-on-a-larger-screen/  )

It works great, but there's a huge drawback... Mouse coordinates and touch coordinates are not usable at all, which is very unfortunate especially when it comes to dumb phones...

 

In the photonstorm link, Phaser's author says in the comment section:

 

"Also the mouse event downside is really easy to fix, I just haven’t had time yet – but all it needs is the ability to change where the event listeners are created and it’d work fine!"

 

Well it's not that easy from where I stand... I wish i could, for mouse and touch events, but I'm not the original author, I don't know what I'm dealing with by going down that road.

 

 

 

 

 

 

So, I'm forced for now to... Export scaled versions of the sprites... Which is reliable, but totally lame.

 

 

 

 

 

 

 

So my question is:

 

Is there a way to load a sprite sheet at scale x1, redraw it scaled x3, without blur, and then use this scaled version as sprite sheet for animations ?

 

 

Any other suggestion (except suicide) ?

 

 

Thx for reply.

[nuvorm]

afaik this is not achievable in webgl but should be doing fine in canvas setting the game.stage.smoothed=false.

[JUL]

I use canvas.

Also, it's worth noticing that for some reason when I set smoothing to false either in game creation method and/or as you suggested above, it doesn't remove the default smoothing effect.

 

I can only achieve that through external CSS with the usual

    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;

 

But that's fine, I don't care it works.

 

But it doesn't work in chrome, nor in safari... (haven't tested opera, nor IE)

Only works in firefox, which is unfortunate.

 

I use phaser 2.0.7 btw, latests versions return weird results for me, regarding game performances, that I don't get with 2.0.5 or 2.0.7

[beeglebug]

I can't promise anything, but I'll take a look later today and see if I can add the mouse event stuff into the Pixel Scaler plugin.

[eguneys]

Pixi has some various scaling modes, I don't know how to use them in Phaser. Check out this stackoverflow question. In Pixi, this is the closest fix.

PIXI.scaleModes.DEFAULT = PIXI.scaleModes.NEAREST;