Getting true width/height of game

[Andromedus]

Hey guys,

this sound a bit dumb, but I'm struggling to find the actual height of my game.  I'm working on a responsive game setup, so I'm setting an initial height, then using SHOW_ALL as my scale mode, and then in Chrome developer tools I've got it showing my page in responsive mode.  I have my game in a div with css setting the div to 100%.  As I use the grab handles in Chrome's developer tools to adjust the game's width and height to simulate different aspect ratios/orientations, I am logging the game height to the console so that I can do some calculations and adjust the top margin via css, so that my game is vertically centred within the html page.  Problem is, no matter what I've tried (game.height, game.scale.height, game.canvas.height) it always reports the same, constant, original height I set using game.scale.setGameSize(), even when I am physically changing the height in the browser window.

Any ideas how I can get the real pixel height of the phaser game area?

Cheers.

[FlashyGoblin]

Try game.height or game.world.height

[Andromedus]

Thanks, but yeah, I tried both of those, and they are just reporting the original size I set, even after the browser window is scaled, rather than the real pixel value of the visible game area.

I've also tried logging the 'parentBounds' argument from the resize callback ( game.scale.setResizeCallback ) and for some reason that returns a rectangle which is always 0,0,0,0.

I have a feeling I'm overlooking something obvious.  Is there a way to find how much scaleManager.SHOW_ALL has actually scaled the original size of the game?  If I could get at that, then I could simply multiply that scale factor to the original dimensions to calulate the new pixel size of the game.

[Andromedus]

Aha - I think I got it: 

document.getElementById("parentDiv").clientHeight;

Seems to be what I was after.

[FlashyGoblin]

Ahh, I see. That'll do it. Glad you found the solution!

[samme]

Think it should be in game.scale.width, game.scale.height.

[Andromedus]

Thanks samme - although game.scale.height just reports a static value for me, the original game height set using game.scale.setGameSize(), irrespective of any changes made to the browser window size.  It appears to be the value stored before the any scaling is applied by the SHOW_ALL scale mode.  Whereas using the pure javascript method - document.getElementById("parentDiv").clientHeight; - that appears to report accurately the actual height.

 

[samme]

Is it not like this on yours? 

 

[Monkey Harris]

@Andromedus:

Sorry, I realise this post is over 2 years old but I'm trying to achieve the same thing - ie a responsive layout with a full screen div and using SHOW_ALL as my scale mode.

Did you manage to achieve this? And if so, would you mind posting the code?

Thanks in advance!