• Content Count

  • Joined

  • Last visited

  1. It solves it as far as game play is concerned (I think). It turned out that some of my difficulty in determining the issue was related to how I was testing it. 1. I would load the page. 2. I would resize the browser (desktop) or change the orientation of the device (phone/tablet). 3. At this point, to get the game to update the stage, I was hitting refresh on the browser (rather than having the code detect and automatically redraw). Turns out step three was the problem (due to what you mention above). In order to access the refresh button on the phone I had to activate the toolbar which then drew the floating element over top of my window. The reason this was working on the tablets and the desktops is that the refresh button was already visible. Nothing new got activated when I refreshed. When I have the code detect the change and refresh itself, the floating element does not get activated. So, theoretically I think the only time the toolbar would be activated during game play is if the user purposely activates it to navigate away from the game. At that point it won't matter that the bottom of the stage is covered. (to anyone reading this, please feel free to point out errors in this assumption...) My plan is to design the game so that once you start a game, you are not allowed to change the screen orientation. If you do it will pause until the screen is set back to the original orientation. You can play a game in either orientation, you just need to start the game with your device in the desired orientation.
  2. I am new to Phaser and mobile. As a learning exercise I am attempting to build a simple demo that renders a Phaser game object in the browser and draws a rectangle around the border of the available visible space. My goal is to make sure I understand how to determine the actual usable space. My game is going to use a board that fills one screen so I do not need (or want) any scrolling. I just want to determine the usable screen space so I can fill it. I have found numerous versions of this question on this forum and others and after trying many of the things discussed I am still not getting the result I am after. Based on reading, I think I should be using window.innerWidth and window.innerHeight to get the dimensions I want. On my desktops (using Chrome and Edge/IE) it works as expected. On my tablets (iPad and Nexus) it works as expected for both portrait and landscape orientations. On my iPhone (6) it works in portrait but when I turn it to landscape (and refresh the screen) the browser's navigation bar covers the bottom. On my Android phone it works in landscape but when I turn it to portrait (and refresh the screen) the browser's nav bar covers the bottom. I have spent a couple days on this so now it's time to ask for help... Is there a property I can use to get the actual usable space in the current browser or will there always need to be tweaking for specific devices? Thanks for any suggestions, DK Edit: So I added a check in the render function to watch for the screen size changing. When a size change is detected it rereads the window.innerHeight and window.innerWidth properties and then resizes the game accordingly. Doing this inside the render function appears to solve the problem. I am going to go with this for now. If anyone has any additional words of wisdom I am still open to suggestions.