3

I'm trying to create a game using Phaser and CocoonJS. Everything works fine except for centering the canvas when deploying the game on cocoon using the canvas+ renderer. Below are three lines of code that accomplish the effect I am looking for in a web browser, but not canvas+.

        this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        this.scale.pageAlignHorizontally = true;
        this.scale.pageAlignVertically = true;

The following image is a screen cap from an S3 (also reproduced on an iPad) that shows the canvas fitting properly, but does not center. Does anyone have any insight on how to center the canvas so there are even black bars on both sides? The only setting I changed on the cocoon launcher app is to allow images that are not powers of two.

Small project reproducing the problem

enter image description here

eivers88
  • 6,207
  • 1
  • 33
  • 34

1 Answers1

-1

I always use EXACT_FIT for my games using Phaser+Cocoon. I think you should use EXACT_FIT mode.

Put below codes into your boot state ("roundPixels" is not necessary):

game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.renderer.renderSession.roundPixels = true;
mg52
  • 116
  • 1
  • 7
  • EXACT_FIT stretches the assets which is not an option for me. I'd like to get the intended behavior of SHOW_ALL to work on Cocoon – eivers88 Mar 09 '17 at 17:43