landscape development?
Monkey Forums/Monkey Programming/landscape development?
| ||
| I was wondering that how you guys handle landscape development & using html5 as the main testview during development? Because... devicewidth could be like 480 and then height 800. In html5, you cannot rotate it (in html5 it looks like "portrait") Are you simply switching x & y in html5 (and defining width & height to be 800 x 480 rather than 480 x 800), and using different values when testing for example android views? |
| ||
| It is a bit of a nuisance if you have a 768-high monitor, especially if you want to see the console. For most purposes I just use Ctrl-Backscroll to shrink the view. |
| ||
| well, i use my html5 for fast testing my ios and android app, but until now i made only landscape so was no problem :) |
| ||
| @Raul: what sizes are you defining in your game? Doesn't the X and Y coordinate cause any problems? (at least in my device the "X" becomes "Y" when I rotate my phone to landscape view...) |
| ||
| Do you actually want the player to be able to rotate the screen? Because if it's not an explicit gameplay element it might be confusing. In my case I only target landscape mode and set the resolution to 960 x 640 and also test it that way in html5. |
| ||
| After you have build it the first time, you can set the resolution inside the monkeygame.html file. |
| ||
| woopsie... it helps landscape development if I actually define the mode to "landscape" instead of "portrait" or "user"... 8) and then I can use 800x480 and all coordinates and everything works just fine. Thx folks. |
| ||
| I use this as my MonkeyGame.html Makes it much easier to test my game on lots of specific resolutions and orientations.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
width: 100%
height: 100%;
overflow: hidden; /* keeps scrollbar off IE */
font-family: arial,sans-serif;
font-size: 13px;
color: #000;
background-color: #dc9;
padding:0px;
margin:0px;
}
a {color : #440000; }
a:HOVER {color : #448844; }
a:VISITED {color : #444400; }
a:VISITED:HOVER {color : #559955; }
canvas:focus{
outline:none;
}
</style>
<script type="text/javascript">
function size(nw,nh) {
var mycanvas = document.getElementById("GameCanvas");
mycanvas.width = nw;
mycanvas.height = nh;
}
function full() {
var mycanvas = document.getElementById("GameCanvas");
mycanvas.width = window.innerWidth-108;
mycanvas.height = window.innerHeight-8;
//...drawing code...
}
</script>
</head>
<body onload="full();">
<table width="100%" height="100%"><tr><td width="100px" valign="top">
Fullscreen<br>
<a href="#" onClick="full();return false;">Big as Possible</a><br>
<br>
Standard<br>
<a href="#" onClick="size(320,240);return false;">320x240</a><br>
<a href="#" onClick="size(640,480);return false;"><b>640x480</b></a><br>
<a href="#" onClick="size(800,600);return false;">800x600</a><br>
<a href="#" onClick="size(1024,786);return false;">1024x786</a><br>
<a href="#" onClick="size(1280,960);return false;">1280x960</a><br>
<br>
16:9</br>
<a href="#" onClick="size(320,180);return false;">320x180</a><br>
<a href="#" onClick="size(640,360);return false;">640x360</a><br>
<a href="#" onClick="size(800,450);return false;">800x450</a><br>
<a href="#" onClick="size(1024,576);return false;">1024x576</a><br>
<a href="#" onClick="size(1280,720);return false;">1280x720</a><br>
<br>
<br>
Crap Phone<br>
<a href="#" onClick="size(240,320);return false;">Tall</a> | <a href="#" onClick="size(320,240);return false;">Wide</a><br>
<br>
iPhone<br>
<a href="#" onClick="size(320,480);return false;">Tall</a> | <a href="#" onClick="size(480,320);return false;">Wide</a><br>
<br>
iPhone Retina<br>
<a href="#" onClick="size(640,960);return false;">Tall</a> | <a href="#" onClick="size(960,640);return false;">Wide</a><br>
<br>
iPhone 5<br>
<a href="#" onClick="size(640,1136);return false;">Tall</a> | <a href="#" onClick="size(1136,640);return false;">Wide</a><br>
</td>
<td width="*" valign="top">
<canvas id="GameCanvas" onclick="javascript:this.focus();" width=640 height=480 tabindex=1></canvas><br>
<textarea id="GameConsole" style="width:640px;height:240px;border:0;padding:0;margin:0" readonly></textarea><br>
</td>
</tr></table>
<script language="javascript" src="main.js">Javascript not supported!</script>
</body>
</html>
|
| ||
| Thanks for that code, really nice! |
| ||
| @sandfella: never had that problem you mentioned. hope you solve it now. |
| ||
| problem was I had defined "user" or "portrait" rather than "landscape" in the mode.. :D and I also had 480x800 resolution rather than 800x480 resolution. |
| ||
| You can also use did.SetNativeGraphicsSize() to control the size of the HTML output. (Just note that it doesn't seem to activate until OnRender() is called, so if you are using it in OnCreate() and you also set metrics of various elements there, you will have to set them explicitly too.) |
| ||
| Roger! |
| ||
| ElectricBoogaloo , thanks for your code! |
| ||
| Awesome!! I don't know how I missed this, its just what I needed. Thanks so much for sharing your MonkeyGame.html code ElectricBoogaloo. :) |
| ||
| I think the '786' needs changing to be '768' in the resolution list, but other than that great job and thanks for sharing. :) |
| ||
| Lol, I always get that wrong! One of those numbers that I always seem to have to google, to double check. Also, my laptop is the most insane resolution I've ever heard of.. 1366x768?! What on earth is with that!!? Stupid resolution!! |
| ||
| Also, my laptop is the most insane resolution I've ever heard of.. 1366x768?! What on earth is with that!!? Stupid resolution!! What sort of laptop is it? My Acer (15.6" TFT) uses this resolution - think it might be a common resolution for Widescreen. |
| ||
| Lenovo : Cheapest one I could find, and also my very first laptop EVER!!! (32 year old, and never owned a laptop!) 'tis a very silly resolution indeed, but is all kinds of handy for testing out crazy things, as well as doing AGameAWeek from the Couch! |
| ||
| My Acer 5750G has that resolution also. |
   |