Jump to content

Possible to change color of black borders during full screen?


threedollarbill
 Share

Recommended Posts

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);
     }
}

 

Link to comment
Share on other sites

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');
 

;) 

Link to comment
Share on other sites

  • 3 weeks later...

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
     }
}

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...