Possible to change color of black borders during full screen?

[threedollarbill]

I have a "full screen" button on my game which basically toggles between fullscreen on and off. I have set fullScreenScaleMode to "SHOW_ALL" to maintain the aspect ratio of the game on fullscreen. This works as expected, but also results in having black borders on the sides. I was wondering if its possible to change the black borders to a different color other than black. I would like to match it with the game's background color.

My game also uses this.stage.backgroundColor = 0x95cb60 but it only changes the color of the actual game area, and not the side borders when on full screen.

I am using Canvas by the way, not WebGL.

This is the code I'm currently using for full screen:

public onFullScreenButtonMouseDown():void
{
     this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
        
     if(this.game.scale.isFullScreen)
     {
          this.game.scale.stopFullScreen();
     }
     else
     {
          this.game.scale.startFullScreen(false);
     }
}

 

[DegGa]

Hi!

This might help:

On 29/05/2014 at 3:09 PM, dnassler said:

It is unavoidable to have extra space on some sides of some devices when your "safe zone" (expected/designed-for game size) aspect ratio differs from the device's. You could handle it by changing the background color of the HTML so that it isn't white (maybe some other color that would be less of a problem?)... The way that I handled it was to in addition to using a "safe zone" to also detect that actual device's aspect ratio in javascript and then programmatically add in extra game space to the safe zone width OR height and had to alter the game to not put anything important in the space outside of the safe space. But to put something there if the game detects that there is more space on the sides or top/bottom than was primarily designed for. I know it a bit tricky.

 

var w = window.innerWidth ;//* pixelRatio,

    h = window.innerHeight ;//* pixelRatio;

var lw, lh; //landscape width/height in pixels

if ( h > w ) {

lw = h;

lh = w;

} else {

lw = w;

lh = h;

}

var aspectRatioDevice = lw/lh;

 

var aspectRatioSafeZone = SAFE_ZONE_WIDTH / SAFE_ZONE_HEIGHT;

var extraWidth = 0, extraHeight = 0;

if (aspectRatioSafeZone < aspectRatioDevice) {

// have to add game pixels horizontally in order to fill the device screen

extraWidth = aspectRatioDevice * SAFE_ZONE_HEIGHT - SAFE_ZONE_WIDTH;

} else {

// have to add game pixels vertically

extraHeight = SAFE_ZONE_WIDTH / aspectRatioDevice - SAFE_ZONE_HEIGHT;

}

 

//var game = new Phaser.Game( (h > w) ? h : w, (h > w) ? w : h, Phaser.CANVAS, 'game_div');

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

var game = new Phaser.Game( SAFE_ZONE_WIDTH + extraWidth, SAFE_ZONE_HEIGHT + extraHeight, Phaser.CANVAS, 'game_div');

 

 

[threedollarbill]

for anybody having the same problem, i discovered that upon starting full screen, the canvas element is wrapped in a div that has a background-color of black..

so the solution i found was to basically change the background-color property to the one i want right after starting full screen..

public onFullScreenButtonMouseDown():void
{
     this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
        
     if(this.game.scale.isFullScreen)
     {
          this.game.scale.stopFullScreen();
     }
     else
     {
          this.game.scale.startFullScreen(false);
          this.game.canvas.parentElement.style.backgroundColor = "#20567e"; // <--- set the color here
     }
}