Jump to content
  • Advertisement
Sign in to follow this  
MortusMaximus

[web] GIF versus PNG performance in DHTML

This topic is 3418 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

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
Advertisement
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
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!