Phaser/Cocoon Scaling

[doyouknowyou]

I've been looking at several different methods of resizing for Cocoon on this forum, but I can't get any to work the way I want!

 

What I'm trying to achieve is a creating set 'safe' area, which is scaled proportionately on resize to fill the screen. I then want to add extra px to the canvas, filling any remaining gaps for when the safe area doesn't fit at that aspect ratio.

 

I'm currently using a basic window.innerWidth + window.innerHeight, but everything ends up tiny on bigger screens!

 

Am I right in thinking that you cant use the ScaleManager with cocoon? If anybody has achieved this successfully I would be very grateful for advice! 

[doyouknowyou]

Finally got it working how I want! For those that want to know...

 

I made some tiny amendments to dnassler's code from another thread (thank you!)

 

(I'm working in portrait mode only)

 

Set SAFE_ZONE_WIDTH/HEIGHT to whatever dimensions you want the important parts of your game in (UI etc).

 

This is what I have at the beginning (boot/init/anywhere before new Phaser.game):

const SAFE_ZONE_WIDTH  = 320;const SAFE_ZONE_HEIGHT = 568;var width  = window.innerWidth * window.devicePixelRatio;var height = window.innerHeight * window.devicePixelRatio;var landWidth, landHeight; if ( height > width ) {    landWidth = height;    landHeight = width;} else {    landWidth = width;    landHeight = height;}var aspectRatioDevice = landHeight/landWidth;var aspectRatioSafeZone = SAFE_ZONE_HEIGHT / SAFE_ZONE_WIDTH;var extraWidth = 0, extraHeight = 0;if (aspectRatioSafeZone < aspectRatioDevice) {    extraWidth = aspectRatioDevice * SAFE_ZONE_HEIGHT - SAFE_ZONE_WIDTH;} else {    extraHeight = SAFE_ZONE_WIDTH / aspectRatioDevice - SAFE_ZONE_HEIGHT;}var game = new Phaser.Game(SAFE_ZONE_WIDTH + extraWidth, SAFE_ZONE_HEIGHT + extraHeight, Phaser.CANVAS, 'game', {preload: preload, create: create, update: update, render: render});

Followed by this in Create:

 

    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;    game.scale.setShowAll();    game.scale.pageAlignHorizontally = true;    game.scale.pageAlignVeritcally = true;    game.scale.refresh();

An important thing to remember is instead of finding the center of the window with window.InnerWidth use SAFE_ZONE_WIDTH/2, and the same for height.

 

 

Hopefully this helps somebody else, I've been scouring through these forums and this is the only solution that seems to work for me (again thanks to dnlasser).

 

 

The only problem I need to fix now is the pixelation from upscaling the game this way. If anybody knows any good ways to do this, please share! 

[amadeus]

Unfortunately I believe fixing your pixellation problem is a much more complicated scenario, especially if you want to make a game rendered in pixel art.

 

In a recent version of PIXI, they added the ability to set a `resolution` property to the Canvas/WebGL renderer. I subclassed the Phaser.Game class  and overwrote the `setUpRenderer` method to enable setting of the resolution property:

 

https://gist.github.com/amadeus/61fed181fbd9c2a41e05

 

Specifically take a look at lines 49, 96, and 114.

 

Once this is done, you simply use CSS to scale your canvas back down (perhaps even take it a step further and have Phaser do it automatically based on the `_resolution` property.

 

Of course the downside is that it would take a bunch more work to handle this in the new scale manager, so it's far from complete.