CODEWITHSUNDEEP
javascripthtml5-canvasphaser-frameworkcocoonjs
eivers88
eivers88

Reputation: 6247

How to center the canvas in CocoonJS Canvas+ using Phaser

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

Upvotes: 3

Views: 183

Answers (1)

mg52
mg52

Reputation: 126

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;

Upvotes: -1

Related Questions