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
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 49 results

  1. 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?
  2. 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!!!
  3. 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.
  4. 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
  5. Hi, I've got a couple questions for wrapping my Phaser project for Android with I downloaded the Phaser template for mobile on Git Hub, but it's missing all the image files so it just shows a blank screen: Full Screen Mobile Template I'd like to find a template because everything I do ends up with my game scaled down in the bottom left of the screen (see enclosed image). Anyone else running into this? Much thanks!
  6. Hi, I am creating a game I have such a code in the method "create()": game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;game.scale.refresh();And I have an eventListener in chat window: if(message != '/fullscreen') { var event = { type: "chatMessage", message: $( this ).val(), channel: activeChat, id: 1, cookie: getCookie(cookiename) }; var str = JSON.stringify(event); console.log(str); ws.send(str); } else { if (game.scale.isFullScreen) { game.scale.stopFullScreen(); } else { game.scale.startFullScreen(false); game.scale.refresh(); } }Everything works fine on localhost:8888 port, but when I change the port on localhost:8000/game there is such an error: @ Phaser.ScaleManager: requestFullscreen failed or device does not support the Fullscreen API @
  7. Hello, guys! That's me again with my foolish questions)) So, the question is: How to stretch tileSprite to fullscreen ? planetSprite = game.add.tileSprite(0, 0, game.width + 500, game.height + 900, planetObject.key + 'Planet');// planetSprite.anchor.setTo(0, 0);planetSprite.scale.set(0.75, 0.6);planetSprite.fixedToCamera = true;and here I have a problem: it looks ok on my screen, but on bigger one this tileSprite is repeated and also it's not stretched to fullScreen on bigger screens image is attached Thank you in advance for your help))
  8. this.btnFullScreen.mousedown = this.btnFullScreen.touchstart = Main.toggleFullScreen();gives me this error: Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture.Do I have to put a DOM Element over PIXI with el.addEventListener("keydown" ... ?
  9. Hello comrades! I'm working on my new gamemaker game at the moment, and the sponsor is asking me too make the game running fullscreen on mobile chrome browsers. I've tried to use the code from this article but seems that it doesn't work in my game, and i have no reason why( Here is the body of my index file: <body> <div class="gm4html5_div_class" id="gm4html5_div_id"> <!-- Create the canvas element the game draws to --> <canvas id="canvas" width="480" height="720"> <p>Your browser doesn't support HTML5 canvas.</p> </canvas> </div><script type="text/javascript">function hideAddressBar(){ if(!window.location.hash) { if(document.height <= window.outerHeight + 10) { = (window.outerHeight + 50) +'px'; setTimeout( function(){ window.scrollTo(0, 1); }, 50 ); } else { setTimeout( function(){ window.scrollTo(0, 1); }, 0 ); } }} window.addEventListener("load", hideAddressBar );window.addEventListener("orientationchange", hideAddressBar );window.setInterval(function(){hideAddressBar()},10);</script> <!-- Run the game code --> <script type="text/javascript" src="html5game/Farm Jelly Puzzle.js?ZJGAC=254850927"></script> </body>Could you please help me ow can I run the game fullscreen on chrome? As I understood the only function I need here is scrollTo but it doesn't work
  10. Hi all, I have an app I am working on that almost done and looks nice on my phone (Samsung Note 4). However, my scaling technique is not working on all phones, leaving some screens looking like this pic attached (hope you can see the white border around the off-white screen! The pic is HTC One X. Similar issues on tablets). My code setup is pretty simple: index.html file: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> <script src="js/phaser.min.js"></script> <script src="js/main.js"></script> </head> <body> <center><div id="game"></div></center> </body> </html> Sizing inside of main.js: var w = window.innerWidth * window.devicePixelRatio; var h = window.innerHeight * window.devicePixelRatio; var game = new Phaser.Game( w, h, // Width, height of game in px Phaser.AUTO, // Graphic rendering "", { preload: preload, // Preload function create: create, // Creation function update: update } // Update function ); I'm resizing screen elements according to w and h, so everything is designed to respond to w/h. Is this a problem with my div structure? I tried completely removing the html file... using canvas introduces a whole new host of problems though, with scale still unresolved (in canvas either does not show up or appears too large). Also tried changing the div name, using other techniques like: w = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) * window.devicePixelRatio; I can't seem to figure out how to get this to fullscreen. I am using WebView+ (not canvas), and min android version is 2.3. Help appreciated
  11. So going in to the fullscreen mode works perfectly with the current version (2.2.1). However, after leaving the fullscreen with ScaleManager.stopFullScreen the world size seems to reset to the original size (what was given during Phaser.Game creation). Is this intentional behaviour? It just seems very odd as it does not happen with ScaleManager.startFullScreen. The work-around seems to be adding the world.resize to the scale.onFullScreenChange signal.
  12. Hi, this is just BETA version of my webdeveloper portfolio created in PhaserJS... (currently only in slovak language) later it will be translated to English... What do you think?
  13. This weekend I've been playing with fullscreening, specifically SHOW_ALL, and had some challenges getting the stock examples and project template to work correctly on both my laptop and phone. After mostly nailing those down, I have a blog post up that may be useful to others: I've also posted that demo code and the start of a revised boilerplate project template to GitHub: I'd be appreciative of any comments, suggestions, and pointers to best practices. In particular, next I'd like to figure out why it gets scaled disproportionately in Firefox. I'm also not sure the orientation prompt (in the larger project) is being handled optimally, it shows flashes of rotated screen in the transition though there may be nothing much to be done about that. The standard project template doesn't show the orientation prompt at all in fullscreen mode because of the div not being contained in the fullscreen element. Thx
  14. Now that Apple have removed minimal-ui support in iOS8 is there a feasible alternative for fullscreen in Safari on an iPhone?
  15. Hey Guys, I'm new to Phaser and can't wrap my head around something! That's to say, i'm not sure whether i've found a bug or doing something wrong.. Right now i've got this game that wants to go fullscreen. define(function(){ var p = Main.prototype; = null; Main.juggler = []; function Main() { = new Phaser.Game(568, 320, Phaser.AUTO, 'holder', { preload: this.preload, create: this.create, update: this.update }); = } p.preload = function() {'orangejuice', 'fonts/orangejuice.png', 'fonts/orangejuice.xml');"curtain", "images/curtain.png");"bg-cage", "images/bg-cage.png");"title", "images/title.png");"btn-start", "images/btn-start.png");"tassel", "images/tassel.png"); } p.create = function() { //{ //; //}, this); = Phaser.StageScaleMode.SHOW_ALL; //resize your window to see the stage resize too;; new Splash(); } p.update = function() { for(key in Main.juggler) Main.juggler[key](); } g.Main = Main; new Main(); });When I un-comment that bit of code, the game enters fullscreen as soon as you click it. (I know that's bad practice, but it's easier to debug this way) Now, in my Splash class I create a single button that will trigger something. define(function(){ var p = Splash.prototype; function Splash() { this.tassel =,0,"tassel"); this.tassel.inputEnabled = true;, this); } p.onTasselClicked = function(){ alert("you clicked me!"); }})However, when i'm in fullscreen mode, i can't exactly click the button. The hitbox for the onInputDown event stays where it was before going fullscreen. So clicking the actual sprite doesn't trigger anything, but clicking the area where the sprite used to be does. Is this a bug or am i missing something?
  16. Hello, I post in this forum because i need help with 4 lines of code that doesnt work in my game.js file. The similiraty of this 4 lines is that the last method parameter is a this. In the phaser-examples they say that this parameter is: "the context under which that will happen", leaving it as a 'this'. Well, i dont know if thats the real problem or there is something im not realising. Here i leave the lines of code found in the create function that doesnt work (the rest of it do work perfectly when I deleate the lines): // The camera follows the player; // ----------- error------------- // The timer. After 20 seconds its game over. // * 20, gameOver,this) // full screen this.stage.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT; // -----------error--------------- // this.input.onDown.add(fullScreen, this); //-----------error---------------- // We create a body specific callback // player.body.createBodyCallback(paper, hitPaper, this); // Turn on impact events for the world. this.physics.p2.setImpactEvents(true); Thank you very much
  17. So I have a quick question about full screen power up effects. Currently, I have a full screen effect of splashing water when a player picks up a power up. However the sprite sheet for this power up has the potential to be massive depending on the device screen size. With just a couple frames in the splash animation, we're already talking about exceeding 4096 in the width which CocoonJS is not particularly happy about when attempting to put this on mobile. Also, when a player initially picks up the power up for the first time there is a hard lag that stops the game in its tracks for about a second or two before playing the animation. From then on, picking up the power up causes no similar blips at all. What's a good way of handling full screen power up effects or power up effects that either take the full game width/height?
  18. I've been trying to squash an annoying situation where the full screen mobile template messes up on Firefox on Android. I found another game that's set up basically as mine: It has the same problem. I'm having this issue in both 2.04 and 2.05. SO - what's the issue? Well, the javascript seems to think the game, or the webpage is/should be larger than the game's height. So it pushes the game down 10/20 pixels, and then if you touch that area you can scroll down. Since you then can scroll down, the page is never stationary; you can touch and drag the page which ruins many games basically. I'm seeing this problem on a Samsung Galaxy Tab, SM-T310 Android 4.2.2 Any idea on where to start to troubleshoot this? Pic of the problem, notice the black bar under the nav bar, it should not be there:
  19. Greetings, developers! I have the following situation here: I'm not using any of Phaser tools to manage game stretch logics and I have a problem with Phaser buttons right now. Guess that Phaser don't know that touch coordinates are related to old canvas style while it was stretched. The resizing logic is following: function ResizeGame(){ var Ratio = 960 / 640; var NewWidth = window.innerWidth; var NewHeight = window.innerHeight; if (NewWidth > NewHeight) // LANDSCAPE { = NewHeight + "px"; = NewHeight + "px"; NewWidth = NewHeight * Ratio; = NewWidth + "px"; = NewWidth + "px"; //GameInstance.scale.width = (960 / (NewHeight * Ratio)); //GameInstance.scale.height = (960 / (NewHeight * Ratio)); } else //PORTRAIT { NewHeight = NewWidth / Ratio; = NewHeight + "px"; = NewHeight + "px"; = NewWidth + "px"; = NewWidth + "px"; //layer.scale = 960 / NewWidth; } = window.innerWidth * 0.5 - NewWidth * 0.5 + "px"; = window.innerHeight * 0.5 - NewHeight * 0.5 + "px";}The button boundaries are offset. I don't know what to do. Changing camera view boundaries not works. Changing world boundaries also has no effect. Tried using Phaser to do that stuff but not found the way how to do it. The next question is about locking mobile swipes and touches to prevent scrolling of the page while playing. The stretched game has some parts of document body visible. And when player's finger touches that region the browser scrolls content so url bar appears.. Its awful. Tried doing that: /* Locking mobile browser non-gaming manipulations */document.body.addEventListener("touchmove", function(e){ e.preventDefault(); return false;});document.body.addEventListener("touchstart", function(e){ e.preventDefault(); return false;});document.body.addEventListener("selectstart", function(e){ e.preventDefault(); return false;});document.body.addEventListener("dragstart", function(e){ e.preventDefault(); return false;});document.body.addEventListener("contextmenu", function(e){ e.preventDefault(); return false;});But it doesn't work.
  20. Hey guys, I think this is a newbie question. I'm using this.stage.scale.startFullScreen(); to make my game go fullscreen. When it does, the game is off to the side and doesn't fill the whole screen. I was wondering how I could center the game? Thanks, and I'm using the basic mobile template if that helps.
  21. Hi everyone, I hope I can post here. I want to start first game with easelJs for mobile . I have a little problem, the scaling function work well, but the fullscreen function for android and iOS doesn't work. I want try to adapt this function : but when I add the screen resize doesn't work. If I proved also this : but without success. Does anyone have a solution for both iOS and Android, which also works with orientation change? Thank you so much for any help.
  22. Hi, I just started working with Phaser. I picked it for this contest: Disclaimer:I never really worked with JavaScript. I already have a simple skeleton of the game running, took me about 4 hours to find out how Phaser works + code it. Great job to make it really simple. But I can't seem to find a way how to scale the whole page to a mobile screen. Because the game jam deadline is quite close, I implemented a custom scaling workaround*, but of course a nice way would be better. * setting scale of everything manually
  23. Hey guys, Do you guys happen to know how to get a HTML5 game to work fullscreen on an Android device?? My game is 320x480 and my phone is 480x800, so the game only takes a portion of my screen... I got it working on the iphone, but I can't find any information on how to do it on Android. Oh btw on the regular iphone and the iphone 4(retina), the safari toolbar on the bottom is overlapping with a piece of the gamescreen. I noticed this also with TrueValhalla's games, are there any workarounds for that?? Thanks!
  24. Hey all, I am wondering what you guys think about the fullscreen support on mobile browsers? The support of this API in desktop versions of modern browsers seems to increase. Wondering what you guys think about this topic ? Are you also waiting for this ? Do you currently use workarounds to simulate fullscreen (like adding 60px to the body content & window.scrollTo)Maybe you have some insider information - when we can expect support of the FullScreenAPI in mobile browser (esp. iOS Safari)? Best,benny!