Sign in to follow this  
MortusMaximus

[web] GIF versus PNG performance in DHTML

Recommended Posts

I'm working on a game in javascript/dhtml, and need to be able to animate things. However, I'm not sure which method I should use. Right now, I use a mix of both, with reasonable, but not amazing performance results. I know that PNG typically offers better compression than a GIF with the same color palette, which makes PNG look like a good choice. However, there isn't a way to animate PNG like you can with GIF, without risking losing some browser support. What is the overhead for changing the background image of a div, as opposed to simply moving to the next frame in a GIF animation? My second concern regards transparency, and how it is typically rendered in browsers. Single bit transparency seems like a pretty easy calculation, where you either take the pixel immediately behind, or you don't, but what about partial transparency? I know transparency is a rather expensive calculation in openGL, but how is it for browsers? Is it worth the effort to split objects into several images, to minimize the amount of transparency you have to calculate? OK, just finished a wave of optimizations. A list of things I did: 1.) Instead of getting a new reference to each div during each timer cycle, I stored the reference to the div as a member variable in the class. 2.) Update health bar image every 500ms instead of every 25 ms. 3.) Change the continuous loop PNG animations to GIF animations. Still wondering on the transparency calculations, might have to test it out.. [Edited by - MortusMaximus on March 14, 2009 2:09:35 PM]

Share this post


Link to post
Share on other sites
Quote:
Original post by MortusMaximus
My second concern regards transparency, and how it is typically rendered in browsers. Single bit transparency seems like a pretty easy calculation, where you either take the pixel immediately behind, or you don't, but what about partial transparency? I know transparency is a rather expensive calculation in openGL, but how is it for browsers?

Early Internet Explorer (v6.0) doesn't support PNG transparency well (I would say it doesn't support it at all). That's all I can contribute since this is not my field.

Share this post


Link to post
Share on other sites
I'd go for the "fast immage button rollover" method, as documented, for instance, here.

Note that the link describes how to make button rollover effects, but I'm sure this can easily be extended to all kinds of animations. And it's pretty fast too, because there's one image that's always "live", so it doesn't have to be reloaded and shouldn't swapped out.

I'd like to see results, if you get any!

Share this post


Link to post
Share on other sites
Rattenhirn: Thanks for the link, that's definitely a neat trick to use. However, I don't think that sort of animation would work too well for my game. I'm trying to stay away from CSS, and there is also a bit of a bug (when you click on the image and drag it any amount in any direction, it will get "stuck" until you click somewhere else on the screen).

I could definitely have a different div for each frame in every animation for every unit, but that would require a LOT of div's, so it isn't really an option.

Unfortunately I can't give out the link to the current build of the game without approval of the project leader, but I can give post a link to the website. It only has concept art and a single screenshot, though.

http://dayonic.com/

If you want to see more, feel free to sign up on the forum and bug the project leader to release more screenshots ;P

Updated info in first post regarding optimization progress.

[Edited by - MortusMaximus on March 14, 2009 2:56:16 PM]

Share this post


Link to post
Share on other sites
Quote:
Original post by MortusMaximus
Rattenhirn: Thanks for the link, that's definitely a neat trick to use. However, I don't think that sort of animation would work too well for my game. I'm trying to stay away from CSS, and there is also a bit of a bug (when you click on the image and drag it any amount in any direction, it will get "stuck" until you click somewhere else on the screen).


The bug you mention is an issue of the browser you are using and has nothing to do with CSS.

Quote:
Original post by MortusMaximus
I could definitely have a different div for each frame in every animation for every unit, but that would require a LOT of div's, so it isn't really an option.


You know, with the CSS solution you'd only need 1 div for each unit. Just saying...

Share this post


Link to post
Share on other sites
Quote:
Original post by Rattenhirn
Quote:
Original post by MortusMaximus
Rattenhirn: Thanks for the link, that's definitely a neat trick to use. However, I don't think that sort of animation would work too well for my game. I'm trying to stay away from CSS, and there is also a bit of a bug (when you click on the image and drag it any amount in any direction, it will get "stuck" until you click somewhere else on the screen).


The bug you mention is an issue of the browser you are using and has nothing to do with CSS.


I tried it in all my browsers, and it does the bug for both firefox and IE, but not in google chrome. My firefox and IE are both the most recent version.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this