Search the Community

hi. i can draw my game with chrome or explore but safari can't use fullscreen function like requestFullscreen( how can i draw fullscreen with safari

I Work on a project where we have show video on canvas. I somehow figure out how to do video fullscreen but another problem came. When we exit the fullscreen canvas all pointerdown event stop working on ios devices. my phaser v - 3.19

I embedded Phaser3s' canvas parent in a bootstrap table (FlexGrid) and am trying to get fullscreen and window resize to work as expected. <main role="main" class="container"> <div class="container"> <div class="row"> <div class="col"> <!-- the problem doesn't occur without the bootstrap flexbox (i.e. when there's just this div) --> <div id="phaser3MainView"></div> </div></div></div> </main> There are three distinct approaches i've worked on. First, i've tried to disable the ScaleManagers auto features and see what happens, but after returning from fullscreen, hit areas don't seem to work anymore. Here's a annotated example for that: https://codepen.io/gyzkard/pen/gJZxro var config = { type: Phaser.AUTO, scale: { mode: Phaser.Scale.NONE, autoCenter: Phaser.Scale.Center.NO_CENTER, zoom: Phaser.Scale.NO_ZOOM, Second, i've tried to use the ScaleManagers auto features. I tested all combinations, but none worked for me. Here's a annotated example for that: https://codepen.io/gyzkard/pen/EzGLEy var config = { type: Phaser.AUTO, scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, zoom: Phaser.Scale.MAX_ZOOM, Finally, i tried to come up with a custom solution and tried to work around the system. Here's a annotated and working example: https://codepen.io/gyzkard/pen/PvXBxm function getFullscreenSize() { var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0], x = w.innerWidth || e.clientWidth || g.clientWidth, y = w.innerHeight|| e.clientHeight|| g.clientHeight; return {x:x, y:y}; } function calcZoom() { let x, y; if (game.scale.isFullscreen) { let size = getFullscreenSize(); x = size.x; y = size.y; } else { x = Math.min(game.scale.canvas.parentNode.clientWidth, window.innerWidth); y = Math.min(game.scale.canvas.parentNode.clientHeight, window.innerHeight); } let zoomH = x / game.config.width; let zoomV = y / game.config.height; return Math.min(zoomH, zoomV); } var lastZoom = 1; window.onresize = function (event) { let zoom = calcZoom(); game.scale.setZoom(zoom); if (!game.scale.isFullscreen && zoom > lastZoom) { game.scale.canvas.style.width = "8000px"; game.scale.canvas.style.height = "6000px"; setTimeout(function() { let zoom = calcZoom(); game.scale.canvas.style.width = game.config.width * zoom + "px"; game.scale.canvas.style.height = game.config.height * zoom + "px"; lastZoom = zoom; }, 1); } else { game.scale.canvas.style.width = game.config.width * zoom + "px"; game.scale.canvas.style.height = game.config.height * zoom + "px"; } lastZoom = zoom; if (game.scale.isFullscreen) { let size = getFullscreenSize(); if (size.x > size.y) { let offsetX = (size.x - size.y) / 2; game.scale.canvas.style.marginLeft = offsetX / zoom + 'px'; game.scale.refresh(); } } else { game.scale.canvas.style.marginLeft = '0px'; game.scale.refresh(); } }; Now my question is how this is ment to be solved. The setup seems to clearly violate the "Parent and Display canvas containment guidelines" from Phaser-CE ( https://photonstorm.github.io/phaser-ce/Phaser.ScaleManager.html#toc-3 ) but there is nothing like that mentioned in the Phaser 3 notes ( https://rexrainbow.github.io/phaser3-rex-notes/docs/site/scalemanager/ ). The hacks from the third approach seem to work, at least in the small test environments i played around with, but i'm wondering if that's just luck and if there's an actual painless solution for this kind of setup or if it's as forbidden as it's been for Phaser-CE. I'm new to Phaser and not good with javascript, so please forgive me the maybe strange style. Note: This same question has also been posted to phaser.discourse.group

Hi, I don't know if this is a stupid question, but I want my game to go fullscreen when on mobile/touch screen devices only. I also need it to stay fullscreen across multiple states. Any ideas?

Hello Everyone, I'm currently using Phaser and first of all Thanks for all developers for Phaser. I've got a problem and wanna share with you guys. I wrote a game and using ScaleManager for full screen. var playScreen = function(game){}; playScreen.prototype = { init: function(){ game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL; game.state.start('TitleScreen'); }, create: function(){ game.add.image(1830, 16, 'fullScreenExit'); this.fullScreenButton = game.add.button(1830, 16, 'fullScreen', changeFullScreen, this); } } function changeFullScreen(){ if(game.scale.isFullScreen == false){ this.fullScreenButton.alpha = 0; game.scale.startFullScreen(false); } else { game.scale.stopFullScreen(); this.fullScreenButton.alpha = 1; } } This works fine on desktop and android but however on IOS it's not working. Please let me know if you have any advance. Thanks.

Hello guys. I am struggling with having my game to run on minimal-ui on iOS safari. That is where the address bar becomes smaller when you scroll. I have found a game that does that, but how the hell they do it? CLICK Does anyone know how to achieve this?

I added to my game a button to activate fullscreen mode (by calling game.scale.startFullScreen(true);). Works great on the desktop. On android's built-in browser, the game just freezes up when I press the fullscreen mode button. Is there a safe way to call startFullScreen so it won't freeze up? Is there a way to reliably detect ahead of time that fullscreen isn't supported so I can simply not show the button.

Hi all! I've tried to mix and match between two very basic phaser tutorials about playing a video and putting game fullscreen. My results are not what I expected: http://www.davidenastri.it/savatop/phaser.html Can you please suggest me a tutorial that can let me understand how to make my video fill its container? Thanks for your time and kind help

Hi, I have a full-screen mode in my game and it works fine before Chrome update. This code still works fine on Firefox on the same device. I found also that http://phaser.io/examples/v2/display/fullscreen is not working in Chrome v56 too. Have you met this issue and how you fix it? I also will be glad if Rich give some answer/comments about this issue. If it will help you, I also found, that fullscreen works JUST if you click a border between the game and background (not the game and not a background, just a place where they connects together). Best wishes, NellyKey

Hey everyone, GoogleAds banner is hiding when using: game.scale.startFullScreen(); but when just click F11 on keyboard - all look okay. browser Chrome/Firefox. does anyone know how to fix this problem?

I am running my game as "transparent", directly in the body element, and setting a repeated tile background in the body through CSS. If I enter fullscreen mode through a button click that triggers this.game.scale.startFullScreen(), the background tiling disappears and there's just a black background. If I enter fullscreen mode "manually" (by physically pressing F11), the background remains. What am I missing about how to start fullscreen mode? How can I preserve the background?

Hi, I have a very simple playform game Mario style with arcade physics and two small sprites (platform terrein and player, no background). When I set the game to be 100% width and 100% height (my monitor res is 1920x1080) the framerate is 30 in Firefox and 15/20 in Chrome. I use the following code: new Phaser.Game('100%', '100%', Phaser.AUTO); Does anybody know why would it go so slow if it is only using two sprites? I am big fan of fullscreen games as they are more immersive. The reason I am asking is because I was having a look at Construct2 demos and they are very smooth on fullscreen, see this example: https://www.scirra.com/arcade/other-games/lumino-beta-14206 Is Construct using something like Emscripten?

Hi everyone, I have a game for the mobile version of chrome, and the startFullScreen stop working since Chrome was updated to the 56 version. Is there a work around for that issue?

I am making a phaser game for my website, so it's going to run off the URL not google play or what-have-you. When my game loads, you can still see the web browser bits which get in the way on a smartphone. Is there a way that when it loads you just double-tap the screen and it stretches to the entire display of the device?? Any pointers would be great, thanks. **this is my very first post, Richard Davey you've done a great job! and 'hi' to everyone else involved

For far I did project on pixi.js which scales (canvas just scales with css rules) from min-size 1126x634 to max-size 1920x1080. App centered on screen also with css rules. All graphical assets was resized for resolution 1126x634 (to improve speed of loading). Also there is fullscreen button, which switch on app to fit all screen with max possible size (but no more than 1920x1080). So far so good, but my boss don't like that graphics gets blurry (and specially text suffers) when scaled (and specially in fullscreen mode). And he desided to make two versions of app (1126x634 and 1920x1080) and two versions of graphical assets. So I check the innerWidth/height of the browser and load apropriate version. When user switches to fullscreen mode I also load HD version. This approach have some problems but I think it's possible to do app in that way. So I looking for advise on this approach is it wrong, or are there better ways to do it? I know that pixi.js can load different resolution assets (with @x2 prefix), but how can I improve text rendering when I just replacing graphical assets? And how can it improve view when scaled on the same resolution? Thanks in advise! EDIT: After thinking about my question I want to reformulate it. Is this a good way to switch to fullscreen mode by switching between versions of app? Are there any better ways to achieve similar results in graphic and text quality?

Hello people, I’m here to ask for assistance on PixiJs (more like a canvas related stuff) and IOS. I want to make an app than take all the available space of the webpage, kinda “Fullscreen” but not necessarily without the actions bar of the browser, What I was doing work pretty well on any browsers except in Safaris IOS browser, in landscape mode (sometime loading the page the first time in landscape work, then when changing orientation and coming back to landscape make the bugs appear). I can’t get to handle the IOS browser correctly, the canvas ignores one or both of the browser bar, causing it to appear under these bar. I just adapted quickly the Pixi’s “bunnymark” demo to show this problem. (http://davikingcode.com/dl-works/bunnyjs/ ). I found on the web an example working really fine on iOS landscape mode (http://www.goodboydigital.com/runpixierun/) but can’t see an obvious differences with my simple example. It may be an HTML/CSS problem, but I can’t find it exactly. Thanks for your help and have a nice day.

How can I resize DisplayObjects on my screen when I resize the window? This is a very common requirement but I can't find tutorial bout this. For example, when I press F11 to make the window fullscreen, the stage and all displayObjects in the stage should adjust its size to fit the screen. When I drag the browser edge to resize the window the objects should also resize to fit the screen. How to achieve this? I have this code now, but it doesn't work very well because the ratio doesn't seem quite right. window.addEventListener('resize', resize); function resize(event) { const w = window.innerWidth; const h = window.innerHeight; let ratio = Math.min( w / GAME_WIDTH, h / GAME_HEIGHT); stage.scale.x = stage.scale.y = ratio; renderer.resize(Math.ceil(GAME_WIDTH * ratio), Math.ceil(GAME_HEIGHT * ratio)); };

Hi everyone~ I have been working on a scene which uses different camera in different device, FreeCamera will be attached to the scene if the scene is displayed on a standalone pc browser, as for mobile browser, VRDeviceOrientationFreeCamera is attached when mobile browser is in landscape; DeviceOrientationCamera when portrait orientation. The ideal results are as shown below: (mobile landscape orientation) (mobile portrait orientation) above results are the ideal results, which are the results on chrome, opera and firefox mobile browser. However, when I open the page using android default browser, about half of the page blank, in both landscape and portrait orientation, as shown below: (landscape) (portrait) it looks like the canvas has been "shrinked" into half of the page, no distort of the scene, and is actually in fullscreen mode while not visually fullscreen. Below are the code of how I make the scene full screen and switch between browser: Code for fullscreen: function goFullscreen(){ var docElm = document.documentElement; if (docElm.requestFullscreen) { engine.switchFullscreen(true); docElm.requestFullscreen(); } else if(docElm.msRequestFullscreen){ engine.switchFullscreen(true); docElm.msRequestFullscreen(); } else if (docElm.mozRequestFullScreen) { engine.switchFullscreen(true); docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { engine.switchFullscreen(true); docElm.webkitRequestFullScreen(); } } Code to switch between vr camera and device orientation camera when using mobile to display the page: var is_mobile = function() { return (/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera); }; function isLandscape(){ return screen.width >screen.height; } window.addEventListener("resize", function() { if (!is_mobile()){ return; } if (isLandscape()){ scene.activeCamera = vrCamera; vrCamera.attachControl(canvas,false); }else{ scene.activeCamera = devOrienCamera; devOrienCamera.attachControl(canvas,false); } engine.resize(); }); I am not sure if it is the default android browser's issue or there is something else I need to take note while making the scene fullscreen... If anyone had encounter the similar situation feel free to share :). and thank you for your time~

When i do a engine.fullscreen, all the html i have for gun disappears... Is that by design or a bug... If by design ... how am i supposed to show my game hud in full screen on a browser... not targeting mobile so soft wanna use canvas2d.. just pure html.

it is a question that has already been often asked but no real answer. Can a kind soul could adapt the concepts of this tutorial about fulscreen on this empty phaser https://www.sitepoint.com/use-html5-full-screen-api/ here the virgin jsfiddle https://jsfiddle.net/espace3d/y8u4o5cw/ var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload,create: create, update: update, render: render }); function preload() { game.load.image('circle', 'https://s13.postimg.org/xjhlzmiev/disc_png.png'); }; function create() { }; function update() { }; function render() { } I believe that this solution will delight many people....thanks for the repliers

I have been building a game, using the Phaser full screen mobile template as my starting block. My intention was to create a game that could have a web version but that could also be packaged as an app by using Cordova. So far it's been going well and I'm reasonably close to an alpha release and it works fine on desktop but I've been having trouble getting the scaling right on mobile. I've package the game in Cordova as a full screen app but the game seems to initally be getting fed incorrect information about the dimension of the screen, leading to the bottom the height being too large cutting off the bottom. I have tried forcing the player to enter full screen and this works (I should stress that the app is already a full screen app, I am just using game.scale.startFullScreen to make it use the fullscreen API), but if the user clicks hits the hardware back button they exits fullscreen and the game is again cut off. Yes, I have prevented the default backbutton action but it still seems to exit fullscreen. At the moment my workaround is to have the game catch the fullscreen exit and pause the game to the user can click to reenter full screen but I don't think this is a good experience and I feel I must be missing something or doing something wrong. Is there a way to change the settings so that the sizes are consistent and correct and it shows the whole phaser game canvas all the time, whether in fullscreen or not? To show what I mean I have created this project: http://utterlysuperb.com/dev/js/fsm/. All it is is the full screen mobile template with a background image that takes up the whole game and a button to toggle between fullscreen and a console.log of the width+height when resize is triggered. On desktop it's fine, but if I view it on mobile, whether through inspecting chrome or using the mobile dev tools to spoof a mobile it cuts off the bottom and requires scrolling when not in fullscreen. This is also the case if it is wrapped up in Cordova.

I am trying to achieve a similar design as this site using pixi- http://www.spaceneedle.com/home/ However I am having trouble even finding out how to make a full page texture. Any image I use won't stretch to match the viewport. I have tried setting- this.sprite.texture.width = viewPort.width; or this.sprite.width = viewPort.width; However there is always blank space on the right hand side? Any guidance would be greatly appreciated.

Hi guys, I'm making a pixel-art game so I don't want anti-aliasing on. Here's my code for toggling fullscreen when F11 is pressed: private toggleFS(): boolean { if (this.game_.scale.isFullScreen) { this.game_.scale.stopFullScreen(); this.game_.stage.smoothed = false; } else { this.game_.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT; this.game_.scale.startFullScreen(false); this.game_.stage.smoothed = false; } return true; } The fullscreen functionality works perfectly, except when I escape from fullscreen it sometimes turns on anti-aliasing. this.game_.stage.smoothed = false; doesn't seem to do anything at this point in the code. Does anyone have any suggestions? Thanks

Hello everyone, I've been following a tutorial for making a flappy bird clone in Phaser. However, I don't know how to stretch the game to fullscreen on any device. I've read that Phaser can do it for you. The tutorial I followed can be found here: http://www.lessmilk.com/tutorial/flappy-bird-phaser-1 Can anyone help me with the stretching part? is it easy? Thanks in advance

Hi, how to make fullscreen not in viewport?(Like when you press F11) and with resize.