Console output

Community Forums/Monkey Talk/Console output

orgos

(Posted 2011) [#1]

I make some HTML5 GameConsole improvements to have a better way to see and work with it, I share this and hope be usefully and legal :D

First you need to modify the monkey HTML5 template.

Go to %MonkeyDir%\targets\html5\

open MonkeyGame.html and change the content of it...

The main changes are:
- Add some styles
- js function
- div tags

You can changes styles value depending on your needs.

The final MonkeyGame.html code is:

<!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: #fff;
	padding:0px;
	margin:0px;
}
canvas:focus{
	outline:none;
}

#GameConsole{width:1024px;height:400px;border:1px solid #000;padding:0;margin:0;position:absolute;left:0px;top:0px;background:#fff;visibility:hidden;overflow:auto}
#GameConsoleButton{width:20px;height:20px;border:1px solid #000;position:absolute;left:1024px;top:0px;background:#fff;}

</style>
<script>
function setConsoleVisibility(){
  var cons=document.getElementById( "GameConsole" );
  if (cons.style.visibility=="visible"){cons.style.visibility = "hidden";
  } else {cons.style.visibility = "visible"; }
}
</script>
</head>

<body>

<canvas id="GameCanvas" onclick="this.focus();" oncontextmenu="return false;" width=640 height=480 tabindex=1></canvas><br>

<div id="GameConsoleButton" onclick="javascript:setConsoleVisibility()">C</div>
<div id="GameConsole"></div>

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

</body>
</html>

Now you need to modify js functions, so go to %MonkeyDir%\modules\monkey\native\

and open lang.js, scroll to line 35 or find the

function print( str ){

print declaration so change the entire function to this:

function print( str ){
  var cons=document.getElementById("GameConsole");
	if( cons ){
		cons.innerText+=str+"\n";
	}

	//if( game_console ){
	//	game_console.value+=str+"\n";
	//}
	
	if( window.console!=undefined ){
		window.console.log( str );
	}
	
}

You can see I comment the original Monkey code, in case you want to go back.

Erase all main.build related to your HTML5 data and compile, clicking on tiny [C] box on Top, Right you can toggle your GameConsole.

Last edited 2011