/    Sign up×
Community /Pin to ProfileBookmark

Multiple stacked images performance issue

Copy linkTweet thisAlerts:
Jan 31.2012

Hi, I’m trying to make a card game, and after some tests I found out that too many images on top of each other kills the FPS. I tried to load 500 +-50Kb jpgs and when side by side, performance is bad (+- 30FPS), but stacked, it is worst (+- 5FPS)

I tried this in regular HTML, canvas, and flash, with same results.

I wonder if anyone can tell me if this is normal and explain why. Also, if there is any clever way to deal with this. If needed, I can put the examples online but this may take a while

Thanks

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERFeb 01.2012 — If you need help, some code would be nice.

Difficult to explain what might be wrong if there is nothing to comment about!

BTW: Why do the images need to be so big if this is a card game?


And why so many cards?

What kind of game is this anyway?
Copy linkTweet thisAlerts:
@rtretheweyFeb 01.2012 — You're asking a lot of a browser by having any page contain that much data (500 * 50kb), and when you stack them the browser has to deal with rendering layer upon layer to calculate which one to actually draw. You might speed things up to a manageable level if you take a sprite-like approach: combine the images into 10 master composites of 50 images each, using them as background images and manipulating the positions as needed to show the desired portion of each one. The composite images may end up smaller to begin with, and having a far lower number of images should help, too. From there, you'll have to consider lowering the size and quality of the images.

It sounds like you're trying to do some kind of animation that requires these images to be displayed quickly in sequence, or I'd suggest looking at ways to only load the images as required.
Copy linkTweet thisAlerts:
@007JulienFeb 01.2012 — Unless making turn the images, a single image is enough for displaying 500 ! This Shanghaï page is made with a single image. See the css and the attached image.
Copy linkTweet thisAlerts:
@icetbrauthorFeb 01.2012 — If you need help, some code would be nice.

Difficult to explain what might be wrong if there is nothing to comment about!

BTW: Why do the images need to be so big if this is a card game?

And why so many cards?

What kind of game is this anyway? [/QUOTE]

Hi, so many answers already :-) The thing about the code is I'd like to put it online, but it may have limited use without the images (18M?. Also, there is nothing special in the code, its a for loop that load images either side-by-side or stacked. But I could post it here.

The issue is really on rendering, not the code it seems. It is an unusually large amount of images to be displayed for sure. If you want to have an idea, take a look at this for now

bolaslenses.catuhe.com/

http://css.dzone.com/articles/magic-gathering-javascript-ant

You're asking a lot of a browser by having any page contain that much data (500 * 50kb), and when you stack them the browser has to deal with rendering layer upon layer to calculate which one to actually draw. You might speed things up to a manageable level if you take a sprite-like approach: combine the images into 10 master composites of 50 images each, using them as background images and manipulating the positions as needed to show the desired portion of each one. The composite images may end up smaller to begin with, and having a far lower number of images should help, too. From there, you'll have to consider lowering the size and quality of the images.

It sounds like you're trying to do some kind of animation that requires these images to be displayed quickly in sequence, or I'd suggest looking at ways to only load the images as required[/QUOTE]

The sprite idea has come up. Don't know if I can pull it off though, all the cards are rotatable, draggable and turnable. Also z-culling has been suggested to me. Also, I'm using a 10000x10000 canvas size. I did tested without any of these btw, they didn't seem to be the bottleneck, athough this is not definitive.


BTW, I have this cross-posted (different forum focus) here

http://www.gamedev.net/topic/619472-js-flash-html5-multiple-stacked-images-performance-issue/
×

Success!

Help @icetbr spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...