Performance problems with processing.js (>0,4 FPS)

florian10..

Performance problems with processing.js (>0,4 FPS)

in Processing with Other Languages • 2 months ago

Hi,
I am making a project named "BrowserCraft" it´s a little bit like Minecraft in 2D or Terraria but its a own game.
Today I finally made it run in Browser,it was a big problem because in the beginning it was programmed in Java-Mode.

And now there is the problem that the game is running in Java-Mode on 50 FPS and in Browser with processing.js version 1.41 with 0.4 FPS xD.I runned it also on my PC with xampp but there is the same problem and I think processing.js causes the problem.

BrowserCraft is a very big project with over 6000 lines of code and originally was my graduation project.
But I was surprised how strong the normal Processing in Java-Mode is because it runs trouble free with 50 FPS.

Is there a way to get it playable with other hardware or allocate it more memory/CPU or something like this?

greetz

Replies(24)

PhiLho

Re: Performance problems with processing.js (>0,4 FPS)

2 months ago

Moved here from Programming Questions because it is about "another language".

Java, despite its old and now obsolete reputation, is a rather fast language, almost on par with C / C++ for calculation heavy programs, thanks to its JIT compiler.

JavaScript made lot of progress in speed in the last years, but is still far from Java in terms of performance, and will probably never attain the speed of Java because of its dynamic nature: a statically typed language allows the compiler to do some shortcuts because it is sure of the type of the variables, while a JS variable can hold a number, then a string, then an array or an object, etc.

It also depends on the nature of your sketch. Is it using 3D? Does it eat lot of memory? (can cause the browser to swap) Etc.

Alternatively, export the project to a jar and run it as an applet. You need a special tool in 2.0 to do this.

GoToLoop

Re: Performance problems with processing.js (>0,4 FPS)

2 months ago

Alternatively, export the project to a jar and run it as an applet. You need a special tool in 2.0 to do this.

Alternatively, compile it using Processing 1.5.1.
Since JavaScript mode is still mirroring that previous old stable version,
your present code should run on it perfectly.

florian10..

Re: Performance problems with processing.js (>0,4 FPS)

2 months ago

Alternatively, export the project to a jar and run it as an applet. You need a special tool in 2.0 to do this.

Sounds good.How can I do that,and whats the name of the tool?
It´s an 2D game with lots of graphics (over 300).

greetz

mbraendle

Re: Performance problems with processing.js (>0,4 FPS)

2 months ago

I have different experience in porting a 4000-line Processing program to Processingjs.

It runs with about 35 frames/s, which is ok, and draws several hundred shapes on screen.

One key point was to find out what produced memory leaks. These made the program slow and after some while it became unusable.

The reason was a graphics background buffer that was declared as a local variable in a class.

When it was used, always new memory was reserved for and garbage collection in the JavaScript interpreter/compiler of the browser could not deal with it.

The solution was to declare it as a global variable and just to fill it with a white background before an object was drawn into it.

In your case, I would open your code in Google Chrome and with the developer tools (menu View > Developer > Developer Tools) first check memory consumption.

