Search the Community

Showing results for tags 'fullscreen'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 46 results

  1. 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?
  2. 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.
  3. 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: 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
  4. 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 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
  5. 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?
  6. 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, 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?
  7. 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: Is Construct using something like Emscripten?
  8. 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?
  9. 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
  10. 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?
  11. 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. ( ). I found on the web an example working really fine on iOS landscape mode ( 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.
  12. 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)); };
  13. 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~
  14. 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.
  15. 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 here the virgin jsfiddle 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', ''); }; function create() { }; function update() { }; function render() { } I believe that this solution will delight many people....thanks for the repliers
  16. 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: 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.
  17. I am trying to achieve a similar design as this site using pixi- 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.
  18. 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.
  19. 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
  20. 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: Can anyone help me with the stretching part? is it easy? Thanks in advance
  21. Hi, how to make fullscreen not in viewport?(Like when you press F11) and with resize.
  22. Hello, I am a stuck with a problem on putting the game in fullscreen on the Windows Surface pro 4 (I think the problem is on previous Surface too). Actually, I have a button that calls startFullScreen. Touching it on the Surface tablet does not go to fullscreen mode. But when I click that button with the stylus or the mouse pad of the Surface tablet keyboard, it works. When I the game on my Android phone, touching the button fullscreen works. I suspect the user agent to tell bad info, but I'm not sure. On both Surface and Desktop Chrome browsers, I have the same info doing navigator.userAgent like the tablet is a desktop... Is anyone got the same problem ? If yes, how can we solve this issue? Thanks for your help !
  23. Hi all! On start canvas must be 400*225, when user need more details - canvas resize to 1280*720 and go fullscreen. To enter/exit fullscreen i use this code // my default scaleManager parameters game.scale.minWidth = 400; game.scale.minHeight = 225; game.scale.maxWidth = 400; game.scale.maxHeight = 225; game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.scale.updateLayout(true); game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT; // ENTER function fsEnter(){ if (!game.scale.isFullScreen) { game.scale.maxWidth = 1280; game.scale.maxHeight = 720; game.scale.startFullScreen(); game.scale.refresh(); } } // EXIT function fsExit(){ if (game.scale.isFullScreen) { game.scale.maxWidth = 400; game.scale.maxHeight = 225; game.scale.stopFullScreen(); game.scale.refresh(); } } it's all ok on pc-browsers, but on mobile-devices i can only enter to full screen (on mobile - canvas stretch to fill). When i try to "exit from fullscreen mode" on mobile-devices - canvas is not resize to 400*225. Please explain - how to solve this problem?
  24. Hello guys. I have some interfaces in my game, for example: a clan interface. There is a list of users, which is made via html (<ul>). When I do smth like this: game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT; game.scale.startFullScreen(false); I can't see html at all, how can I solve such a problem? Thank you in advance!!!
  25. Hey, i've recently tried to add fullscreen to my game.. I've noticed when using either of these scaling modes i have problems with my pointer position: game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT; game.scale.fullScreenScaleMode = Phaser.ScaleManager.NO_SCALE; After changing to fullscreen, my weapons no longer shoot bullets at the point where I see my pointer in, but to slightly distorted x/y coordinates, which is weird because I use the moveToPointercommand to fire bullets. It's like the actual pointer that i see is in a slightly different location and not where the game thinks the pointer is. Exact_fit causes most distortion.No_scale causes a little less.Show_all gets rid of the distortion problems but leaves some black spaces around the game window. Everything else, including coordinates, seems to work well while in fullscreen. :/ So basically, does anyone have any idea how to fix this?The cursor I see and the place where the game thinks the cursor is are not the same while in fullscreen. It seems specifically that the X-axis is distorted, not Y. If I click buttons in fullscreen I need to aim the pointer left from the actual visible button to hit it.