Phaser + Cocoon.js Scaling

[freaker]

I'm having a lot of trouble with Phaser.js scaling on iPad using Cocoon.js since Phaser 2 came out.

 

My goal is to make a game that works on the iPad retina display at 2048x1536 resolution and my game assets are being drown with that resolution in mind. 

 

My idea was to build the game at retina resolution and scale it down to the other device displays.

 

I've tried with different code to set up the screen as I want it, but they most I've done is to make the game scale properly on Canvas but not on WebGL. On WebGL it doesn't work (the same code)

 

At this moment this is the code I've had the best results with (taken from the excelent post: http://www.html5gamedevs.com/topic/1380-how-to-scale-entire-game-up/?p=27378

 

 

   I set up my game like this:

 

  const SAFE_ZONE_WIDTH=2048;

  const SAFE_ZONE_HEIGHT=1536;

  var game = new Phaser.Game(SAFE_ZONE_WIDTH, SAFE_ZONE_HEIGHT, Phaser.CANVAS, '');

 

and inside an object I resize it like this:

 

         this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;

         this.game.scale.setShowAll();

         this.game.scale.pageAlignHorizontally = true;

         this.game.scale.pageAlignVeritcally = true;

         this.game.scale.refresh();

 

This works perfectly on my browser and on CANVAS in Cocoon.js BUT NOT on WebGL. The WebGL screen is not resized, and everything is out of bounds.

 

 

 

I have a few questions: 

1. Why does this work on CANVAS but not on WEBGL on Cocoon?

2. Is there a way to do what I want or I'm heading in the wrong direction?

 

 

regards.

 

[spartanatreyu]

You never want to scale an image down on a device because 99% of the time that device is going to have less processing power than the larger devices to begin with and on top of that you're using up whatever processing budget you have, scaling down your canvas.

Either start small and scale your canvas up for larger devices, or find out how much screen realestate you have and create a canvas of the right size.

[freaker]

At the moment I'm doing it on Canvas mode and I get 60 frames per second on ipad2, and on the computer browser. I might loose some processing power, but my game is a simple one and I don't mind to loose some processing power in favour of having a crisp looking game on a retina screen.

 

So, having this in mind, I would like to know if there's a way of downscaling properly a screen. Well... actually it works in Canvas, but not in WebGL in cocoon... that's the main problem for myself.

 

Why is so important WebGL for me? Because I have to use some particle emmiters on my game and there seems to be a problem with particle emmiters on Canvas-Cocoon.js (they don't work). Being not the case I wouldn't mind to use only canvas for my game....

[Videlais]

@freaker: WebGL mode in CocoonJS is actually broken in a number of ways right now. This has been documented in a number of places and, as of some recent conversations I've had with the CocoonJS developers, there should be a fix coming in the next version. It's not recommended to use WebGL mode with Phaser right now, though.

 

I saw your other post about the particles when using Canvas in CocoonJS. I'm going to look into that today and see if it is related to another recent problem I've been hearing about too.

 

As for down-scaling, I agree with @spartanatreyu. It's generally not a good idea. Scaling up isn't too bad using the following code:

var width = window.innerWidth * window.devicePixelRatio;var height = window.innerHeight * window.devicePixelRatio;

It will calculate using devicePixelRatio (for Retina screens with higher pixel ratios) and multiply the number with the width and height of the screen as reported by CocoonJS. That way, the app will look the same, scaling up as needed, on different devices and hardware.

[freaker]

I have all my assets in retina resolution at this moment. Downscaling them it's my only solution at the moment. I can't think on any other solution  - I don't want to rescale all the graphics- 

 

Actually the game runs very well on the iPad2 as I said, with the rescaling in CANVAS. 

 

If WebGL is broken in cocoon.js then I don't have a problem with it, I can stick to canvas as it's giving me 62fps with no trouble at all... but I have to find out why the particles are not shown on CANVAS. I might try tonight at home to debug the particles routine on CANVAS and try to see whats wrong... but as I said I'm a newbie on this framework so any help would be great... 

 

If you are going to take a look to the particle's problem, just try with the examples from Phaser.js. The Diamond burst. I tried it, and it's shown on WebGL but not on CANVAS. 

[freaker]

BTW....

 

I've just remembered that I had the same routine to scale the screen done with the previous version of Phaser and it actually scaled the WebGL screen properly.... so I think something has changed from one version to the other that makes the WebGL rescaling not work as before...

 

Scaling the page like this worked with WebGL:

 

const SAFE_ZONE_WIDTH=1200;
const SAFE_ZONE_HEIGHT=900;
var game = new Phaser.Game( SAFE_ZONE_WIDTH, SAFE_ZONE_HEIGHT, Phaser.AUTO, 'game_div');

game.stage.fullScreenScaleMode = Phaser.StageScaleMode.SHOW_ALL;

game.stage.scale.setShowAll();
game.stage.scale.pageAlignHorizontally = true;
game.stage.scale.pageAlignVeritcally = true;
game.stage.scale.refresh();

 

now it doesn't (I've done the changes to make it work on Phaser -basically changing the calls from game.stage to game.scale)

[Videlais]

@ freaker:

 

I haven't worked out a fix yet, but the problem isn't in emitter. It's something to do with how images are loaded and it affects not only the emitter functionality, but everything that uses images at the moment.

 

If you haven't already seen this topic, it is where I have been documenting the various issues and fixes for Phaser with CocoonJS. This image problem is something that has appeared with the 2.0 change.

[freaker]

Yes I know that topic, but didn't think that the image loading problem was related with the particles. 

 

BTW, thank you for that topic and for looking and tracking down this problems. I will try to help if I can... 

[horror812]

I have a question about the scaling

I think that the properties (pageAlignHorizontally and pageAlignVertically) do not work

How do I align the screen by center?

(used phaser 2.07 - canvas, cocoonjs 2.1.1 - scale aspect fit)

hope

 

this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;                

this.game.scale.pageAlignHorizontally = true;

this.game.scale.pageAlignVertically = true;

this.game.scale.setScreenSize(true);

this.game.scale.refresh();

[Sam]

I know you were asking about scaling, but since you have this graphics in high resolution, why not save them all as 50%
- to load the different assets you can use a code like this (small and easy):

var deviceWidth = navigator.isCocoonJS ? window.innerWidth : 1024,deviceHeight = navigator.isCocoonJS ? window.innerHeight : 768;var game = new Phaser.Game(deviceWidth,deviceHeight,Phaser.CANVAS,'',{preload: preload, create: create});

you pick the real device solution with deviceWidth and "Height.

now you can set:

var ratio = 1;if( deviceWidth > 1200 ){ratio = 2;}

this variable is important for margins ( example: game.width - 200 * ratio ) - return - 200 for small resolution and - 400 for high resolution, since the base resolution is doubled on larger iPads.
but you can use this to load graphics which are saves as @2x and @1x. 

 

Load assets:

this.load.image( 'logo', 'assets/@'+pixelratio+'x/logo.png' );

regards