As far as I have seen from quickly glimpsing at your code (posted in this thread: http://forum.processing.org/topic/export-and-run-a-app-on-webspace), I don't think there should be a major obstacle against running it in Processingjs.

However, I got the impression (as another poster in the other thread said as well), that your code can be shortened a lot by better use of arrays and an improved data structure. For example, I don't see why coordinates for detection of the blocks must be hand-coded. This is something which a well-designed data model (implemented in a class) must achieve. This makes the code much more flexible and your software extensible. Not dozens or hundreds of named variables for blocks, but one array of block objects. Not dozens or hundreds of if statements, but maybe one or two in a loop. It's the data then that drives the conditions.

In a certain sense, while our codes have different intents and target groups, they do similar things.

- they draw a menu

- they draw several hundred images or shapes

- they react to keyboard and mouse events

(You may compare at http://www.clicaps.ethz.ch/librarynavigator/ and http://www.clicaps.ethz.ch/librarynavigator/library_space.pde)

dimkir

Re: Performance problems with processing.js (>0,4 FPS)

2 months ago

Honestly speaking, without your source code it's very hard to figure out what exactly has caused your problem.

What PhiLho has written about JS and Java is right, but I think in your case everything is much simplier.

JS is slower than Java, but for the purpose of simple HTML5 game it's fast enough. Many decently sized projects are made with JS like for example http://www.adityaravishankar.com/projects/games/command-and-conquer/

Most likely the problem is in your code. Either you're using functionality which in Java executes fast, but JS doesn't. For example tint() function, which on Java is rapid fast, but on PJS it's super slow.

If your game is 2D (which i assume) then you need to be careful with filter() blend() and some other alpha-transparency related methods. And also you may want to verify performance of pixels[] array related operations under JS.

The 2nd reason may be some memoery leaks as mentioned by mbraendle

Hope this helps.

florian10..

Re: Performance problems with processing.js (>0,4 FPS)

2 months ago

Run it as an applet seems to be the better way.

I exported it with the Java Applet Tool,uploaded and tested it but it wont run and I get a white window.
What could cause problems in this case?

Here my sourcecode:
Edit:Link removed

greetz Flozzel

dimkir

Re: Performance problems with processing.js (>0,4 FPS)

2 months ago

I tried run your code, but because there's no images, it didn't run property. If you want to put the whole sketch folder to dropbox or into zip?

florian10..

Re: Performance problems with processing.js (>0,4 FPS)

2 months ago

Edit: Link removed.
(Gravity and camera movement didn´t work correct and is buggy)

greetz

dimkir

Re: Performance problems with processing.js (>0,4 FPS)

2 months ago

well, first it looks pretty cool. Congrats.

second, i managed to run it in java mode.

third, when I try running in javascript mode it doesn't run giving me this message:

You mentioned in your post that your sketch runs very slowly in JavaScript mode. However I cannot even run it. Can you? I am asking to figure out - whether it is problem with my browser/javascript or there's some problem inside of code besides the low framerate?

From what I can see you're not really preloading any images with

/** @pjs preload="imagefile.png" **/

did your sketch ever worked in JavaScript mode without pjs directive ( http://processingjs.org/reference/pjs%20directive/) ??

ps. also when i did run your sketch first time in Java mode, it worked. Then when I switched to JavaScript mode, it failed to run, because all your images were inside sketch directory, not the data directory. And it gave me this message:

after I copied all the images into sketches data directory, I arrived to the error message which i posted earlier ("sprites ... blah blah"). However I still wonder why did you upload zip-file with no proper directory structure? was that intentional? or was it just fault of the rar-archiver software?

florian10..

Re: Performance problems with processing.js (>0,4 FPS)

2 months ago

"sprites is not defined" I know this error,I think its because of a duplicated name or something.

From what I can see you're not really preloading any images with

/** @pjs preload="imagefile.png" **/

My sketch only runs in Javascript mode without preloading anything,the preloading line causes errors and make my game didnt run.I uploaded my sketch in Javascript mode on my webserver: http://creeperface.de ,you can look there its running but only with 0.4 fps.

florian10..

Re: Performance problems with processing.js (>0,4 FPS)

2 months ago

Here both versions compared:

Java,playable and 60 FPS

JavaScript in Browser,0,4 FPS

dimkir

Re: Performance problems with processing.js (>0,4 FPS)

2 months ago

you have calls to tint() method throughout your call. Try to remove them.

All i can do is run your sketch without images and it gives me 43 fps. IMHO it's the tint which slows you down.

You should get fair 30fps with the image display but without tint()

mbraendle

Re: Performance problems with processing.js (>0,4 FPS)

2 months ago

First you have to get your Processing code right.

I get a ArrayIndexOutOfBounds exception: 28500 when moving the character at

if (raster[mausposition_x][0]+gvs==blockcontrol[mr_fc][0] && raster[mausposition_y][0]+gvs1==blockcontrol[mr_fc][1]){

(also got another exception once, but not reproducible).

Second, many screens do not work as indicated by your screenshots.

I'm on Processing 2.0.1 and 1.5.1 on Mac OS X.

mbraendle

Re: Performance problems with processing.js (>0,4 FPS)

2 months ago

Got also a NullPointer exception at

"image(fa_1,width-834+2,height-height+72+2);"

???

why not just write

image(fa_1,width-832,74);

florian10..

Re: Performance problems with processing.js (>0,4 FPS)

2 months ago

why not just write
"image(fa_1,width-834+2,height-height+72+2);"

Test purposes,I think this isnt a serios performance problem.I change that later.
If you get a null pointer exception,there is a missing image.I uploaded a full working version.(at least in JavaMode)
You can look at http://creeperface.de, there is the same version running in JavaScript Mode.

I removed tint now and get at least 6 fps.Now I start removing the bugs triggered by duplicate variable names (functions wont work if theres a variable with the same name.)Any other ideas to get more fps/better performance?

greetz

dimkir

Re: Performance problems with processing.js (>0,4 FPS)

2 months ago

Disable printing to console. Console printing in JS is Extremely slow. But most important try to profile your app like described here http://coding.smashingmagazine.com/2012/06/12/javascript-profiling-chrome-developer-tools/

florian10..

Re: Performance problems with processing.js (>0,4 FPS)

2 months ago

Okay thanks this tool is very helpfull.
But it says me what I already knew: my lz_generation (laufzeit_generation,in english runtime generation) is very
heavy and eats lots of my fps. Other things with high memory usage are Drawing2D.image and Drawing2D.redraw.

The function of lz_generation is to display the blocks at their positions.It starts with the first data in blockcontrol [],looks there for the x and y position of the block,than its ID (if its an grassblock,stoneblock,brickblock....) goes trough an switch to get the image of the block and than displays it.Than the next.....
If the last variable in blockcontrol was drawed it starts again,and again.......

for example:
x position:          blockcontrol[0][0]=0
y position:          blockcontrol[0][1]=0
block id:             blockcontrol[0][2]=1 // 1 is stoneblock

x position:          blockcontrol[1][0]=16
y position:          blockcontrol[1][1]=0
block id:             blockcontrol[1][2]=1 // 1 is stoneblock

and so on...........

x position:          blockcontrol[20149][0]=3744
y position:          blockcontrol[20149][1]=320
block id:             blockcontrol[20149][2]=3 // 3 is dirtblock

Actually its only point is to redraw the images several times in a second so the cursor,character,mobs,sun and moon.... didnt produce a trace on the screen.Its just so massive because of the multitude of blocks and their images.

greetz Flozzel

dimkir

Re: Performance problems with processing.js (>0,4 FPS)

2 months ago

by the way, you have a function-to-variable name collision, which in JavaScript mode will break your execution flow.

You have to fix ALL of thouse name collisions first. Because this may cause a loop somewhere in your code which doesn't occur in Java, and this loop may be taking a lot of time.

dimkir

Re: Performance problems with processing.js (>0,4 FPS)

2 months ago

it looks like your main problem is the way (the paradigm) you use to do drawing:

looks like your calling stack is:

draw():
mapgeneration();
lz_generation()
image( ........ ) // this specific line is called 20149 times every second.

Your screen can only fit 2850 tiles, so you should draw only them and "touch" only them in your game loop.

But even so it wouldn't be enough. image() operation executed thousands times a frame will slow you down a lot. You can do 10-20 calls to image() per frame, but not 2850. You need to have framebuffer (PGraphics) where you will render your tiles once. And then you copy this framebuffer to screen every frame. You update the framebuffer only if user has clicked and "changed contents" of the tile.

here's screenshot for illustration:

florian10..

Re: Re: Performance problems with processing.js (>0,4 FPS)

2 months ago

Okay,seems to be a good idea with the PGraphics and framebuffer,but it decreases my fps only.

greetz

dimkir

Re: Performance problems with processing.js (>0,4 FPS)

2 months ago

The purpose of using PGrapihcs as off-screen buffer is not to just introduce another layer in fashion

that now lz_generation() is drawing into the buffer and later buffer is drawn on screen. No.

The idea is to restructure your program logic, so that you only call lz_generation() after user has clicked and "built" some time. In all other times (when user is just looking at the screen or using menu) you don't call lz_generation() but just redraw the buffer which was created earlier.

florian10..

Re: Re: Performance problems with processing.js (>0,4 FPS)

2 months ago

I have to call it at least once per drawloop,because of the sun which moves every time the drawloop is called.
And later there are zombies and so on spawning which moves every time to.

dimkir

Re: Performance problems with processing.js (>0,4 FPS)

2 months ago

yes. zombies move, sun moves. but not 20149 tiles.

Generally speaking you have to reduce amount of calls to draw() per as you call it "drawloop". Now you're calling it like 20k times. It should be 20-50 times max. Not 20 149 not 2 000 times.

florian10..

Re: Performance problems with processing.js (>0,4 FPS)

2 months ago

Now I only draw the part of the map which is on the screen,but it makes no difference.
I have no more patience for this shitty processing.js. I will try to get it run as an applet...

Edit: Works fine.

Top Reply