Below is info about an animation problem. I am wonder what other people who are doing fast paced animation are doing to keep them smooth.


Problem: I have been running into a problem of a 300 millisecond pause when running intense animation in my BreakOut clone.

Description: The way I am doing the animation now is basically a loop that calculates where the ball should go in the next frame (takes into account collision with walls, bricks, or paddle) and then changes the coordinate of a div and then updates the div's location to animatesit there. This loop is on timer and runs every 40 ms.

Diagnosis: I believe the problem here is that Garbage Collection is occurring.


Solution: I haven't been able to figure it out. If I lower to the frequency of the animation interval the the pauses occur less I think this article: http://developer.palm.com/index.php?opt ... le&id=1692 provides some information about my problem but I can't seem to figure out how to solve it.



here is the code (I took out the obviously irrelevant stuff) of my assistant if you can want to take a look:
http://pastebin.com/f5b3e8c16

here is the ipk:
http://jmaxkanter.com/org.webosinternal ... 8_all_.ipk

Thanks in advance for any help

-Max

Nothing jumps out at me as to what's causing the lag but I'm no expert at JS optimization & this is getting fairly particular. Have you tried adding some timing calls to see if you can narrow down where the bulk of the time is being spent? There's a basic Mojo timing class that you might be able to use - http://developer.palm.com/palm-sdk/jsdo ... iming.html

Two things to consider:
1. I see a lot of redundant object lookups -- $('ball'). You could cache that in a variable so you don't take the hit of looking it up in the dom multiple times.

2. Look into reducing the amount of string concatenation and complex equations as much as possible. Like Java, those cause temporary objects to be created resulting in more frequent GCs.

So I just did some of my own testing with completely different code. Basically a ball bouncing around the screen. and th problem persists.



1. So in my new code, redundant lookups are gone.

2. I have reduced them as much as possible (at least I think) in my new code. Since the problem is still there does this mean this problem is unavoidable? I noticed while watching the Wolfenstein Pre-D video that every once in a while the FPS went way down. This is presumably from the a similar problem to what I am experiencing.

I now think the problem is being caused by the re-creation of my animate function object every time the interval is called. Is there a way to make bind not spawn variables?


Also, are there any developers out there that have been successful in doing continuous animations that can react to user inputs on-the-fly? (this is the reason why I cant use webkit transitions)

The advantage of using -webkit-transition is twofold: you leverage native side animation code for smoother animation (in most cases), and you create less things to be garbage collected in the JavaScript heap than using most pure JS animation techniques. The drawback is you can't tie them easily to a game loop, so you might have to rethink how your game works to utilize them properly.

As for saving on CG's in general, make sure you pre-generate as much data as possible, especially if you're doing your own giant game loop. This includes turning formulas into arrays as a good example.

I'm seeing a delay just like you're talking about in my canvas game. If this is garbage collection, then it sure does take a long time. The timing between collections seems fairly random, but it's certainly annoying in the game. It'd be nice to have a way to tell the device to be nicer about garbage collection.

Has anyone figured out how to make them go away?

I've got a little 2d action game where you drive a submarine around. I don't see these delays. I didn't actively do anything to avoid GCs, but did keep equations as simple as possible to minimize impact of CPU load.

Instead of using a canvas, I use a table to display background. The submarine and other active targets are images elements that are positioned via styles.

So Predwood, are you willing to post your code as an example so we can test similar code on other games?

because _every_ animation I have tried has these pauses, and every animation in the homebrew forums at PreCentral seems to have them.

I would LOVE to see your no-pause code. Pretty please?

Sure, here's a zip of the source http://www.box.net/shared/gn2mjvkeah

If you take a look and have suggestions for improving the code, please let me know.

it looked like a great game untill "the sub became my coffin". :)

its a great game, when will it be releases???