Search the Community

Hey, I'm kind of stuck trying to work out what's happening with my game. I've been having issues getting my game responsive, so I tried... well, everything I can think of, really. I've brought my game all the way down to four near-empty files; boot.js, preload.js, menu.js and app.js, and I'm getting nothing on resize events. I'm using Phaser 2.6.2, I've got "this.scale.setMode = Phaser.ScaleManager.RESIZE" in my boot.js's init function, I've got a resize handler in my menu just titled 'resize' with nothing but "console.log('resize')" inside of it, and nothing happens on resize. I don't understand at all. I found a guide someone put together that has really similar architecture to my project (http://www.netexl.com/blog/making-of-a-responsive-game-in-phaser-part-2/) and even looking at that person's game.js in dev tools and comparing against my game, I can't see how we differ (outside of me keeping my various methods in separate files) or how I've screwed up. Resize just plain doesn't fire on my project, even when it's as simple as logging something to console. Note: I'm able to get other things to log to console just fine, it's just that the resize method doesn't do what it's supposed to do. I'd like to be able to show the whole code for my project if possible, but I fully understand why that's not - if it helps, I can stick all my barebones stuff into a single file and huck it up on jsbin or something similar. Still - does anyone have any clue where I could start looking as to why setting my ScaleManager to RESIZE doesn't fire my resize command?

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.

Hi everyone! I am diving into the brand new Phaser 3 and everything is awesome so far. In previous games I developed using Phaser 2, I heavily relied on the USER_SCALE at the ScaleManager in order to make responsive games. I know that the new ScaleManager is still in the works, but how can I achieve the similar results now by hand? Thanks in advance, Vinicius

Hi everyone! I'm currently building a Phaser tap tap like game for mobile devices. Using Phaser for the first time, I digged into the hard topic of scaling my game for multiple screen sizes and pixel ratios. After looking at every available scale modes, I choosed to go for Phaser.ScaleManager.RESIZE which looks perfect for what I want (changes the Game size to match the display size). The game looks good on my desktop screen but seems blurry when using an iPhone or Samsung Galaxy S8. I looked at many forum topics but the answer to the question of making a game "responsive" doesn't look clear. Is there anything I can do to make my texts and pictures not blurry on devices where the pixel ratio is higher than 1? Like scaling my game according to the pixel ratio without distorting it?

Hello friends, I want to know how are you making your games responsive to landscape and portrait orientations like a website. I want all the buttons and background elements to stay the same ratio in both orientations. My buttons and background are stretching in both orientations. I have made my canvas 100% in css.I was using Phaser.ScaleManager.showall and i also tried .RESIZE. Resize causes the game background and buttons to float in space.

Let me preface this by saying that I have read every single post about this topic, and I simply cannot understand what I'm doing wrong. I am using the latest phaser ce build, phaser 2.7.3. My target browser is desktop Chrome (I don't care much for any other browser, mobile platform, etc) Explanation of my issue: I have a text, at position (0,0) [Therefore, no possibility of it no being a whole number, etc]. It is not scaling properly. => Minimal fiddle testcase showing my problem: http://jsfiddle.net/1g3cj8md/ => Expected outcome if game is not scaled: http://jsfiddle.net/encznmqq/1/ Is this a bug? Am I missing anything? I have tried a couple of things, which are commented out in the fiddle, but it boils down to a bunch of random ideas that I had. I have no idea how to scale text that is supposed to be pixelated. I hope someone can help, and that this can help someone. Relevant examples that I have seen (and yes, I have read the docs): https://phaser.io/examples/v2/display/render-crisp https://belenalbeza.com/retro-crisp-pixel-art-in-phaser/ https://phaser.io/examples/v2/text/google-webfonts (notice that that link is from 2014) and ovbiously, https://phaser.io/docs/2.6.2/Phaser.ScaleManager.html. So please, can anyone help me?

I'm trying to make a dynamically sized game. It seems that setting game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE; would be the way to go. and then using in the create function of each state I add this: game.scale.onResize = this.onResize; then add in the function onResize: function () { console.log('menu RESIZE'); game.scale.setGameSize(200, 250); } which correctly resizes the game. BUT, it also seems to keep recalling itself each time. I've set the style of the parent div to have no paddings/margin, but I can't work out why it doesn't only call once (if I comment out the setGameSize code, then the function only calls one.) Any ideas where I'm going wrong?

