CODEWITHSUNDEEP
javascriptcreatejs
N Joseph
N Joseph

Reputation: 1

Createjs: Adding mouseover to containers slowsdown FPS

Link 1 - http://horebmultimedia.com/Sam3/ Link 2 - http://horebmultimedia.com/Sam5/

In the above links, i have added a set of numbers added in separate containers in each file and u can find the FPS on the top right. The issue is when i mouse over in this Link 1 and click any numbers, as u see the FPS is getting slower & slower, making the world to rotate slower on the left side.

While on this link, Link 2, I added only one mouse over and 5 mouse over, but there is not much difference in FPS, why it lags so much when i have 37 containers. I can give my code if u need to resolve.

Upvotes: 0

Views: 210

Answers (1)

Lanny
Lanny

Reputation: 11294

I had a rough look at your code, but digging through an entire project is not a fantastic way to debug an optimization problem.

The first thing to consider is if you have mouseOver enabled on your stage, I would recommend a liberal use of mouseChildren=false on interactive elements, and mouseEnabled=mouseChildren=false on anything not interactive. The rollover could be a big cause, as it requires everything to be drawn 20 times per second (in your usage). Text and vectors can be expensive to redraw.

// Non-interactive elements (block all mouse interactions)
element.mouseEnabled = element.mouseChildren = false;

// Interactive elements (reduce mouse-checking children individually)
element.mouseChildren = false;

If they don't change, you might consider caching text elements, or button graphics. I think I saw some caching in the source - but its generally a good thing to consider.

--

With that said, debugging optimization can be tough.. If removing all the buttons brings your performance up, consider how your buttons are being constructed, and what their cost is. * Mouse over is expensive * Vectors and text can be expensive * Caching can help when used right, but can be expensive if it happens too often. * Review what is happening on tick(). Sometimes, code is running constantly, which doesn't need to.

--

A few other notes:

  • This does not do what you think: _oButton.off("mousedown"); -- You need to pass the result of the on() call. If you are just cleaning up, call _oButton.removeAllEventListeners().

  • You don't need to set the cursor on mouseover. The cursor will only change when it rolls over -- so just set it once, and then get rid of your buttonover stuff.

  • It might make sense to just extend EventDispatcher for your custom classes, which gives you things like the on() method, which supports a data param. I might recommend this in place of your addEventListener stuff in CTextButton

  • Note that RAF does not support a framerate property (it just uses the browser's RAF rate, which is usually 60fps). Use createjs.Ticker.timingMode instead of the deprecated useRAF.

Hope that helps a little.

Upvotes: 2

Related Questions