Jump to content

Scaling for Nexus7 on Cordova/Phaser game


Recommended Posts

I am sure I miss something. I did this to scale my game to available space in my Nexus 7:

window.document.addEventListener('deviceready', function (event) {'use strict';    WML.gameObject.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT;    WML.gameObject.scale.forceOrientation(true, false);    WML.gameObject.scale.pageAlignHorizontally = true;    WML.gameObject.scale.pageAlignVertically = true;    WML.gameObject.scale.setScreenSize(true);    console.log("deviceready " + event);});

So yes this event is fired, I get the last log command printed in console. But still the game doesn't fit all into the screen.

Anything I should consider further?


Plus on my real nexus7 it also goes into protrait and landscape but want it only in landscape.


I also have this line in my index.html

<script src="cordova.js"></script>

Does XDK imports is automatically or I have to include this script in my folder? Not sure where to find it?



Link to comment
Share on other sites

I don't think  WML.gameObject.scale.forceOrientation(true, false); is useful when the EXACT_FIT scale mode is used, and the setScreenSize method is deprecated so try commenting out those 2 lines.


As for locking the orientation, you cannot do it with Phaser, it's not its job. I don't use intel XDK so I can't help you on that (you probably can find answer about this though), but

 - if you use crosswalk with the CLI : you have a manifest.json file where you can write this line "orientation" : "landscape"

 - if you use cordova, you have a config.xml in your project's root where you can put this tag <preference name="Orientation" value="landscape" /> 


So I'm pretty sure there is a solution with intelXDK.


As for the device width and height, check the first post here "scaling part": http://www.html5gamedevs.com/topic/3980-common-phaser-cocoonjs-issues/


Hope that helps

Link to comment
Share on other sites

How can I get device width and height?



To get device width and height use this

var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS, '');

I have scaling problem with cordova but not the browser


Does your game scale good in the browser and bad in cordova? 

Link to comment
Share on other sites

When I was writing the code above it was late and i forgot I had some code in my Boot.js file. I edited it and I got to some dimensions for Nexus 7 which are 658 x 525 which seem good for a game that is 640 x 480 size. I tried on other emulators like iPad, Nexus 4 etc... that is why I asked for device dimensions so I can dynamically change the size of the game.

window.WML.namespace('Boot', window.WML.State, (function (wml) {'use strict';    var gameObject = null;    return {        init: function () {            gameObject = wml.gameObject;            gameObject.input.maxPointers = 1;            gameObject.stage.disableVisibilityChange = true;            gameObject.scale.forceOrientation(true, false);            gameObject.scale.pageAlignHorizontally = true;            gameObject.scale.pageAlignVertically = true;            if (gameObject.device.desktop) {                            } else {                gameObject.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;                gameObject.scale.setMinMax(wml.Const.STAGE_WIDTH, wml.Const.STAGE_HEIGHT, 685, 525);                gameObject.sound.volume = 0.5;            }        },        preload: function () {            gameObject.stage.backgroundColor = wml.Const.BACKGROUND_COLOR;            wml.loadAtlasJSONHash('OTHER_GUI_ASSETS_ATLAS', null, 'assets/images/UI/otherGuiAssetsSheet.png', 'assets/settings/otherGuiAssetsHash.json');        },        create: function () {            gameObject.state.start(wml.Preloader.KEY);            gameObject.state.clearCurrentState();        },        shutdown: function () {            gameObject = null;        }    };    }(window.WML)));

The only statement that keeps size of the game is

gameObject.scale.setMinMax(minWidth, minHeight, maxWidth, maxHeight);

As @jeancode mentioned

gameObject.scale.forceOrientation(true, false);

doesn't lock the orientation to landscape. What worked for me in Intel XDK is this:

gameObject.device.whenReady(function () {        intel.xdk.device.setRotateOrientation("landscape");        intel.xdk.device.setAutoRotate(false); });

And this effectively locks the orientation to landscape. Even if your device is currently in portrait mode resuming your game will force the device to switch to landscape and lock itself up until you minimize the game.


I have Nexus 7 and I use Intel XDK tool.




From the image it stretches the game in portrait mode and when in landscape it keeps to 685 x 525. I will need some more time to research about scaling. @Gods will let you know.


There is another information I would like to share. While debugging the game the performance was good, all was working as expected. But when I built for Android without Crosswalk using Intel XDK, and installed the apk on my Nexus 7, the performance got terrible :D

My game doesn't have some spatial tree/quad tree needs to calculate, not even 3D but yet the build had terrible performance. The device is struggling to open a single card :D


The next thing I am about to try is export for android with Crosswalk, hoping to get better performance.

Link to comment
Share on other sites

Haha, yes the performance with Crosswalk for Android is right on spot. But yes the file is 3 times bigger :D from 9 jumped to 27 MB.


Another thing I noticed is, the sound after a while starts to stutter and when I reach the end of the game it isn't playing at all.


Not sure if this is something with my device or Crosswalk/Cordova have poor support for sound?

It happens when two sounds play at the same time and this happens often.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...