I'm working on a game and I'm trying to implement dynamic resizing, but I have some unexplained issues. My game is optimized for a phone portrait layout. Depending on the phone screen size (or browser window size) it should adjust the layout, the width is fixed size but the height is adjusted. So make it taller if necessary and center some sprites or texts. I've created a code example which works, but the resize function gets called many times. So to isolate and test the resize function see this github example: https://github.com/BdR76/phaserresize/ The code example has 4 states: Boot, Preloader, MainMenu, Game. I won't post all the code here, but what I've done is essentially this: // Boot state, in create() setup the scale.setResizeCallback event handler. mygame.Bootup.prototype = { create: function(){ this.game.scale.setResizeCallback(this.resizeCallback, this); this.game.scale.onSizeChange.add(this.onSizeChange, this); }, resizeCallback: function(manager) { // browser window changes size, resize the game var ratio = window.innerHeight / window.innerWidth; if (GAME_WIDTH * ratio > GAME_HEIGHT) { this.scale.setGameSize(GAME_WIDTH, Math.floor(GAME_WIDTH * ratio)) // too tall, adjust height resolution } else { this.scale.setGameSize(GAME_WIDTH, GAME_HEIGHT); // too wide, just use fixed width and empty side bars }; }, onSizeChange: function() { // fire the game resize event for the current state (make sure each state has this) this.game.state.callbackContext.resize(); } }; And then both the MainMenu and Game have a resize function that adjusts its layout and positions of sprites, text etc., it's a little similar to this topic. My github code example works, however the resizeCallback function from the Bootup state gets called all the time. It fires many times right from the beginning even before I do anything. I'm not resizing and not switching state or anything, and it get called not once but continually. So my questions is: Why is the onSizeChange event called so often? Is this normal and should I use a different event?

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?

Hi guys, I'm having a slight problem getting my head round using the Phaser.RESIZE scale mode with devices which have a higher pixel ratio than 1. The game resizes fine, but on modern iOS and android devices, the game loses its 'crispness', and objects become blurry, particularly smaller text. I know this is down to higher pixel densities of these devices, but I've not managed to find a solution for the canvas to utilise these extra pixels, as resize mode seems to be bound to the physical document dimension (I'm creating a responsive game which will fill the device/webpage window on either orientation, so sadly the SHOW_ALL approach won't work). Just wondering if anyone had uncovered any solution, or had any advice, as there doesn't seem to have been any conclusion on other similar posts. Thanks as always!

Pre v2.2 I always used scale mode SHOW_ALL like this: this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = false; this.scale.setScreenSize(true); On a desktop browser, this always kept my entire game in view, regardless of how small I made the browser - either height or width. Now my code looks like this: this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.setMinMax(1024/2, 672/2, 1024*2, 672*2); this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = false; (The game parent is a div with no css attached to it) Now the game fills the browser width - scaling it up usually, and in order to maintain aspect ratio the height is also scaled up, meaning I have to scroll down to see the bottom part of the game. Pre 2.2, it used the 'minimum scale' in order to scale the game - ie. the height was smaller so it used that to determine a scale to be applied to both width and height. It appears that now it uses the maximum scale... When I resize the browser window width, the game rescales, but if I change the height it doesn't. Hoping there is a property or something easy to set to make it use the minimum scale again! Thanks a lot

Hello all! I'm having a problem developing a Phaser game for mobile devices, the aspect ratio is fixed as 4:3, so I adjust the canvas size to keep that aspect ratio. When the user is changing the orientation, the canvas is keeping the same aspect ratio but is getting bigger. My problem is when I set the new size to Phaser game object, it is upscaling the content inside and is pixelated. My code looks like this: var taskAspect = 4/3, screenHeight = window.innerHeight, screenWidth = window.innerWidth, screenAspect = screenWidth / screenHeight; if (screenAspect < taskAspect) { game.width = screenWidth; game.height = game.width / taskAspect; } else { game.height = screenHeight; game.width = game.height * taskAspect; }My question is: is possible to change Phaser game size telling Phaser: "ey, I want to change game size but please don't scale content inside!!" ? Thanks a lot!

Hi everyone, I'm making a doodle jump remake. My base game is 52 by 100 for easy scaling for devices with 16:9. However when on the scaled size all my sprites are antialiased How can I make my sprites back to pixelart ? Thanks in advance doodle jump remake.zip

