HTML5 full screen scale buggy (mojo 1, Monkey 85e)

Monkey Forums/Monkey Bug Reports/HTML5 full screen scale buggy (mojo 1, Monkey 85e)

Xaron

(Posted 2016) [#1]

Dear all,

I've created a small test example. Basically it draws a circle where the touch down event is recognized:

Strict

Import mojo

Function Main:Int()
  New Test()
  Return 0
End Function

Class Test Extends App
  Field _resX:Float
  Field _resY:Float
  Field _scale:Float
  
  Method OnCreate:Int()
    _scale = 1.0
    SetUpdateRate(30)
    Return 0
  End Method

  Method OnUpdate:Int()
    Return 0
  End Method
  
  Method OnSuspend:Int()
    Return 0
  End Method
  
  Method OnResume:Int()
    Return 0
  End Method

  Method OnRender:Int()
    Cls()
    checkResolution()
    PushMatrix()
      Scale( _scale, _scale )
      If( TouchDown() )
        Local mx:Float = TouchX() / _scale
        Local my:Float = TouchY() / _scale
        DrawCircle( mx, my, 60 )
      End If
    PopMatrix()
    DrawText( "Width: " + DeviceWidth(), 10, 10 )
    DrawText( "Height: " + DeviceHeight(), 10, 25 )
    DrawText( "Scale: " + _scale, 10, 40 )
    Return 0
  End Method
  
  Method checkResolution:Void()
    _resX = Float( DeviceWidth() )
    _resY = Float( DeviceHeight() )
    _scale = _resY / 360.0
  End Method
End Class

The MonkeyGame.html is mainly the original one, beside fscreen set to true and a different canvas size:

<!DOCTYPE html>

<html>
<head>
<style type="text/css">
body{
	height: 100%;
	overflow: hidden; /* keeps scrollbar off IE */
	font-family: arial,sans-serif;
	font-size: 13px;
	color: #000;
	background-color: #EEE;
	border: 0 none white;
	padding: 0;
	margin: 0;
}
canvas{
	border: 0;
	padding: 0;
    margin: auto;
    display: block;
	outline: none;
}
textarea{
    background-color: #DDD;
	border: 0;
	padding: 0;
	margin: 0;
	outline: none;
    width: 100%;
}
div.splitter{
    background-color: #FFF;
	border: 0;
	padding: 0;
	margin: 0;
	height: 8px;
}
</style>
<script>

var CANVAS_RESIZE_MODE=1;	//0=locked, 1=stretch, 2=resize

var CANVAS_WIDTH=640;
var CANVAS_HEIGHT=360;

window.onload=function( e ){

	var canvas=document.getElementById( "GameCanvas" );
	var splitter=document.getElementById( "Splitter" );
	var console=document.getElementById( "GameConsole" );
	
	var mouseDown=false;
	var startY=0;
	var canvasH=CANVAS_HEIGHT;
	var cmousemove=null;
	var cmouseup=null;
	var cmouseout=null;
	var fscreen=true;

	canvas.width=CANVAS_WIDTH;
	canvas.height=CANVAS_HEIGHT;

	function eatEvent( e ){
		if( e.stopPropagation ){
			e.stopPropagation();
			e.preventDefault();
		}else{
			e.cancelBubble=true;
			e.returnValue=false;
		}
	}
	
	function requestFullscreen(){
		var rfs=canvas.requestFullscreen || canvas.webkitRequestFullScreen || canvas.mozRequestFullScreen;
		if( rfs ) rfs.call( canvas );
	}
	
	function updateSize(){
	
		if( fscreen ){
			canvasH=window.innerHeight;
		}else if( canvasH<0 ){
			canvasH=0;
		}else if( canvasH+splitter.clientHeight>=window.innerHeight ){
			canvasH=window.innerHeight-splitter.clientHeight;
		}
		
		switch( CANVAS_RESIZE_MODE ){
		case 0:
			canvas.parentNode.style.height=canvasH+"px";
			break;
		case 1:
			canvas.style.height=canvasH+"px";
			break;
		case 2:
			canvas.width=document.body.clientWidth;
			canvas.height=canvasH;
			canvas.style.height=canvasH+"px";
			break;
		}
		console.style.height=(fscreen ? 0 : window.innerHeight-splitter.clientHeight-canvasH)+"px";

		//Note! Any resize code that modifies canvas.width/canvas.height/canvas.style.width/canvas.style.height should call this to update canvas...
		if( canvas.updateSize ) canvas.updateSize();
	}
	
	canvas.onfullscreenchange=function( e ){
		fscreen=(document.fullscreenElement==canvas);
		updateSize();
	}
	
	canvas.onwebkitfullscreenchange=function( e ){
		fscreen=(document.webkitFullscreenElement==canvas);
		updateSize();
	}
	
	canvas.onmozfullscreenchange=function( e ){
		fscreen=(document.mozFullscreenElement==canvas);
		updateSize();
	}
	
	splitter.onmousedown=function( e ){
		mouseDown=true;
		startY=e.clientY;
		cmousemove=canvas.onmousemove;
		cmouseup=canvas.onmouseup;
		cmouseout=canvas.onmouseout;
		canvas.onmousemove=null;
		canvas.onmouseup=null;
		canvas.onmouseout=null;
		eatEvent( e );
	}
	
	window.onmousemove=function( e ){
		if( mouseDown ){
			var dy=e.clientY-startY;
			startY+=dy;
			canvasH+=dy;
			updateSize();
			eatEvent( e );
		}
	}
	
	window.onmouseup=function( e ){
		if( mouseDown ){
			canvas.onmousemove=cmousemove;
			canvas.onmouseup=cmouseup;
			canvas.onmouseout=cmouseout;
			mouseDown=false;
			eatEvent( e );
			
			if( canvasH+splitter.clientHeight>=window.innerHeight ) requestFullscreen();
		}
	}
	
	window.onresize=function( e ){
		updateSize();
	}
	
	updateSize();
	
	BBMonkeyGame.Main( canvas );
}
</script>
</head>

<body>

<div><canvas id="GameCanvas" width=640 height=360 tabindex=1></canvas></div>

<div id="Splitter" class=splitter></div>

<div><textarea id="GameConsole" readonly></textarea></div>

<script language="javascript" src="main.js">Javascript not supported!</script>

</body>
</html>

Running example:
http://www.leidel.net/dl/test/MonkeyGame.html

Everything IS fine for desktop browsers. But start this example on a mobile browser. You will see that the circle is NOT anymore below the finger touch the more the finger reaches the right border!

Xaron

(Posted 2016) [#2]

Fix:
https://github.com/blitz-research/monkey/blob/develop/targets/html5/modules/native/html5game.js#L410

In html5game.js replace:

	function touchX( touch ){
		var x=touch.pageX;
		var c=canvas;
		while( c ){
			x-=c.offsetLeft;
			c=c.offsetParent;
		}
		return x;
	}			
	
	function touchY( touch ){
		var y=touch.pageY;
		var c=canvas;
		while( c ){
			y-=c.offsetTop;
			c=c.offsetParent;
		}
		return y;
	}

with:

	function touchX( touch ){
		var x=touch.pageX;
		var c=canvas;
		while( c ){
			x-=c.offsetLeft;
			c=c.offsetParent;
		}
		return x*xscale;
	}			
	
	function touchY( touch ){
		var y=touch.pageY;
		var c=canvas;
		while( c ){
			y-=c.offsetTop;
			c=c.offsetParent;
		}
		return y*yscale;
	}

MANY thanks go to kog who fixed this for me! :D

marksibly

(Posted 2016) [#3]

V86e including this fix is now up.

Thanks kog!