To properly handle mobile users rotating their devices, we have to go deeper than just JavaScript. First of all, in the Source editor, find the “index.html” file and in the <body> (at the bottom) place an ‘orientation’ <div>:
<body> <div id="orientation"></div> </body>
Then, in the ‘main.css’ add these rules:
#orientation {
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../assets/orientation.jpg);
background-repeat: no-repeat;
background-position: center;
background-color: rgb(0, 0, 0);
z-index: 999;
display: none;
}
Change the background image and colour if you please.
Finally, in the boot state (boot.js) we add the actual orientation handlers.
We add a global variable for orientation checking later in the game e.g. to pause it and 3 new functions: init, enterIncorrectOrientation and leaveIncorrectOrientation:
"use strict";
//global variable, can be used to pause the game on orientation change
var orientated = false;
window.MobileOrientation.state.boot = {
init: function() {
//checks whether the device is mobile or desktop
if (!this.game.device.desktop) {
//centers the canvas
this.scale.pageAlignVertically = true;
this.scale.pageAlignHorizontally = true;
// forces orientation. First parameter is for landscape, 2nd - portrait. Enable only one
this.scale.forceOrientation(true, false);
//orientation change callback functions
this.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this);
this.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this);
}
},
preload: function() {
// set world size
this.game.world.setBounds(0, 0, mt.data.map.worldWidth, mt.data.map.worldHeight);
// enable resize
this.enableFitScreen();
//init mt helper
mt.init(this.game);
//set background color - true (set also to document.body)
mt.setBackgroundColor(true);
// load assets for the Loading group ( if exists )
mt.loadGroup("Loading");
},
create: function() {
// add all game states
for (var stateName in window.MobileOrientation.state) {
this.game.state.add(stateName, window.MobileOrientation.state[stateName]);
}
// goto load state
this.game.state.start("load");
},
// reference to fit screen function - used to remove resize later
_fitScreen: null,
enableFitScreen: function() {
var game = this.game;
var resizeGame = this._fitScreen = function() {
game.scale.setShowAll();
game.scale.refresh();
};
window.addEventListener('resize', resizeGame, false);
resizeGame();
},
disableFitScreen: function() {
window.removeEventListener('resize', this._fitScreen);
},
//both functions change the orientation variable and settings of the 'orientation' div in index.html
enterIncorrectOrientation: function() {
orientated = false;
document.getElementById('orientation').style.display = 'block';
},
leaveIncorrectOrientation: function() {
orientated = true;
document.getElementById('orientation').style.display = 'none';
}
};
Note that the forceOrientation method does not actually force the orientation of your device – that’s impossible. It simply makes rules about which position is considered correct and which isn’t.
Check on your mobile device here (Your mobile browser must be set to view pages in mobile mode). Alternatively, you can play around with mobile emulation in the browser’s developer tools.
Full sample available here.