Hey! After upgrading from a previous version (2.0.something) to 2.2.2 I noticed that my orientation handling code (lifted directly from the Full Screen Mobile template) no longer works. This is my Boot.js: BasicGame = { /* Your game can check BasicGame.orientated in internal loops to know if it should pause or not */ orientated: false};BasicGame.Boot = function (game) {};BasicGame.Boot.prototype = { create: function () { this.input.maxPointers = 1; this.stage.disableVisibilityChange = true; this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; // this.scale.minWidth = 480; // this.scale.minHeight = 260; // this.scale.maxWidth = 1024; // this.scale.maxHeight = 768; // this.scale.pageAlignHorizontally = true; // this.scale.pageAlignVertically = true; this.scale.forceOrientation(true, false); //this.scale.hasResized.add(this.gameResized, this); this.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this); this.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this); // this.scale.setScreenSize(true); this.state.start('Preloader'); }, enterIncorrectOrientation: function () { BasicGame.orientated = false; document.getElementById('orientation').style.display = 'block'; }, leaveIncorrectOrientation: function () { BasicGame.orientated = true; document.getElementById('orientation').style.display = 'none'; }};With 2.0.x phaser.js lib, the above code displays my "please rotate device" image when the orientation changes to portrait. After swapping for 2.2.2 phaser.js, it doesn't work. The functions "enterIncorrectOrientation" and "leaveIncorrectOrientation" never actually run (I tested it with console.log), so I guess either the Signals are not added or Phaser doesn't detect orientation anymore. API change? What should I try instead? I guess I could use .setResizeCallback instead, then add a test for example if window.innerWidth < window.innerHeight then display the orientation image, so there's that. But I'd prefer to use a built-in Phaser's method if possible.

Hi there, I´m having a problem scaling a game for mobile purposes... everything works fine in desktop, the only problem is scaling in mobile, I want to scale using EXACT_FIT for this case but it´s not working at all and I don´t know why. Firs of all, I´m using Phaser v2.0.7 with Pixi.js v1.6, and I can´t use a most recent version of Phaser because it´s not working with my game and cocoonjs, so not new Scale Manager at all In my html, I create the game this way var game = new Phaser.Game(1280, 720, Phaser.AUTO);and the game appears on my cocoonjs launcher but really small, probably is using the minWidth and minHeight... This is my code in Boot.js (I´m using the mobile template), can anyone tell me why is not working?, everything looks fine to me if (this.game.device.desktop){ //THIS PART IS OK}else{ this.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT; this.scale.minWidth = 480; this.scale.minHeight = 260; this.scale.maxWidth = 1920 this.scale.maxHeight = 1080; this.scale.forceOrientation(true, false); this.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this); //THIS IS WORKING this.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this); // THIS IS WORKING TOO this.scale.setScreenSize(true);}

Hi there guys, so I finished my game and the only problem I have is that iOS is ignoring the ScaleManager, and it´s working perfectly on desktop and Android. On iOS it´s working like ScaleManager.EXACT_FIT, I´m trying the game with cocoonJS Launcher and with Webview (I can´t user Canvas+ as I use some DOM stuff but I don´t need it anyway). This is the code I have, I just updated to Phaser 2.2 but it´s still buggy, any recomendations? if (this.game.device.desktop){ //desktop code}else{ this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.setMinMax(260, 480, 1536, 2048); this.game.scale.pageAlignHorizontally = true; this.game.scale.pageAlignVertically = true; this.scale.forceOrientation(false, true);}

I am new to Phaser development and I am currently having trouble figuring out the correct code needed to have a game resize to the full viewport of a browser on window resize without stretching any of the graphics. I am working on a vertical scroller with a tilemap (1024x4608) for the base background/map. On window resize (or orientation change) I would like to be able to adjust the game dimensions to fill up the entire viewport while keeping the same ratio to allow the tilemap not to be distorted. From my tests, it seems that I would want to keep the width the same and adjust the height then let the game scaling do its thing to allow the game to take up the full browser viewport without stretching the tilemap. I just have not been able to figure out the correct ScaleManager settings to make that happen. I tried the following which does scale the game but does not adjust the width/height to take up the whole viewport: Game instantiation: var gameHeight = window.innerHeight * 1024 / window.innerWidth;var game = new Phaser.Game(1024, gameHeight, Phaser.CANVAS, 'test-game');In the window resize function: game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;game.scale.pageAlignHorizontally = true;game.scale.pageAlignVertically = true;game.scale.setScreenSize();game.scale.refresh();And this attempt takes up the whole viewport but does not scale correctly so it stretches the tilemap: In the window resize function: game.scale.setMaximum();game.scale.refresh();Any help would be greatly appreciated.

i need some help understanding as to what ScaleManager and setScreenSize(true); do. this.game.scaleMode = Phaser.ScaleManager.SHOW_ALL;this.game.scale.setScreenSize(true);