HTML5 mobile game question: CSS and orientation

Graphics and GPU Programming Programming

Started by ElGeeko7 November 21, 2014 08:03 PM

3 comments, last by JohnnyCode 9 years, 4 months ago

319

Author

November 21, 2014 08:03 PM

I've been working on a simple Space Invaders type game for my iPhone, and it's working okay so far, but it's using absolute sizing (which of course is a big no-no). So it looks great on my iPhone 5 in portrait, but if I want it to look right on my sister's iPod or my friend's Droid or a my laptop, I'll have to change that.

I've tried to use percentages, but this causes some pretty funny effects when I switch my phone to landscape. I know I could put the game area in a fixed-width div and use CSS media query to dynamically resize it based on screen width (or height) but that hasn't worked in previous attempts either. I remember seeing something ages ago where you could set up the game area to take up the whole screen in the intended orientation (i.e. portrait for Tetris and landscape for Angry Birds) and have it smaller but centered on the page when in the incorrect orientation (i.e. a portrait game in landscape would still take up the whole height of the screen but there'd be empty space to the left and right). I don't know how this could be done, but that'd kind of the effect I'd like to create.

So in other words, my question is: how do I keep the entire game area on the screen, covering as much of the screen as possible, and still look okay the orientation is not ideal? This may seem like a simple question to some (or at least I hope it is, lol), but it's one I haven't been able to figure out just yet, so any information on the subject would be greatly appreciated. Thanks.

DiegoSLTS

2,113

November 22, 2014 01:43 AM

I guess your game uses HTML5' canvas and JavaScript, or you're using HTML elements and CSS animations?

If you're doing it with JavaScript just make the canvas take 100% of height and width, that's the only CSS you need. With JavaScript you can get the canva's height and width in pixels, and you can bind a function for the resize (that will fire if the orientation changes): https://developer.mozilla.org/en-US/docs/Web/API/Window.onresize

When you draw your canvas you should scale your image to fit your canvas and keep the aspect ratio.

If you're doing it with elements... I have no idea :P, it will be hard for sure.

Hodgman

52,717

November 22, 2014 01:57 AM

Viewport-dependent units, esp vmin/vmax might be handy?

http://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

. 22 Racing Series .

ElGeeko7

319

Author

November 22, 2014 03:54 AM

That JavaScript approach seems to have worked perfectly. I got it figured out with a div like this:


<html>
	<head>
		<script>
window.onresize = function(){
	var GameArea = document.getElementById("GameArea");
	var orientation = "portrait";
	if (window.innerWidth > window.innerHeight){
		if (orientation == "portrait"){
			GameArea.style.left = '12.5%';
			GameArea.style.top = '0px';
			GameArea.style.width = '75%';
			GameArea.style.height = '100%';
		}else{
			GameArea.style.left = '0px';
			GameArea.style.top = '0px';
			GameArea.style.width = '100%';
			GameArea.style.height = '100%';
		}
	}else{
		if (orientation == "portrait"){
			GameArea.style.left = '0px';
			GameArea.style.top = '0px';
			GameArea.style.width = '100%';
			GameArea.style.height = '100%';
		}else{
			GameArea.style.left = '0px';
			GameArea.style.top = '12.5%';
			GameArea.style.width = '100%';
			GameArea.style.height = '75%';
		}
	}
};
		</script>
	</head>
	<body>
		<div id="GameArea" style="position: absolute; background-color: black;"></div>
	</body>
</html>

I haven't had a chance to check it out on my phone (I think they're doing work on something connection-related since it's late/early here and I can't get on the internet), but in Firefox it worked great. No matter how I resize the browser window, the div always has a 4:3 ratio (or 3:4 in portrait mode). This way the game area is as big as it can be while still keeping the aspect ratio (at least at standard typical resolutions like 320x240, 640x480, 800x600, 1024x768 and so on). I know monitors aren't always that even (I've seen 1024xsomething else) but a 100% to 75% ratio is not tood bad (I think) for portrait games in landscape or vice-versa.

Anyway, thanks for the idea. I'm definitely going to use this into my games. :)

JohnnyCode

1,084

November 22, 2014 11:33 PM

The resolution of canvas is not the actual size of it in document composition which is ruled by style (100% or explicit px). You should establish canvas internal resolution to reflect screen.width and screen.height to find out the ratio user is using (and what resolution his gpu likes), and then you can refund the internal resolution of canvas to that, or smaller resolution but adjusted to that ratio. The styled canvas size is still up to you (100percent or other, but of course still should preserve the ratio of canvas internal resolution at least). Notice that 100% styled canvas size will take the document size, so the ratio will deform unless you are full screen switched. If you want to preserve the ratio of canvas internal resolution when window or document freely resizes, you can set width to 100 percent, and height as you used window.innerWidth*1.0/aspectratio of px units, and center it verticaly (or not).

HTML5 mobile game question: CSS and orientation

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

HTML5 mobile game question: CSS and orientation

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

Reticulating splines