NewsForumsCodeLogsGallerySpecsSearch

Adding Javascript to MonkeyGame.html via script

Monkey Targets Forums/HTML5/Adding Javascript to MonkeyGame.html via script

Xaron(Posted 2015) [#1]
Hi all,

is there a way to add a Javascript to MonkeyGame.html?

I'd like to dynamically load a Javascript and found this code:

  var head = document.getElementsByTagName('head')[0];
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = "https://js.pusher.com/2.2/pusher.min.js";
  head.appendChild(script);


Unfortunately this does work for normal html files but not for the MonkeyGame.html...


GW_(Posted 2015) [#2]
Monkeygame is probably in a loop. Did you try you custom code in the monkgame::new() method?


Xaron(Posted 2015) [#3]
Nevermind, it works that way. Had just a call to a function which was not imported at that time.


bitJericho(Posted 2015) [#4]
A better way to do it is to import it in your monkey code directly. At the top:

#if TARGET="html5"
Import "externalfile.js"
#end

If you need to change the behavior of an js function in main.js, I've had luck just copying it and modifying it. Doesn't seem to cause problems. I'm not a JS coder at all so I don't know if this is particularly valid. Here's an example of one of my js files I use to cause my graphics to be pixelated and not filtered in most browsers (doesn't work in ms edge of course)

gxtkGraphics.prototype.Cls=function( r,g,b ){
	if( this.tformed ) this.gc.setTransform( 1,0,0,1,0,0 );
	this.gc.fillStyle="rgb("+(r|0)+","+(g|0)+","+(b|0)+")";
	this.gc.globalAlpha=1;
	this.gc.globalCompositeOperation="source-over";
	this.gc.fillRect( 0,0,this.canvas.width,this.canvas.height );
	this.gc.fillStyle=this.color;
	this.gc.globalAlpha=this.alpha;
	this.gc.globalCompositeOperation=this.blend;
	this.gc.imageSmoothingEnabled = false;	
	this.gc.mozImageSmoothingEnabled = false;
	this.gc.oImageSmoothingEnabled = false;
	this.gc.webkitImageSmoothingEnabled = false;
	this.gc.msImageSmoothingEnabled = false;
	if( this.tformed ) this.gc.setTransform( this.ix,this.iy,this.jx,this.jy,this.tx,this.ty );
}


Lastly, if you want to call a javascript function from within monkey, below your imports, you can tell monkey about your javascript function like this.:

#if TARGET="html5"
	Extern
			
	Function MonkeyFunctionName(variables:type, variables2:type) = "javascriptFunctionName"
	Function variableName:VarType[] () = "javascriptFunctionnameThatReturnsVariable"
#end


The javascript function must have the same number of function variables in the same order, but they don't have to be called the same thing.

During testing, there were third party javascript files (not intended for monkey) that I couldn't import. I can't tell you why they wouldn't work, I had to link them externally in the MonkeyGame.html. Perhaps someone with more js/html5 experience can set us straight on that.


Xaron(Posted 2015) [#5]
No, I don't want to import it directly because I don't want to distribute that file because it's a third party one (from pusher.com).

But thanks for your examples!


bitJericho(Posted 2015) [#6]
Well I mean you would import the file that has the code:

var head = document.getElementsByTagName('head')[0];
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = "https://js.pusher.com/2.2/pusher.min.js";
  head.appendChild(script);