Chrome playing up with SetColor and the mouse?

Monkey Forums/Monkey Programming/Chrome playing up with SetColor and the mouse?

therevills

(Posted 2015) [#1]

Very recently I've noticed a massive slow down with Chrome and SetColor. I know that SetColor is basically forbidden on HTML5 due to the performance issues, but before last week it was fine on Chrome...

And I've spent a bit of time investigating it and its something to do with the mouse events too (mouse down and mouse move at the same time).

Here is some test code:

Strict

Import mojo

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

Class MyApp Extends App
	Field x:Float, y:Float
	Field useColor:Bool = False
	
	Method OnCreate:Int()
		SetUpdateRate(60)
		x = DeviceWidth() / 2
		y = DeviceHeight() / 2
		
		Return 0
	End
	Method OnRender:Int()
		FPSCounter.Update()
		Cls
		DrawInfo()
		DrawRect(x - 5, y - 5, 10, 10)
		Return 0
	End
	
	Method DrawInfo:Void()
		Local ty:Int = 0
		Local gapY:Int = 12
		
		If useColor
			SetColor(255, 0, 0)
		End
		DrawText("x = " + x + ", y = " + y, 0, ty)
		ty += gapY
		DrawText("Press and hold the left mouse button, then move the mouse around", 0, ty)
		ty += gapY
		DrawText("Press the <Spacebar> to toggle text colour", 0, ty)
		ty += gapY
		FPSCounter.Draw(0, ty)
		ty += gapY
		DrawText("ms = " + Millisecs(), 0, ty)
		
		If useColor
			SetColor(255, 255, 255)
		End
	End
	
	Method OnUpdate:Int()
		If MouseDown(MOUSE_LEFT)
			x = MouseX()
			y = MouseY()
		End
		If KeyHit(KEY_SPACE)
			useColor = Not useColor
		End
		Return 0
	End
End

'summary: Simple Frames per second counter
Class FPSCounter Abstract
	Global fpsCount:Int
	Global startTime:Int
	Global totalFPS:Int

	Function Update:Void()
		If Millisecs() - startTime >= 1000
			totalFPS = fpsCount
			fpsCount = 0
			startTime = Millisecs()
		Else
			fpsCount+=1
		End
	End

	Function Draw:Void(x% = 0, y% = 0, ax# = 0, ay# = 0)
		DrawText("FPS: " + totalFPS, x, y, ax, ay)
	End
End

I get around 60 FPS in Chrome when useColor is false and 50 FPS when true, but the real issue is when I hold down the mouse button and move it around (with useColor as true), it drops down to 15-25 FPS!!

When running the same code in FireFox when useColor is false I get 60 FPS, with useColor true I get 12 FPS. But when I hold down the mouse button and move it, it doesnt drop anymore and stays around 12 FPS.

Whats up with Chrome?

therevills

(Posted 2015) [#2]

Here's a run-able Dropbox link:

https://dl.dropboxusercontent.com/u/35103024/mx/test2.buildv85d/html5/MonkeyGame.html

Could you please test it for me.

For me running Chrome 43 at works okay... but Chrome 47 it just dies on its face!!!

Paul - Taiphoz

(Posted 2015) [#3]

Yeah whit the color on just moving the mouse locks it up 100% only when I stop moving the mouse does it resume to a very low frame rate, that is indeed odd, but it's also why I have a number of re-coloured sprite sheets in my game rather than using set colour on them, that being said I'm sure a while back some one posted a fix for this I guess I assumed at some point Mark would add it but seeing this now I guess not.

therevills

(Posted 2015) [#4]

Thanks for testing Paul - yeah normally I stay away from SetColor if the project is a pure HTML5 app but this one is for Android in the end.

Just did some more testing a Mac running Chrome 47 and it works fine.... what did Google do with the Windows version!?!?

rIKmAN

(Posted 2015) [#5]

You should use the HTML5 WebGL target for testing, much faster than the normal HTML5 target.

My end target is iOS but I test using the WebGL target for speed as I do use SetColor.

therevills

(Posted 2015) [#6]

I've managed to reproduce the issue in "pure" HTML5 (borrowed some of the code from MX) so its not a MonkeyX issue and it is a Chrome issue.

var META_DATA="[card1.png];type=image/png;width=89;height=125;\n";

Game.Main=function( canvas ){
	var game=new Game( canvas );
	game.Run();
}

function Game( canvas ){
	this._updateRate = 0;
	this._timerSeq=0;
	this._canvas=canvas;
	this._m_x = 100.0;
	this._m_y = 100.0;
	this._startms=Date.now();
	var inputX = 0;
	var inputY = 0;
	var fps = 0;
	var mouseDown = false;
	var rx = new Array(200);
	var ry = new Array(200); 
	this.white=true;
	var sprite = new Image()
}

Game.prototype.Run=function(){

	var game=this;
	var canvas=game._canvas;
	this.SetUpdateRate(60);
	var width = 0;
	var height = 0;
	var r=255;
	var g=255;
	var b=255;

	this.gc = canvas.getContext( '2d' );
	this.gc.font = "12px Arial";
	this.fps = 0;
	this.rx = new Array(200);
	this.ry = new Array(200); 
  
	for (i=0; i<200; i++) {
		this.rx[i] = Math.random() * canvas.width;
		this.ry[i] = Math.random() * canvas.height;
	}
  
	this.sprite = this.LoadSurface("card1.png");
  
  
	canvas.onmousemove=function( e ){
		game.inputX = mouseX(e);
		game.inputY = mouseY(e);
	}
  
	canvas.onmousedown=function( e ){
		game.mouseDown = true;
	}

	canvas.onmouseup=function( e ) {
		game.mouseDown = false;
	}
  
	function mouseX( e ){
		var x=e.clientX+document.body.scrollLeft;
		var c=canvas;
		while( c ){
			x-=c.offsetLeft;
			c=c.offsetParent;
		}
		return x;
	}
	
	function mouseY( e ){
		var y=e.clientY+document.body.scrollTop;
		var c=canvas;
		while( c ){
			y-=c.offsetTop;
			c=c.offsetParent;
		}
		return y;
	}
}

function Surface( image ){
	this.image=image;
	this.swidth=image.meta_width;
	this.sheight=image.meta_height;
}


Game.prototype.SetUpdateRate=function( updateRate ){
	this._updateRate=updateRate;
	this.ValidateUpdateTimer();
}

function surface( image ){
	this.image=image;
	this.swidth=image.meta_width;
	this.sheight=image.meta_height;
}

Game.prototype.LoadSurface=function(path){
	console.log("Load surface : " + path);
	var game = this;
	var image = new Image();
	image.onload=function(){  }
	image.onerror=function(){ }
	image.meta_width=parseInt( game.GetMetaData( path,"width" ) );
	image.meta_height=parseInt( game.GetMetaData( path,"height" ) );
	console.log("image.meta_width : " + image.meta_width);
	console.log("image.meta_height : " + image.meta_height);
	image.src = path;
  
	return new surface(image)
}

Game.prototype.GetMetaData=function( path,key ){
	var i=META_DATA.indexOf( "["+path+"]" );
	if( i==-1 ) return "";
	i+=path.length+2;

	var e=META_DATA.indexOf( "\n",i );
	if( e==-1 ) e=META_DATA.length;

	i=META_DATA.indexOf( ";"+key+"=",i )
	if( i==-1 || i>=e ) return "";
	i+=key.length+2;

	e=META_DATA.indexOf( ";",i );
	if( e==-1 ) return "";

	return META_DATA.slice( i,e );
}


Game.prototype.DrawSurface=function(surface, x, y){
	if( this.white ){
		this.gc.drawImage( surface.image,x,y );
		return;
	}
	
	this.DrawImageTinted( surface.image,x,y,0,0,surface.swidth,surface.sheight );
}

Game.prototype.DrawImageTinted=function( image,dx,dy,sx,sy,sw,sh ){

	if( !this.tmpCanvas ){
		this.tmpCanvas=document.createElement( "canvas" );
	}

	if( sw>this.tmpCanvas.width || sh>this.tmpCanvas.height ){
		this.tmpCanvas.width=Math.max( sw,this.tmpCanvas.width );
		this.tmpCanvas.height=Math.max( sh,this.tmpCanvas.height );
	}
	
	var tmpGC=this.tmpCanvas.getContext( "2d" );
	tmpGC.globalCompositeOperation="copy";
	
	tmpGC.drawImage( image,sx,sy,sw,sh,0,0,sw,sh );
	
	var imgData=tmpGC.getImageData( 0,0,sw,sh );
	
	var p=imgData.data,sz=sw*sh*4,i;
	
	for( i=0;i<sz;i+=4 ){
		p[i]=p[i]*this.r/255;
		p[i+1]=p[i+1]*this.g/255;
		p[i+2]=p[i+2]*this.b/255;
	}
	
	tmpGC.putImageData( imgData,0,0 );
	
	this.gc.drawImage( this.tmpCanvas,0,0,sw,sh,dx,dy,sw,sh );
}

Game.prototype.ValidateUpdateTimer=function(){
	++this._timerSeq;

	var game=this;
	var seq=game._timerSeq;

	var maxUpdates=4;
	var updateRate=this._updateRate;

	var updatePeriod=1000.0/updateRate;
	var nextUpdate=0;
  
	function timeElapsed(){
		if( seq!=game._timerSeq ) return;
		
		if( !nextUpdate ) nextUpdate=Date.now();
		
		for( var i=0;i<maxUpdates;++i ){
		
			game.UpdateGame();
			if( seq!=game._timerSeq ) return;
			
			nextUpdate+=updatePeriod;
			var delay=nextUpdate-Date.now();
			
			if( delay>0 ){
				setTimeout( timeElapsed,delay );
				game.RenderGame();
				return;
			}
		}
		nextUpdate=0;
		setTimeout( timeElapsed,0 );
		game.RenderGame();
	}

	setTimeout( timeElapsed, 0 );
}

Game.prototype.UpdateGame=function(){
	if (this.mouseDown) {
		this._m_x=this.inputX;
		this._m_y=this.inputY;
	}
}

Game.prototype.RenderGame=function(){

	var game=this;
	this.width=game._canvas.width;
	this.height=game._canvas.height;

	this.gc.save();
	game.BeginRender();
	game.OnRender();
	game.EndRender();
}

Game.prototype.BeginRender=function(){
	this.SetColor(255.0,255.0,255.0);
}
Game.prototype.OnRender=function(){
	FPSCounter.m_Update(this);

	this.Cls(0.0,0.0,0.0);

	this.SetColor(255,0,0)

	for (i=0; i<200; i++) {
		this.DrawRect(this.rx[i], this.ry[i], 10, 10);
	}

	this.DrawRect(this._m_x-10.0,this._m_y-10.0,20.0,20.0);

	for (i=0; i<50; i++) {
		this.DrawSurface(this.sprite, 0 + i * 10, 100);
	}

	this.SetColor(0,0,0);
	this.DrawRect(5,.0,50.0,15.0);
	this.SetColor(255,255,255) 
	this.gc.fillText("FPS :" + FPSCounter.m_totalFPS,5,12);
}

Game.prototype.EndRender=function(){}

function FPSCounter(){
	Object.call(this);
}
FPSCounter.m_startTime=0;
FPSCounter.m_fpsCount=0;
FPSCounter.m_totalFPS=0;

FPSCounter.m_Update=function(game){
	if(bb_app_Millisecs(game)-FPSCounter.m_startTime>=1000){
		FPSCounter.m_totalFPS=FPSCounter.m_fpsCount;
		FPSCounter.m_fpsCount=0;
		FPSCounter.m_startTime=bb_app_Millisecs(game);
	}else{
		FPSCounter.m_fpsCount+=1;
	}
}

function bb_app_Millisecs(game){
	var t_=game.Millisecs();
	return t_;
}

Game.prototype.Millisecs=function(){
	return Date.now()-this._startms;
}

Game.prototype.Cls=function(t_r,t_g,t_b){
	this.gc.fillStyle="rgb("+(t_r|0)+","+(t_g|0)+","+(t_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;
}

Game.prototype.SetColor=function(t_r,t_g,t_b){
	this.r=t_r;
	this.g=t_g;
	this.b=t_b;
	this.white=(t_r==255 && t_g==255 && t_b==255);
	this.color="rgb("+(t_r|0)+","+(t_g|0)+","+(t_b|0)+")";
	this.gc.fillStyle=this.color;
	this.gc.strokeStyle=this.color;
	return 0;
}

Game.prototype.DrawRect=function( x,y,w,h ){
	if( w<0 ){ x+=w;w=-w; }
	if( h<0 ){ y+=h;h=-h; }
	if( w<=0 || h<=0 ) return;
	//
	this.gc.fillRect( x,y,w,h );
}

(Totally hacked together!)
Rik, where is the WebGL target and is it up to date?

therevills

(Posted 2015) [#7]

Submitted a Chrome bug here:

https://code.google.com/p/chromium/issues/detail?id=567563

SLotman

(Posted 2015) [#8]

Probably not a bug: Chrome must be caching the canvas - when you move the mouse over it, it has to redraw the canvas, hence the slowdown.

therevills

(Posted 2015) [#9]

Probably not a bug: Chrome must be caching the canvas - when you move the mouse over it, it has to redraw the canvas, hence the slowdown.

It only happens when you hold down the mouse button and move around, also it was fine before v47. So it is a bug :)

rIKmAN

(Posted 2015) [#10]

Rik, where is the WebGL target and is it up to date?

It was originally posted in a thread on here by devolunter(sp?) a while back.

Not sure where I got my most recent version from as I have just been copying the folder from version to version when Monkey has been updated.
Seems to work fine for me.

I can archive my folder and host for you if that's allowed?

edit: Here is the original thread: http://www.monkey-x.com/Community/posts.php?topic=3276&page=first

It says it is now deprecated, but I am using it so it still works fine with Monkey84e which is the version I am using atm.

Paul - Taiphoz

(Posted 2015) [#11]

I recall trying this and it didnt work for me, I added the target and it builds with main.js but as soon as I tried to include the other new js file it just fails.

Pierrou

(Posted 2015) [#12]

To get that WebGL target in MonkeyX you must download Mungo here : http://mungo.io/ first
and then strictly follow every step described by Devolonter here : http://www.monkey-x.com/Community/posts.php?topic=3276&page=first

1. Create a new HTML5 target based on the standard HTML5 monkey target.
2. Rename directory of the new target. For example: html5_webgl
3. There, replace files in modules/native folder by files from mungo
4. Rename new target in TARGET.MONKEY file. For example: #TARGET_NAME="Html5 WebGL Game"
5. Copy-paste code from mojo.html5.webgl.js file into template/main.js file after //${TRANSCODE_END} line
6. Add #HTML5_WEBGL_ENABLED=True in template/CONFIG.MONKEY file

It's very well explained, it just takes a few minutes to do and just works, at least here on my computer. For my current Mojo1 big project I'm using this target which compiles and run very fast.

Paul - Taiphoz

(Posted 2015) [#13]

I actually followed the steps on the OP which although he says download mungo you dont need to because he's linked to the files specifically, What I just realized tho is that in part step 5 he explains we should copy the new java code into main.js but later in the post he says to link in the other JS file I guess its just a continuity issue where the OP has been updated since.

Will take another look at it.

therevills

(Posted 2015) [#14]

Thanks Rik and Pierrou, I'll have a look at that later :)

skid	(Posted 2015) [#15]

Interesting.

Chrome has been leaving random crap on my display for previous 3 days.

It looks a lot like a thread synchronisation issue with mouse moves generating indiscriminate turds of black rectangles all over the place.

Shift selecting any text as I type this generates large horizontal strings of rectangular garbage below the region I presume it's trying to redraw.

I assumed it was Apple declaring end of life on my mini.

rIKmAN

(Posted 2015) [#16]

you must download Mungo

You definitely DO NOT need Mungo to get this working - I am using it with vanilla Monkey 84e

I can't remember what I did to get it working as it was ages ago now, but it will have been from those guides already posted and since then I have just been copying the target folder from Monkey to Monkey each upgrade and it has carried on working.

If people are still having probs by the weekend I'll have a look through and write a small guide.
I suspect Taiphoz is right though and it is a continuity error between the 2 sets of instructions.

Seeing as I am using it with normal Monkey I would assume I am using the latest set of instructions that do not require Mungo.

Pierrou

(Posted 2015) [#17]

Of course you don't absolutely need to get the full Mungo and you don't have to install it (nor use it), you just need 2 files from it, as Taiphoz said and then you can use it in standard MonkeyX indeed. (just get those files from wherever you want and follow the steps)

GarBenjamin

(Posted 2015) [#18]

@rIKmAN I'd be happy if you made a guide for it because I am stuck just looking at the instructions in that thread.
It relies heavily on knowledge inherit from being a long-time Monkey X user I guess. Because when it says:
1. Create a new HTML5 target based on the standard HTML5 monkey target.

I have no idea how to do that. Is this done by simply copying, pasting & renaming the HTML5 folder or is there some kind of standalone utility or tool feature somewhere inside the IDE to do this?

Pierrou

(Posted 2015) [#19]

That's it :simply copy, paste & rename the original HTML5 target folder to HTML5_WebGL or something like that. Then you have to find the directories and files Devolonter mentions and make the changes without thinking too much (all those changes take place inside that new HTML5_WebGL folder). Then every time you upgrade to a new MonkeyX version, just copy that HTML5_WebGL folder in the new Targets directory and the target automatically appears.

rIKmAN

(Posted 2015) [#20]

Exactly what Pierrou said is correct ^^.

If it's still causing problems I will do a guide for it on Sat night/Sunday afternoon when I get a little time.

Would it be breaking any rules for me to just post my HTML-WebGL folder for people to copy into their targets folder?
This would seem the easiest way to start with.

GarBenjamin

(Posted 2015) [#21]

Thanks @Pierrou and @rIKmAN

The instructions could definitely be made clearer. At least I think so.

I am working through it so will put here what I am doing in the hope it makes it more straightforward for other people who have no clue as to the structure of the Monkey X and Mungo folders, Monkey X targets and so forth.

*******************************************************************************
TO GET SUPPORT FOR WebGL Target IN MONKEY X
*******************************************************************************
Download Mungo here : http://mungo.io/

1. Create a new HTML5 target based on the standard HTML5 monkey target.
STEP-BY-STEP:
1.1 Navigate to the "targets" folder inside the main Monkey X folder.
1.2 Open the "targets" folder.
1.3 Make a copy of the HTML5 folder and name the copy HTML5_WebGL

2. Replace files in modules/native folder by files from mungo
STEP-BY-STEP:
2.1 Copy the files from [MUNGO_ROOT_FOLDER]\targets\html5\modules\native to your new HTML5_WebGL\modules\native folder.

3. Rename the new target in TARGET.MONKEY file. For example: #TARGET_NAME="HTML5_WebGL Game"
STEP-BY-STEP:
3.1 Navigate to your HTML5_WebGL folder
3.2 Open the "TARGET.monkey" file in a text editor
3.3. Find the line that has #TARGET_NAME="Html5 Game"
3.4 Change that line to #TARGET_NAME="HTML5_WebGL Game"

4. Copy-paste code from mojo.html5.webgl.js file into template/main.js file after //${TRANSCODE_END} line
STEP-BY-STEP:
4.1 Navigate to [MUNGO_ROOT_FOLDER]\modules\mojo\native
4.2 Open the "mojo.html5.webgl.js" file in a text editor.
4.3 Select and copy all of the text.
4.4 Navigate to your HTML5_WebGL\template folder.
4.5 Open the "main.js" file in a text editor
4.6 Paste the code you copied from the "mojo.html5.webgl.js" file into the "main.js" file on the line directly below this line: //${TRANSCODE_END}
4.7 Save the "main.js" file and close the text editor.

5. Add #HTML5_WEBGL_ENABLED=True in template/CONFIG.MONKEY file
STEP-BY-STEP:
5.1 Go back to your HTML5_WebGL\template folder
5.2 Open the "CONFIG.monkey" file in a text editor
5.3 Add the following line at the top of the file:
#HTML5_WEBGL_ENABLED=True
5.4 Save the "CONFIG.monkey" file and close the text editor.

NOTE: Unfortunately, doing this it still does not work for me so something is not correct at one or more steps.
All I get is:
TRANS monkey compiler V1.86
TRANS FAILED: Invalid target
Abnormal program termination.
Exit code: -1

But hey... I tried. lol

skid	(Posted 2015) [#22]

To target webgl maybe consider using mojo2 for the win. From all accounts converting existing games is a breeze.

GarBenjamin

(Posted 2015) [#23]

@skid that probably is the best way to go. I just had the impression that setting this up using Mungo was pretty straight forward so figured I'd give that a try.
Mainly because I don't have time now to mess around changing my program to use Mojo2 instead of Mojo. I'll be lucky as it is to get my Christmas game in a playable state in time for Christmas. :)

Pierrou

(Posted 2015) [#24]

My mother would love that tutorial... I've been following it step by step to see what happens and everything went fine once again, can't see what's wrong here sorry, I'll have to re-read it when I can...I'm using Mojo2 for my new projects but I have a "big" Mojo1/IgnitionX project that can't be converted so easily so sticking to Mojo1/WebGL Target for it, but yes, using Mojo2 is a good idea.

Gar are you having trouble compiling any monkey file? Have you tried the bananas and all? (probably a silly question :$)

GarBenjamin

(Posted 2015) [#25]

@Pierrou ha ha. Yeah I like things to be clear. Too often people leave out some little step they think is obvious and it really isn't unless the other people have the same context and familiarity with the stuff. I've been guilty of that myself. Something just seemed not even worth mentioning but others had no clue to do it so I've got into a habit of trying to detail everything.

Very odd that you followed the same steps (exactly?) and it actually worked for you! I don't get it. It's not a big deal really I just figured a little extra speed is never a bad thing and the better the game performs the better impression other people will have of Monkey X so figured I'd give it a try.

GarBenjamin

(Posted 2015) [#26]

@Pierrou Nothing builds for that HTML5_WebGL target. It doesn't even make it to the point of compiling. It's like it blows up trying to link in the target so it can start on the compilation process. As soon as I start a build it instantly errors out with:
TRANS monkey compiler V1.86
TRANS FAILED: Invalid target
Abnormal program termination.
Exit code: -1

I'm not going to mess around with it any more unless someone here sees something in the step-by-step that I did wrong and posts the right way for it.

For now I need to get back to focusing on the game itself. Time to get some snow boulders moving. :)

rIKmAN

(Posted 2015) [#27]

I've just tested with a fresh Monkey 84e, dragged over my HTML5_WebGL folder from my existing install into the fresh install and ran Ted - it picked up the target and Bouncy Aliens ran fine.

Can I upload my "HTML5_WebGL" folder without breaking any Monkey/Mojo licences?

If so I will upload it so you can just extract it to your "targets" folder and be good to go, which will save me some time.

Soap	(Posted 2015) [#28]

The HTML5 version is included in the free version. I strongly doubt Mark would have any problem with you sharing your version.

GarBenjamin

(Posted 2015) [#29]

@rIKmAN that'd be great and I would guess I'm not the only person who will find it useful.

rIKmAN

(Posted 2015) [#30]

OK I've uploaded my HTML5-WebGL folder, just extract the rar into your "targets" folder inside the Monkey dir.

Remember to rescan for targets etc within Ted/Jungle/Jentos/whatever IDE you use.

GarBenjamin

(Posted 2015) [#31]

@rIKmAN Thanks! That was easy and it works fine. I tested it on the Breakout example and it worked perfectly. Then I tried building my current Christmas game project and that also worked fine. :)

rIKmAN

(Posted 2015) [#32]

Awesome, happy to help! :)

therevills

(Posted 2016) [#33]

Got a reply today regarding this Chrome bug:

https://code.google.com/p/chromium/issues/detail?id=567563

Thanks for the report. Looks like your test app is using timers instead of requestAnimationFrame() to schedule rendering. I'd suggest switching to rAF instead so the browser has a better idea of what you are trying to do.

That said, this particular bug has already been fixed in M48.

And its now marked as a duplicate linked to this bug:

https://code.google.com/p/chromium/issues/detail?id=570845

Maybe Mark should look at requestAnimationFrame in the future?