How to scale entire game up

[TommyBs]

Hi,

 

I'm extremely new to Phaser and I've started going through the src and examples to convert a game. One thing I can't figure out though, is how to scale up the entire game. I know I can scale up a particular sprite, but how would you scale up the entire game? Also is there anything extra I would have to do to keep the "pixel art" feel of the game when scaling? Apologies if this is blindingly obvious, but I've come to Phaser from working with Impact and I'm trying to "unlearn" as it were!

 

Have to say I'm impressed with the framework, though I am looking forward to the completed docs! 

 

Thanks

 

[Mike]

:( I was making such a good post but accidentaly hit F5 so this time a short version:.

 

1. Check this:

 

phaser/examples/tilemaps/mariotogether.php - http://gametest.mobi/mariocombo/

 

2. Look at these files:

 

phaser/src/core/Stage.js = Phaser.Stage = game.stage

phaser/src/system/StageScaleMode.js = Phaser.Stage = game.stage.scaleMode 

 

3. Find when do you want the game to scale (on device rotation, on game start on window resize...)

 

Going fullscreen is easy as:

game.stage.scale.startFullScreen();

Scaling is 3 lines:

game.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL; //resize your window to see the stage resize toogame.stage.scale.setShowAll();game.stage.scale.refresh();

You can copy/paste this in the of the example and comment startFullScreen

function goFull() {...}

 

There are 3 options for scaleMode:

Phaser.StageScaleMode.EXACT_FIT = 0;Phaser.StageScaleMode.NO_SCALE = 1;Phaser.StageScaleMode.SHOW_ALL = 2;

Just test the to see the difference also till doc come you can read from the source code - it's nice formatted and commented

 

Also all of this was my theory and approach I'll be glad if Rich or someone else share a good practice about scaling.

[Mathieu Anthoine]

Hi,

 

I'm also new to Phaser.

StageScaleMode is very powerfull and setShowAll seems close to perfection but...

 

Is there a solution to manage a full fill of screens that have an aspect Ratio similar but not the same proportion, like iPhone 4 and 5.

 

If I create a game object with a 960x640 size and I don't want to stretch the graphics or have black strips on left and right of the iPhone 5. what is the best way to manage screen ?

 

Do I need to think of the larger screen for the game object ? 1136x640 and use the setSize method to force heigth to always be 640 ?

 

The idea is to always have a game that fill the entire screen. The positions of the differents objects in the GUI or IG would be manually managed by me after that.

 

But in the case where I start from the bigger size possible and have a game size that is bigger than the canvas size, will I have performance issues on the smallest device ?

 

Is it the best way to resolve the case I described ?

 

Thank you for your help.

[Michel (Starnut)]

Hi mamayama,

 

when I want this effect in my games (since I don't want distorted graphics either) I pass in window.innerWidth and window.innerHeight on game initialization both multiplied with window.devicePixelRatio  to cover retina displays and then set the scaleMode to SHOW_ALL (NO_SCALE caused some problems with input when I wrapped the game into an App using CocoonJS).

 

That way you fill the screen, but essentially you also turn of scaling completely, since your game dims are already set to the window dims. You could play with just passing in height or width as the dynamic window value (depending whether you'd want portrait or landscape mode) and the other as a fixed value to achieve some scaling again. In that case you may want to ditch multiplication with the devicePixelRatio. But I haven't played enough with that, yet.

 

Here is example code for the first approach:

 

For portrait mode:

// get dimensions of the window considering retina displaysvar w = window.innerWidth * window.devicePixelRatio,    h = window.innerHeight * window.devicePixelRatio;// simply pass them invar game = new Phaser.Game(w, h, Phaser.AUTO, 'gameContainer'); 

For landscape mode:

// ... use same variables as above// for landscape mode always pass in the bigger side of the device as widthvar game = new Phaser.Game((h > w) ? h : w, (h > w) ? w : h, Phaser.AUTO, 'gameContainer');

[korgoth]

Hello Starnut,

 

can you show me how you do the scaling in cocoonJS exactly?

 

I tried your example like this:

var width = navigator.isCocoonJS ? window.innerWidth * window.devicePixelRatio : 600;var height = navigator.isCocoonJS ? window.innerHeight * window.devicePixelRatio : 1000;    var game = new Phaser.Game(width, height, Phaser.AUTO, '');

Then in create: function () {}

if (navigator.isCocoonJS) {  this.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL;  this.stage.scale.setScreenSize(true);}

But the game screen is not scaling correctly :S

 

Thank You.

[Mathieu Anthoine]

Hi StarNut,

 

You're right, use innerHeight and innerWidth as the game's  dimension is the good way to fill the browser entirely.

 

In fact what I wanted was to fill the browser AND have a coherent coordinate system to organize the assets on the different devices.

 

So I defined a safe zone, the minimum I want to see on all the devices and create an extra container for my game that help GUI and IG screens to be consistent.

 

Here's my code:

 

var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, '');const SAFE_ZONE_WIDTH=2048;const SAFE_ZONE_HEIGHT=1365;var lGameScale=Math.round(10000 * Math.min(game.width/SAFE_ZONE_WIDTH,game.height / SAFE_ZONE_HEIGHT)) / 10000;var world= game.add.group ();world.scale.setTo (lGameScale,lGameScale);world.x=(game.width-SAFE_ZONE_WIDTH*lGameScale)/2;world.y=(game.height-SAFE_ZONE_HEIGHT*lGameScale)/2;

After that, all my Sprites are attached in the group named "world" that provides the same coordinate system whatever the devices, and a coherent origin point.

[Mathieu Anthoine]

About retina display, you use:

// get dimensions of the window considering retina displaysvar w = window.innerWidth * window.devicePixelRatio,    h = window.innerHeight * window.devicePixelRatio;

and ShowAll to scale.

 

I use:

var lScale = Math.floor(10 / window.devicePixelRatio) / 10;document.write('<meta name="viewport" content="initial-scale=' + lScale + ' user-scalable=no">');

Therefore window.innerWidth and window.innerHeight have the real values, for example width 2048 on iPad 3 and not 1024.

 

Do you know if it's the result in term of performance is the same ?

[Nick]

@Mamayama.

 

I've been trying to get you example working but nothing added to the 'world' group gets scaled with it. Do sprites added to a group inherit the scaling set on the group? Or do you use another approach once the sprites are positioned to 'world'?

Thanks!

[Mathieu Anthoine]

You have to use Phaser 1.1.4, there was a bug about group scale in Phaser 1.1.3

[Ryuuke]

Hello, 

 

I have a question, if we want to create a group, of sprites other that the world group, how do we do?

We can put a group in an other group?

 

 

So I defined a safe zone, the minimum I want to see on all the devices and create an extra container for my game that help GUI and IG screens to be consistent.

I dont understand your safe zone numbers, can you explain why 2048x1365 ?

 

Thanks

[Mathieu Anthoine]

Ryuuke, 

 

the safe zone is the minimum zone I want to see on all devices. You can choose the width and height you want.

 

In my case, the minimum zone is based on an iPhone 4 screen that fit to an iPad Retina device.

The iPad retina is 2048x1536, if I scale an iPhone 4 resolution to fit the iPad I have 2048x1365.

This size allows my graphic team to create graphics at the larger scale possible (even if now some Android devices have larger dimensions than iPad Retina) and always provide HD graphics if necessary.

 

But like I said, you can chose the size you want for safe zone.

 

We can put a group in an other group?

 

 

Yes you can:

 

var world= game.add.group ();world.scale.setTo (lGameScale,lGameScale);world.x=(game.width-SAFE_ZONE_WIDTH*lGameScale)/2;world.y=(game.height-SAFE_ZONE_HEIGHT*lGameScale)/2;var sub=game.add.group();world.add(sub);sub.x=300;sub.scale.setTo(2,2);var animal=new Phaser.Sprite (game,-50,200,'animal');sub.add(animal);

and it works like DisplayContainers in Flash.

[Ryuuke]

Hello,

 

I Still have a problem, I tested out of CocoonJS launcher, seems like the game scalled up, but not the the sprites, they are minified on the top left of the screen, also the tilemap is dont displayed.

 

Do you have a little demo, juste for showing a real example which I / we can test on device.

 

I think most people have problem with CocoonJS scaling 

[Michel (Starnut)]

Oh hi guys, sorry forgot to put a follow marker on the topic:

 

@mamayama

That sounds pretty much like what I had in mind: Define a "safe zone" as you call it, that always gets displayed with some "padding" around it depending on the device size. That's exactly what I'm aiming at for my games. Sadly, I didn't have much time recently to dig into that some more, but there's no way around it eventually so I'd love if we shared some more experiences here.

 

Scaling the view port sounds like a very interesting approach. I'll sure give that a try. As long as you scale stuff up, performance should be ok. If you want retina resolution, I'd even consider putting 2 (or more) sets of graphics with your game and only loading whatever is most appropriate for your resolution.

 

 

@Ryuuke

 

With the approaches explained that's exactly what would happen: The game expands (rather than scales) to use all of the screen but the sprites aren't scaled with it. The idea is to avoid standard scaling behavior. StageScaleMode.SHOW_ALL is needed for Cocoon to work properly but is a bit misleading at this point since we actually avoid that behavior by passing in the actual window width and height as game dimensions. After that, Phaser has no scaling left to do since the game is already filling the window entirely.

 

Try @mamayama's approach scaling up the view port (post #7) if you want the sprites to scale up, as well, or even consider loading different sets of sprites depending on the resolution. That'd also require you to work with dynamic positions for your sprites and use game.world.width, game.world.height and stuff like that a lot and multiply fixed pixel positions with window.devicePixelRatio to handle retina resolutions.

 

Also, you may want to start with something less complex than a tile map, make sure it works and then slowly add complexity. And, yes, next to audio, and loading XML files (for bitmap fonts), scaling seems to be the largest issue people are currently having with CocoonJS.

 

 

Really looking forward to your future results. I'll sure post mine in here. Maybe we can work something out something reusable we can all use for our CocoonJS projects that might even find it's way back into Phaser.

[Mathieu Anthoine]

Hi,

 

Here's some personnal tests you can look at on any devices or on Desktop: http://yamago.com/site/html5/mathieu/

 

The viewPort is scaled as I explained in a previous post.

Assets are related to resolution and HD, MD or LD version are loaded.

As the "world" clip always keeps the same coordinates inside because it's the only container that is scaled to fit the screen, positions and all parameters linked to positions don't need any modification. The only thing you have to do is to change the scale of the assets related to the choice of resolution (HD, MD, LD).

 

Whatever, I decided to stop using Phaser and return to an home made framework based directly on Pixi.js

This framework is a JS version of the AS3/AIR or cocos2DX framework of my studio.

 

I know that there's some problems with Cocoon JS or PhoneGap to get the good informations to scale or modify the viewPort but at the moment, I'm more interested in browser based HTML5 projects.

[dnassler]

I thought I'd add my 2 cents to let others know what I tried and found I liked the behaviour of. Basically deciding on and setting a fixed game size and telling Phaser to scale and rescale appropriately (how I like it done at least).

 

I tried various possibilities and ended up with a viewport meta tag in my HTML as follows:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

and specified the game init call to use a particular pixel width and height... 

const SAFE_ZONE_WIDTH=1200;const SAFE_ZONE_HEIGHT=900;var game = new Phaser.Game( SAFE_ZONE_WIDTH, SAFE_ZONE_HEIGHT, Phaser.AUTO, 'game_div');

and in the game's create method I've got...

game.stage.fullScreenScaleMode = Phaser.StageScaleMode.SHOW_ALL;game.stage.scale.setShowAll();game.stage.scale.pageAlignHorizontally = true;game.stage.scale.pageAlignVeritcally = true;game.stage.scale.refresh();

 

I've also added some javascript to monitor the resizing of the window so that the game gets scaled appropriately as the window is resized...

window.addEventListener('resize', function(event){    resizeGame();});var resizeGame = function () {    game.stage.scale.setShowAll();    game.stage.scale.refresh();}

[Michel (Starnut)]

Thanks for sharing, @dnassler. Will sure give your approach a try.

[gaboritaly]

 

I thought I'd add my 2 cents to let others know what I tried and found I liked the behaviour of. Basically deciding on and setting a fixed game size and telling Phaser to scale and rescale appropriately (how I like it done at least).

 

I tried various possibilities and ended up with a viewport meta tag in my HTML as follows:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

……...

window.addEventListener('resize', function(event){    resizeGame();});var resizeGame = function () {    game.stage.scale.setShowAll();    game.stage.scale.refresh();}

 

 

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) {    this.bg = 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');    }};

[gaboritaly]

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 state.game.state.start('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.game.device.desktop)        {            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(this.game.world.centerX, this.game.world.centerY, 'bg');        bg.anchor.setTo(0.5, 0.5);        this.info = this.game.add.sprite(0, this.game.world.height-50, 'info');        this.settings = this.game.add.sprite(this.game.world.width, 0, 'settings');        this.settings.anchor.setTo(1, 0);    }

 

Phaser original example with safe zone:

 

Phaser original example with inner properties:

[dnassler]

It is unavoidable to have extra space on some sides of some devices when your "safe zone" (expected/designed-for game size) aspect ratio differs from the device's. You could handle it by changing the background color of the HTML so that it isn't white (maybe some other color that would be less of a problem?)... The way that I handled it was to in addition to using a "safe zone" to also detect that actual device's aspect ratio in javascript and then programmatically add in extra game space to the safe zone width OR height and had to alter the game to not put anything important in the space outside of the safe space. But to put something there if the game detects that there is more space on the sides or top/bottom than was primarily designed for. I know it a bit tricky.

 

var w = window.innerWidth ;//* pixelRatio,

    h = window.innerHeight ;//* pixelRatio;

var lw, lh; //landscape width/height in pixels

if ( h > w ) {

lw = h;

lh = w;

} else {

lw = w;

lh = h;

}

var aspectRatioDevice = lw/lh;

 

var aspectRatioSafeZone = SAFE_ZONE_WIDTH / SAFE_ZONE_HEIGHT;

var extraWidth = 0, extraHeight = 0;

if (aspectRatioSafeZone < aspectRatioDevice) {

// have to add game pixels horizontally in order to fill the device screen

extraWidth = aspectRatioDevice * SAFE_ZONE_HEIGHT - SAFE_ZONE_WIDTH;

} else {

// have to add game pixels vertically

extraHeight = SAFE_ZONE_WIDTH / aspectRatioDevice - SAFE_ZONE_HEIGHT;

}

 

//var game = new Phaser.Game( (h > w) ? h : w, (h > w) ? w : h, Phaser.CANVAS, 'game_div');

//var game = new Phaser.Game( SAFE_ZONE_WIDTH, SAFE_ZONE_HEIGHT, Phaser.AUTO, 'game_div');

var game = new Phaser.Game( SAFE_ZONE_WIDTH + extraWidth, SAFE_ZONE_HEIGHT + extraHeight, Phaser.CANVAS, 'game_div');

 

[gaboritaly]

 

It is unavoidable to have extra space on some sides of some devices when your "safe zone" (expected/designed-for game size) aspect ratio differs from the device's. You could handle it by changing the background color of the HTML so that it isn't white (maybe some other color that would be less of a problem?)... The way that I handled it was to in addition to using a "safe zone" to also detect that actual device's aspect ratio in javascript and then programmatically add in extra game space to the safe zone width OR height and had to alter the game to not put anything important in the space outside of the safe space. But to put something there if the game detects that there is more space on the sides or top/bottom than was primarily designed for. I know it a bit tricky.

 

var w = window.innerWidth ;//* pixelRatio,

    h = window.innerHeight ;//* pixelRatio;

var lw, lh; //landscape width/height in pixels

if ( h > w ) {

lw = h;

lh = w;

} else {

lw = w;

lh = h;

}

var aspectRatioDevice = lw/lh;

 

var aspectRatioSafeZone = SAFE_ZONE_WIDTH / SAFE_ZONE_HEIGHT;

var extraWidth = 0, extraHeight = 0;

if (aspectRatioSafeZone < aspectRatioDevice) {

// have to add game pixels vertically in order to fill the device screen

extraWidth = aspectRatioDevice * SAFE_ZONE_HEIGHT - SAFE_ZONE_WIDTH;

} else {

// have to add game pixels horizontally

extraHeight = SAFE_ZONE_WIDTH / aspectRatioDevice - SAFE_ZONE_HEIGHT;

}

 

//var game = new Phaser.Game( (h > w) ? h : w, (h > w) ? w : h, Phaser.CANVAS, 'game_div');

//var game = new Phaser.Game( SAFE_ZONE_WIDTH, SAFE_ZONE_HEIGHT, Phaser.AUTO, 'game_div');

var game = new Phaser.Game( SAFE_ZONE_WIDTH + extraWidth, SAFE_ZONE_HEIGHT + extraHeight, Phaser.CANVAS, 'game_div');

 

 

 

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 !

[gabenix]

Hey Guys,

 

There's lots of good information on this thread! I'd like to add my two cents about the method that is working for me ;-)

 

The method I chose fills the screen as well, but also scales/zooms the game content to keep everything purportional based on either the vertical or horizontal ratio of your initial development size (you must choose one or the other), it also keeps the coordinate system for sprites, physics, etc the same. This method works best for my needs and I feel could be helpful for others.

 

Games that have worlds that move horizontally such as endless runners will use a scale based on the height. Games that have worlds that move vertically will use a scale based on width.

 

Below are examples of how a horizontal scrolling game would appear on screens with different sizes and aspect ratios.

 

 

And the code is below.. To keep things simple I havn't included any code for "safe zones" or device orientation.

<script type="text/javascript">var gameWidth = window.innerWidth * window.devicePixelRatio;var gameHeight = window.innerHeight * window.devicePixelRatio;    // HORIZONTAL SCROLLING GAMES - The base height you choose to develop the game - will be used to initialize game scalingvar devY = 500;// VERTICAL SCROLLING GAMES - The base width you choose to develop the game - will be used to initialize game scaling//var devX = 500;// Initialize scaling for horizontal scrolling gamesvar game = new Phaser.Game( (devY / gameHeight) * gameWidth, devY, Phaser.AUTO, 'game', { preload: preload, create: create, render: render, update: update });// Initialize scaling for vertical scrolling games//var game = new Phaser.Game( devX, (devX / gameWidth) * gameHeight, Phaser.AUTO, 'game', { preload: preload, create: create, render: render, update: update });    function preload() {    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;    game.height = gameHeight;    // Assign the available window Height    game.width = gameWidth;        // Assign the available window Width    game.scale.refresh();        // Scale the game to fit the screen        // Your code...    }function create() {    // Your code...}function update() {    // Your code...}    </script>

Basically you will choose a "base" height or width to develop your game. You can then develop the entire game around that base height or width using normal x,y coordinates for sprites, tilesheets, physics etc.

 

A couple things to consider... The window cannot be resized by just using the above code. Also, you need to ensure that you have enough game content to fill the screen for wider or taller screens depending on which axis you based your scaling.

[cuchi12]

hello, I've tried to scale my game using your code @gabenix but the onl thing I get is a black screen. I can't get my game to scale properly the height it always seems that the game take a little more space than what it really is, any sugestions?

[Michel (Starnut)]

@cuchi12 If you posted your init and scaling code, the Phaser version you're working with and a screenshot of your game showing the problem you're trying to solve answering your question would be a lot easier

[blueFire]

How would I handle it when the player changes orientation during the middle of the game?

 

Jason

[Olle]

What are my options if i want to scale my game to fullscreen without borders or stretching?

Im porting a game from my own engine where i solved this by letting the canvas overflow, while keeping track of the croped pixels to position game elements. So basicly i only used the parts of the canvas visible on the screen.

This solution worked great both in browsers and Cocoon, but how would you solve this with Phaser?

The game is landscape oriented and will use vertical viewport scrolling. I'm not interested in using the device native resolution.

Would apreciate your input.