Multi-Resolution Test Thing - Updated
Monkey Targets Forums/HTML5/Multi-Resolution Test Thing - Updated
| ||
| The start of a new year brings fresh tweaks and updates to my Framework, and the majority of the tweaks are standard stuff that most people wouldn't give two hoots about. But my Resolution Switching HTML5 template seemed to go down pretty well, and since I've been rejigging bits of it, I figured you folk might like to try the updated version. The template now includes Fullscreen switching, and all the resolutions are over on the right hand side of the screen so there's no "canvas-based-co-ordinate" messyness. A little help was required for Fullscreen switching (Aided by Socoder.net's CodersRule), since I wasn't really in the mood to figure out how to snap back. Anyhoo..
<!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">
var oldWide;
var oldHigh;
function size(nw,nh) {
var mycanvas = document.getElementById("GameCanvas");
mycanvas.width = nw;
mycanvas.height = nh;
mycanvas.height = nh;
}
function full() {
var mycanvas = document.getElementById("GameCanvas");
mycanvas.width = window.innerWidth-80;
mycanvas.height = window.innerHeight-8;
}
function GoFullscreen_Monkey() {
var mycanvas = document.getElementById("GameCanvas");
mycanvas.width = window.innerWidth-80;
mycanvas.height = window.innerHeight-8;
}
function GoFullscreen() {
var mycanvas = document.getElementById("GameCanvas");
var did=0;
if (mycanvas.requestFullscreen) {
mycanvas.requestFullscreen(); did=1;
} else if (mycanvas.msRequestFullscreen) {
mycanvas.msRequestFullscreen(); did=1;
} else if (mycanvas.mozRequestFullScreen) {
mycanvas.mozRequestFullScreen(); did=1;
} else if (mycanvas.webkitRequestFullscreen) {
mycanvas.webkitRequestFullscreen(); did=1;
}
if (did==1) {
oldWide=mycanvas.width;
oldHigh=mycanvas.height;
mycanvas.width = screen.width;
mycanvas.height = screen.height;
}
}
document.onwebkitfullscreenchange = function () {
if (document.webkitFullscreenElement == null) {
size(oldWide,oldHigh);
}
}
document.onfullscreenchange = function () {
if (document.FullscreenElement == null) {
size(oldWide,oldHigh);
}
}
document.onmozfullscreenchange = function () {
if (document.mozFullscreenElement == null) {
size(oldWide,oldHigh);
}
}
</script>
</head>
<body onload="full();">
<div style="position: relative;width:72px;height:100%;margin-right:2px;float:right; background:#db8; z-index: 3; text-align:right;">
<a href="#" onClick="GoFullscreen();return false;">Fullscreen</a><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>
<br>
<br>
Thanks to CodersRule for help with Fullscreen mode.<br>
</div>
<div style="z-index: 0;position: absolute;">
<div style="background:#eda;"><canvas id="GameCanvas" onclick="javascript:this.focus();" width=640 height=480 tabindex=1></canvas></div><br>
<textarea id="GameConsole" style="width:320px;height:240px;border:0;padding:0;margin:0" readonly></textarea><br>
</div>
<script language="javascript" src="main.js">Javascript not supported!</script>
</body>
</html>
Feel free to post any cleanups/fixings you can think of. In addition, there's currently a GoFullscreen_Monkey function. Extern Function GoFullscreen:Int()="GoFullscreen_Monkey" You can currently use that to make the game go into "Big As Possible" resolution, but I can't manage to get it to actually trigger a proper Fullscreen mode (because there's no user-event being triggered). If anyone can fathom that bit out, let me know. Thanks! |
| ||
| Ah I saw this a while back and forgot all about it, I'll give it a whirl when I get home thanks. |
| ||
| Thanks :) |
| ||
| Thanks for this! I just tried it out as I was using the previous one. It works ok apart from now I have the dreaded lines between my tiles (scaled or not). The previous one didn't exhibit this and I've swapped between the two to be sure it's nothing that's changed in my code. any ideas? |
| ||
| Hmm.. Odd you should mention that. I noticed some freakish lines in my Tilemap today, and assumed it was a floating point issue. Will dig deeper. |
| ||
| Thanks for this, it's really useful! |
   |