1 decade ago
by Jon123
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
1 decade ago
by Donzo
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 );
1 decade ago
by stillen
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.
1 decade ago
by 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.
I wonder if I should implement a minimum screen width I could set?
1 decade ago
by Jon123
Also, Dominic manages to keep the screen landscape in his biolab disaster game, I wonder how he does that?
1 decade ago
by dominic
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&
039;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;
1 decade ago
by Jon123
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.
1 decade ago
by dominic
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&
039;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 :)
1 decade ago
by Jon123
I see, thanks for the tips. Lots to work with here!
1 decade ago
by Rungo73
@Dominic the orientation code above from X-type... where do I put that?
Page 1 of 1
« first
« previous
next ›
last »