Monkey Framework - HTML Layout

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|692\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
SoCoder -> Snippet Home -> Misc

Jayenkai	Created : 30 October 2014 System : Cross Platform Language : Monkey Monkey Framework - HTML Layout
I've been using this for a while, but thought it might be useful to others. You'll find the canvas on the upper left, and a selection of different screen resolutions on the right. Clicking them will change the res of the canvas, and .. hopefully.. your game will scale accordingly, depending on how well you've coded your game. To use, simply replace MonkeyGame.html with this. <!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 HTMLcanFullscreen() {return 1;} function size(nw,nh) { var mycanvas = document.getElementById("GameCanvas"); mycanvas.width = nw; mycanvas.height = nh; mycanvas.height = nh; mycanvas.focus(); } function full() { var mycanvas = document.getElementById("GameCanvas"); mycanvas.width = window.innerWidth-80; mycanvas.height = window.innerHeight-8; mycanvas.focus(); } function GoFullscreen_Monkey() { window.setTimeout(function(){full();},300); } 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; mycanvas.focus(); } } 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); } } window.onload=function( e ){ var canvas=document.getElementById( "GameCanvas" ); BBMonkeyGame.Main( canvas ); } </script> </head> <body> <div style="position: relative;width:72px;height:100%;margin-right:2px;float:right; background:#db8; z-index: 3; text-align:right;"> <a href="https://AGameAWeek.com"><img src="./data/common/AGAWLogo.png" width="72px" height="72px"></a> Fullscreen<br> <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> <text area id="GameConsole" style="width:320px;height:240px;border:0;padding:0;margin:0" readonly></text area><br> </div> <script language="javascript" src="main.js">Javascript not supported!</script> </body> </html> --v

Comments
Thursday, 30 October 2014, 08:12
steve_ancell	The method I coded below works well for x, y, and size scaling, seems OK with HTML5, Flash and Android targets. Might also try you method at some point as I'm not sure how mine works on other devices like Apple, Mac, etc... 'Size of theoretical gamespace window, not actual screen size. Const gameWidth:Float = 800 Const gameHeight:Float = 600 Function GetScaleX:Float() Return DeviceWidth() / gameWidth End Function GetScaleY:Float() Return DeviceHeight() / gameHeight End Function DrawImageToScale:Void(sourceImage:Image, x:Float, y:Float, rotation:Float) DrawImage(sourceImage, x * GetScaleX(), y * GetScaleY(), rotation, GetScaleX(), GetScaleY()) End --v
Thursday, 30 October 2014, 08:19
Jayenkai	Yeah, mine's the same idea. I also work out the "closest to 1:1" ratio, and rescale either the screen width or height, accordingly, then a fuckton of multiplications to scale everything.. It buggers up the concept of "per screen" gaming, but if you're playing in a scrolling arena, you're fine.
Thursday, 30 October 2014, 08:35
steve_ancell	The way I do it is like running the actual game on an imaginary surface, based on the actual gamesize without scaling, none of the collisions or virtual positioning is applied directly to the physical screen. I use the code above purely for putting everything on the actual screen, based on where everything is in memory. I also used the same method on Mutant Monty. I hope what I just explained above is simple enough for any noobs to understand, I'm better at doing rather than explaining if you get my meaning.

Monkey Framework - HTML Layout

Comments