• Content Count

  • Joined

  • Last visited

  1. Thank you so much your code work perfectly!!!! In this case I can do for any screen size without the borders on the sides. I also on iPad work great Maybe someone will be helpful , my background image size : 390x570 , and my game proportion is 320x440 I tested on iPad, iPhone 3-4-5, Z1 compact, samsung GT-S6500,/GT-S5369, LG-E469 Thank you yet !
  2. I've tested also the original script what can be find in the example , setted wit safe zone and with window inner height/innerwidth, but the bot case have the problem with scaling and spaces. Anyone know where I made the error, I proved some solution, setting the meta parameters, load the script in the body onload , but without success... In the index.html <script type="text/javascript">var SAFE_ZONE_WIDTH = 320;var SAFE_ZONE_HEIGHT = 440;var game;(function () {game = new Phaser.Game(SAFE_ZONE_WIDTH , SAFE_ZONE_HEIGHT, Phaser.CANVAS, 'game');//game = new Phaser.Game(window.innerWidth , window.innerHeight, Phaser.CANVAS, 'game');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'Boot');})();</script>in the boot.js preload: function () { this.stage.backgroundColor = '#ccffee'; this.load.image('info', 'images/info.png'); this.load.image('settings', 'images/settings.png'); this.load.image('bg', 'images/bg.jpg'); this.load.image('orientation', 'images/orientation.jpg'); }, create: function () { this.input.maxPointers = 1; this.stage.disableVisibilityChange = true; if ( { this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.minWidth = SAFE_ZONE_WIDTH; this.scale.minHeight = SAFE_ZONE_HEIGHT; this.scale.maxWidth = 1536; this.scale.maxHeight = 2048; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.scale.setScreenSize(true); } else { this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.minWidth = SAFE_ZONE_WIDTH; this.scale.minHeight = SAFE_ZONE_HEIGHT; this.scale.maxWidth = 1536; this.scale.maxHeight = 2048; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.scale.forceOrientation(true, false); this.scale.hasResized.add(this.gameResized, this); this.scale.forceOrientation(false, true); this.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this); this.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this); this.scale.setScreenSize(true); } var bg = this.add.sprite(,, 'bg'); bg.anchor.setTo(0.5, 0.5); =,, 'info'); this.settings =, 0, 'settings'); this.settings.anchor.setTo(1, 0); } Phaser original example with safe zone: Phaser original example with inner properties:
  3. Hi Dnassler, I've tested your script, also with safe zone and window inner properties. When I initialize with safe zone, the game scaled well in any device, also when are rotated, only little thing , with the white space on the sides. WITH SAFE ZONE: WITH WINDOW INNERWIDTH/INNERHEIGHT: In this case not scaled well and one case have also the white space on bottom This is the script. What I doing wrong? <!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="format-detection" content="telephone=no"> <meta name="HandheldFriendly" content="true" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <meta name="HandheldFriendly" content="true" /> <meta name="robots" content="noindex,nofollow" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-title" content="Phaser App"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" /> <style> html,body{ margin: 0; padding: 0; } #game_div{ overflow: hidden; } </style> <script type="text/javascript" src="js/phaser.min.js"></script> <script type="text/javascript" src="js/Boot.js"></script> <script src="js/Preloader.js"></script> <script src="js/MainMenu.js"></script> <script src="js/Game.js"></script> <script type="text/javascript"> var SAFE_ZONE_WIDTH=320; var SAFE_ZONE_HEIGHT=440; var game; function init(){ game = new Phaser.Game(SAFE_ZONE_WIDTH , SAFE_ZONE_HEIGHT, Phaser.CANVAS, 'game_div'); // game = new Phaser.Game(window.innerWidth , window.innerHeight, Phaser.CANVAS, 'game_div'); game.state.add('Boot', BasicGame.Boot); game.state.add('Preloader', BasicGame.Preloader); game.state.add('Game', BasicGame.Game); game.state.start('Boot'); window.addEventListener('resize', function(event){ resizeGame(); }); var resizeGame = function () { game.stage.scale.setShowAll(); game.stage.scale.refresh(); } } </script> </head> <body onload="init()"> <div id="game_div"> </div> </body></html>BasicGame = { /* Here we've just got some global level vars that persist regardless of State swaps */ score: 0, /* If the music in your game needs to play through-out a few State swaps, then you could reference it here */ music: null, /* Your game can check BasicGame.orientated in internal loops to know if it should pause or not */ orientated: false};BasicGame.Boot = function (game) { = null;};BasicGame.Boot.prototype = { preload: function () { this.stage.backgroundColor = '#71c5cf'; this.load.image('bg', 'img/bg.jpg'); }, create: function () { this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.setShowAll(); this.scale.pageAlignHorizontally = true; this.scale.pageAlignVeritcally = true; this.scale.refresh(); this.state.start('Preloader'); }, gameResized: function (width, height) { // This could be handy if you need to do any extra processing if the game resizes. // A resize could happen if for example swapping orientation on a device. }, enterIncorrectOrientation: function () { BasicGame.orientated = false; // document.getElementById('orientation').style.display = 'block'; }, leaveIncorrectOrientation: function () { BasicGame.orientated = true; // document.getElementById('orientation').style.display = 'none'; }, shutdown: function(){ console.log('boot.shutdown'); }};
  4. Hi all! First sorry for my poor English. I read some articles and tested them , but they work only 1-2-3 device. I proved to doing with the viewport scaling, but that also don't work, or when i doing the refresh in the page or when simply loaded. My test are there: and But what I really want this scaled and centered the stage with the fluid positioned elements (my bg is a little bigger (360 × 570) than the default size to remedy the different screen sizes but the safe zone is 320x440): @vinod777 first compliment for your code, I think that is a better solution to preload the right image, and will have the possibility use the fluid positioned elements. I tested your code example on different devices, but same case work well only if the page loaded only in landscape mode, or if i did the refresh on the page. I'm really newbie in phaser, and I would to want test your code, but I don't think to have that code level what you have, anyway what I can, test in some device any solution. And how I know in phaser are some things what will be careful, camera, world etc… Thanks a lot for any idea, and have a nice evening.
  5. 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.