Mobile performance with 88 element grid

[drewbit]

I'm happy to say GSAP has given me hope again. I switch from jQuery animations (and some css3 jquery plugins) to GSAP tweens and instant performance gains!

 

However, I'm still not happy with the performance I get on my Samsung Galaxy S2x. It's a pretty decent phone so I know it has the power to play some high end games.

 

I think using phonegap's browser plugin caused some issues, but even using mobile chrome the performance is choppy and not good enough for a production app.

 

Of course, I could be doing something very wrong as I'm new to the mobile HTML5 scene. I'm hoping someone might be able to help determine if my issue is animation related or just bad code in general.

 

My animations are pretty simple:

TweenLite.to(jem, animationSpeed, {top:(blockSize*row)});

It's maybe all the other stuff that gets in the way?

 

I've put everything in jsbin for easy viewing in browser and on mobile devices:

 

http://jsbin.com/uyAXume/9/edit

 

 

Thanks for any help or pointers.

 

[Rodrigo]

Hi and welcome to the Greensock forums.

 

First, great game!! I've always been a sucker for gems games, so I'd appreciate if you could post the link when is completed.

 

Second, in terms of improving performance, I don't know how much this could help, but instead of animating the top property you could animate the transform:translate property in the y axis and force hardware acceleration using force3D, in order to pass the animations to the GPU, like this:

TweenLite.to(jem, animationSpeed, {y:(blockSize*row), force3D:true});

But like I said, I'm not sure how this would improve your app, basically because all your images are png files with alpha channels and shadows in them, so the issue could be that paintings are becoming too expensive, performance wise, to the browser. In this cases the main bottleneck comes when the browser has to render everything in the view port, so even if you force hardware acceleration and use y instead of top, it might not improve performance to the level you want/need.

 

Perhaps you could try with simple jpg images with solid backgrounds to see how that behaves in devices, specially mid-low end ones.

 

Rodrigo.

[drewbit]

Thanks Rodrigo, I will try both of those. Hopefully I can find a way to make it work with the transparency, it puts a nice effect once you start adding backgrounds and such, but that probably does have some effect on performance. I never thought about the drawing aspect of it.

 

And I will post a link to the finished product as well, even if I can't figure out the mobile side, this will be at least be a facebook game.

 

Cheers!

[GreenSock]

I didn't have time to analyze all the code (unfortunately, as much as I like the challenge, I just can't do free consulting services for general performance fine-tuning), but in addition to echoing Rodrigo's encouragement to use x/y transforms rather than top/left, I also noticed that you're doing a lot of jQuery lookups in the DOM very frequently rather than caching those things as variables. In other words, when you do something like $('#game img[alt='+((row) +'-'+ col)+']'), it's having to search through the DOM and do a lot of work to find that particular element(s), but you'd get better performance if you managed an array or some variables or something that made lookups much faster (without touching the DOM). 

 

Also, it looks like you're using jQuery's animate() method in some spots and you didn't load the jquery.gsap.js plugin, so those animations will run much slower than if you used GSAP. Our engine is literally up to 20 times faster. 

 

Good luck!

[drewbit]

I didn't have time to analyze all the code (unfortunately, as much as I like the challenge, I just can't do free consulting services for general performance fine-tuning), but in addition to echoing Rodrigo's encouragement to use x/y transforms rather than top/left, I also noticed that you're doing a lot of jQuery lookups in the DOM very frequently rather than caching those things as variables. In other words, when you do something like $('#game img[alt='+((row) +'-'+ col)+']'), it's having to search through the DOM and do a lot of work to find that particular element(s), but you'd get better performance if you managed an array or some variables or something that made lookups much faster (without touching the DOM). 

 

Also, it looks like you're using jQuery's animate() method in some spots and you didn't load the jquery.gsap.js plugin, so those animations will run much slower than if you used GSAP. Our engine is literally up to 20 times faster. 

 

Good luck!

 

The suggestions from Rodrigo was exactly what I was after. Thanks for the suggestion on caching. I'm not sure how that would work as I remove and add new element frequently. I don't think a max of 88 elements will slow things down. The only performance issue I've seen is in the actually animation which happens after the DOM queries finish.

 

The jQuery animate isn't used, I just didn't get a chance to refactor that code yet. I'm moving everything to GSAP.

 

I found a few tools called optipng and pngcrush that help reduce draw time of png files and the change over to translate from top/left really made a large difference.

 

I need to go back and try my canvas version again using translate as well, although the jQuery version with top/left animation outperformed the canvas version so not sure if it will be as good as what I'm seeing right now.

 

Thanks for all the pointers folks, greatly appreciated!