vinod777

Members
  • Content Count

    10
  • Joined

  • Last visited

About vinod777

  • Rank
    Member

Contact Methods

  • Website URL
    codetuto.com
  • Twitter
    https://twitter.com/vinodkumarkn

Profile Information

  • Gender
    Male
  • Interests
    Games, programming
  1. It worked for me at that time using the previous Phaser library. But now I don't use this because, most devices are somewhat powerful enough and I usually set a balanced fixed resolution i.e., 960x640
  2. Hi chris1986m, I haven't tried the scaling solution on new phaser versions yet as I was busy on other projects. I believe the scaling is changed on newer phaser versions. If you have some coding experience, you can modify it for the latest phaser. Basically the scaling is like letterbox first, then increase the scale by screenwidth/letterboxwidth.
  3. Sorry, I am not so familiar with typescript. Hope someone will post a solution for your problem. If you are comfortable with typescript, you can try to code the typescript version.
  4. What if you want to show an upgrade screen or another dialog above the game. For example how to display an onscreen instructions dialog above the game. The thing is that I need to pause the game including the physics(ARCADE). The thing is that the arcade physics can't be paused. I believe if I use p2 physics, there is an update call, which I can opt not to call when another popup is displayed. Please share your ideas. It was nice if there was a sleep option in a state and we can switch to another state, then resume later; which I think not possible without a full framework change.
  5. I haven't tested with fixed frame widths and heights. I believe you could get the value for the "normal" screen and call convertWidth(value) and convertHeight to get the modified values for different screens.
  6. @plicatibu You don't need to add anything. The above code will scale the game for all devices correctly. But an important thing that has to be taken in consideration is that the game will crop out some areas out of the screen, so you must not position important game realated things on the edges. But align hud elements to the edge of the screen.
  7. Well, thanks for your comments. I was playing with this and found that the scaling works but it will make other things difficult while creating games. For example, that mouse click offset problem you told. I believe this post clears all your doubts. I have copied some text from my blog post that I will share the link on bottom. We are considering five screen sizes; Small – 360x240 Normal – 480x320 Large – 720x480 XLarge – 960x640 XXLarge – 1440x960 First, we need to create assets for those screens. In this example, we are going to create a bg image to show how it will appear on all resolutions. You can use any asset resizer for this purpose, but make sure the bg dimensions are exactly the above values for each one. I used this one https://github.com/asystat/Final-Android-Resizer What we are going to do is like this: for a 800x480 device, the game loads 'large' asset and uses 720x480 resolution and scales the canvas up to fill the screen. We need to decide on what will be our game logic width and logic height. That is, if a sprite is positioned horizontally on logicWidth it should display on right edge. In this example, we take 480x320 as logicWidth and logicHeight respectively. Based on this aspect ratio, we will scale up/down the gameWidth and gameHeight. In the index.html, (function () { //By default we set BasicGame.screen = "small"; BasicGame.srx = Math.max(window.innerWidth,window.innerHeight); BasicGame.sry = Math.min(window.innerWidth,window.innerHeight); BasicGame.logicWidth = 480; BasicGame.logicHeight = 320; var r = BasicGame.logicWidth/BasicGame.logicHeight; if(BasicGame.srx >= 360){ BasicGame.screen = "small"; BasicGame.gameWidth = 360; } if(BasicGame.srx >= 480){ BasicGame.screen = "normal"; BasicGame.gameWidth = 480; } if(BasicGame.srx >= 720){ BasicGame.screen = "large"; BasicGame.gameWidth = 720; } if(BasicGame.srx >= 960){ BasicGame.screen = "xlarge"; BasicGame.gameWidth = 960; } if(BasicGame.srx >= 1440){ BasicGame.screen = "xxlarge"; BasicGame.gameWidth = 1440; } //If on deskop, we may need to fix the maximum resolution instead of scaling the game to the full monitor resolution var device = new Phaser.Device(); if(device.desktop){ BasicGame.screen = "large"; BasicGame.gameWidth = 720; } device = null; BasicGame.gameHeight = BasicGame.gameWidth/r; //We need these methods later to convert the logical game position to display position, So convertWidth(logicWidth) will be right edge for all screens BasicGame.convertWidth = function(value){ return value/BasicGame.logicWidth * BasicGame.gameWidth; }; BasicGame.convertHeight = function(value){ return value/BasicGame.logicHeight * BasicGame.gameHeight; }; var game = new Phaser.Game(BasicGame.gameWidth,BasicGame.gameHeight, Phaser.AUTO, 'game'); // Add the States your game has. // You don't have to do this in the html, it could be done in your Boot state too, but for simplicity I'll keep it here. game.state.add('Boot', BasicGame.Boot); game.state.add('Preloader', BasicGame.Preloader); game.state.add('MainMenu', BasicGame.MainMenu); game.state.add('Game', BasicGame.Game); // Now start the Boot state. game.state.start('Boot');})();In the Boot.js, create a method scaleStage and add this code, scaleStage:function(){ if (this.game.device.desktop) { this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; } else { this.scale.scaleMode = Phaser.ScaleManager.NO_BORDER; 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.scale.minWidth = BasicGame.gameWidth/2; this.scale.minHeight = BasicGame.gameHeight/2; this.scale.maxWidth = BasicGame.gameWidth; this.scale.maxHeight = BasicGame.gameHeight; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.scale.setScreenSize(true); if(this.scale.scaleMode==Phaser.ScaleManager.NO_BORDER){ BasicGame.viewX = (this.scale.width/2 - window.innerWidth/2)*this.scale.scaleFactor.x; BasicGame.viewY = (this.scale.height/2 - window.innerHeight/2 - 1)*this.scale.scaleFactor.y; BasicGame.viewWidth = BasicGame.gameWidth-BasicGame.viewX; BasicGame.viewHeight = BasicGame.gameHeight-BasicGame.viewY; }else{ BasicGame.viewX = 0; BasicGame.viewY = 0; BasicGame.viewWidth = BasicGame.gameWidth; BasicGame.viewHeight = BasicGame.gameHeight; } document.getElementById("game").style.width = window.innerWidth+"px"; document.getElementById("game").style.height = window.innerHeight-1+"px";//The css for body includes 1px top margin, I believe this is the cause for this -1 document.getElementById("game").style.overflow = "hidden"; },We set SHOW_ALL for desktop browsers and NO_BORDER for mobile devices. Of course, you can change this to your preference. There are four parameters defined - viewX, viewY,viewWidth and viewHeight These correspond to our viewing area. We will require this to position hud elements to the edges of the screen. In the preloader, you can load assets like this.load.image('bg','assets/'+BasicGame.screen+"/bg.this.load.image('playBtn','assets/'+BasicGame.screen+"/playBtn.png");Before doing all this, please use this ScaleManager2.js file. I have modified the scaling method in Phaser.ScaleManager to support the NO_BORDER scaling. This ensure us that mouse input clicks are positioned well and not offsetted (This happened before during testing and hence I wrote this code). /**Injecting no border code for Phaser.ScaleManager*/Phaser.ScaleManager.prototype.NO_BORDER = 3;Phaser.ScaleManager.prototype.setScreenSize = function (force) { if (typeof force == 'undefined') { force = false; } if (this.game.device.iPad === false && this.game.device.webApp === false && this.game.device.desktop === false) { if (this.game.device.android && this.game.device.chrome === false) { window.scrollTo(0, 1); } else { window.scrollTo(0, 0); } } this._iterations--; if (force || window.innerHeight > this._startHeight || this._iterations < 0) { // Set minimum height of content to new window height document.documentElement['style'].minHeight = window.innerHeight + 'px'; if (this.incorrectOrientation === true) { this.setMaximum(); } else if (!this.isFullScreen) { if (this.scaleMode == Phaser.ScaleManager.EXACT_FIT) { this.setExactFit(); } else if (this.scaleMode == Phaser.ScaleManager.SHOW_ALL) { this.setShowAll(); } else if(this.scaleMode == Phaser.ScaleManager.NO_BORDER) { this.setNoBorder();//Don't call setSize clearInterval(this._check); this._check = null; return; } } else { if (this.fullScreenScaleMode == Phaser.ScaleManager.EXACT_FIT) { this.setExactFit(); } else if (this.fullScreenScaleMode == Phaser.ScaleManager.SHOW_ALL) { this.setShowAll(); } else if(this.scaleMode == Phaser.ScaleManager.NO_BORDER) { this.setNoBorder();//Don't call setSize clearInterval(this._check); this._check = null; return; } } this.setSize(); clearInterval(this._check); this._check = null; } }Phaser.ScaleManager.prototype.setNoBorder = function(){ this.setShowAll(); var ow = parseInt(this.width,10); var oh = parseInt(this.height,10); var r = Math.max(window.innerWidth/ow,window.innerHeight/oh); this.width = ow*r; this.height = oh*r; this.setSize2();}Phaser.ScaleManager.prototype.setSize2 = function(){ this.game.canvas.style.width = this.width + 'px'; this.game.canvas.style.height = this.height + 'px'; this.game.input.scale.setTo(this.game.width / this.width, this.game.height / this.height); if (this.pageAlignHorizontally) { if (this.incorrectOrientation === false) { this.margin.x = Math.round((window.innerWidth - this.width) / 2); this.game.canvas.style.marginLeft = this.margin.x + 'px'; } else { this.margin.x = 0; this.game.canvas.style.marginLeft = '0px'; } } if (this.pageAlignVertically) { if (this.incorrectOrientation === false) { this.margin.y = Math.round((window.innerHeight - this.height) / 2); this.game.canvas.style.marginTop = this.margin.y + 'px'; } else { this.margin.y = 0; this.game.canvas.style.marginTop = '0px'; } } Phaser.Canvas.getOffset(this.game.canvas, this.game.stage.offset); this.aspectRatio = this.width / this.height; this.scaleFactor.x = this.game.width / this.width; this.scaleFactor.y = this.game.height / this.height; this.scaleFactorInversed.x = this.width / this.game.width; this.scaleFactorInversed.y = this.height / this.game.height; this.hasResized.dispatch(this.width, this.height); this.checkOrientationState();}And remember, when positioning an object, use convertWidth and convertHeight. For HUD elements use viewX, viewY, viewWidth and viewHeight. Full code example here: link Link to the full blog post I hope I've not made any mistakes. Thanks.
  8. UPDATE: Read the thread down to find posts with best solution(s); There is a lot of discussions in this forum about scaling a Phaser Game. I found most of the game devs and examples using a high quality art/assets for games. For smaller devices the canvas is scaled down accordingly. This creates a doubtful question in our minds about the performance impact of overkilling small devices with hd graphics. Well I found the first step to improve that. 1. First of all decide the width and height of your game world. Think of this dimension in an ideal world i.e., 1:1 pixel ratio. So for example if the width and height is 800x480, then adding a sprite on x=0 will be on left most edge and on x=800, it will be on right most edge. This is your logical game width and height. 2. Create the phaser game with the logical width and height. var gameWidth = 800;var gameHeight = 480;var game = new Phaser.Game(gameWidth, gameHeight, Phaser.AUTO, 'game');3. Now do a show_all scaling, so that black bars will appear on non-fitting screen sides. This is added in a method called scaleStage inside the Boot state. if (this.game.device.desktop) { this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.minWidth = gameWidth/2; this.scale.minHeight = gameHeight/2; this.scale.maxWidth = gameWidth; this.scale.maxHeight = gameHeight; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.scale.setScreenSize(true); } else { this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.minWidth = gameWidth/2; this.scale.minHeight = gameHeight/2; this.scale.maxWidth = 2048; //You can change this to gameWidth*2.5 if needed this.scale.maxHeight = 1228; //Make sure these values are proportional to the gameWidth and gameHeight 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); }4. Now what the above code will do is scale your game to SHOW_ALL. This will fit your game inside the screen. Black bars appears possibly. We are now going to fill the game into the screen by scaling the canvas up to the point where the black bars are removed. After the above code, add this. var ow = parseInt(this.game.canvas.style.width,10);var oh = parseInt(this.game.canvas.style.height,10);var r = Math.max(window.innerWidth/ow,window.innerHeight/oh);var nw = ow*r;var nh = oh*r;this.game.canvas.style.width = nw+"px";this.game.canvas.style.height= nh+"px";this.game.canvas.style.marginLeft = (window.innerWidth/2 - nw/2)+"px"; this.game.canvas.style.marginTop = (window.innerHeight/2 - nh/2)+"px";document.getElementById("game").style.width = window.innerWidth+"px";document.getElementById("game").style.height = window.innerHeight-1+"px";//The css for body includes 1px top margin, I believe this is the cause for this -1document.getElementById("game").style.overflow = "hidden";5. Now the content will be filled. You can call scaleStage on 'leaveIncorrectOrientation' method too. You can decide the values for gameWidth and gameHeight according to the device resolution(not devicePixelRatio, html5!=native), load the different assets like sd/md/hd accordingly. This time, you need to think about the logical values and the loaded asset dimensions. You may want to multiply screen co-ordinates with the loaded asset scale. I will probably write a blog post on this soon. Thanks for this super cool game library. & Thanks for reading this.