Forums » Help » Keep screen in landscape mode on mobiles

Does anyone know how to force the screen to stay in landscape mode on mobiles? And maybe have a minimum width for other computer screens?

Thanks

As I understand it, you cannot force screen orientation because browser behavior restricts that.

Perhaps use a responsive canvas, such as the one Dom implements in the new Jump'nRun demo:

var scale = (window.innerWidth < 640) ? 2 : 1;


// We want to run the game in "fullscreen", so let's use the window's size
// directly as the canvas' style size.
var canvas = document.getElementById('canvas');
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';


// Listen to the window's 'resize' event and set the canvas' size each time
// it changes.
window.addEventListener('resize', function(){
	// If the game hasn't started yet, there's nothing to do here
	if( !ig.system ) { return; }
	
	// Resize the canvas style and tell Impact to resize the canvas itself;
	canvas.style.width = window.innerWidth + 'px';
	canvas.style.height = window.innerHeight + 'px';
	ig.system.resize( window.innerWidth * scale, window.innerHeight * scale );
	

var width = window.innerWidth * scale,
	height = window.innerHeight * scale;
ig.main( '#canvas', MyTitle, 60, width, height, 1, ig.ImpactSplashLoader );

A very old school approach. I have done this in the past for clients years ago.

When the phone is in portrait, pause your game and overlay a div that shows a message like "Game plays best in landscape". This can be all done in CSS with the exception of Pausing and unpauseing the game.

In webkit browsers, technically you could rotate the Canvas with CSS, but I'm not sure in portrait, but I'm not sure if they would effect performance.

Both are very old school approaches, but technically could work.

Sorry for the late reply, thanks for your ideas. @Donzo - I tried having the canva responsive, but the sprites start to shake, I think this is because the screen is now too narrow.

I wonder if I should implement a minimum screen width I could set?

Also, Dominic manages to keep the screen landscape in his biolab disaster game, I wonder how he does that?

I assume you're talking about the Biolab Disaster App in the Apple AppStore or Chrome's Play Store?

These App use native frameworks and don't run in the Browser. For iOS I used Ejecta, for Android CocoonJS. You can set the desired orientation (portrait or landscape) in both.


If you navigate to the playbiolab.com website in Mobile Safari or Android's browser, you will see that the web version is actually designed for portrait mode, but doesn't handle rotation at all.


The web version of X-Type actually checks the device rotation and displays a "please rotate" icon when it's not in portrait mode. Here's the JS snippet to make this work:

var isPortrait = function() {
	// we can't rely on window.orientation, because some devices
	// report 0deg rotation for landscape mode :/
	// Check for screen dimensions instead
	return (!ig.ua.mobile || window.innerHeight > window.innerWidth);
};

var checkOrientation = function() {	
	if( isPortrait() ) {
		// all good
	}
	else {
		// display rotate message
	}
};

// Listen to resize and orientationchange events
window.addEventListener( 'orientationchange', checkOrientation, false );
window.addEventListener( 'resize', checkOrientation, false );

As Donzo mentioned, the Super Generic Jump'n'Run uses yet another approach: it just resizes the Canvas to whatever dimensions are available. The source for this game is on your download page.

Quote from Jon123
Sorry for the late reply, thanks for your ideas. @Donzo - I tried having the canva responsive, but the sprites start to shake, I think this is because the screen is now too narrow.

Yep, this is probably caused by the Camera being confused about where to scroll to on a narrow screen. Try setting the Camera's .lookAhead to a smaller value or 0.

this.camera.lookAhead.x = 0;

// Also experiment with the trap size:
this.camera.trap.size.x = ig.system.width/10;
this.camera.trap.size.y = ig.system.height/3;

Thanks Dominic, this is very helpful. One or two followup questions if I may:

What do the lookAhead and trap size values handle? I am guessing lookAhead is how many pixels to look ahead but trap size?

One last thing, what would be a good canvas size if I were to tailor my web app to portrait mode? Would I need to set the zoom to 2 or would 1 be OK?

Thanks again.

The "trap" is the area in which the player can move without scrolling the screen. See this video for an explanation:
http://blog.mimeoverse.com/post/581467761/the-ideal-platformer-camera-should-minimize

The "lookAhead" moves the screen in the direction you last moved to. So if you're moving right, the camera will position itself so that the player is further on the left side of the screen. It looks ahead. Setting it to 0 will turn it off.

This is very useful when your screen is small, so that you can see what's coming next. If you try playbiolab.com in your mobile browser you can see it in effect. Try walking right and left for a bit and see how the camera shifts.

What is a "good" canvas size entirely depends on your game. If looks good and plays good, it is good :)

I see, thanks for the tips. Lots to work with here!

@Dominic the orientation code above from X-type... where do I put that?