Best way to do multi layered parallaxing? (performance!)

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
User avatar
Jeeper
Party member
Posts: 611
Joined: Tue Mar 12, 2013 7:11 pm
Contact:

Best way to do multi layered parallaxing? (performance!)

Post by Jeeper »

I added some parallaxing backgrounds to my current project and noticed a huge dip in FPS (from being capped at 500 to low 200). There are 6 layers, each being a 1920 x 1080 image. I then use 2 of each image in order to have them loop. The game is zoomed in at 200% though, so only half of the 1920x1080 is visible at the same time.

What would be the best way to optimize this? Currently I just draw each image in the right order.

The only idea I have currently is to split up the images in halves and then be able to have the image loop with half as many "images".
User avatar
undef
Party member
Posts: 438
Joined: Mon Jun 10, 2013 3:09 pm
Location: Berlin
Contact:

Re: Best way to do multi layered parallaxing? (performance!)

Post by undef »

That's what I would do as well.
Look for symmetry and repetition and cut it apart.
If there is a lot of transparency in some layers you might be able to split them up in more, smaller images.
Some layers might not need a that high resolution to look "good" - depending on the artstyle it might even look better with low res textures ;)

If your images are cut up into small enough pieces, you could check if they're on screen before drawing them as well.
twitter | steam | indieDB

Check out quadrant on Steam!
User avatar
HugoBDesigner
Party member
Posts: 403
Joined: Mon Feb 24, 2014 6:54 pm
Location: Above the Pocket Dimension
Contact:

Re: Best way to do multi layered parallaxing? (performance!)

Post by HugoBDesigner »

Some computers can't load images bigger than 512x512 pixels. In fact, my last computer couldn't. So splitting your images may be better for people with bad computers. Also, I'm pretty sure that splitting your image in several fractions will make it go faster, but I'm not 100% sure: experimentation would be needed to confirm this.
So all I can suggest is splitting your image in several parts. Not only it will probably make your game faster, but also you won't have to draw two giant images for each layer: you'll only need to draw the fragments that show up :)
@HugoBDesigner - Twitter
HugoBDesigner - Blog
User avatar
zorg
Party member
Posts: 3465
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

Re: Best way to do multi layered parallaxing? (performance!)

Post by zorg »

You could also use 6 meshes the size of your actual screen, give those the 6 images as textures, and in the update function, modify the uv coordinates (how the images map to the mesh) so it moves in the direction you desire; i don't know how efficient this would be though, but at least you wouldn't have to have two separate image instances loaded... or drawn, assuming you only loaded all six of them only once anyway.

That said, i think you could also use quads to only draw the regions of the image that are on-screen; that's less complex than using meshes.
Me and my stuff :3True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.
User avatar
s-ol
Party member
Posts: 1077
Joined: Mon Sep 15, 2014 7:41 pm
Location: Cologne, Germany
Contact:

Re: Best way to do multi layered parallaxing? (performance!)

Post by s-ol »

You could draw a screen quad with a shader and a texture set to wrap on x, that should perform pretty good I think.

However I don't think that there really should be a performance impact with just 8 (or 16) images. Did you try using powers-of-two images?

s-ol.nu /blog  -  p.s-ol.be /st8.lua  -  g.s-ol.be /gtglg /curcur

Code: Select all

print( type(love) )
if false then
  baby:hurt(me)
end
User avatar
riidom
Citizen
Posts: 74
Joined: Wed Jun 19, 2013 4:28 pm
Location: irgendwo an der Elbe
Contact:

Re: Best way to do multi layered parallaxing? (performance!)

Post by riidom »

well from 500 to 200 means, instead of 2ms per frame you now need 5ms - to me that doesnt sound problematic at all
User avatar
Jeeper
Party member
Posts: 611
Joined: Tue Mar 12, 2013 7:11 pm
Contact:

Re: Best way to do multi layered parallaxing? (performance!)

Post by Jeeper »

riidom wrote:well from 500 to 200 means, instead of 2ms per frame you now need 5ms - to me that doesnt sound problematic at all
It is problematic when you want to add a bunch of other very performance taxing things later. When the game is done I would not mind it running at 100-200 fps on my machine, but this early it is not good.

But thank you all for the tips, I will be trying some of them out soon. I will let you know if I make any progress ;)
bizziboi
Citizen
Posts: 57
Joined: Sat Apr 16, 2011 9:24 am

Re: Best way to do multi layered parallaxing? (performance!)

Post by bizziboi »

Couple of things.

- The suggestion to cut your image into a mesh that only (approximately) draws the parts that have actual pixels, should give a nice increase as all the transparent pixels still need to be read, alpha tested and rejected, which is a waste of GPU cycles.
- Try encoding your image as DDS, it's much more cache friendly.
- Check if it's fillrate issue, you're drawing a lot of pixels. Make your window very tiny and check the framerate, if it significantly increases it's fillrate. The mesh approach then should definitely help.
- If you go for the mesh approach, try drawing the solid tiles front to back and the tiles that need transparency back to front.

As an aside, what kind of video card do you have? 6 fullscreen layers is a lot of pixels.

Also, 5 ms may seem problematic, but if it's the rendering and not the CPU being busy you could use threading and still use those 5ms for other heavy lifting.
User avatar
Jeeper
Party member
Posts: 611
Joined: Tue Mar 12, 2013 7:11 pm
Contact:

Re: Best way to do multi layered parallaxing? (performance!)

Post by Jeeper »

bizziboi wrote:Couple of things.

- The suggestion to cut your image into a mesh that only (approximately) draws the parts that have actual pixels, should give a nice increase as all the transparent pixels still need to be read, alpha tested and rejected, which is a waste of GPU cycles.
- Try encoding your image as DDS, it's much more cache friendly.
- Check if it's fillrate issue, you're drawing a lot of pixels. Make your window very tiny and check the framerate, if it significantly increases it's fillrate. The mesh approach then should definitely help.
- If you go for the mesh approach, try drawing the solid tiles front to back and the tiles that need transparency back to front.

As an aside, what kind of video card do you have? 6 fullscreen layers is a lot of pixels.

Also, 5 ms may seem problematic, but if it's the rendering and not the CPU being busy you could use threading and still use those 5ms for other heavy lifting.
I did try to make the window tiny and it did indeed increase the FPS a lot (back to 500). Ill have a look at the mesh solution, thanks!
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot], Semrush [Bot], slime and 4 guests