Lag

[frankdev]

My game in progress at www.bunnygame.comuf.com is lagging a lot. I do not really understand why this is happening; right now it is only about 800-900 lines and I even have implemented the CraftyJs loading function so that it does not start until it has loaded all of the resources. As you go on, the lag decreases but I do not think it has anything to do with the amount of time that has passed.

 

Feel free to look at the code via view source but please do not use it for any other purposes.

[Ezelia]

I never used crafty but a quick profiling with Chrome timeline tool shows that the lags are due to the garbage collector ...
and when I look in you code (the render function) I see lot of things like this :

 

 

var p1 = Crafty.e("platform ,2D, DOM, Image")                .attr({x: -100, y: -100, w: 25, h: 25})                .image("block.jpg");                var p2 = Crafty.e("platform ,2D, DOM, Image")                .attr({x: -100, y: -100, w: 25, h: 25})                .image("block.jpg");                var p3 = Crafty.e("platform ,2D, DOM, Image")                .attr({x: -100, y: -100, w: 25, h: 25})                .image("block.jpg");                                var p4 = Crafty.e("platform ,2D, DOM, Image")                .attr({x: -100, y: -100, w: 25, h: 25})                .image("block.jpg");                ..... 

actually you are reallocating/freeing everything each frame (60 times per second) ... so the garbage collector passes frequently to free unused memory.

 

you have to allocate your objects once outside the render function and reuse them.
inside the render() function you are supposed to just update your objects properties.
      

[Chris]

Hey,

I've never worked with crafty.js before and have no experience in it but I think I might be able to help out a bit.

 

You should definitely read more of Crafty's documentation before you start to create your game.

 

As they demonstrate in their "how crafty works" article, you don't need to use the setInterval() function to create a game-loop, but

can bind elements to the "EnterFrame" event that Crafty fires to re-draw elements.

 

There are so many pitfalls and structural mistakes in your code, that it would take me over an hour to explain everything to you.

 

So my suggestion is: start it slowly. Read a book about Javascript. Or better, read two.

When you have read those two books, you are armed with enough JavaScript knowledge to code up any game you can imagine.

 

Start slowly by replicating and truly understanding Crafty.js's basic demos, then start creating your own game.

 

I can figure this sounds demotivating at first, but if you continue to develop your game the way you are doing it right now, I can promise you that you will get stuck and waste hours and days for trying to find some strange errors in your game or blocking your own way for new features you might have in mind.

 

Start with the basics, then move on to the complex stuff. You will see, it really pays in the end

[P.Uri.Tanner]

Paratron made some good arguments.

I learned some of the "easy parts" the hard way: By trying to do too much without enough know-how to back it up. Took way too long.

 

A book here. Some careful browsing there... and most of the mistakes can be circumvented.

 

Here is a snapshot of the chrome profiler for your app:

It shows the Garbage Collector taking alot of time.

[frankdev]

Thanks for the help!

[frankdev]

Just did a temporary fix and moved all of my timed events into one function, and that function gets called every howevermany seconds. I understand that my code is still ugly, but It's just for fun right now and I am only 14 so I have time to learn how to clean it up!

[Chris]

Sure, you don't have to find excuses. You can't imagine how my code looked like when I was 14

 

Another quick tip: try and put all your code into JS files instead of putting it inside your html document. This makes debugging MUCH easier. But thats also written somewhere in the mentioned books